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

Signed-off-by: Alex Sparkes <turbomarshmello@gmail.com>
2024-01-26 13:40:18 +00:00 · 2024-01-26 13:40:18 +00:00 · a95197a763
parent cf8b6ab2fe
commit a95197a763
20 changed files with 84 additions and 6631 deletions
--- a/package.json
+++ b/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/config-conventional": "^18.5.0",
+    "@commitlint/cli": "^18.6.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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/modals/welcome/Welcome.jsx
+++ b/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>
--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/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>
      </>
    );
--- a/src/components/modals/welcome/welcome.scss
+++ b/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;
-    margin: 10px;
-    transition: 0.2s ease;
+    height: 10px;
+    margin: 5px;
+    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);
+  }
+}
--- a/src/translations/bn.json
+++ b/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.",
--- a/src/translations/de_DE.json
+++ b/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.",
--- a/src/translations/en_GB.json
+++ b/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.",
--- a/src/translations/en_US.json
+++ b/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.",
--- a/src/translations/es.json
+++ b/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.",
--- a/src/translations/es_419.json
+++ b/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.",
--- a/src/translations/fr.json
+++ b/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.",
--- a/src/translations/id_ID.json
+++ b/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.",
--- a/src/translations/nl.json
+++ b/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.",
--- a/src/translations/no.json
+++ b/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.",
--- a/src/translations/pt.json
+++ b/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.",
--- a/src/translations/pt_BR.json
+++ b/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.",
--- a/src/translations/ru.json
+++ b/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.",
--- a/src/translations/tr_TR.json
+++ b/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.",
--- a/src/translations/zh_CN.json
+++ b/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.",