fix: themes mobile view

mehdibha · Oct 25, 2024 · e6ba720 · e6ba720
1 parent a4b2279
commit e6ba720
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 37 deletions.
diff --git a/www/src/app/themes/page.tsx b/www/src/app/themes/page.tsx
@@ -16,8 +16,8 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <PreviewProvider>
-      <div className="container grid grid-cols-12 gap-10">
-        <div className="col-span-6 py-16">
+      <div className="container grid grid-cols-2 gap-10">
+        <div className="col-span-2 py-16 lg:col-span-1">
           <h1 className="font-heading xs:text-2xl text-pretty text-xl font-semibold tracking-tighter sm:text-3xl md:text-4xl">
             Everything starts with identity.
           </h1>
@@ -36,7 +36,7 @@ export default function Page() {
           </div>
           <ThemeCustomizer className="mt-16" />
         </div>
-        <div className="sticky top-0 col-span-6 flex h-screen items-center justify-center">
+        <div className="sticky top-0 hidden h-screen items-center justify-center lg:flex">
           <Preview />
         </div>
       </div>

diff --git a/www/src/app/themes/preview.tsx b/www/src/app/themes/preview.tsx
@@ -116,9 +116,9 @@ const ColorPreview = ({
   return (
     <motion.div>
       {showBackground && (
-        <div className="bg-bg flex h-[300px] w-[500px] flex-row border">
+        <div className="bg-bg flex h-[300px] w-[400px] flex-row border xl:w-[500px]">
           <div className="flex h-[50%] items-center justify-center border-r md:h-[100%] md:w-[50%]">
-            <div className="bg-bg relative flex size-40 items-center justify-center rounded-[12px] border">
+            <div className="bg-bg relative flex size-32 items-center justify-center rounded-[12px] border">
               <div className="bg-bg-muted text-fg-muted flex size-6 items-center justify-center rounded-full text-xs">
                 1
               </div>
@@ -128,7 +128,7 @@ const ColorPreview = ({
             </div>
           </div>
           <div className="bg-bg-muted flex h-[50%] items-center justify-center border-r border-t md:h-[100%] md:w-[50%] md:border-none">
-            <div className="bg-bg relative flex size-40 items-center justify-center rounded-[12px] border">
+            <div className="bg-bg relative flex size-32 items-center justify-center rounded-[12px] border">
               <div className="bg-bg-muted text-fg-muted flex size-6 items-center justify-center rounded-full text-xs">
                 1
               </div>
@@ -141,30 +141,31 @@ const ColorPreview = ({
       )}
       <motion.div
         layoutId="color-preview-buttons"
-        className={cn("flex items-center gap-6", showBackground && "mt-6")}
+        className={cn(
+          "flex flex-wrap items-center gap-2",
+          showBackground && "mt-6"
+        )}
       >
-        <div className="flex items-center gap-2">
-          <MotionButton variant="default" layoutId="button-default">
-            default
-          </MotionButton>
-          {color === "neutral" ? (
-            <MotionButton variant="primary" layoutId="button-primary">
-              primary
-            </MotionButton>
-          ) : (
-            <MotionButton variant={color} layoutId="button-primary">
-              primary
-            </MotionButton>
-          )}
-          <MotionButton variant="outline" layoutId="button-outline">
-            outline
+        <MotionButton variant="default" layoutId="button-default">
+          default
+        </MotionButton>
+        {color === "neutral" ? (
+          <MotionButton variant="primary" layoutId="button-primary">
+            primary
           </MotionButton>
-          <MotionButton variant="quiet" layoutId="button-quiet">
-            quiet
+        ) : (
+          <MotionButton variant={color} layoutId="button-primary">
+            primary
           </MotionButton>
-        </div>
+        )}
+        <MotionButton variant="outline" layoutId="button-outline">
+          outline
+        </MotionButton>
+        <MotionButton variant="quiet" layoutId="button-quiet">
+          quiet
+        </MotionButton>
         {color === "neutral" && (
-          <div className="flex items-center gap-2">
+          <>
             <MotionToggleButton
               variant="quiet"
               defaultSelected
@@ -175,7 +176,7 @@ const ColorPreview = ({
             <MotionToggleButton variant="outline" layoutId="toggle-outline">
               <PinIcon />
             </MotionToggleButton>
-          </div>
+          </>
         )}
       </motion.div>
       <div className="mt-6">

diff --git a/www/src/app/themes/theme-customizer.tsx b/www/src/app/themes/theme-customizer.tsx
@@ -93,7 +93,7 @@ export const ThemeCustomizer = (
         </Skeleton>
         <div>
           <Label>Base colors</Label>
-          <div className="mt-2 flex items-center gap-2">
+          <div className="mt-2 grid grid-cols-3 gap-2 md:grid-cols-5 lg:grid-cols-3 xl:grid-cols-5">
             {(
               [
                 {
@@ -126,7 +126,7 @@ export const ThemeCustomizer = (
               <Skeleton
                 key={colorBase.value}
                 show={isLoading}
-                className="flex-1"
+                // className="flex-1"
               >
                 <ColorPicker
                   variant="outline"
@@ -140,9 +140,9 @@ export const ThemeCustomizer = (
                   onOpenChange={() => {
                     setPreview(`color-${colorBase.value}`);
                   }}
-                  className="flex-1"
+                  // className="flex-1"
                 >
-                  {colorBase.label}
+                  <span className="truncate">{colorBase.label}</span>
                 </ColorPicker>
               </Skeleton>
             ))}
@@ -420,7 +420,7 @@ const ColorScale = ({ label, value }: { label: string; value: BaseColor }) => {
       <ul className="grid w-full grid-cols-10 gap-2">
         {shades.map((color, index) => (
           <li key={index} className="col-span-1 h-10">
-            <Tooltip content={`${value}-${index * 100}`}>
+            <Tooltip content={`${value}-${(index + 1) * 100}`}>
               <Skeleton show={isLoading} className="h-full w-full">
                 <AriaButton
                   className="h-full w-full rounded-md border"

diff --git a/www/src/components/sidebar.tsx b/www/src/components/sidebar.tsx
@@ -305,12 +305,12 @@ const SearchCommandDialog = ({ isCollapsed }: { isCollapsed: boolean }) => {
         }
         isDisabled={!isCollapsed}
       >
-        <SidebarButton variant="outline" className="bg-bg-inverse/5">
+        <SidebarButton variant="outline">
           <SearchIcon />
           <div className="flex flex-1 flex-row items-center justify-between">
             <span>Search </span>
-            <Kbd className="flex size-6 items-center justify-center p-0 text-xs">
-              ⌘ K
+            <Kbd className="flex items-center justify-center p-1 text-xs">
+              ⌘K
             </Kbd>
           </div>
         </SidebarButton>

diff --git a/www/src/lib/colors.ts b/www/src/lib/colors.ts
@@ -30,7 +30,7 @@ const defaultConfig = {
     colors: {
       neutral: {
         baseColors: ["#000000"],
-        ratios: [1, 1.5, 1.8, 2.23, 3.16, 4.78, 6.36, 8.28, 13.2, 15.2],
+        ratios: [1.05, 1.25, 1.7, 2.23, 3.16, 4.78, 6.36, 8.28, 13.2, 15.2],
       },
       success: {
         baseColors: ["#1A9338"],
@@ -56,7 +56,7 @@ const defaultConfig = {
     colors: {
       neutral: {
         baseColors: ["#ffffff"],
-        ratios: [1.25, 1.5, 1.8, 2.23, 3.16, 4.78, 6.36, 8.28, 13.2, 15.2],
+        ratios: [1, 1.25, 1.7, 2.23, 3.16, 4.78, 6.36, 8.28, 13.2, 15.2],
       },
       success: {
         baseColors: ["#1A9338"],