Individual fidget styles

Nounspace · Jul 7, 2024 · 222fae2 · 222fae2
1 parent 2c40952
commit 222fae2
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 65 deletions.
diff --git a/src/common/components/organisms/FidgetSettingsEditor.tsx b/src/common/components/organisms/FidgetSettingsEditor.tsx
@@ -70,7 +70,7 @@ const FidgetSettingsRow: React.FC<FidgetSettingsRowProps> = ({
   return (
     <div
       className={mergeClasses(
-        "text-gray-700 md:flex-col md:items-center m-2",
+        "text-gray-700 md:flex-col md:items-center",
         hide && "hidden",
       )}
       id={id}
@@ -251,7 +251,7 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
           </>
         ) : (
           // X Button and Save Button (shows first)
-          <div className="flex pt-2 gap-2 flex items-center justify-center">
+          <div className="pt-2 gap-2 flex items-center justify-center">
             <Button
               type="button"
               onClick={() => setShowConfirmCancel(true)}

diff --git a/src/common/fidgets/FidgetWrapper.tsx b/src/common/fidgets/FidgetWrapper.tsx
@@ -171,15 +171,16 @@ export function FidgetWrapper({
             : "size-full overflow-hidden"
         }
         style={{
-          boxShadow: "var(--user-theme-fidget-shadow)",
-          borderWidth: "var(--user-theme-fidget-border-width)",
-          borderColor: "var(--user-theme-fidget-border-color)",
+          boxShadow: settingsWithDefaults.fidgetShadow,
+          borderWidth: settingsWithDefaults.fidgetBorderWidth,
+          borderColor: settingsWithDefaults.fidgetBorderColor,
+          background: settingsWithDefaults.background,
         }}
       >
         {bundle.config.editable && (
           <button
             onMouseDown={onClickEdit}
-            className="flex items-center justify-center opacity-0 hover:opacity-50 duration-500 absolute inset-0 z-10 flex bg-slate-400 bg-opacity-50 rounded-md"
+            className="items-center justify-center opacity-0 hover:opacity-50 duration-500 absolute inset-0 z-10 flex bg-slate-400 bg-opacity-50 rounded-md"
           ></button>
         )}
         <ScopedStyles cssStyles={userStyles} className="size-full">

diff --git a/src/common/fidgets/index.d.ts b/src/common/fidgets/index.d.ts
@@ -3,9 +3,19 @@ import CSSInput from "@/common/ui/molecules/CSSInput";
 import HTMLInput from "@/common/ui/molecules/HTMLInput";
 import ColorSelector from "@/common/components/molecules/ColorSelector";
 import FontSelector from "@/common/components/molecules/FontSelector";
-import type { ThemeSettings } from "@/common/lib/theme";
+import type { ThemeSettings, FontFamily, Color } from "@/common/lib/theme";
 
 export type FidgetSettings = Record<string, any>;
+export type FidgetSettingsStyle = {
+  background?: Color;
+  fontFamily?: FontFamily;
+  fontColor?: Color;
+  headingsFontFamily?: FontFamily;
+  headingsFontColor?: Color;
+  fidgetBorderWidth?: string;
+  fidgetBorderColor?: Color;
+  fidgetShadow?: string;
+};
 export type FidgetData = Record<string, any>;
 
 export type FidgetConfig<

diff --git a/src/common/lib/theme/helpers.ts b/src/common/lib/theme/helpers.ts
@@ -23,7 +23,7 @@ export const SHADOW_STYLES = [
 ];
 
 export const tabListClasses =
-  "w-full p-0 justify-between bg-transparent rounded-none";
+  "w-full p-0 justify-start bg-transparent rounded-none";
 export const tabTriggerClasses =
   "data-[state=active]:text-blue-600 text-md data-[state=active]:shadow-none data-[state=active]:border-b data-[state=active]:rounded-none data-[state=active]:border-blue-600 data-[state=active]:border-solid px-3 py-2";
 export const tabContentClasses =

diff --git a/src/fidgets/example.tsx b/src/fidgets/example.tsx
@@ -1,10 +1,16 @@
 import React, { useState } from "react";
 import TextInput from "@/common/components/molecules/TextInput";
-import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets";
+import {
+  FidgetArgs,
+  FidgetProperties,
+  FidgetModule,
+  type FidgetSettingsStyle,
+} from "@/common/fidgets";
+import { defaultStyleFields } from "@/fidgets/helpers";
 
 export type ExampleFidgetSettings = {
   text: string;
-};
+} & FidgetSettingsStyle;
 
 const exampleProperties: FidgetProperties = {
   fidgetName: "example",
@@ -17,6 +23,7 @@ const exampleProperties: FidgetProperties = {
       inputSelector: TextInput,
       group: "settings",
     },
+    ...defaultStyleFields,
   ],
   size: {
     minHeight: 1,

diff --git a/src/fidgets/helpers.tsx b/src/fidgets/helpers.tsx
@@ -0,0 +1,36 @@
+import ColorSelector from "@/common/components/molecules/ColorSelector";
+import BorderSelector from "@/common/components/molecules/BorderSelector";
+import ShadowSelector from "@/common/components/molecules/ShadowSelector";
+
+import { type FidgetFieldConfig } from "@/common/fidgets";
+
+export const defaultStyleFields: FidgetFieldConfig[] = [
+  {
+    fieldName: "background",
+    default: "var(--user-theme-fidget-background)",
+    required: false,
+    inputSelector: ColorSelector,
+    group: "style",
+  },
+  {
+    fieldName: "fidgetBorderWidth",
+    default: "var(--user-theme-fidget-border-width)",
+    required: false,
+    inputSelector: BorderSelector,
+    group: "style",
+  },
+  {
+    fieldName: "fidgetBorderColor",
+    default: "var(--user-theme-fidget-border-color)",
+    required: false,
+    inputSelector: ColorSelector,
+    group: "style",
+  },
+  {
+    fieldName: "fidgetShadow",
+    default: "var(--user-theme-fidget-shadow)",
+    required: false,
+    inputSelector: ShadowSelector,
+    group: "style",
+  },
+];
diff --git a/src/fidgets/ui/IFrame.tsx b/src/fidgets/ui/IFrame.tsx
@@ -1,12 +1,18 @@
 import React from "react";
 import TextInput from "@/common/components/molecules/TextInput";
-import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets";
+import {
+  FidgetArgs,
+  FidgetProperties,
+  FidgetModule,
+  type FidgetSettingsStyle,
+} from "@/common/fidgets";
 import { isValidUrl } from "@/common/lib/utils/url";
 import useSafeUrl from "@/common/lib/hooks/useSafeUrl";
+import { defaultStyleFields } from "@/fidgets/helpers";
 
 export type IFrameFidgetSettings = {
   url: string;
-};
+} & FidgetSettingsStyle;
 
 const DISALLOW_URL_PATTERNS = [
   /javascript:/i,
@@ -25,6 +31,7 @@ const frameConfig: FidgetProperties = {
       inputSelector: TextInput,
       group: "settings",
     },
+    ...defaultStyleFields,
   ],
   size: {
     minHeight: 2,

diff --git a/src/fidgets/ui/Text.tsx b/src/fidgets/ui/Text.tsx
@@ -3,29 +3,24 @@ import TextInput from "@/common/components/molecules/TextInput";
 import CSSInput from "@/common/components/molecules/CSSInput";
 import ColorSelector from "@/common/components/molecules/ColorSelector";
 import FontSelector from "@/common/components/molecules/FontSelector";
-import BorderSelector from "@/common/components/molecules/BorderSelector";
-import ShadowSelector from "@/common/components/molecules/ShadowSelector";
-import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets";
+import {
+  FidgetArgs,
+  FidgetProperties,
+  FidgetModule,
+  type FidgetSettingsStyle,
+} from "@/common/fidgets";
 import {
   CardHeader,
   CardContent,
   CardTitle,
   CardDescription,
 } from "@/common/components/atoms/card";
-import { FontFamily, Color } from "@/common/lib/theme";
+import { defaultStyleFields } from "@/fidgets/helpers";
 
 export type TextFidgetSettings = {
   title?: string;
   text: string;
-  fontFamily: FontFamily;
-  fontColor: Color;
-  headingsFontFamily: FontFamily;
-  headingsFontColor: Color;
-  background: Color;
-  fidgetBorderWidth: string;
-  fidgetBorderColor: Color;
-  fidgetShadow: string;
-};
+} & FidgetSettingsStyle;
 
 export const textConfig: FidgetProperties = {
   fidgetName: "text",
@@ -73,34 +68,7 @@ export const textConfig: FidgetProperties = {
       inputSelector: ColorSelector,
       group: "style",
     },
-    {
-      fieldName: "background",
-      default: "var(--user-theme-fidget-background)",
-      required: false,
-      inputSelector: ColorSelector,
-      group: "style",
-    },
-    {
-      fieldName: "fidgetBorderWidth",
-      default: "var(--user-theme-fidget-border-width)",
-      required: false,
-      inputSelector: BorderSelector,
-      group: "style",
-    },
-    {
-      fieldName: "fidgetBorderColor",
-      default: "var(--user-theme-fidget-border-color)",
-      required: false,
-      inputSelector: ColorSelector,
-      group: "style",
-    },
-    {
-      fieldName: "fidgetShadow",
-      default: "var(--user-theme-fidget-shadow)",
-      required: false,
-      inputSelector: ShadowSelector,
-      group: "style",
-    },
+    ...defaultStyleFields,
     {
       fieldName: "css",
       default: "",
@@ -121,16 +89,7 @@ export const Text: React.FC<FidgetArgs<TextFidgetSettings>> = ({
   settings,
 }) => {
   return (
-    <div
-      style={{
-        background: settings.background,
-        height: "100%",
-        borderWidth: settings.fidgetBorderWidth,
-        borderColor: settings.fidgetBorderColor,
-        // Not visible because of the outer div having overflow: hidden
-        boxShadow: settings.fidgetShadow,
-      }}
-    >
+    <div className="h-full">
       {settings?.title && (
         <CardHeader className="p-4 pb-2">
           <CardTitle

diff --git a/src/fidgets/ui/gallery.tsx b/src/fidgets/ui/gallery.tsx
@@ -1,10 +1,16 @@
 import React, { CSSProperties } from "react";
 import TextInput from "@/common/components/molecules/TextInput";
-import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets";
+import {
+  FidgetArgs,
+  FidgetProperties,
+  FidgetModule,
+  type FidgetSettingsStyle,
+} from "@/common/fidgets";
+import { defaultStyleFields } from "@/fidgets/helpers";
 
 export type GalleryFidgetSettings = {
   imageUrl: string;
-};
+} & FidgetSettingsStyle;
 
 const galleryConfig: FidgetProperties = {
   fidgetName: "gallery",
@@ -18,6 +24,7 @@ const galleryConfig: FidgetProperties = {
         "https://storage.googleapis.com/papyrus_images/d467b07030969fab95a8f44b1de596ab.png",
       group: "settings",
     },
+    ...defaultStyleFields,
   ],
   size: {
     minHeight: 2,

diff --git a/src/fidgets/ui/profile.tsx b/src/fidgets/ui/profile.tsx
@@ -9,6 +9,7 @@ import { useLoadFarcasterUser } from "@/common/data/queries/farcaster";
 import { useFarcasterSigner } from "../farcaster";
 import { followUser, unfollowUser } from "../farcaster/utils";
 import { Button } from "@/common/components/atoms/button";
+import { defaultStyleFields } from "@/fidgets/helpers";
 
 export type ProfileFidgetSettings = {
   fid: number;
@@ -24,6 +25,7 @@ const profileProperties: FidgetProperties = {
       required: true,
       inputSelector: TextInput,
     },
+    ...defaultStyleFields,
   ],
   size: {
     minHeight: 3,