From e9619382d46c78bfde920ff01c4d6155515b000a Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Sun, 7 Aug 2022 22:11:22 +0100
Subject: [PATCH] feat: welcome modal first page redesign

---
 .../modals/welcome/WelcomeSections.jsx        | 38 +++++++++++++++----
 src/components/modals/welcome/welcome.scss    | 28 +++++++++++---
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/components/modals/welcome/WelcomeSections.jsx b/src/components/modals/welcome/WelcomeSections.jsx
index 1149e164..fbde6f12 100644
--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/src/components/modals/welcome/WelcomeSections.jsx
@@ -1,6 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdCloudUpload, MdAutoAwesome, MdLightMode, MdDarkMode } from 'react-icons/md';
+import { MdCloudUpload, MdAutoAwesome, MdLightMode, MdDarkMode, MdCelebration, MdOpenInNew} from 'react-icons/md';
+import { FaDiscord, FaGithub } from 'react-icons/fa';
 
 import Radio from '../main/settings/Radio';
 import Checkbox from '../main/settings/Checkbox';
@@ -129,12 +130,35 @@ export default class WelcomeSections extends PureComponent {
           />
         </div>
 
-        <h3 className="quicktip">#shareyourmue</h3>
-        <div>
-          <div>👏</div>
-          <span className="subtitle">
-            {this.getMessage('modals.welcome.sections.intro.description')}
-          </span>
+        <span className="link">#shareyourmue</span>
+        <div className="welcomeNotice">
+          <div className="icon"><MdCelebration /></div>
+          <div className="text">
+            <span className="title">{this.getMessage('modals.welcome.sections.intro.title')}</span>
+            <span className="subtitle">
+              {this.getMessage('modals.welcome.sections.intro.description')}
+            </span>
+          </div>
+        </div>
+        <div className="welcomeNotice">
+          <div className="icon">
+            <FaDiscord />
+          </div>
+          <div className="text"> 
+            <span className="title">Join our discord</span>
+            <span className="subtitle">Join our community</span>
+          </div>
+          <button><MdOpenInNew /> Join</button>
+        </div>
+        <div className="welcomeNotice">
+          <div className="icon">
+            <FaGithub />
+          </div>
+          <div className="text"> 
+            <span className="title">Contribute on Github</span>
+            <span className="subtitle">Contribute</span>
+          </div>
+          <button><MdOpenInNew /> Open</button>
         </div>
       </>
     );
diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss
index 0f0494ae..79564659 100644
--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -24,7 +24,6 @@
   grid-column-gap: 0px;
   grid-row-gap: 0px;
 
-
   section:nth-child(1) {
     display: flex;
     align-items: center;
@@ -60,7 +59,6 @@
   }
 }
 
-
 .progressbar {
   position: fixed;
   bottom: 50px;
@@ -240,16 +238,36 @@ a.privacy {
   }
 }
 
-.welcomePart {
+.welcomeNotice {
   display: flex;
   flex-flow: row;
+  gap: 25px;
+  padding: 25px;
   align-items: center;
+
+  @include themed() {
+    background-color: t($modal-sidebar);
+    border-radius: t($borderRadius);
+  }
+  .icon {
+    @include themed() {
+      background-color: t($modal-sidebarActive);
+    }
+    height: 50px !important;
+    width: 50px !important;
+    border-radius: 100%;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    flex-shrink: 0;
+  }
   .text {
     display: flex;
     flex-flow: column;
   }
   button {
+    margin-left: auto;
+    padding: 5px 20px;
     @include modal-button(standard);
-    width: 150px;
   }
-}
\ No newline at end of file
+}