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

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

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;
-    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);
+  }
+}