mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
fix(settings): started settings cleanup
This commit is contained in:
parent
739dd53637
commit
bdc84b1d98
8 changed files with 35 additions and 132 deletions
2
external/lang
vendored
2
external/lang
vendored
|
@ -1 +1 @@
|
|||
Subproject commit d98236483bdedade9d86578f3db5aee41506451f
|
||||
Subproject commit c5d2538d70e3df1b099caf9084e41b015a52387d
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue