feat: i18n

src/renderer/src/pages/settings/settings-general.scss

@@ -13,4 +13,8 @@
   &__common-redist-button {
     align-self: flex-start;
   }
+
+  &__test-achievement-notification-button {
+    align-self: flex-start;
+  }
 }

src/renderer/src/pages/settings/settings-general.tsx

@@ -277,12 +277,24 @@ export function SettingsGeneral() {
 
       {form.achievementNotificationsEnabled &&
         form.achievementCustomNotificationsEnabled && (
-          <SelectField
-            label={t("achievement_custom_notification_position")}
-            value={form.achievementCustomNotificationPosition}
-            onChange={handleChangeAchievementCustomNotificationPosition}
-            options={achievementCustomNotificationPositionOptions}
-          />
+          <>
+            <SelectField
+              className="settings-general__achievement-custom-notification-position__select-variation"
+              label={t("achievement_custom_notification_position")}
+              value={form.achievementCustomNotificationPosition}
+              onChange={handleChangeAchievementCustomNotificationPosition}
+              options={achievementCustomNotificationPositionOptions}
+            />
+
+            <Button
+              className="settings-general__test-achievement-notification-button"
+              onClick={() =>
+                window.electron.updateAchievementCustomNotificationWindow()
+              }
+            >
+              Test Notification
+            </Button>
+          </>
         )}
 
       <h2 className="settings-general__section-title">{t("common_redist")}</h2>

src/renderer/src/pages/theme-editor/theme-editor.scss

@@ -44,8 +44,11 @@
   }
 
   &__footer {
+    display: flex;
+    flex-direction: column;
     background-color: globals.$dark-background-color;
     padding: globals.$spacing-unit globals.$spacing-unit * 2;
+    gap: 24px;
 
     &-actions {
       display: flex;
@@ -82,6 +85,7 @@
   }
 
   &__notification-preview {
+    padding-top: 12px;
     display: flex;
     flex-direction: row;
     align-items: center;

src/renderer/src/pages/theme-editor/theme-editor.tsx

@@ -156,13 +156,13 @@ export default function ThemeEditor() {
           <div className="theme-editor__notification-preview">
             <SelectField
               className="theme-editor__notification-preview__select-variation"
-              label="Variation"
+              label={t("variation")}
               options={Object.values(notificationVariations).map(
                 (variation) => {
                   return {
                     key: variation,
                     value: variation,
-                    label: variation,
+                    label: t(variation),
                   };
                 }
               )}
@@ -174,7 +174,7 @@ export default function ThemeEditor() {
             />
 
             <SelectField
-              label={"alignment"}
+              label={t("alignment")}
               value={notificationAlignment}
               onChange={(e) =>
                 setNotificationAlignment(