Commit 0b12ca29 authored by insert's avatar insert

Work on settings menus.

parent 2eb83f0d
Pipeline #270 failed with stage
in 1 minute and 51 seconds
import React, { useState, createContext } from 'react';
import React, { useState, createContext, CSSProperties } from 'react';
import Helmet from 'react-helmet';
import styles from './App.module.scss';
......@@ -19,8 +19,10 @@ export enum Page {
export const AppContext = createContext(
{
theme: '??',
accent: '#000000',
page: Page.NONE,
setTheme: (theme: string) => undefined,
setAccent: (accent: string) => undefined,
setPage: (page: Page) => undefined,
propogate: () => undefined
}
......@@ -29,6 +31,7 @@ export const AppContext = createContext(
export default function App() {
let [ ready, setReady ] = useState(false);
let [ theme, setThemeState ] = useState('dark');
let [ accent, setAccent ] = useState('#7B68EE');
let [ page, setPage ] = useState(Page.LOAD);
function setTheme(toTheme: string) {
......@@ -67,14 +70,20 @@ export default function App() {
let states = {
theme, setTheme,
accent, setAccent,
page, setPage,
propogate
} as any;
let style = {
// eslint-disable-next-line
['--accent-color']: accent
} as CSSProperties;
return (
<div className={`theme-${theme} ${styles.app}`}>
<div className={`theme-${theme} ${styles.app}`} style={style}>
<Helmet>
<meta name="theme-color" content="#7B68EE" />
<meta name="theme-color" content={accent} />
</Helmet>
<AppContext.Provider value={states}>
{ page & Page.LOAD ? <Load waitForClient={ready} /> : null }
......
......@@ -86,10 +86,14 @@
font-size: 0.6875rem;
font-weight: 600;
border-radius: 3px;
transition: background-color .3s, color .3s;
background-color: mediumslateblue;
background-color: var(--accent-color);
color: white;
text-transform: uppercase;
transition: background-color .5s;
-webkit-transition: background-color .5s;
-o-transition: background-color .5s;
-moz-transition: background-color .5s;
}
}
}
......
......@@ -34,13 +34,14 @@
transition: border .3s;
//pointer-events: none;
&:hover, &.active {
border: 2px solid var(--accent-color, mediumslatepurple);
}
&:hover,
&.active {
border: 2px solid var(--accent-color, mediumslatepurple);
}
&.active {
cursor: default;
}
&.active {
cursor: default;
}
}
}
}
......
import React from 'react';
import { Icon } from '../../../../components/ui/elements/Icon';
import React, { useContext } from 'react';
import main from '../index.module.scss';
import styles from './Appearance.module.scss';
import { Icon } from '../../../../components/ui/elements/Icon';
import { AppContext } from '../../../../App';
import lightTheme from '../../../../assets/images/light.svg';
import darkTheme from '../../../../assets/images/dark.svg';
export default function Appearance() {
let app = useContext(AppContext);
let colors: Array<string> =
["#7B68EE", "#3498DB", "#1ABC9C", "#F1C40F", "#FF7F50", "#E91E63", "#D468EE",
"#594CAD", "#206694", "#11806A", "#C27C0E", "#CD5B45", "#AD1457", "#954AA8"];
let hasCustomColor = colors.indexOf(app.accent) === -1;
return (
<div className={styles.panel}>
<div className={main.section}>
<div className={main.category}>Theme</div>
<div className={styles.themePicker}>
<div className={styles.theme}>
<div className={styles.light}>
<div className={styles.light} onClick={() => app.setTheme('light')}>
<img alt="Light Mode" src={lightTheme} draggable={false}/>
</div>
<span className={styles.type}>Light</span>
</div>
<div className={styles.theme}>
<div className={styles.dark}>
<div className={styles.dark} onClick={() => app.setTheme('dark')}>
<img alt="Dark Mode" src={darkTheme} draggable={false}/>
</div>
<span className={styles.type}>Dark</span>
......@@ -29,15 +36,23 @@ export default function Appearance() {
</div>
<div className={main.section}>
<div className={main.category}>Accent Color</div>
<div className={styles.colorPicker}>
<a className={styles.customColor}>
<Icon className={styles.check} icon="checkRegular"/>
<div className={styles.colorPicker}>
<a href="#" className={styles.customColor} style={{background: hasCustomColor ? app.accent : "grey"}}>
{ hasCustomColor && (
<Icon className={styles.check} icon="checkRegular"/>
)}
<Icon className={styles.edit} icon="brushSolid"/>
</a>
<div className={`${styles.colorGrid} ${styles.disabled}`}>
<a className={styles.color}>
<Icon className={styles.check} icon="checkRegular"/>
</a>
<div className={`${styles.colorGrid} ${styles.disabled}`} style={{ gridTemplateColumns: "29px ".repeat(Math.floor(colors.length / 2)) }}>
{colors.map((value) => {
return (
<a href="#" key={`acc${value}`} className={styles.color} style={{ backgroundColor: value }} onClick={() => app.setAccent(value)}>
{ app.accent === value && (
<Icon className={styles.check} icon="checkRegular"/>
)}
</a>
)
})}
</div>
</div>
</div>
......
.category {
margin-bottom: 10px;
font-size: 0.875rem;
font-size: .875rem;
font-weight: 600;
text-transform: uppercase;
}
......@@ -11,7 +11,7 @@
padding-top: 8px;
border-top: 1px solid rgba(112, 112, 112, 0.5);
max-width: 500px;
font-size: 0.875rem;
font-size: .875rem;
font-weight: 600;
}
......
......@@ -23,9 +23,9 @@ export default function Account() {
<span className={styles.infoTitle}>E-Mail</span>
<span className={styles.copy}>{Instance.client.user.email}</span>
</div>
<a className={styles.button}>Edit</a>
<Button theme="confirm">Edit</Button>
</div>
<a className={`${styles.button} ${styles.mobile}`}>Edit</a>
<Button theme="confirm">Edit</Button>
</div>
{/*!this.state.options.streamerMode.enabled && ( <div className={`${main.section} ${styles.mobile}`}>
<div className={main.category}>UID
......@@ -37,8 +37,8 @@ export default function Account() {
<div className={styles.securityEnabled}>
<span>2FA has been enabled on this account.</span>
</div>
<a className={styles.button}>View Backup Codes</a>
<a className={`${styles.button} ${styles.red}`}>Remove 2FA</a>
<Button theme="confirm">View Backup Codes</Button>
<Button theme="confirm">Disable 2FA</Button>
</div>
<div className={main.section}>
<div className={main.category}>Pending Community Strikes</div>
......@@ -61,8 +61,8 @@ export default function Account() {
<div className={main.section}>
<div className={main.category}>Account Management</div>
<div>
<Button theme="confirm">Test</Button>
<a className={`${styles.button} ${styles.red}`}>Delete Account</a>
<Button theme="confirm">Disable Account</Button>
<Button theme="warning">Delete Account</Button>
</div>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment