refactor: remainder of unset colours (currently visible in UI)

closes #279
revoltchat · Nov 28, 2024 · 43e2b55 · 43e2b55
1 parent cba7ca8
commit 43e2b55
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 245 deletions.
diff --git a/packages/client/components/ui/components/design/atoms/inputs/LegacyCheckbox.tsx b/packages/client/components/ui/components/design/atoms/inputs/LegacyCheckbox.tsx
@@ -17,7 +17,7 @@ const Base = styled("label")`
   }
 
   &:hover {
-    background: var(--unset-bg);
+    /* background: var(--unset-bg); */
 
     .check {
       visibility: visible;
@@ -57,7 +57,7 @@ const Title = styled.div`
 const Description = styled.div`
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--unset-fg);
+  color: var(--foreground);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
@@ -70,25 +70,25 @@ const Checkmark = styled.div<Pick<Props, "value">>`
   justify-content: center;
   width: 24px;
   height: 24px;
-  border: 2px solid var(--unset-fg);
+  border: 2px solid var(--foreground);
   border-radius: ${(props) => props.theme!.borderRadius["md"]};
-  background: var(--unset-bg);
+  /* background: var(--unset-bg); */
   flex-shrink: 0;
   margin: 4px;
   transition: 0.1s ease-in-out all;
 
   .check {
     transition: inherit;
-    color: var(--unset-fg);
+    color: var(--foreground);
     visibility: hidden;
     opacity: 0;
   }
 
   ${(props) =>
     props.value
       ? `
-    border-color: var(--unset-fg);
-    background: var(--unset-bg);
+    border-color: var(--foreground);
+    /* background: var(--unset-bg); */
 
     .check {
       visibility: visible;

diff --git a/packages/client/components/ui/components/design/atoms/inputs/Radio.tsx b/packages/client/components/ui/components/design/atoms/inputs/Radio.tsx
@@ -15,7 +15,7 @@ interface BaseProps {
 }
 
 const Base = styled.label<BaseProps>`
-  border: 2px solid var(--unset-bg);
+  border: 2px solid var(--foreground);
   padding: 10px;
   gap: 10px;
   display: flex;
@@ -31,16 +31,16 @@ const Base = styled.label<BaseProps>`
   ${(props) =>
     props.selected
       ? `
-          color: var(--unset-fg);
+          color: var(--foreground);
           cursor: default;
-          background: var(--unset-bg);
-          border: 2px solid var(--unset-bg);
+          /* background: var(--unset-bg);
+          border: 2px solid var(--unset-bg); */
 
           div {
-            border-color: var(--unset-bg);
+            /* border-color: var(--unset-bg); */
 
             svg {
-              color: var(--unset-fg);
+              color: var(--foreground);
               visibility: visible;
               opacity: 1;
             }
@@ -52,7 +52,7 @@ const Base = styled.label<BaseProps>`
     !props.selected
       ? `
           &:hover {
-            background:var(--unset-bg);
+            /* background:var(--unset-bg); */
 
             svg {
               visibility: visible;
@@ -68,15 +68,15 @@ const RadioCircle = styled.div`
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  border: 2px solid var(--unset-bg);
+  /* border: 2px solid var(--unset-bg); */
   border-radius: ${(props) => props.theme?.borderRadius.lg};
   height: 20px;
   width: 20px;
   transition: inherit;
 
   svg {
     transition: inherit;
-    color: var(--unset-fg);
+    color: var(--foreground);
     flex-shrink: 0;
     visibility: hidden;
     opacity: 0;
@@ -104,15 +104,15 @@ const Title = styled.div<BaseProps>`
   ${(props) =>
     props.selected
       ? `
-          color: var(--unset-fg);
+          color: var(--foreground);
         `
       : undefined}
 `;
 
 const Description = styled.div<BaseProps>`
   font-size: 0.6875rem;
   font-weight: 500;
-  color: var(--unset-fg);
+  color: var(--foreground);
   transition: inherit;
 
   display: -webkit-box;
@@ -123,7 +123,7 @@ const Description = styled.div<BaseProps>`
   ${(props) =>
     props.selected
       ? `
-          color: var(--unset-fg);
+          color: var(--foreground);
         `
       : undefined}
 `;

diff --git a/packages/client/components/ui/components/design/atoms/inputs/Tabs.stories.tsx b/packages/client/components/ui/components/design/atoms/inputs/Tabs.stories.tsx
diff --git a/packages/client/components/ui/components/design/atoms/inputs/Tabs.tsx b/packages/client/components/ui/components/design/atoms/inputs/Tabs.tsx
diff --git a/packages/client/components/ui/components/design/atoms/inputs/index.ts b/packages/client/components/ui/components/design/atoms/inputs/index.ts
@@ -5,7 +5,6 @@ export { Input } from "./Input";
 export { Button } from "./Button";
 export { MenuButton } from "./MenuButton";
 export { Radio } from "./Radio";
-export { Tabs } from "./Tabs";
 export { CategoryButton } from "./CategoryButton";
 export { OverrideSwitch } from "./OverrideSwitch";
 export { CategoryCollapse } from "./CategoryCollapse";

diff --git a/packages/client/components/ui/components/messaging/message/FileInfo.tsx b/packages/client/components/ui/components/messaging/message/FileInfo.tsx
@@ -40,7 +40,7 @@ const Base = styled(Row)`
  * Link action
  */
 const Action = styled("a")`
-  color: var(--unset-fg);
+  color: var(--foreground);
 
   display: grid;
   place-items: center;
@@ -52,32 +52,30 @@ const Action = styled("a")`
 export function FileInfo(props: Props) {
   return (
     <Base align>
-      <Action>
-        <Switch fallback={<BiSolidFile size={24} />}>
-          <Match
-            when={
-              props.file?.metadata.type === "Image" ||
-              props.embed?.type === "Image"
-            }
-          >
-            <BiSolidImage size={24} />
-          </Match>
-          <Match
-            when={
-              props.file?.metadata.type === "Video" ||
-              props.embed?.type === "Video"
-            }
-          >
-            <BiSolidVideo size={24} />
-          </Match>
-          <Match when={props.file?.metadata.type === "Audio"}>
-            <BiRegularHeadphone size={24} />
-          </Match>
-          <Match when={props.file?.metadata.type === "Text"}>
-            <BiSolidFileTxt size={24} />
-          </Match>
-        </Switch>
-      </Action>
+      <Switch fallback={<BiSolidFile size={24} />}>
+        <Match
+          when={
+            props.file?.metadata.type === "Image" ||
+            props.embed?.type === "Image"
+          }
+        >
+          <BiSolidImage size={24} />
+        </Match>
+        <Match
+          when={
+            props.file?.metadata.type === "Video" ||
+            props.embed?.type === "Video"
+          }
+        >
+          <BiSolidVideo size={24} />
+        </Match>
+        <Match when={props.file?.metadata.type === "Audio"}>
+          <BiRegularHeadphone size={24} />
+        </Match>
+        <Match when={props.file?.metadata.type === "Text"}>
+          <BiSolidFileTxt size={24} />
+        </Match>
+      </Switch>
       <Column grow gap="none">
         <span>{props.file?.filename}</span>
         <Show when={props.file?.size}>