fix: side bar updates

alchemyplatform · Sep 30, 2024 · 75d0a48 · 75d0a48
1 parent 9d95676
commit 75d0a48
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
+  );
+};