cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2025-02-22 08:11:03 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(settings): added design for account header

Browse source
This commit is contained in:
trashtemp 2021-12-28 16:08:05 +01:00
parent 855b3739e6
commit 614ec68622
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG key ID: D1F0DB65081B0FC6
3 changed files with 76 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/settings/AppearanceShims.tsx
View file

@ -214,7 +214,7 @@ export const DisplayLigaturesShim = observer(() => {
/** /**
* Component providing a way to toggle seasonal themes. * Component providing a way to toggle seasonal themes.
*/ */
export const DisplaySeasonalShim = observer(() => { export const ThemeOptionsShim = observer(() => {
const settings = useApplicationState().settings; const settings = useApplicationState().settings;
return ( return (
@ -231,6 +231,13 @@ export const DisplaySeasonalShim = observer(() => {
}> }>
<Text id="app.settings.pages.appearance.theme_options.follow" /> <Text id="app.settings.pages.appearance.theme_options.follow" />
</Checkbox>*/} </Checkbox>*/}
{/* THIS CHECKBOX ENABLES GLASS EFFECT IN UI - ENABLED BY DEFAULT*/}
{/*<Checkbox
checked={settings.get("appearance:seasonal") ?? true}
onChange={(v) => settings.set("appearance:seasonal", v)}
description={"Enables glass effects throughout the app"}>
Enable glass effects
</Checkbox>*/}
<Checkbox <Checkbox
checked={settings.get("appearance:seasonal") ?? true} checked={settings.get("appearance:seasonal") ?? true}
onChange={(v) => settings.set("appearance:seasonal", v)} onChange={(v) => settings.set("appearance:seasonal", v)}

69
src/pages/settings/Settings.tsx
View file

@ -17,6 +17,7 @@ import {
Speaker, Speaker,
Store, Store,
Bot, Bot,
Trash,
} from "@styled-icons/boxicons-solid"; } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { Route, Switch, useHistory } from "react-router-dom"; import { Route, Switch, useHistory } from "react-router-dom";
@ -54,13 +55,60 @@ import { Sessions } from "./panes/Sessions";
import { Sync } from "./panes/Sync"; import { Sync } from "./panes/Sync";
import { ThemeShop } from "./panes/ThemeShop"; import { ThemeShop } from "./panes/ThemeShop";
const IndexHeader = styled.div` const AccountHeader = styled.div`
display: flex;
flex-direction: column;
border-radius: var(--border-radius);
overflow: hidden;
margin-bottom: 10px;
.account {
padding: 20px;
gap: 10px;
align-items: center;
display: flex; display: flex;
background: var(--secondary-background); background: var(--secondary-background);
border-radius: var(--border-radius);
padding: 20px; .details {
display: flex;
flex-direction: column;
font-size: 12px;
gap: 2px;
> span {
font-size: 20px;
font-weight: 600;
}
}
}
.statusChanger {
display: flex;
align-items: center; align-items: center;
gap: 10px; background: var(--tertiary-background);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.status {
padding-inline-start: 12px;
height: 48px;
display: flex;
align-items: center;
color: var(--secondary-foreground);
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
svg {
width: 48px;
flex-shrink: 0;
}
}
`; `;
export default observer(() => { export default observer(() => {
@ -270,10 +318,19 @@ export default observer(() => {
</> </>
} }
indexHeader={ indexHeader={
<IndexHeader> <AccountHeader>
<div className="account">
<UserIcon size={64} target={client.user!} /> <UserIcon size={64} target={client.user!} />
<div className="details">
<Username user={client.user!} prefixAt /> <Username user={client.user!} prefixAt />
</IndexHeader> Status goes here
</div>
</div>
<div className="statusChanger">
<div className="status">Change your status...</div>
<Trash size={24} />
</div>
</AccountHeader>
} }
/> />
); );

4
src/pages/settings/panes/Appearance.tsx
View file

@ -14,7 +14,7 @@ import {
DisplayLigaturesShim, DisplayLigaturesShim,
DisplayEmojiShim, DisplayEmojiShim,
ThemeCustomCSSShim, ThemeCustomCSSShim,
DisplaySeasonalShim, ThemeOptionsShim,
} from "../../../components/settings/AppearanceShims"; } from "../../../components/settings/AppearanceShims";
import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides"; import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides";
import ThemeTools from "../../../components/settings/appearance/ThemeTools"; import ThemeTools from "../../../components/settings/appearance/ThemeTools";
@ -27,7 +27,7 @@ export const Appearance = observer(() => {
<hr /> <hr />
<ThemeAccentShim /> <ThemeAccentShim />
<hr /> <hr />
<DisplaySeasonalShim /> <ThemeOptionsShim />
<hr /> <hr />
<DisplayFontShim /> <DisplayFontShim />
<DisplayLigaturesShim /> <DisplayLigaturesShim />