fix: small improvements and touch ups to the welcome experience (#612)

Signed-off-by: Alex Sparkes <turbomarshmello@gmail.com>

package.json

@@ -20,7 +20,7 @@
     "@muetab/react-color-gradient-picker": "0.1.2",
     "@muetab/react-sortable-hoc": "^2.0.1",
     "@mui/material": "5.15.6",
-    "@sentry/react": "^7.95.0",
+    "@sentry/react": "^7.98.0",
     "embla-carousel-autoplay": "8.0.0-rc20",
     "embla-carousel-react": "8.0.0-rc20",
     "fast-blurhash": "^1.1.2",
@@ -33,15 +33,15 @@
     "react-toastify": "10.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.5.0",
+    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.5.0",
+    "@commitlint/config-conventional": "^18.6.0",
     "@eartharoid/deep-merge": "^0.0.2",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "adm-zip": "^0.5.10",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
-    "husky": "^9.0.1",
+    "husky": "^9.0.5",
     "prettier": "^3.2.4",
     "sass": "^1.70.0",
     "stylelint": "^16.2.0",

src/components/modals/welcome/Welcome.jsx

@@ -1,5 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
+import { MdArrowBackIosNew, MdArrowForwardIos, MdOutlinePreview } from 'react-icons/md';
 
 import EventBus from 'modules/helpers/eventbus';
 
@@ -50,7 +51,7 @@ class WelcomeModal extends PureComponent {
       buttonText:
         this.state.currentTab !== this.state.finalTab
           ? variables.getMessage('modals.welcome.buttons.next')
-          : variables.getMessage('modals.main.addons.create.finish.title'),
+          : variables.getMessage('modals.welcome.buttons.finish'),
     });
   }
 
@@ -62,7 +63,7 @@ class WelcomeModal extends PureComponent {
       buttonText:
         tab !== this.state.finalTab + 1
           ? variables.getMessage('modals.welcome.buttons.next')
-          : variables.getMessage('modals.main.addons.create.finish.title'),
+          : variables.getMessage('modals.welcome.buttons.finish'),
     });
 
     localStorage.setItem('bgtransition', true);
@@ -78,7 +79,7 @@ class WelcomeModal extends PureComponent {
         buttonText:
           Number(welcomeTab) !== this.state.finalTab + 1
             ? variables.getMessage('modals.welcome.buttons.next')
-            : variables.getMessage('modals.main.addons.create.finish.title'),
+            : variables.getMessage('modals.welcome.buttons.next'),
       });
     }
 
