cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-25 00:20:57 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(settings): started settings cleanup

Browse source
This commit is contained in:
trashtemp 2021-12-24 17:39:25 +01:00
parent 739dd53637
commit bdc84b1d98
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
8 changed files with 35 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

@ -1 +1 @@
Subproject commit d98236483bdedade9d86578f3db5aee41506451f
Subproject commit c5d2538d70e3df1b099caf9084e41b015a52387d

17
src/components/settings/AppearanceShims.tsx
View file

@ -1,4 +1,4 @@
import { Store } from "@styled-icons/boxicons-regular";
import { Store } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom";
// @ts-expect-error shade-blend-color does not have typings.
@ -54,7 +54,11 @@ export const ThemeShopShim = () => {
return (
<Link to="/settings/theme_shop" replace>
<CategoryButton icon={<Store size={24} />} action="chevron" hover>
<CategoryButton
icon={<Store size={24} />}
action="chevron"
description={"Browse themes made by the community"}
hover>
<Text id="app.settings.pages.theme_shop.title" />
</CategoryButton>
</Link>
@ -194,7 +198,7 @@ export const DisplayLigaturesShim = observer(() => {
if (settings.theme.getFont() !== "Inter") return null;
return (
<p>
<>
<Checkbox
checked={settings.get("appearance:ligatures") ?? false}
onChange={(v) => settings.set("appearance:ligatures", v)}
@ -203,7 +207,7 @@ export const DisplayLigaturesShim = observer(() => {
}>
<Text id="app.settings.pages.appearance.ligatures" />
</Checkbox>
</p>
</>
);
});
@ -214,14 +218,15 @@ export const DisplaySeasonalShim = observer(() => {
const settings = useApplicationState().settings;
return (
<p>
<>
<h3>Theme Options</h3>
<Checkbox
checked={settings.get("appearance:seasonal") ?? true}
onChange={(v) => settings.set("appearance:seasonal", v)}
description="Displays effects in the home tab during holiday seasons.">
Seasonal theme
</Checkbox>
</p>
</>
);
});

2
src/components/ui/Button.tsx
View file

@ -21,7 +21,7 @@ export default styled.button<Props>`
align-items: center;
justify-content: center;
padding: 2px 16px;
font-size: 0.875rem;
font-size: 0.8125rem;
font-family: inherit;
font-weight: 500;
flex-shrink: 0;

2
src/components/ui/DateDivider.tsx
View file

@ -32,8 +32,10 @@ const Unread = styled.div`
color: var(--accent-contrast);
font-size: 7px;
padding: 2px 6px;
font-size: 10px;
border-radius: 60px;
font-weight: 600;
margin-top: -1px;
`;
interface Props {

3
src/pages/home/Home.module.scss
View file

@ -27,7 +27,8 @@
.actions {
//grid-template-columns: repeat(2, 300px);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-columns: 300px 300px;
//grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-column: span 2;
gap: 16px;
//margin: auto;

10
src/pages/settings/Settings.module.scss
View file

@ -255,6 +255,16 @@
font-weight: 600;
}
details {
summary {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
color: var(--secondary-foreground);
cursor: pointer;
}
}
.footer {
border-top: 1px solid;
margin: 0;

8
src/pages/settings/panes/Appearance.tsx
View file

@ -24,13 +24,16 @@ export const Appearance = observer(() => {
<div className={styles.appearance}>
<ThemeBaseSelectorShim />
<ThemeShopShim />
<hr />
<ThemeAccentShim />
<hr />
<DisplaySeasonalShim />
<hr />
<DisplayFontShim />
<DisplayLigaturesShim />
<hr />
<DisplayEmojiShim />
<hr />
<CollapsibleSection
defaultValue={false}
id="settings_overrides"
@ -40,7 +43,6 @@ export const Appearance = observer(() => {
<h3>App</h3>
<ThemeOverrides />
</CollapsibleSection>
<CollapsibleSection
id="settings_advanced_appearance"
defaultValue={false}

123
src/pages/settings/panes/Panes.module.scss
View file

@ -345,124 +345,6 @@
}
}
.appearance {
.theme {
min-width: 0;
display: flex;
flex-direction: column;
}
.themes {
gap: 8px;
display: flex;
width: 100%;
margin-bottom: 15px;
img {
cursor: pointer;
border-radius: var(--border-radius);
transition: border 0.3s;
border: 3px solid transparent;
width: 100%;
&[data-active="true"] {
cursor: default;
border: 3px solid var(--accent);
&:hover {
border: 3px solid var(--accent);
}
}
&:hover {
border: 3px solid var(--tertiary-background);
}
}
}
details {
summary {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
color: var(--secondary-foreground);
cursor: pointer;
}
}
.emojiPack {
gap: 12px;
display: flex;
flex-direction: column;
.row {
gap: 12px;
display: flex;
> div {
flex: 1;
display: flex;
flex-direction: column;
}
}
.button {
padding: 2rem 1.2rem;
display: grid;
place-items: center;
cursor: pointer;
transition: border 0.3s;
background: var(--hover);
border: 3px solid transparent;
border-radius: var(--border-radius);
img {
max-width: 100%;
}
&[data-active="true"] {
cursor: default;
background: var(--secondary-background);
border: 3px solid var(--accent);
&:hover {
border: 3px solid var(--accent);
}
}
&:hover {
background: var(--secondary-background);
border: 3px solid var(--tertiary-background);
}
}
h4 {
text-transform: unset;
a {
opacity: 0.7;
color: var(--accent);
font-weight: 600;
&:hover {
text-decoration: underline;
}
}
@media only screen and (max-width: 800px) {
a {
display: block;
}
}
}
}
.display {
gap: 8px;
display: flex;
flex-direction: column;
}
}
.sessions {
.session {
display: flex;
@ -477,12 +359,13 @@
svg {
margin-top: 1px;
flex-shrink: 0;
}
}
}
.entry {
padding: 16px;
padding: 12px;
display: flex;
margin: 10px 0;
flex-direction: column;
@ -514,7 +397,7 @@
background: transparent;
border: 0;
font-family: inherit;
font-size: 1rem;
font-size: 0.875rem;
padding: 0;
outline: 0;
border-radius: 0;