refactor(♻️ Add defaults everywhere (+ settings page)):

apps/builder/components/theme/GeneralSettings/ColorPicker.tsx

@@ -11,7 +11,7 @@ import {
   Input,
   Button,
 } from '@chakra-ui/react'
-import React, { useEffect, useState } from 'react'
+import React, { ChangeEvent, useEffect, useState } from 'react'
 
 const colorsSelection: `#${string}`[] = [
   '#264653',
@@ -38,6 +38,9 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [color])
 
+  const handleColorChange = (e: ChangeEvent<HTMLInputElement>) =>
+    setColor(e.target.value)
+
   return (
     <Popover variant="picker">
       <PopoverTrigger>
@@ -89,9 +92,7 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
             aria-label="Color value"
             size="sm"
             value={color}
-            onChange={(e) => {
-              setColor(e.target.value)
-            }}
+            onChange={handleColorChange}
           />
         </PopoverBody>
       </PopoverContent>

apps/builder/components/theme/GeneralSettings/GeneralSettings.tsx

@@ -1,16 +1,14 @@
 import { Stack } from '@chakra-ui/react'
-import { Background, BackgroundType, GeneralTheme } from 'models'
+import { Background, GeneralTheme } from 'models'
 import React from 'react'
 import { BackgroundSelector } from './BackgroundSelector'
 import { FontSelector } from './FontSelector'
 
 type Props = {
-  generalTheme?: GeneralTheme
+  generalTheme: GeneralTheme
   onGeneralThemeChange: (general: GeneralTheme) => void
 }
 
-const defaultFont = 'Open Sans'
-
 export const GeneralSettings = ({
   generalTheme,
   onGeneralThemeChange,
@@ -24,11 +22,11 @@ export const GeneralSettings = ({
   return (
     <Stack spacing={6}>
       <FontSelector
-        activeFont={generalTheme?.font ?? defaultFont}
+        activeFont={generalTheme.font}
         onSelectFont={handleSelectFont}
       />
       <BackgroundSelector
-        background={generalTheme?.background ?? { type: BackgroundType.NONE }}
+        background={generalTheme.background}
         onBackgroundChange={handleBackgroundChange}
       />
     </Stack>