theme-dropdown and lifi widget install back (#367)

Co-authored-by: Willy Ogorzaly <[email protected]>
Nounspace · Aug 29, 2024 · 6ae36ec · 6ae36ec
1 parent 7f640af
commit 6ae36ec
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 136 deletions.
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "@heroicons/react": "^2.0.18",
     "@hookform/resolvers": "^3.3.4",
     "@internationalized/date": "^3.5.4",
-    "@lifi/widget": "^3.3.0",
+    "@lifi/widget": "^3.4.4",
     "@mod-protocol/core": "^0.2.1",
     "@mod-protocol/mod-registry": "^0.2.2",
     "@mod-protocol/react": "^0.2.0",

diff --git a/src/common/lib/theme/ThemeSettingsEditor.tsx b/src/common/lib/theme/ThemeSettingsEditor.tsx
@@ -131,25 +131,32 @@ export function ThemeSettingsEditor({
     <>
       <div className="flex flex-col h-full gap-6">
         {/* Theme Editor Title */}
-        <div className="flex items-center gap-1">
+        <div className="flex-col items-center">
           <div className="font-semibold">Edit Theme</div>
+          <p className="text-gray-400 text-sm">
+            Select a template or{" "}
+            <a
+              href="https://nounspace.notion.site/Quick-start-Customization-f5aae8f1bef24309a13ca561d7b80fa7?pvs=4"
+              target="_blank"
+              rel="noreferrer noopener"
+              className="underline cursor-pointer"
+            >
+              learn how to customize
+            </a>
+          </p>
         </div>
-
         <div className="h-full overflow-auto flex flex-col gap-4 -mx-2 px-2">
           <div className="grid gap-4">
-            {/* Theme Card Example */}
-            <ThemeCard themeProps={theme.properties} />
-
-            {/* Templates Dropdown */}
             <label>
               <input
                 className="peer/showLabel absolute scale-0"
                 type="checkbox"
               />
-              <span className="block max-h-14 max-w-xs overflow-hidden rounded-lg px-4 py-0 shadow-md transition-all duration-300 peer-checked/showLabel:max-h-full">
-                <h4 className="flex h-14 cursor-pointer items-center font-bold">
-                  Templates
-                </h4>
+              {/* Templates Dropdown */}
+              <span className="block max-h-12 max-w-xs overflow-hidden rounded-lg transition-all duration-300 peer-checked/showLabel:max-h-full p-1">
+                {/* Theme Card Example */}
+                <ThemeCard themeProps={theme.properties} />
+
                 <div className="grid grid-cols-2 gap-3 pb-3 pt-3">
                   {THEMES.map((theme, i) => (
                     <ThemeCard
@@ -167,12 +174,12 @@ export function ThemeSettingsEditor({
             <div className="grid gap-2">
               <Tabs defaultValue="fonts">
                 <TabsList className={tabListClasses}>
-                  <TabsTrigger value="fonts" className={tabTriggerClasses}>
-                    Fonts
-                  </TabsTrigger>
                   <TabsTrigger value="style" className={tabTriggerClasses}>
                     Style
                   </TabsTrigger>
+                  <TabsTrigger value="fonts" className={tabTriggerClasses}>
+                    Fonts
+                  </TabsTrigger>
                   <TabsTrigger value="code" className={tabTriggerClasses}>
                     Code
                   </TabsTrigger>