HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

feat(settings): UI improvements (#448)

Browse Source 
* Fixed CSS for Settings.tsx + new Theme Shop design

* reformat

* More changes to UI CSS

* Small CSS fixes for Settings.tsx, Account, Bots

* Updated theme shop, settings pages, cleanup

* chore: force sync language submodule

* fix(sidebar): prevent items from shrinking

* fix(push): fix timestamp and icon for push notifications

* fix(voice): hide grant permission button after grant

* chore: hide new shop / chevron before merge

* chore(ci): bump node to v16 in dockerfile

* fix(sidebar): change width of channel sidebar

Co-authored-by: trashtemp <96388163+trashtemp@users.noreply.github.com>
This commit is contained in:
Paul Makles
2021-12-20 13:37:21 +00:00
committed by GitHub
parent 535a40df0c
commit 9298f205fc
23 changed files with 744 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/settings/panes/Appearance.tsx
View File

@@ -1,5 +1,6 @@
import { Reset, Import } from "@styled-icons/boxicons-regular";
import { Pencil, Store } from "@styled-icons/boxicons-solid";
import { Link } from "react-router-dom";
// @ts-expect-error shade-blend-color does not have typings.
import pSBC from "shade-blend-color";
@@ -8,16 +9,13 @@ import { Text } from "preact-i18n";
import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
import { debounce } from "../../../lib/debounce";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import { isExperimentEnabled } from "../../../redux/reducers/experiments";
import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
import {
DEFAULT_FONT,
DEFAULT_MONO_FONT,
@@ -40,14 +38,13 @@ import Checkbox from "../../../components/ui/Checkbox";
import ColourSwatches from "../../../components/ui/ColourSwatches";
import ComboBox from "../../../components/ui/ComboBox";
import InputBox from "../../../components/ui/InputBox";
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
import darkSVG from "../assets/dark.svg";
import lightSVG from "../assets/light.svg";
import mutantSVG from "../assets/mutant_emoji.svg";
import notoSVG from "../assets/noto_emoji.svg";
import openmojiSVG from "../assets/openmoji_emoji.svg";
import twemojiSVG from "../assets/twemoji_emoji.svg";
import { Link } from "react-router-dom";
import { isExperimentEnabled } from "../../../redux/reducers/experiments";
interface Props {
settings: Settings;
@@ -112,8 +109,7 @@ export function Component(props: Props) {
draggable={false}
data-active={selected === "light"}
onClick={() =>
selected !== "light" &&
setTheme({ base: "light" })
selected !== "light" && setTheme({ base: "light" })
}
onContextMenu={(e) => e.preventDefault()}
/>
@@ -138,11 +134,20 @@ export function Component(props: Props) {
</div>
</div>
{isExperimentEnabled('theme_shop') && <Link to="/settings/theme_shop" replace>
<CategoryButton icon={<Store size={24} />} action="chevron" hover>
<Text id="app.settings.pages.theme_shop.title" />
</CategoryButton>
</Link>}
{isExperimentEnabled("theme_shop") && (
<Link
to="/settings/theme_shop"
replace
className={styles.focus}>
<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>
)}
<h3>
<Text id="app.settings.pages.appearance.accent_selector" />