cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2025-01-12 23:41:25 -05:00
Code Issues Projects Releases Packages Wiki Activity

Minor style improvements

Browse source
This commit is contained in:
brecert 2021-09-07 02:47:12 -04:00
parent 6a32e451ac
commit d7f08449cb
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: 1B2E56B9EC985B96
1 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/pages/settings/panes/ThemeShop.tsx
View file

@ -23,7 +23,7 @@ type Manifest = {
} }
// TODO: ability to preview / display the settings set like in the appearance pane // TODO: ability to preview / display the settings set like in the appearance pane
const ThemeInfo = styled.div` const ThemeInfo = styled.article`
display: grid; display: grid;
grid: grid:
"preview name creator" min-content "preview name creator" min-content
@ -31,7 +31,7 @@ const ThemeInfo = styled.div`
/ 200px 1fr 1fr; / 200px 1fr 1fr;
gap: 0.5rem 1rem; gap: 0.5rem 1rem;
padding: 0.5rem; padding: 1rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--secondary-background); background: var(--secondary-background);
@ -54,7 +54,8 @@ const ThemeInfo = styled.div`
cursor: pointer; cursor: pointer;
background-color: var(--secondary-background); background-color: var(--secondary-background);
border-radius: var(--border-radius); border-radius: calc(var(--border-radius) / 2);
box-shadow: 0 0 0 1px var(--tertiary-foreground);
overflow: hidden; overflow: hidden;
@ -74,11 +75,13 @@ const ThemeInfo = styled.div`
.name { .name {
grid-area: name; grid-area: name;
margin: 0;
} }
.creator { .creator {
grid-area: creator; grid-area: creator;
justify-self: end; justify-self: end;
font-size: 0.75rem;
} }
.description { .description {
@ -109,6 +112,11 @@ const ThemePreview = ({ theme, ...props }: ThemePreviewProps) => {
</ThemedSVG > </ThemedSVG >
} }
const ThemeShopRoot = styled.div`
display: grid;
gap: 1rem;
`
export function ThemeShop() { export function ThemeShop() {
// setThemeList is for adding more / lazy loading in the future // setThemeList is for adding more / lazy loading in the future
const [themeList, setThemeList] = useState<[string, ThemeMetadata][] | null>(null); const [themeList, setThemeList] = useState<[string, ThemeMetadata][] | null>(null);
@ -134,14 +142,14 @@ export function ThemeShop() {
}) })
}, [themeList]) }, [themeList])
return (<div> return (<ThemeShopRoot>
<Tip warning>This section is under construction.</Tip> <Tip warning>This section is under construction.</Tip>
<ThemeList> <ThemeList>
{themeList?.map(([slug, theme]) => { {themeList?.map(([slug, theme]) => (
return <ThemeInfo key={slug} data-loaded={Reflect.has(themeData, slug)}> <ThemeInfo key={slug} data-loaded={Reflect.has(themeData, slug)}>
<div class="name">{theme.name}</div> <h2 class="name">{theme.name}</h2>
{/* Maybe id's of the users should be included as well / instead? */} {/* Maybe id's of the users should be included as well / instead? */}
<div class="creator">@{theme.creator}</div> <div class="creator">by {theme.creator}</div>
<div class="description">{theme.description}</div> <div class="description">{theme.description}</div>
<div class="preview"> <div class="preview">
<ThemePreview <ThemePreview
@ -157,7 +165,7 @@ export function ThemeShop() {
/> />
</div> </div>
</ThemeInfo> </ThemeInfo>
})} ))}
</ThemeList> </ThemeList>
</div>) </ThemeShopRoot>)
} }