diff --git a/external/lang b/external/lang index 455c61db..d5965a42 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 455c61db08463159ede88380ef8ef998fd9d9d33 +Subproject commit d5965a4234e30b2ecb172e0755f54e9559b09ed2 diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index 78b51da1..b9da94ab 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/src/components/settings/AppearanceShims.tsx @@ -219,12 +219,25 @@ export const DisplaySeasonalShim = observer(() => { return ( <> -

Theme Options

+

+ +

+ {/* TOFIX: WIP feature - follows system theme */} + {/* settings.set("appearance:seasonal", v)} + description={ + + }> + + */} settings.set("appearance:seasonal", v)} - description="Displays effects in the home tab during holiday seasons."> - Seasonal theme + description={ + + }> + ); diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx index 1117a613..2ba55216 100644 --- a/src/components/ui/Checkbox.tsx +++ b/src/components/ui/Checkbox.tsx @@ -40,7 +40,8 @@ const CheckboxBase = styled.label` const CheckboxContent = styled.span` display: flex; flex-grow: 1; - font-size: 1rem; + font-size: 14px; + gap: 2px; font-weight: 600; flex-direction: column; `; @@ -111,7 +112,10 @@ export default function Checkbox(props: CheckboxProps) { !props.disabled && props.onChange(!props.checked) } /> - + diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx index 9a1203f0..7cd31eee 100644 --- a/src/components/ui/fluent/CategoryButton.tsx +++ b/src/components/ui/fluent/CategoryButton.tsx @@ -30,6 +30,11 @@ const CategoryBase = styled.div` flex-shrink: 0; } + .action { + display: flex; + align-items: center; + } + .content { display: flex; flex-grow: 1; diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx index b7fc03bb..f88d9023 100644 --- a/src/pages/channels/Channel.tsx +++ b/src/pages/channels/Channel.tsx @@ -44,11 +44,32 @@ const ChannelContent = styled.div` `; const PlaceholderBase = styled.div` + @keyframes floating { + 0% { + transform: translate(0, 0px); + } + 50% { + transform: translate(0, 15px); + } + 100% { + transform: translate(0, -0px); + } + } + flex-grow: 1; display: flex; overflow: hidden; flex-direction: column; + .floating { + animation-name: floating; + animation-duration: 3s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + margin-left: 30px; + margin-top: 5px; + } + .placeholder { justify-content: center; text-align: center; @@ -163,7 +184,9 @@ function ChannelPlaceholder() {
- +
+ +
diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index c35b6e95..c68c410f 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -39,7 +39,6 @@ export const Appearance = observer(() => { id="settings_overrides" summary={}> -

App

diff --git a/src/pages/settings/panes/MyBots.tsx b/src/pages/settings/panes/MyBots.tsx index 3e68463f..7b9a86ed 100644 --- a/src/pages/settings/panes/MyBots.tsx +++ b/src/pages/settings/panes/MyBots.tsx @@ -381,7 +381,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) { + summary={}>

diff --git a/src/pages/settings/panes/ThemeShop.tsx b/src/pages/settings/panes/ThemeShop.tsx index 2c87be4c..22627519 100644 --- a/src/pages/settings/panes/ThemeShop.tsx +++ b/src/pages/settings/panes/ThemeShop.tsx @@ -1,5 +1,13 @@ +import { Check } from "@styled-icons/boxicons-regular"; +import { + Star, + Brush, + Bookmark, + BarChartAlt2, +} from "@styled-icons/boxicons-solid"; import styled from "styled-components"; +import { Text } from "preact-i18n"; import { useEffect, useState } from "preact/hooks"; import { useApplicationState } from "../../../mobx/State"; @@ -279,7 +287,7 @@ export function ThemeShop() { return (
- Browse hundreds of themes, created and curated by the community. +
{/*
@@ -290,55 +298,66 @@ export function ThemeShop() { The Theme Shop is currently under construction. -
+ {/* FIXME INTEGRATE WITH MOBX */} {/*
- Currently active +
theme svg goes here
Theme Title
-
by Author
+
+ {" "} + Author +
This is a theme description.
- + " contrast />
- Saved +
- Manage installed + + +
- New this week +
- View all -
- - -
- - Default themes -
- View all + + +
- Highest rated +
- View all -
*/} + + + + + +
+ + +
+ + + +
*/} +
{themeList?.map(([slug, theme]) => (
-
Use theme
+
+ +

{theme.name}

{/* Maybe id's of the users should be included as well / instead? */} -
by {theme.creator}
+
+ {" "} + {theme.creator} +
{theme.description}
))}