feat: renaming class names to BEM

This commit is contained in:
Chubby Granny Chaser
2025-05-17 22:59:38 +01:00
parent 1247a105a0
commit 5ae67a3dc7
9 changed files with 49 additions and 49 deletions

View File

@@ -281,7 +281,7 @@ export class AchievementWatcherManager {
totalNewGamesWithAchievements,
totalNewAchievements,
userPreferences.achievementCustomNotificationPosition ??
"top_left"
"top-left"
);
} else {
publishCombinedNewAchievementNotification(

View File

@@ -128,7 +128,7 @@ export const mergeAchievements = async (
if (userPreferences?.achievementCustomNotificationsEnabled !== false) {
WindowManager.notificationWindow?.webContents.send(
"on-achievement-unlocked",
userPreferences.achievementCustomNotificationPosition ?? "top_left",
userPreferences.achievementCustomNotificationPosition ?? "top-left",
achievementsInfo
);
} else {

View File

@@ -289,35 +289,35 @@ export class WindowManager {
const display = screen.getPrimaryDisplay();
const { width, height } = display.workAreaSize;
if (position === "bottom_center") {
if (position === "bottom-center") {
return {
x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
y: height - this.NOTIFICATION_WINDOW_HEIGHT,
};
}
if (position === "bottom_right") {
if (position === "bottom-right") {
return {
x: width - this.NOTIFICATION_WINDOW_WIDTH,
y: height - this.NOTIFICATION_WINDOW_HEIGHT,
};
}
if (position === "top_center") {
if (position === "top-center") {
return {
x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
y: 0,
};
}
if (position === "bottom_left") {
if (position === "bottom-left") {
return {
x: 0,
y: height - this.NOTIFICATION_WINDOW_HEIGHT,
};
}
if (position === "top_right") {
if (position === "top-right") {
return {
x: width - this.NOTIFICATION_WINDOW_WIDTH,
y: 0,
@@ -375,7 +375,7 @@ export class WindowManager {
setTimeout(() => {
this.notificationWindow?.webContents.send(
"on-achievement-unlocked",
userPreferences.achievementCustomNotificationPosition ?? "top_left",
userPreferences.achievementCustomNotificationPosition ?? "top-left",
[generateAchievementCustomNotificationTest(t, language)]
);
}, 1000);

View File

@@ -144,28 +144,28 @@ $margin-bottom: 28px;
height: 192px;
display: flex;
&.top_left {
&--top-left {
align-items: start;
}
&.top_center {
&--top-center {
align-items: start;
}
&.top_right {
&--top-right {
justify-content: end;
align-items: start;
}
&.bottom_left {
&--bottom-left {
align-items: end;
}
&.bottom_center {
&--bottom-center {
align-items: end;
}
&.bottom_right {
&--bottom-right {
justify-content: end;
align-items: end;
}
@@ -183,27 +183,27 @@ $margin-bottom: 28px;
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.25);
}
&.top_left &__outer-container {
&--top-left &__outer-container {
margin: $margin-top 0 0 $margin-horizontal;
}
&.top_center &__outer-container {
&--top-center &__outer-container {
margin: $margin-top 0 0 $margin-horizontal;
}
&.top_right &__outer-container {
&--top-right &__outer-container {
margin: $margin-top $margin-horizontal 0 0;
}
&.bottom_left &__outer-container {
&--bottom-left &__outer-container {
margin: 0 0 $margin-bottom $margin-horizontal;
}
&.bottom_center &__outer-container {
&--bottom-center &__outer-container {
margin: 0 0 $margin-bottom $margin-horizontal;
}
&.bottom_right &__outer-container {
&--bottom-right &__outer-container {
margin: 0 $margin-horizontal $margin-bottom 0;
}
@@ -423,32 +423,32 @@ $margin-bottom: 28px;
}
}
&.top_left &__chip {
&--top-left &__chip {
top: -12px;
margin: $margin-top 0 0 $margin-horizontal;
}
&.top_center &__chip {
&--top-center &__chip {
top: -12px;
margin: $margin-top 0 0 $margin-horizontal;
}
&.top_right &__chip {
&--top-right &__chip {
top: -12px;
margin: $margin-top $margin-horizontal 0 0;
}
&.bottom_left &__chip {
&--bottom-left &__chip {
bottom: 70px;
margin: 0 0 $margin-bottom $margin-horizontal;
}
&.bottom_center &__chip {
&--bottom-center &__chip {
bottom: 70px;
margin: 0 0 $margin-bottom $margin-horizontal;
}
&.bottom_right &__chip {
&--bottom-right &__chip {
bottom: 70px;
margin: 0 $margin-horizontal $margin-bottom 0;
}

View File

@@ -24,7 +24,7 @@ export function AchievementNotificationItem({
return (
<div
className={cn("achievement-notification", {
[position]: true,
[`${baseClassName}--${position}`]: true,
[`${baseClassName}--closing`]: isClosing,
[`${baseClassName}--hidden`]: achievement.isHidden,
[`${baseClassName}--rare`]: achievement.isRare,

View File

@@ -16,7 +16,7 @@ export function AchievementNotification() {
const [isClosing, setIsClosing] = useState(false);
const [isVisible, setIsVisible] = useState(false);
const [position, setPosition] =
useState<AchievementCustomNotificationPosition>("top_left");
useState<AchievementCustomNotificationPosition>("top-left");
const [achievements, setAchievements] = useState<
AchievementNotificationInfo[]

View File

@@ -41,7 +41,7 @@ export function SettingsGeneral() {
achievementNotificationsEnabled: false,
achievementCustomNotificationsEnabled: true,
achievementCustomNotificationPosition:
"top_left" as AchievementCustomNotificationPosition,
"top-left" as AchievementCustomNotificationPosition,
language: "",
customStyles: window.localStorage.getItem("customStyles") || "",
});
@@ -108,7 +108,7 @@ export function SettingsGeneral() {
achievementCustomNotificationsEnabled:
userPreferences.achievementCustomNotificationsEnabled ?? true,
achievementCustomNotificationPosition:
userPreferences.achievementCustomNotificationPosition ?? "top_left",
userPreferences.achievementCustomNotificationPosition ?? "top-left",
friendRequestNotificationsEnabled:
userPreferences.friendRequestNotificationsEnabled ?? false,
language: language ?? "en",
@@ -118,12 +118,12 @@ export function SettingsGeneral() {
const achievementCustomNotificationPositionOptions = useMemo(() => {
return [
"top_left",
"top_center",
"top_right",
"bottom_left",
"bottom_center",
"bottom_right",
"top-left",
"top-center",
"top-right",
"bottom-left",
"bottom-center",
"bottom-right",
].map((position) => ({
key: position,
value: position,

View File

@@ -34,7 +34,7 @@ export default function ThemeEditor() {
const [notificationVariation, setNotificationVariation] =
useState<keyof typeof notificationVariations>("default");
const [notificationAlignment, setNotificationAlignment] =
useState<AchievementCustomNotificationPosition>("top_left");
useState<AchievementCustomNotificationPosition>("top-left");
const achievementPreview = useMemo(() => {
return {
@@ -99,12 +99,12 @@ export default function ThemeEditor() {
const achievementCustomNotificationPositionOptions = useMemo(() => {
return [
"top_left",
"top_center",
"top_right",
"bottom_left",
"bottom_center",
"bottom_right",
"top-left",
"top-center",
"top-right",
"bottom-left",
"bottom-center",
"bottom-right",
].map((position) => ({
key: position,
value: position,

View File

@@ -71,12 +71,12 @@ export interface GameAchievement {
}
export type AchievementCustomNotificationPosition =
| "top_left"
| "top_center"
| "top_right"
| "bottom_left"
| "bottom_center"
| "bottom_right";
| "top-left"
| "top-center"
| "top-right"
| "bottom-left"
| "bottom-center"
| "bottom-right";
export interface UserPreferences {
downloadsPath?: string | null;