feature: use white as default demo page background color

devflowinc · Jan 6, 2025 · 511ece6 · 511ece6
1 parent 112d157
commit 511ece6
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 63 deletions.
diff --git a/frontends/dashboard/src/hooks/usePublicPageSettings.tsx b/frontends/dashboard/src/hooks/usePublicPageSettings.tsx
@@ -90,19 +90,18 @@ export const { use: usePublicPage, provider: PublicPageProvider } =
       }
     });
 
-    // Selecting blank as the hero pattern should reset everything else
     // Selecting another pattern builds the svg field
     createEffect(() => {
       const pattern = extraParams.heroPattern?.heroPatternName;
       const foreground = extraParams.heroPattern?.foregroundColor;
       if (hasLoaded()) {
-        if (pattern == "Blank" || !pattern) {
+        if (!pattern) {
           setExtraParams("heroPattern", {
-            heroPatternName: "Blank",
+            heroPatternName: "Solid",
             heroPatternSvg: "",
             foregroundColor: "#ffffff",
             foregroundOpacity: 0.5,
-            backgroundColor: "#f3f3f3",
+            backgroundColor: "#ffffff",
           });
         } else if (pattern == "Solid") {
           setExtraParams("heroPattern", (prev) => ({

diff --git a/frontends/dashboard/src/pages/dataset/HeroPatterns.tsx b/frontends/dashboard/src/pages/dataset/HeroPatterns.tsx
@@ -2,9 +2,6 @@ export const HeroPatterns: Record<
   string,
   (color: string, opacity: number) => string
 > = {
-  Blank: () => {
-    return "";
-  },
   Solid: (foregroundColor: string, foregroundOpacity: number) => {
     const encoded = btoa(
       `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">

diff --git a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
@@ -659,77 +659,70 @@ const PublicPageControls = () => {
                 setExtraParams("heroPattern", "heroPatternName", option);
               }}
               class="bg-white py-1"
-              selected={extraParams.heroPattern?.heroPatternName || "Blank"}
+              selected={extraParams.heroPattern?.heroPatternName || "Solid"}
               options={Object.keys(HeroPatterns)}
             />
           </div>
-          <Show when={extraParams["heroPattern"]?.heroPatternName !== "Blank"}>
-            <div class="flex flex-row items-center justify-start gap-4 pt-4">
-              <div class="">
+          <div class="flex flex-row items-center justify-start gap-4 pt-4">
+            <div class="">
+              <label class="block" for="">
+                {extraParams.heroPattern?.heroPatternName === "Solid"
+                  ? "Background Color"
+                  : "Foreground Color"}
+              </label>
+              <input
+                placeholder="#FFFFFF"
+                value={extraParams.heroPattern?.foregroundColor || "#FFFFFF"}
+                onInput={(e) => {
+                  setExtraParams(
+                    "heroPattern",
+                    "foregroundColor",
+                    e.currentTarget.value,
+                  );
+                }}
+                class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+              />
+            </div>
+            <div class="">
+              <Show when={extraParams.heroPattern?.heroPatternName !== "Solid"}>
                 <label class="block" for="">
-                  Foreground Color
+                  Background Color
                 </label>
                 <input
                   placeholder="#FFFFFF"
-                  value={extraParams.heroPattern?.foregroundColor || "#FFFFFF"}
-                  onInput={(e) => {
+                  value={extraParams.heroPattern?.backgroundColor || "#FFFFFF"}
+                  onChange={(e) => {
                     setExtraParams(
                       "heroPattern",
-                      "foregroundColor",
+                      "backgroundColor",
                       e.currentTarget.value,
                     );
                   }}
                   class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
                 />
-              </div>
-              <div class="">
-                <Show
-                  when={
-                    extraParams.heroPattern?.heroPatternName !== "Blank" &&
-                    extraParams.heroPattern?.heroPatternName !== "Solid"
-                  }
-                >
-                  <label class="block" for="">
-                    Background Color
-                  </label>
-                  <input
-                    placeholder="#FFFFFF"
-                    value={
-                      extraParams.heroPattern?.backgroundColor || "#FFFFFF"
-                    }
-                    onChange={(e) => {
-                      setExtraParams(
-                        "heroPattern",
-                        "backgroundColor",
-                        e.currentTarget.value,
-                      );
-                    }}
-                    class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-                  />
-                </Show>
-              </div>
-              <div class="">
-                <label class="block" for="">
-                  Foreground Opacity
-                </label>
-                <input
-                  type="range"
-                  min="0"
-                  max="100"
-                  onChange={(e) => {
-                    setExtraParams(
-                      "heroPattern",
-                      "foregroundOpacity",
-                      parseInt(e.currentTarget.value) / 100,
-                    );
-                  }}
-                  value={
-                    (extraParams.heroPattern?.foregroundOpacity || 0.5) * 100
-                  }
-                />
-              </div>
+              </Show>
+            </div>
+            <div class="">
+              <label class="block" for="">
+                Foreground Opacity
+              </label>
+              <input
+                type="range"
+                min="0"
+                max="100"
+                onChange={(e) => {
+                  setExtraParams(
+                    "heroPattern",
+                    "foregroundOpacity",
+                    parseInt(e.currentTarget.value) / 100,
+                  );
+                }}
+                value={
+                  (extraParams.heroPattern?.foregroundOpacity || 0.5) * 100
+                }
+              />
             </div>
-          </Show>
+          </div>
           <div class="grow" />
           <div class="grow">
             <div class="flex items-center gap-1">