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(() => {
-
+