mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-09 13:35:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: welcome modal first page redesign

Browse Source
This commit is contained in:
alexsparkes
2022-08-07 22:11:22 +01:00
parent 4ee1e39a4a
commit e9619382d4
2 changed files with 54 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/modals/welcome/WelcomeSections.jsx
View File

@@ -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>
</>
);

28
src/components/modals/welcome/welcome.scss
View File

@@ -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;
}
}
}