From 78b130b64429e2d65ee0af2ffdd79e2a936d7998 Mon Sep 17 00:00:00 2001 From: Jesse Paterson Date: Sun, 1 Sep 2024 14:03:07 -0500 Subject: [PATCH] Fixing embedded feed for new users (#393) Co-authored-by: sktbrd --- .../components/molecules/LinksInput.tsx | 7 ++-- src/fidgets/farcaster/Feed.tsx | 6 +-- src/fidgets/ui/Links.tsx | 37 +++++++++++-------- src/pages/homebase/index.tsx | 6 +-- .../20240821215436_spaceOrderings.sql | 2 - 5 files changed, 31 insertions(+), 27 deletions(-) diff --git a/src/common/components/molecules/LinksInput.tsx b/src/common/components/molecules/LinksInput.tsx index c2a69a27..b0cdfb69 100644 --- a/src/common/components/molecules/LinksInput.tsx +++ b/src/common/components/molecules/LinksInput.tsx @@ -94,12 +94,12 @@ const LinksInput = forwardRef( const newLink = { text: "New Link", url: "https://", - avatar: "/images/chainEmoji.png", + avatar: "https://www.nounspace.com/images/chainEmoji.png", description: "Description", }; onChange?.([...value, newLink]); - setVisibleFields([...visibleFields, true]); // Automatically expand new link + setVisibleFields([...visibleFields, true]); }; const removeLink = (index: number) => { @@ -133,8 +133,9 @@ const LinksInput = forwardRef( value={link.url} onChange={(e: any) => { handleLinkChange(index, { ...link, url: e.target.value }); - showAdditionalFields(index); // Show fields when URL is updated + showAdditionalFields(index); }} + onFocus={() => showAdditionalFields(index)} />

= { displayName: "Select App", inputSelector: PlatformSelector, required: false, - default: { name: "farcaster", icon: "/images/farcaster.jpeg" }, + default: { name: "Farcaster", icon: "/images/farcaster.jpeg" }, }, { fieldName: "feedType", @@ -109,7 +109,7 @@ const feedProperties: FidgetProperties = { displayName: "Username", inputSelector: TextInput, required: false, - disabledIf: (settings) => settings.selectPlatform.name === "Farcaster", + disabledIf: (settings) => settings.selectPlatform.name === "farcaster", default: "thenounspace", }, { @@ -206,7 +206,7 @@ export const FEED_TYPES = [ const Feed: React.FC> = ({ settings }) => { const { - selectPlatform = { name: "farcaster", icon: "/images/farcaster.jpeg" }, + selectPlatform = { name: "Farcaster", icon: "/images/farcaster.jpeg" }, Xhandle, style, } = settings; diff --git a/src/fidgets/ui/Links.tsx b/src/fidgets/ui/Links.tsx index 4310b900..1a94533d 100644 --- a/src/fidgets/ui/Links.tsx +++ b/src/fidgets/ui/Links.tsx @@ -4,7 +4,6 @@ import CSSInput from "@/common/components/molecules/CSSInput"; import ColorSelector from "@/common/components/molecules/ColorSelector"; import FontSelector from "@/common/components/molecules/FontSelector"; import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets"; -import { defaultStyleFields } from "../helpers"; import { FidgetSettingsStyle } from "@/common/fidgets"; import { CardHeader, @@ -37,6 +36,8 @@ export type LinkFidgetSettings = { itemBackground: string; viewMode: ViewMode; description?: string; + DescriptionColor: string; + HeaderColor: string; } & FidgetSettingsStyle; export const linkConfig: FidgetProperties = { @@ -56,7 +57,7 @@ export const linkConfig: FidgetProperties = { { text: "Nouns", url: "https://nouns.wtf", - avatar: "/images/nouns.svg", + avatar: "https://nouns.wtf/static/media/noggles.7644bfd0.svg", description: "Funds ideas", }, ], @@ -66,7 +67,7 @@ export const linkConfig: FidgetProperties = { }, { fieldName: "viewMode", - default: "grid", + default: "list", required: false, inputSelector: SwitchButton, group: "style", @@ -79,7 +80,14 @@ export const linkConfig: FidgetProperties = { group: "style", }, { - fieldName: "fontColor", + fieldName: "HeaderColor", + default: "black", + required: false, + inputSelector: ColorSelector, + group: "style", + }, + { + fieldName: "DescriptionColor", default: "black", required: false, inputSelector: ColorSelector, @@ -129,9 +137,9 @@ export const linkConfig: FidgetProperties = { }, ], size: { - minHeight: 1, + minHeight: 2, maxHeight: 36, - minWidth: 4, + minWidth: 2, maxWidth: 36, }, }; @@ -141,12 +149,7 @@ export const Links: React.FC> = ({ }) => { const links = Array.isArray(settings.links) ? settings.links : []; const isGridView = settings.viewMode === "grid"; - useEffect(() => { - console.log("Links fidget settings:", settings.links); - }, [settings.links]); - useEffect(() => { - console.log("Links fidget settings:", settings.links); - }, [settings.links]); + return (

> = ({ overflow: "auto", scrollbarWidth: "none", padding: "0.5rem", + borderRadius: "1rem", }} > {settings?.title && ( @@ -167,7 +171,7 @@ export const Links: React.FC> = ({ className="text-2xl font-bold" style={{ fontFamily: settings.headingsFontFamily, - color: settings.fontColor, + color: settings.HeaderColor, }} > {settings.title} @@ -229,12 +233,12 @@ export const Links: React.FC> = ({ className="items-start text-base font-normal text-black dark:text-white flex-grow" style={{ fontFamily: settings.fontFamily, - color: settings.fontColor, + color: settings.HeaderColor, textAlign: "left", wordWrap: "break-word", overflow: "hidden", textOverflow: "ellipsis", - maxHeight: "3rem", // Adjust this value to limit the height of the text + maxHeight: "3rem", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", @@ -248,11 +252,12 @@ export const Links: React.FC> = ({ {link.description && (

{link.description} diff --git a/src/pages/homebase/index.tsx b/src/pages/homebase/index.tsx index 958c1841..232610b4 100644 --- a/src/pages/homebase/index.tsx +++ b/src/pages/homebase/index.tsx @@ -65,10 +65,10 @@ const Homebase: NextPageWithLayout = () => { args.feed = (