feat: reset background color

apps/main/package.json

@@ -34,7 +34,7 @@
     "html-loader": "4.2.0",
     "lodash": "4.17.21",
     "micro": "10.0.1",
-    "next": "14.1.0",
+    "next": "14.1.1",
     "next-axiom": "0.17.0",
     "next-connect": "0.12.2",
     "next-mdx-remote": "3.0.8",

package.json

@@ -21,7 +21,7 @@
     "eslint": "8.47.0",
     "husky": "8.0.3",
     "lint-staged": "13.2.3",
-    "next": "14.1.0",
+    "next": "14.1.1",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/analytics/package.json

@@ -18,7 +18,7 @@
     "@tremor/react": "3.6.1",
     "clsx": "2.0.0",
     "framer-motion": "10.16.5",
-    "next": "14.1.0",
+    "next": "14.1.1",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

packages/eslint-config/package.json

@@ -13,7 +13,7 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-storybook": "0.6.7",
     "eslint-plugin-unicorn": "48.0.1",
-    "next": "14.1.0",
+    "next": "14.1.1",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/trpc/package.json

@@ -27,7 +27,7 @@
     "@types/web-push": "3.6.3",
     "dayjs": "1.11.10",
     "nanoid": "5.0.7",
-    "next": "14.1.0",
+    "next": "14.1.1",
     "next-auth": "4.24.5",
     "next-axiom": "0.17.0",
     "react": "18.2.0",

packages/types/package.json

@@ -14,7 +14,7 @@
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.15",
     "csstype": "3.1.2",
-    "next": "14.1.0",
+    "next": "14.1.1",
     "next-auth": "4.24.5",
     "next-mdx-remote": "3.0.8",
     "react": "18.2.0",

packages/ui/package.json

@@ -44,7 +44,7 @@
     "debounce-promise": "3.1.2",
     "framer-motion": "10.16.5",
     "lucide-react": "0.265.0",
-    "next": "14.1.0",
+    "next": "14.1.1",
     "next-auth": "4.24.5",
     "next-axiom": "0.17.0",
     "next-mdx-remote": "3.0.8",

packages/ui/src/blocks/theme-editor/color-picker.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { IconButton, Popover, Text } from '../../components';
+import { Button, IconButton, Popover, Text } from '../../components';
 import { hexToHSL } from './utilities';
 
 export type ColorSeriesPickerProps = {
@@ -68,13 +68,15 @@ export type ColorPickerProps = {
   hintText: string;
   defaultValue: string;
   onSelectColor: (color: string) => void;
+  onReset: () => void;
 };
 
 export function ColorPicker({
   label,
   hintText,
   onSelectColor,
   defaultValue,
+  onReset,
 }: ColorPickerProps): JSX.Element {
   const [value, setValue] = React.useState(defaultValue);
   return (
@@ -85,17 +87,26 @@ export function ColorPicker({
           {hintText}
         </Text>
       </div>
-      <input
-        className={`hover:cursor-pointer [&::-moz-color-swatch-wrapper]:p-0 [&::-moz-color-swatch]:rounded-full [&::-moz-color-swatch]:border-gray-600 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-full [&::-webkit-color-swatch]:border-gray-600 ${pickerButtonStyle}`}
-        type="color"
-        name="colorPicker"
-        value={value}
-        onChange={(e) => {
-          const color = e.target.value;
-          setValue(color);
-          onSelectColor(hexToHSL(color));
-        }}
-      />
+      <div className="flex items-center gap-8">
+        <input
+          className={`hover:cursor-pointer [&::-moz-color-swatch-wrapper]:p-0 [&::-moz-color-swatch]:rounded-full [&::-moz-color-swatch]:border-gray-600 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-full [&::-webkit-color-swatch]:border-gray-600 ${pickerButtonStyle}`}
+          type="color"
+          name="colorPicker"
+          value={value}
+          onChange={(e) => {
+            const color = e.target.value;
+            setValue(color);
+            onSelectColor(hexToHSL(color));
+          }}
+        />
+        <Button
+          title="Reset to transparent background"
+          size="sm"
+          onClick={onReset}
+        >
+          Reset
+        </Button>
+      </div>
     </section>
   );
 }

packages/ui/src/blocks/theme-editor/theme-editor.tsx

@@ -73,12 +73,25 @@ export function ThemeEditor(props: ThemeEditorProps): JSX.Element {
     1500,
   );
   const activeMode = useActiveColorMode();
-  const handleSaveBackground = async (color: string) => {
-    const newTheme = mergeDeep(widgetTheme || {}, {
-      colors: {
-        [activeMode]: { bg: color },
+  const handleSaveBackground = async (color: string | null) => {
+    let newTheme: Theme = mergeDeep(
+      widgetTheme || {
+        colors: {
+          light: {},
+          dark: {},
+        },
       },
-    }) as Theme;
+      {},
+    );
+    if (color) {
+      newTheme = mergeDeep(newTheme, {
+        colors: {
+          [activeMode]: { bg: color },
+        },
+      }) as Theme;
+    } else {
+      delete newTheme.colors[activeMode].bg;
+    }
     await saveTheme(newTheme);
   };
   const handleSavePrimaryColor = async (colorKey: string) => {
@@ -130,6 +143,7 @@ export function ThemeEditor(props: ThemeEditorProps): JSX.Element {
                     '#fff',
                 )}
                 onSelectColor={handleSaveBackground}
+                onReset={() => handleSaveBackground(null)}
               />
             </ClientOnly>
           </div>

packages/ui/src/contexts/theme-context/use-theme-variables.ts

@@ -1,5 +1,5 @@
 import { Theme } from '@chirpy-dev/types';
-import { whiteA, blackA } from '@radix-ui/colors';
+import { blackA, whiteA } from '@radix-ui/colors';
 import * as React from 'react';
 
 import { siteTheme } from './site-theme';
@@ -23,16 +23,19 @@ export function useThemeVariables(theme?: Theme, selectors?: Selectors) {
     ...selectors,
   };
   const styles = React.useMemo(() => {
+    // Ignore site background, default widget background is transparent
+    const { bg: _, ...lightColors } = siteColors.light;
+    const { bg: __, ...darkColors } = siteColors.dark;
     const lightTheme = {
       colors: {
         ...FIXED_COLORS,
-        ...siteColors.light,
+        ...lightColors,
         ...theme?.colors.light,
       },
     };
     const darkTheme = {
       colors: {
-        ...siteColors.dark,
+        ...darkColors,
         ...theme?.colors.dark,
       },
     };

packages/ui/src/pages/dashboard/home.tsx

@@ -73,7 +73,7 @@ export function DashboardHome({
 
   return (
     <SiteLayout title="Dashboard">
-      <section className="space-y-10">
+      <section className="space-y-10 pb-48">
         <div className="flex flex-col items-start space-y-5 sm:flex-row sm:justify-between sm:space-x-2 sm:space-y-0">
           <PageTitle>Dashboard</PageTitle>
           <CreateProjectButton