chore(settings): added new translation strings

external/lang

@@ -1 +1 @@
-Subproject commit 455c61db08463159ede88380ef8ef998fd9d9d33
+Subproject commit d5965a4234e30b2ecb172e0755f54e9559b09ed2

src/components/settings/AppearanceShims.tsx

@@ -219,12 +219,25 @@ export const DisplaySeasonalShim = observer(() => {
 
     return (
         <>
-            <h3>Theme Options</h3>
+            <h3>
+                <Text id="app.settings.pages.appearance.theme_options.title" />
+            </h3>
+            {/* TOFIX: WIP feature - follows system theme */}
+            {/*<Checkbox
+                checked={settings.get("appearance:seasonal") ?? true}
+                onChange={(v) => settings.set("appearance:seasonal", v)}
+                description={
+                    <Text id="app.settings.pages.appearance.theme_options.follow_desc" />
+                }>
+                <Text id="app.settings.pages.appearance.theme_options.follow" />
+            </Checkbox>*/}
             <Checkbox
                 checked={settings.get("appearance:seasonal") ?? true}
                 onChange={(v) => settings.set("appearance:seasonal", v)}
-                description="Displays effects in the home tab during holiday seasons.">
+                description={
-                Seasonal theme
+                    <Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
+                }>
+                <Text id="app.settings.pages.appearance.theme_options.seasonal" />
             </Checkbox>
         </>
     );

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)
                 }
             />
-            <Checkmark checked={props.checked} contrast={props.contrast} className="check">
+            <Checkmark
+                checked={props.checked}
+                contrast={props.contrast}
+                className="check">
                 <Check size={20} />
             </Checkmark>
         </CheckboxBase>

src/components/ui/fluent/CategoryButton.tsx

@@ -30,6 +30,11 @@ const CategoryBase = styled.div<BaseProps>`
         flex-shrink: 0;
     }
 
+    .action {
+        display: flex;
+        align-items: center;
+    }
+
     .content {
         display: flex;
         flex-grow: 1;

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() {
             </PageHeader>
 
             <div className="placeholder">
+                <div className="floating">
                     <Ghost width={80} />
+                </div>
                 <div className="primary">
                     <Text id="app.main.channel.errors.title" />
                 </div>

src/pages/settings/panes/Appearance.tsx

@@ -39,7 +39,6 @@ export const Appearance = observer(() => {
                 id="settings_overrides"
                 summary={<Text id="app.settings.pages.appearance.overrides" />}>
                 <ThemeTools />
-
                 <h3>App</h3>
                 <ThemeOverrides />
             </CollapsibleSection>

src/pages/settings/panes/MyBots.tsx

@@ -381,7 +381,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
                     <CollapsibleSection
                         defaultValue={false}
                         id={`bot_profile_${bot._id}`}
-                        summary="Bot Profile">
+                        summary={<Text id="app.settings.pages.bots.profile" />}>
                         <h3>
                             <Text id="app.settings.pages.profile.custom_background" />
                         </h3>

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 (
         <ThemeShopRoot>
             <h5>
-                Browse hundreds of themes, created and curated by the community.
+                <Text id="app.settings.pages.theme_shop.description" />
             </h5>
             {/*<LoadFail>
                 <h5>
@@ -290,55 +298,66 @@ export function ThemeShop() {
             <Tip warning hideSeparator>
                 The Theme Shop is currently under construction.
             </Tip>
-            <hr />
+
             {/* FIXME INTEGRATE WITH MOBX */}
             {/*<ActiveTheme>
                 <div class="active-indicator">
                     <Check size="16" />
-                    Currently active
+                    <Text id="app.settings.pages.theme_shop.active" />
                 </div>
                 <div class="container">
                     <div class="theme">theme svg goes here</div>
                     <div class="info">
                         <div class="title">Theme Title</div>
-                        <div class="author">by Author</div>
+                        <div class="author">
+                            <Text id="app.settings.pages.theme_shop.by" />{" "}
+                            Author
+                        </div>
                         <h5>This is a theme description.</h5>
                     </div>
                 </div>
             </ActiveTheme>
-            <InputBox placeholder="Search themes..." contrast />
+            <InputBox placeholder="<Text id="app.settings.pages.theme_shop.search" />" contrast />
             <Category>
                 <div class="title">
                     <Bookmark size={16} />
-                    Saved
+                    <Text id="app.settings.pages.theme_shop.category.saved" />
                 </div>
-                <a class="view">Manage installed</a>
+                <a class="view">
+                    <Text id="app.settings.pages.theme_shop.category.manage" />
+                </a>
             </Category>
 
             <Category>
                 <div class="title">
                     <Star size={16} />
-                    New this week
+                    <Text id="app.settings.pages.theme_shop.category.new" />
                 </div>
-                <a class="view">View all</a>
+                <a class="view">
-            </Category>
+                    <Text id="app.settings.pages.theme_shop.category.viewall" />
-
+                </a>
-            <Category>
-                <div class="title">
-                    <Brush size={16} />
-                    Default themes
-                </div>
-                <a class="view">View all</a>
             </Category>
 
             <Category>
                 <div class="title">
                     <BarChartAlt2 size={16} />
-                    Highest rated
+                    <Text id="app.settings.pages.theme_shop.category.highest" />
                 </div>
-                <a class="view">View all</a>
+                <a class="view">
-            </Category>*/}
+                    <Text id="app.settings.pages.theme_shop.category.viewall" />
+                </a>
+            </Category>
 
+            <Category>
+                <div class="title">
+                    <Brush size={16} />
+                    <Text id="app.settings.pages.theme_shop.category.default" />
+                </div>
+                <a class="view">
+                    <Text id="app.settings.pages.theme_shop.category.viewall" />
+                </a>
+            </Category>*/}
+            <hr />
             <ThemeList>
                 {themeList?.map(([slug, theme]) => (
                     <ThemeInfo
@@ -350,7 +369,9 @@ export function ThemeShop() {
                                 themes.hydrate(themeData[slug], true)
                             }>
                             <div class="previewBox">
-                                <div class="hover">Use theme</div>
+                                <div class="hover">
+                                    <Text id="app.settings.pages.theme_shop.use" />
+                                </div>
                                 <ThemePreview
                                     slug={slug}
                                     theme={themeData[slug]}
@@ -359,7 +380,10 @@ export function ThemeShop() {
                         </button>
                         <h1 class="name">{theme.name}</h1>
                         {/* Maybe id's of the users should be included as well / instead? */}
-                        <div class="creator">by {theme.creator}</div>
+                        <div class="creator">
+                            <Text id="app.settings.pages.theme_shop.by" />{" "}
+                            {theme.creator}
+                        </div>
                         <h5 class="description">{theme.description}</h5>
                     </ThemeInfo>
                 ))}