From 75d0a48e35c091e338734fa8cdf1918945dce3b0 Mon Sep 17 00:00:00 2001
From: rob chang <robchangcodes@gmail.com>
Date: Mon, 30 Sep 2024 16:03:07 -0400
Subject: [PATCH] fix: side bar updates

---
 examples/ui-demo/src/app/page.tsx             |  2 +-
 .../configuration/Authentication.tsx          |  2 +-
 .../src/components/configuration/Styling.tsx  | 17 +++++++-------
 .../ui-demo/src/components/icons/palette.tsx  | 22 +++++++++++++++++++
 4 files changed, 33 insertions(+), 10 deletions(-)
 create mode 100644 examples/ui-demo/src/components/icons/palette.tsx

diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx
index 3299af1af6..7394ca1481 100644
--- a/examples/ui-demo/src/app/page.tsx
+++ b/examples/ui-demo/src/app/page.tsx
@@ -35,7 +35,7 @@ export default function Home() {
         className={`flex flex-col flex-1 px-4 md:px-6 lg:px-10 py-4 md:py-6 w-full max-w-screen-2xl mx-auto overflow-hidden ${inter.className}`}
       >
         <div className="flex flex-1 gap-6 overflow-hidden">
-          <div className="hidden lg:flex flex-col basis-0 flex-1 bg-white border border-border rounded-lg p-6 overflow-y-auto scrollbar-none gap-10">
+          <div className="hidden lg:flex flex-col max-w-[392px] bg-white border border-border rounded-lg p-6 overflow-y-auto scrollbar-none gap-10">
             <Authentication />
             <Styling />
           </div>
diff --git a/examples/ui-demo/src/components/configuration/Authentication.tsx b/examples/ui-demo/src/components/configuration/Authentication.tsx
index be92d1ee7e..ee33bbf4a4 100644
--- a/examples/ui-demo/src/components/configuration/Authentication.tsx
+++ b/examples/ui-demo/src/components/configuration/Authentication.tsx
@@ -69,7 +69,7 @@ export const Authentication = ({ className }: { className?: string }) => {
             details={
               <>
                 <div className="flex flex-1 min-w-full flex-row justify-between gap-3 items-center">
-                  <p className={cn("font-medium text-sm")}>
+                  <p className="font-medium text-sm text-secondary-foreground">
                     Add passkey after sign up
                   </p>
                   <Switch
diff --git a/examples/ui-demo/src/components/configuration/Styling.tsx b/examples/ui-demo/src/components/configuration/Styling.tsx
index b598efa85b..ff6658631e 100644
--- a/examples/ui-demo/src/components/configuration/Styling.tsx
+++ b/examples/ui-demo/src/components/configuration/Styling.tsx
@@ -2,13 +2,13 @@ import { useConfig } from "@/app/state";
 import { cn } from "@/lib/utils";
 import { getBorderRadiusValue } from "@account-kit/react/tailwind";
 import { IllustrationStyle } from "../icons/illustration-style";
-import { PaintIcon } from "../icons/paint";
 import { SparkleIcon } from "../icons/sparkle";
 import ExternalLink from "../shared/ExternalLink";
 import { HelpTooltip } from "../shared/HelpTooltip";
 import { ThemeSwitch } from "../shared/ThemeSwitch";
 import { ColorPicker } from "./ColorPicker";
 import { PhotoUploads } from "./PhotoUpload";
+import { PaletteIcon } from "../icons/palette";
 
 export function Styling({ className }: { className?: string }) {
   const { config, setConfig } = useConfig();
@@ -27,29 +27,30 @@ export function Styling({ className }: { className?: string }) {
     <div className={cn("flex flex-col gap-5", className)}>
       <div className="flex flex-col gap-3">
         <div className="flex flex-row gap-2">
-          <PaintIcon />
+          <PaletteIcon />
           <span className="font-semibold">Branding</span>
         </div>
       </div>
       <div className="flex flex-col gap-4 w-full border-b border-border pb-5">
         <div className="flex flex-row justify-between grow items-center">
-          <p className="font-medium text-sm">Theme</p>
+          <p className="font-medium text-sm text-secondary-foreground">Theme</p>
           <ThemeSwitch
             checked={config.ui.theme === "dark"}
             onCheckedChange={onSwitchTheme}
           />
         </div>
         <div className="flex flex-row justify-between grow items-center">
-          <p className="font-medium text-sm">Brand color</p>
+          <p className="font-medium text-sm text-secondary-foreground">Color</p>
           <ColorPicker theme={config.ui.theme} />
         </div>
         <div className="flex flex-row justify-between grow items-center">
           <div>
-            <p className="font-medium text-sm">
-              Logo <span className="text-gray-400 font-normal">(optional)</span>
+            <p className="font-medium text-sm text-secondary-foreground">
+              Logo{" "}
+              <span className="text-fg-tertiary font-normal">(optional)</span>
             </p>
-            <p className="text-gray-400 font-normal text-xs">
-              PNG, JPG, GIF files accepted
+            <p className="text-fg-tertiary font-normal text-xs">
+              SVG or PNG, max 320x48 px
             </p>
           </div>
           <PhotoUploads mode={config.ui.theme} />
diff --git a/examples/ui-demo/src/components/icons/palette.tsx b/examples/ui-demo/src/components/icons/palette.tsx
new file mode 100644
index 0000000000..da059f1d70
--- /dev/null
+++ b/examples/ui-demo/src/components/icons/palette.tsx
@@ -0,0 +1,22 @@
+export const PaletteIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="palette">
+        <path
+          id="Vector"
+          d="M10.0002 5V5.02769M5.02769 10.0002H5M13.5358 6.46462L13.5162 6.4842M6.48431 13.5161L6.46473 13.5357M6.48431 6.48389L6.46473 6.46431M10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 11.345 16.7572 12.24 15.4121 12.24H14.89C14.6204 12.24 14.3545 12.3028 14.1133 12.4233C13.2554 12.8523 12.9077 13.8954 13.3367 14.7533C13.4572 14.9945 13.52 15.2604 13.52 15.53V15.6876C13.52 16.6048 13.0053 17.4733 12.1208 17.7158C11.4454 17.9011 10.7342 18 10 18Z"
+          stroke="#020617"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};