[WIP] Theme tweaks

.gitmodules

@@ -1,12 +1,12 @@
 [submodule "components/i18n/locales"]
 	path = packages/client/components/i18n/locales
 	url = https://github.com/upryzing/translations
-[submodule "packages/solid-styled-components"]
-	path = packages/solid-styled-components
-	url = https://github.com/revoltchat/solid-styled-components
 [submodule "packages/client/assets"]
 	path = packages/client/assets
 	url = https://github.com/upryzing/assets.git
 [submodule "packages/upryzing.js"]
 	path = packages/upryzing.js
 	url = https://github.com/upryzing/upryzing.js
+[submodule "packages/solid-styled-components"]
+	path = packages/solid-styled-components
+	url = https://github.com/upryzing/solid-styled-components.git

packages/client/components/app/interface/channels/text/Message.tsx

@@ -30,6 +30,7 @@ import MdNotificationsOff from "@material-design-icons/svg/filled/notifications_
 import MdShield from "@material-design-icons/svg/filled/shield.svg?component-solid";
 import MdSmartToy from "@material-design-icons/svg/filled/smart_toy.svg?component-solid";
 import MdSpa from "@material-design-icons/svg/filled/spa.svg?component-solid";
+import MdSchedule from "@material-design-icons/svg/filled/schedule.svg?component-solid";
 
 import { MessageContextMenu } from "../../../menus/MessageContextMenu";
 import {
@@ -175,6 +176,11 @@ export function Message(props: Props) {
               <MdCloud {...iconSize(16)} />
             </Tooltip>
           </Match>
+          <Match when={props.message.member?.timeout}>
+            <Tooltip content={`User has been timed out for ${dayjs(props.message.member?.timeout).toNow(true)}`} placement="top">
+              <MdSchedule {...iconSize(16)} />
+            </Tooltip>
+          </Match>
           <Match when={props.message.isSuppressed}>
             <Tooltip content={"Silent" /* TODO: i18n */} placement="top">
               <MdNotificationsOff {...iconSize(16)} />
@@ -273,13 +279,13 @@ export function Message(props: Props) {
  * New user indicator
  */
 const NewUser = styled.div`
-  color: ${(props) => props.theme!.customColours.success.color};
+  color: ${(props) => props.theme.customColours.success.color};
 `;
 
 /**
  * Avatar container
  */
 const AvatarContainer = styled.div`
   height: fit-content;
-  border-radius: ${(props) => props.theme!.borderRadius.full};
+  border-radius: ${(props) => props.theme.borderRadius.full};
 `;

packages/client/components/app/interface/settings/user/index.tsx

@@ -179,12 +179,12 @@ const Config: SettingsConfiguration<{ server: Server }> = {
           entries: [
             {
               id: "bots",
-              icon: <MdSmartToy {...iconSize(20)} />,
+              icon: <MdSmartToy fill={theme!.colours.foreground} {...iconSize(20)} />,
               title: t("app.settings.pages.bots.title"),
             },
             {
               id: "feedback",
-              icon: <MdRateReview {...iconSize(20)} />,
+              icon: <MdRateReview fill={theme!.colours.foreground} {...iconSize(20)} />,
               title: t("app.settings.pages.feedback.title"),
             }
           ],
@@ -258,7 +258,7 @@ const Config: SettingsConfiguration<{ server: Server }> = {
             // },
             {
               href: "https://github.com/upryzing",
-              icon: <MdMemory {...iconSize(20)} />,
+              icon: <MdMemory fill={theme!.colours.foreground} {...iconSize(20)} />,
               title: t("app.settings.pages.source_code"),
             },
             {

packages/client/components/auth/src/flows/FlowHome.tsx

@@ -41,12 +41,11 @@ export default function FlowHome() {
                   "align-items": "center",
                 }}
               >
-                <span>Your conversations,</span>
-                <br />
-                <span>your way.</span>
+                <span>Your conversations, your way.</span>
               </b>
               <span style={{ "text-align": "center", opacity: "0.5" }}>
-                idk, text here
+                Connect with Upryzing.
+                {/* [TODO] Add translations for multiple languages */}
               </span>
             </Column>
 

packages/client/components/i18n/index.tsx

@@ -41,7 +41,7 @@ export async function fetchLanguage(key: Language): Promise<Dictionary> {
 }
 
 /**
- * set a language by the given key
+ * Set a language by the given key
  */
 export function setLanguage(key: Language) {
   startI18nTransition(() => _setLanguage(key));

packages/client/components/ui/components/design/atoms/display/Typography.tsx

@@ -26,7 +26,7 @@ export function generateTypography(
   variant: keyof DefaultTheme["typography"]
 ) {
   const { fontSize, fontWeight, lineHeight, margin, textTransform, colour } =
-    theme.typography[variant] ?? {};
+    theme !== undefined ? theme.typography[variant] : {};
 
   const styles = {
     fontSize,
@@ -54,7 +54,7 @@ export function generateTypographyCSS(
   variant: keyof DefaultTheme["typography"]
 ) {
   const { fontSize, fontWeight, lineHeight, margin, textTransform, colour } =
-    theme.typography[variant] ?? {};
+    theme !== undefined ? theme.typography[variant] : {};
 
   const styles = {
     "font-size": fontSize,
@@ -85,7 +85,7 @@ export const Typography = (props: TypographyProps) => {
   const theme = useTheme();
   const className = css(generateTypography(theme, local.variant));
 
-  switch (theme.typography[local.variant]?.element) {
+  switch (theme.typography[local.variant] ? theme.typography[local.variant].element : undefined) {
     case "h1":
       return <h1 class={className} {...others} />;
     case "h2":

packages/client/components/ui/components/navigation/servers/ServerList.tsx

@@ -8,6 +8,7 @@ import { styled } from "styled-system/jsx";
 
 import { KeybindAction } from "@revolt/keybinds";
 import { useNavigate } from "@revolt/routing";
+import { useTheme } from "@revolt/ui";
 
 import MdAdd from "@material-design-icons/svg/filled/add.svg?component-solid";
 import MdExplore from "@material-design-icons/svg/filled/explore.svg?component-solid";
@@ -70,6 +71,7 @@ interface Props {
 export const ServerList = (props: Props) => {
   const navigate = useNavigate();
   const keybinds = useKeybindActions();
+  const theme = useTheme();
 
   const navigateServer = (ev: KeyboardEvent, byOffset: number) => {
     ev.preventDefault();
@@ -138,7 +140,7 @@ export const ServerList = (props: Props) => {
             </PositionSwoosh>
           </Show> */}
           <a href="/app">
-            <Avatar size={42} fallback={<MdHome />} />
+            <Avatar size={42} fallback={<MdHome fill={theme.colours.foreground} />} />
           </a>
         </EntryContainer>
         <Tooltip
@@ -253,13 +255,13 @@ export const ServerList = (props: Props) => {
         <Tooltip placement="right" content={"Create or join a server"}>
           <EntryContainer>
             <a onClick={() => props.onCreateOrJoinServer()}>
-              <Avatar size={42} fallback={<MdAdd />} />
+              <Avatar size={42} fallback={<MdAdd fill={theme.colours.foreground} />} />
             </a>
           </EntryContainer>
         </Tooltip>
         <Tooltip placement="right" content={"Find new servers to join"}>
           <EntryContainer>
-            <Avatar size={42} fallback={<MdExplore />} />
+            <Avatar size={42} fallback={<MdExplore fill={theme.colours.foreground} />} />
           </EntryContainer>
         </Tooltip>
       </div>
@@ -269,7 +271,7 @@ export const ServerList = (props: Props) => {
       <Tooltip placement="right" content="Settings">
         <EntryContainer>
           <a href="/settings">
-            <Avatar size={42} fallback={<MdSettings />} interactive />
+            <Avatar size={42} fallback={<MdSettings fill={theme.colours.foreground} />} interactive />
           </a>
         </EntryContainer>
       </Tooltip>

packages/client/src/interface/Home.tsx

@@ -115,7 +115,7 @@ export function HomePage() {
     <Base>
       <Header placement="primary">
         <HeaderIcon>
-          <MdHome {...iconSize(22)} />
+          <MdHome fill={theme.colours.foreground} {...iconSize(22)} />
         </HeaderIcon>
         Home
       </Header>
@@ -136,7 +136,7 @@ export function HomePage() {
                 })
               }
               description={t("app.home.group_desc")}
-              icon={<MdAddCircle />}
+              icon={<MdAddCircle fill={theme!.colours.foreground} />}
             >
               {t("app.home.group")}
             </CategoryButton>
@@ -145,15 +145,15 @@ export function HomePage() {
                 <CategoryButton
                   onClick={() => navigate("/server/01JESQYCPY76XFN67R79YGCWMR")}
                   description={t("app.home.goto-testers_desc")}
-                  icon={<MdGroups3 />}
+                  icon={<MdGroups3 fill={theme!.colours.foreground} />}
                 >
                   {t("app.home.goto-testers")}
                 </CategoryButton>
               </Match>
               <Match when={showLoungeButton && !isInLounge}>
                 <CategoryButton
                   description={t("app.home.join-testers_desc")}
-                  icon={<MdGroups3 />}
+                  icon={<MdGroups3 fill={theme!.colours.foreground} />}
                 >
                   {t("app.home.join-testers")}
                 </CategoryButton>
@@ -165,7 +165,7 @@ export function HomePage() {
                 console.log("g")
               }
               description={t("app.home.donate_desc")}
-              icon={<MdPayments />}
+              icon={<MdPayments fill={theme!.colours.foreground} />}
             >
               {t("app.home.donate")}
             </CategoryButton>

packages/client/vite.config.ts

@@ -67,8 +67,9 @@ export default defineConfig({
   build: {
     target: "esnext",
     rollupOptions: {
-      external: ["hast"]
-    }
+      external: ["hast"],
+    },
+    minify: false,
   },
   optimizeDeps: {
     exclude: ["solid-styled-components", "hast"],