@@ -118,25 +119,28 @@ class WelcomeModal extends PureComponent {
               switchTab={(tab) => this.switchTab(tab)}
             />
           </div>
-          <div className="buttons">
+          <div className="welcomeButtons">
             {this.state.currentTab !== 0 ? (
               <button
-                className="close"
+                className="sideload"
                 style={{ marginRight: '20px' }}
                 onClick={() => this.changeTab(true)}
               >
                 {variables.getMessage('modals.welcome.buttons.previous')}
+                <MdArrowBackIosNew />
               </button>
             ) : (
               <button
-                className="close"
+                className="sideload"
                 style={{ marginRight: '20px' }}
                 onClick={() => this.props.modalSkip()}
               >
                 {variables.getMessage('modals.welcome.buttons.preview')}
+                <MdOutlinePreview />
               </button>
             )}
-            <button className="close" onClick={() => this.changeTab()}>
+            <button className="sideload" onClick={() => this.changeTab()}>
+              <MdArrowForwardIos />
               {this.state.buttonText}
             </button>
           </div>

src/components/modals/welcome/WelcomeSections.jsx

@@ -10,6 +10,7 @@ import {
   MdOpenInNew,
   MdOutlineWhatshot,
   MdArchive,
+  MdOutlineOpenInNew,
 } from 'react-icons/md';
 import { FaDiscord, FaGithub } from 'react-icons/fa';
 
@@ -209,16 +210,16 @@ class WelcomeSections extends PureComponent {
         </span>
         <span className="subtitle">
           {variables.getMessage('modals.welcome.sections.language.description')}{' '}
-          <a
-            href={variables.constants.TRANSLATIONS_URL}
-            className="link"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            GitHub
-          </a>
-          !
         </span>
+        <a
+          href={variables.constants.TRANSLATIONS_URL}
+          className="link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          GitHub
+          <MdOutlineOpenInNew />
+        </a>
         <div className="languageSettings">
           <Radio name="language" options={languages} category="welcomeLanguage" />
         </div>
@@ -348,6 +349,7 @@ class WelcomeSections extends PureComponent {
           rel="noopener noreferrer"
         >
           {variables.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
+          <MdOutlineOpenInNew />
         </a>
 
         <a
@@ -357,6 +359,7 @@ class WelcomeSections extends PureComponent {
           rel="noopener noreferrer"
         >
           {variables.getMessage('modals.welcome.sections.privacy.links.source_code')}
+          <MdOutlineOpenInNew />
         </a>
       </>
     );

src/components/modals/welcome/welcome.scss

@@ -16,6 +16,13 @@
     margin-right: 0;
   }
 
+  .link {
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+    align-items: center;
+  }
+
   @extend %tabText;
 
   height: 80vh;
@@ -41,22 +48,6 @@
     justify-content: space-between;
     overflow-y: auto;
 
-    .buttons {
-      z-index: 999;
-      backdrop-filter: blur(2px);
-      position: sticky;
-      bottom: 0;
-      padding: 25px;
-      display: flex;
-      justify-content: flex-end;
-
-      button {
-        @include modal-button(standard);
-
-        width: 150px;
-      }
-    }
-
     .content {
       display: flex;
       flex-flow: column;
@@ -78,11 +69,14 @@
     display: inline-block;
     width: 50px;
     background: #8395a7;
-    height: 4px;
+    height: 10px;
-    margin: 10px;
+    margin: 5px;
-    transition: 0.2s ease;
+    transition: 0.2s ease-in-out;
     cursor: pointer;
     border-radius: 15px;
+    &:hover {
+      background: #7575e5;
+    }
   }
 
   .active {
@@ -287,3 +281,17 @@ a.privacy {
     background-color: t($modal-sidebarActive) !important;
   }
 }
+
+.welcomeButtons {
+  z-index: 999;
+  backdrop-filter: blur(2px);
+  position: sticky;
+  bottom: 0;
+  padding: 25px;
+  display: flex;
+  justify-content: flex-end;
+
+  button {
+    @include modal-button(standard);
+  }
+}

src/translations/bn.json

@@ -643,7 +643,8 @@
         "next": "Next",
         "preview": "Preview",
         "previous": "Previous",
-        "close": "Close"
+        "close": "Close",
+        "finish": "Finish"
       },
       "preview": {
         "description": "You are currently in preview mode. Settings will be reset on closing this tab.",

src/translations/de_DE.json

@@ -643,7 +643,8 @@
         "next": "Weiter",
         "preview": "Vorschau",
         "previous": "Zurück",
-        "close": "Schließen"
+        "close": "Schließen",
+        "finish": "Finish"
       },
       "preview": {
         "description": "Sie befinden sich derzeit im Vorschaumodus. Die Einstellungen werden beim Schließen dieser Registerkarte zurückgesetzt.",

src/translations/en_GB.json

@@ -643,7 +643,8 @@
         "next": "Next",
         "preview": "Preview",
         "previous": "Previous",
-        "close": "Close"
+        "close": "Close",
+        "finish": "Finish"
       },
       "preview": {
         "description": "You are currently in preview mode. Settings will be reset on closing this tab.",

src/translations/en_US.json

@@ -643,7 +643,8 @@
         "next": "Next",
         "preview": "Preview",
         "previous": "Previous",
-        "close": "Close"
+        "close": "Close",
+        "finish": "Finish"
       },
       "preview": {
         "description": "You are currently in preview mode. Settings will be reset on closing this tab.",

src/translations/es.json

@@ -643,7 +643,8 @@
         "next": "Siguiente",
         "preview": "Vista previa",
         "previous": "Anterior",
-        "close": "Cerrar"
+        "close": "Cerrar",
+        "finish": "Finish"
       },
       "preview": {
         "description": "Actualmente se encuentra en el modo de vista previa. La configuración se restablecerá al cerrar esta pestaña.",

src/translations/es_419.json

@@ -643,7 +643,8 @@
         "next": "Siguiente",
         "preview": "Vista previa",
         "previous": "Anterior",
-        "close": "Cerrar"
+        "close": "Cerrar",
+        "finish": "Finish"
       },
       "preview": {
         "description": "Actualmente se encuentra en el modo de vista previa. La configuración se restablecerá al cerrar esta pestaña.",

src/translations/fr.json

@@ -643,7 +643,8 @@
         "next": "Next",
         "preview": "Preview",
         "previous": "Previous",
-        "close": "Fermer"
+        "close": "Fermer",
+        "finish": "Finish"
       },
       "preview": {
         "description": "You are currently in preview mode. Settings will be reset on closing this tab.",

src/translations/id_ID.json

@@ -643,7 +643,8 @@
         "next": "Selanjutnya",
         "preview": "Pratinjau",
         "previous": "Kembali",
-        "close": "Tutup"
+        "close": "Tutup",
+        "finish": "Finish"
       },
       "preview": {
         "description": "Kamu dalam mode Pratinjau. Pengaturan akan direset ketika tab ini ditutup.",

src/translations/nl.json

@@ -643,7 +643,8 @@
         "next": "Next",
         "preview": "Preview",
         "previous": "Previous",
-        "close": "Close"
+        "close": "Close",
+        "finish": "Finish"
       },
       "preview": {
         "description": "You are currently in preview mode. Settings will be reset on closing this tab.",

src/translations/no.json

@@ -643,7 +643,8 @@
         "next": "Next",
         "preview": "Preview",
         "previous": "Previous",
-        "close": "Close"
+        "close": "Close",
+        "finish": "Finish"
       },
       "preview": {
         "description": "You are currently in preview mode. Settings will be reset on closing this tab.",

src/translations/pt.json

@@ -643,7 +643,8 @@
         "next": "Próximo",
         "preview": "Pré-visualizar",
         "previous": "Anterior",
-        "close": "Fechar"
+        "close": "Fechar",
+        "finish": "Finish"
       },
       "preview": {
         "description": "Está atualmente no modo de visualização. As configurações serão redefinidas ao fechar esta guia.",

src/translations/pt_BR.json

@@ -643,7 +643,8 @@
         "next": "Próximo",
         "preview": "Pré-visualizar",
         "previous": "Anterior",
-        "close": "Fechar"
+        "close": "Fechar",
+        "finish": "Finish"
       },
       "preview": {
         "description": "Você está atualmente no modo de visualização. As configurações serão redefinidas ao fechar esta guia.",

src/translations/ru.json

@@ -643,7 +643,8 @@
         "next": "Next",
         "preview": "Preview",
         "previous": "Previous",
-        "close": "Закрыть"
+        "close": "Закрыть",
+        "finish": "Finish"
       },
       "preview": {
         "description": "You are currently in preview mode. Settings will be reset on closing this tab.",

src/translations/tr_TR.json

@@ -643,7 +643,8 @@
         "next": "Sonraki",
         "preview": "Ön İzleme",
         "previous": "Öncesi",
-        "close": "Kapat"
+        "close": "Kapat",
+        "finish": "Finish"
       },
       "preview": {
         "description": "Şu anda önizleme modundasınız. Bu sekme kapatıldığında ayarlar sıfırlanacak.",

src/translations/zh_CN.json

@@ -643,7 +643,8 @@
         "next": "下一步",
         "preview": "Preview",
         "previous": "上一步",
-        "close": "关闭"
+        "close": "关闭",
+        "finish": "Finish"
       },
       "preview": {
         "description": "You are currently in preview mode. Settings will be reset on closing this tab.",