Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-24 12:12:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: fix only 1 theme showing in theme selector

Browse Source
This commit is contained in:
Abdullah Atta
2023-07-24 13:38:23 +05:00
parent c0805b1915
commit 73f50a34f9
1 changed files with 63 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
apps/web/src/dialogs/settings/components/themes-selector.tsx
View File

@@ -132,73 +132,73 @@ function ThemesList() {
</Button>
))}
</Flex>
<VirtuosoGrid
style={{ height: 700 }}
data={themes.data?.pages.flatMap((a) => a.themes) || []}
endReached={() => (themes.hasNextPage ? themes.fetchNextPage() : null)}
components={{
List: (props) => (
<Box
sx={{
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: 4,
mt: 2
}}
{...props}
/>
)
<Box
sx={{
".virtuoso-grid-list": {
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: 2
},
mt: 2
}}
itemContent={(_index, theme) => (
<Flex
key={theme.id}
sx={{
flexDirection: "column",
flex: 1,
cursor: "pointer",
p: 2,
border: "1px solid transparent",
borderRadius: "default",
":hover": {
bg: "background-secondary",
border: "1px solid var(--border)",
".set-as-button": { opacity: 1 }
}
}}
onClick={async () => {
if (await showThemeDetails(theme)) {
await setTheme(theme);
}
}}
>
<ThemePreview theme={theme} />
<Text variant="title" sx={{ mt: 1 }}>
{theme.name}
</Text>
<Text variant="body">{theme.authors[0].name}</Text>
>
<VirtuosoGrid
style={{ height: 700 }}
data={themes.data?.pages.flatMap((a) => a.themes) || []}
endReached={() =>
themes.hasNextPage ? themes.fetchNextPage() : null
}
itemContent={(_index, theme) => (
<Flex
sx={{ justifyContent: "space-between", alignItems: "center" }}
key={theme.id}
sx={{
flexDirection: "column",
flex: 1,
cursor: "pointer",
p: 2,
border: "1px solid transparent",
borderRadius: "default",
":hover": {
bg: "background-secondary",
border: "1px solid var(--border)",
".set-as-button": { opacity: 1 }
}
}}
onClick={async () => {
if (await showThemeDetails(theme)) {
await setTheme(theme);
}
}}
>
<Text variant="subBody">{theme.totalInstalls} installs</Text>
{isThemeCurrentlyApplied(theme.id) ? (
<CheckCircleOutline color="accent" size={20} />
) : (
<Button
className="set-as-button"
variant="secondary"
sx={{ opacity: 0, bg: "background" }}
onClick={(e) => {
e.stopPropagation();
setTheme(theme);
}}
>
Set as {theme.colorScheme}
</Button>
)}
<ThemePreview theme={theme} />
<Text variant="title" sx={{ mt: 1 }}>
{theme.name}
</Text>
<Text variant="body">{theme.authors[0].name}</Text>
<Flex
sx={{ justifyContent: "space-between", alignItems: "center" }}
>
<Text variant="subBody">{theme.totalInstalls} installs</Text>
{isThemeCurrentlyApplied(theme.id) ? (
<CheckCircleOutline color="accent" size={20} />
) : (
<Button
className="set-as-button"
variant="secondary"
sx={{ opacity: 0, bg: "background" }}
onClick={(e) => {
e.stopPropagation();
setTheme(theme);
}}
>
Set as {theme.colorScheme}
</Button>
)}
</Flex>
</Flex>
</Flex>
)}
></VirtuosoGrid>
)}
/>
</Box>
</>
);
}