diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index b9da94ab..aacfbc38 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/src/components/settings/AppearanceShims.tsx @@ -214,7 +214,7 @@ export const DisplayLigaturesShim = observer(() => { /** * Component providing a way to toggle seasonal themes. */ -export const DisplaySeasonalShim = observer(() => { +export const ThemeOptionsShim = observer(() => { const settings = useApplicationState().settings; return ( @@ -231,6 +231,13 @@ export const DisplaySeasonalShim = observer(() => { }> */} + {/* THIS CHECKBOX ENABLES GLASS EFFECT IN UI - ENABLED BY DEFAULT*/} + {/* settings.set("appearance:seasonal", v)} + description={"Enables glass effects throughout the app"}> + Enable glass effects + */} settings.set("appearance:seasonal", v)} diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index 8e914055..21fd3659 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -17,6 +17,7 @@ import { Speaker, Store, Bot, + Trash, } from "@styled-icons/boxicons-solid"; import { observer } from "mobx-react-lite"; import { Route, Switch, useHistory } from "react-router-dom"; @@ -54,13 +55,60 @@ import { Sessions } from "./panes/Sessions"; import { Sync } from "./panes/Sync"; import { ThemeShop } from "./panes/ThemeShop"; -const IndexHeader = styled.div` +const AccountHeader = styled.div` display: flex; - background: var(--secondary-background); + flex-direction: column; border-radius: var(--border-radius); - padding: 20px; - align-items: center; - gap: 10px; + overflow: hidden; + margin-bottom: 10px; + + .account { + padding: 20px; + gap: 10px; + align-items: center; + display: flex; + background: var(--secondary-background); + + .details { + display: flex; + flex-direction: column; + font-size: 12px; + gap: 2px; + + > span { + font-size: 20px; + font-weight: 600; + } + } + } + + .statusChanger { + display: flex; + align-items: center; + 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(() => { @@ -270,10 +318,19 @@ export default observer(() => { } indexHeader={ - - - - + +
+ +
+ + Status goes here +
+
+
+
Change your status...
+ +
+
} /> ); diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index c68c410f..66dd34bf 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -14,7 +14,7 @@ import { DisplayLigaturesShim, DisplayEmojiShim, ThemeCustomCSSShim, - DisplaySeasonalShim, + ThemeOptionsShim, } from "../../../components/settings/AppearanceShims"; import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides"; import ThemeTools from "../../../components/settings/appearance/ThemeTools"; @@ -27,7 +27,7 @@ export const Appearance = observer(() => {

- +