refactor: change color picker input on builder, add bg transition to …

…appkit (#3465)
reown-com · Dec 16, 2024 · f83d09c · f83d09c
1 parent 0439fb9
commit f83d09c
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 149 deletions.
diff --git a/.changeset/clever-rings-sleep.md b/.changeset/clever-rings-sleep.md
@@ -0,0 +1,22 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+refactor: adds background transition
diff --git a/apps/builder/components/configuration-sections/section-design.tsx b/apps/builder/components/configuration-sections/section-design.tsx
@@ -8,8 +8,6 @@ import { ThemeMode } from '@reown/appkit/react'
 import { cn } from '@/lib/utils'
 import { useSnapshot } from 'valtio'
 import { ThemeStore } from '@/lib/theme-store'
-import { HexColorPicker } from 'react-colorful'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import Image from 'next/image'
 import { ACCENT_COLORS, BG_COLORS, RADIUS_NAME_VALUE_MAP, FONT_OPTIONS } from '@/lib/constants'
 
@@ -18,6 +16,26 @@ export function SectionDesign() {
   const { fontFamily, mixColor, accentColor, borderRadius } = useSnapshot(ThemeStore.state)
   const [radius, setRadius] = React.useState('M')
 
+  function handleColorPickerClick(inputId: string) {
+    const input = document.getElementById(inputId)
+    input?.click()
+  }
+
+  function handleAccentColorChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const newColor = e.target.value
+    if (/^#[0-9A-F]{6}$/i.test(newColor)) {
+      ThemeStore.setAccentColor(newColor)
+    }
+  }
+
+  function handleMixColorChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const newColor = e.target.value
+    if (/^#[0-9A-F]{6}$/i.test(newColor)) {
+      ThemeStore.setMixColor(newColor)
+      ThemeStore.setMixColorStrength(8)
+    }
+  }
+
   return (
     <div className="space-y-4">
       <div className="space-y-2">
@@ -109,7 +127,7 @@ export function SectionDesign() {
       </div>
 
       <div className="space-y-2">
-        <Label className="text-sm text-text-secondary">Main</Label>
+        <Label className="text-sm text-text-secondary">Accent</Label>
         <div className="grid grid-cols-5 gap-2">
           {ACCENT_COLORS.map((color, index) => (
             <button
@@ -131,31 +149,34 @@ export function SectionDesign() {
               ></div>
             </button>
           ))}
-          <Popover>
-            <PopoverTrigger asChild>
-              <button
-                className={cn(
-                  'flex items-center justify-center p-4 rounded-2xl transition-colors bg-fg-secondary hover:bg-fg-tertiary border border-transparent h-[38px]',
-                  !ACCENT_COLORS.includes(accentColor) && accentColor !== ''
-                    ? 'border-fg-accent bg-fg-accent/10 hover:bg-fg-accent/10'
-                    : null
-                )}
-                aria-label="Custom color picker"
-              >
-                <Image
-                  src="/color-picker-icon.png"
-                  alt="Color picker icon"
-                  objectFit="cover"
-                  width={16}
-                  height={16}
-                  className="rounded-2xl aspect-square"
-                />
-              </button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-3">
-              <HexColorPicker color={accentColor} onChange={ThemeStore.setAccentColor} />
-            </PopoverContent>
-          </Popover>
+          <div className="relative">
+            <button
+              onClick={() => handleColorPickerClick('accent-color-input')}
+              className={cn(
+                'w-full flex items-center justify-center p-4 rounded-2xl transition-colors bg-fg-secondary hover:bg-fg-tertiary border border-transparent h-[38px]',
+                !ACCENT_COLORS.includes(accentColor) && accentColor !== ''
+                  ? 'border-fg-accent bg-fg-accent/10 hover:bg-fg-accent/10'
+                  : null
+              )}
+              aria-label="Custom color picker"
+            >
+              <Image
+                src="/color-picker-icon.png"
+                alt="Color picker icon"
+                objectFit="cover"
+                width={16}
+                height={16}
+                className="rounded-2xl aspect-square"
+              />
+            </button>
+            <input
+              id="accent-color-input"
+              type="color"
+              value={accentColor}
+              onChange={handleAccentColorChange}
+              className="absolute invisible"
+            />
+          </div>
         </div>
       </div>
 
@@ -181,37 +202,34 @@ export function SectionDesign() {
               ></div>
             </button>
           ))}
-          <Popover>
-            <PopoverTrigger asChild>
-              <button
-                className={cn(
-                  'flex items-center justify-center p-4 rounded-2xl transition-colors bg-fg-secondary hover:bg-fg-tertiary border border-transparent h-[38px]',
-                  !BG_COLORS.includes(mixColor) && mixColor !== ''
-                    ? 'border-fg-accent bg-fg-accent/10 hover:bg-fg-accent/10'
-                    : null
-                )}
-                aria-label="Custom background color picker"
-              >
-                <Image
-                  src="/color-picker-icon.png"
-                  alt="Color picker icon"
-                  objectFit="cover"
-                  width={16}
-                  height={16}
-                  className="rounded-2xl aspect-square"
-                />
-              </button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-3">
-              <HexColorPicker
-                color={mixColor}
-                onChange={color => {
-                  ThemeStore.setMixColor(color)
-                  ThemeStore.setMixColorStrength(8)
-                }}
+          <div className="relative">
+            <button
+              onClick={() => handleColorPickerClick('mix-color-input')}
+              className={cn(
+                'w-full flex items-center justify-center p-4 rounded-2xl transition-colors bg-fg-secondary hover:bg-fg-tertiary border border-transparent h-[38px]',
+                !BG_COLORS.includes(mixColor) && mixColor !== ''
+                  ? 'border-fg-accent bg-fg-accent/10 hover:bg-fg-accent/10'
+                  : null
+              )}
+              aria-label="Custom background color picker"
+            >
+              <Image
+                src="/color-picker-icon.png"
+                alt="Color picker icon"
+                objectFit="cover"
+                width={16}
+                height={16}
+                className="rounded-2xl aspect-square"
               />
-            </PopoverContent>
-          </Popover>
+            </button>
+            <input
+              id="mix-color-input"
+              type="color"
+              value={mixColor}
+              onChange={handleMixColorChange}
+              className="absolute invisible"
+            />
+          </div>
         </div>
       </div>
     </div>

diff --git a/apps/builder/components/ui/popover.tsx b/apps/builder/components/ui/popover.tsx
diff --git a/apps/builder/package.json b/apps/builder/package.json
@@ -17,7 +17,6 @@
     "@radix-ui/react-dialog": "1.1.2",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-label": "2.1.0",
-    "@radix-ui/react-popover": "1.1.2",
     "@radix-ui/react-radio-group": "1.2.1",
     "@radix-ui/react-select": "2.1.2",
     "@radix-ui/react-separator": "1.1.0",
@@ -37,7 +36,6 @@
     "next": "14.2.3",
     "next-themes": "0.4.3",
     "react": "18.3.1",
-    "react-colorful": "5.6.1",
     "react-dom": "18.3.1",
     "sonner": "1.4.3",
     "tailwind-merge": "2.2.1",
@@ -46,9 +44,9 @@
     "wagmi": "2.12.17"
   },
   "devDependencies": {
+    "@types/node": "20.11.5",
     "@types/react": "18.2.62",
     "@types/react-dom": "18.2.7",
-    "@types/node": "20.11.5",
     "eslint": "8.56.0",
     "eslint-config-next": "14.1.0",
     "postcss": "8",

diff --git a/packages/scaffold-ui/src/modal/w3m-modal/styles.ts b/packages/scaffold-ui/src/modal/w3m-modal/styles.ts
@@ -37,7 +37,10 @@ export default css`
     animation: zoom-in 0.2s var(--wui-ease-out-power-2);
     animation-fill-mode: backwards;
     outline: none;
-    transition: border-radius var(--wui-duration-lg) var(--wui-ease-out-power-1);
+    transition:
+      border-radius var(--wui-duration-lg) var(--wui-ease-out-power-1),
+      background-color var(--wui-duration-lg) var(--wui-ease-out-power-1);
+    will-change: border-radius, background-color;
   }
 
   :host(.embedded) wui-card {

diff --git a/packages/ui/src/composites/wui-tag/styles.ts b/packages/ui/src/composites/wui-tag/styles.ts
@@ -8,6 +8,10 @@ export default css`
     height: var(--wui-spacing-m);
     padding: 0 var(--wui-spacing-3xs) !important;
     border-radius: var(--wui-border-radius-5xs);
+    transition:
+      border-radius var(--wui-duration-lg) var(--wui-ease-out-power-1),
+      background-color var(--wui-duration-lg) var(--wui-ease-out-power-1);
+    will-change: border-radius, background-color;
   }
 
   :host > wui-text {

diff --git a/packages/ui/src/layout/wui-separator/styles.ts b/packages/ui/src/layout/wui-separator/styles.ts
@@ -15,5 +15,7 @@ export default css`
     position: absolute;
     padding: 0px 10px;
     background-color: var(--wui-color-modal-bg);
+    transition: background-color var(--wui-duration-lg) var(--wui-ease-out-power-1);
+    will-change: background-color;
   }
 `