Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-16 19:57:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: simplify settings dialog markup

Browse Source
This commit is contained in:
Abdullah Atta
2023-06-22 13:06:57 +05:00
committed by Abdullah Atta
parent 30072576ce
commit 5f42f11fb1
1 changed files with 110 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
apps/web/src/dialogs/settings/index.tsx
View File

@@ -185,22 +185,26 @@ export default function SettingsDialog(props: SettingsDialogProps) {
<Flex
sx={{
height: "80vw",
overflow: "hidden"
}}
>
<FlexScrollContainer>
<Flex
sx={{
flexDirection: "column",
width: 240,
overflow: "hidden",
minHeight: "min-content",
bg: "bgSecondary",
"& #settings-side-menu": {
"@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))":
{
bg: "bgTransparent",
backgroundColor: "bgTransparent",
backdropFilter: "blur(8px)"
}
}
}}
>
<FlexScrollContainer
id="settings-side-menu"
style={{
display: "flex",
flexDirection: "column",
borderRadius: "10px",
width: 240,
overflow: "auto",
minHeight: "min-content",
backgroundColor: "bgSecondary"
}}
data-test-id="settings-navigation-menu"
>
@@ -274,23 +278,22 @@ export default function SettingsDialog(props: SettingsDialogProps) {
)}
</Flex>
))}
</Flex>
</FlexScrollContainer>
<FlexScrollContainer
style={{ flex: 1, backgroundColor: "var(--background)" }}
>
<Flex
sx={{
style={{
display: "flex",
backgroundColor: "var(--background)",
flex: 1,
flexDirection: "column",
p: 4,
gap: 4,
overflow: "hidden"
padding: 20,
gap: 20,
minHeight: "min-content",
overflow: "auto"
}}
>
{activeSettings.map((group) => (
<SettingsGroupComponent key={group.key} item={group} />
))}
</Flex>
</FlexScrollContainer>
</Flex>
</Dialog>
@@ -307,7 +310,14 @@ function SettingsGroupComponent(props: { item: SettingsGroup }) {
if (item.isHidden && item.isHidden()) return null;
return (
<Flex sx={{ flexDirection: "column", gap: 2, overflow: "hidden" }}>
<Flex
sx={{
flexDirection: "column",
flexShrink: 0,
gap: 2,
overflow: "hidden"
}}
>
{typeof item.header === "string" ? (
<Text
variant="subBody"