Updated CTA card cardwrapper behavior

packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx

@@ -1,5 +1,6 @@
 import PlusIcon from '../../assets/icons/plus.svg?react';
 import React from 'react';
+import {Tooltip} from './Tooltip';
 import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 
 export function ColorOptionButtons({buttons = [], selectedName, onClick}) {
@@ -37,15 +38,16 @@ export function ColorButton({onClick, label, name, color, selectedName}) {
         <li>
             <button
                 aria-label={label}
-                className={`flex size-[2.6rem] cursor-pointer items-center justify-center rounded-full border-2 ${isActive ? 'border-green' : 'border-transparent'}`}
+                className={`group relative flex size-6 cursor-pointer items-center justify-center rounded-full border-2 ${isActive ? 'border-green' : 'border-transparent'}`}
                 data-test-id={`color-picker-${name}`}
                 type="button"
                 onClick={handleClick}
                 onMouseDown={handleMousedown}
             >
                 <span
-                    className={`${color} size-5 rounded-full border border-black/5`}
+                    className={`${color} size-[1.8rem] rounded-full border`}
                 ></span>
+                <Tooltip label={label} />
             </button>
         </li>
     );

packages/koenig-lexical/src/components/ui/ColorPicker.jsx

@@ -3,6 +3,7 @@ import React, {Fragment, useCallback, useEffect, useRef} from 'react';
 import clsx from 'clsx';
 import {Button} from './Button';
 import {HexColorInput, HexColorPicker} from 'react-colorful';
+import {Tooltip} from './Tooltip';
 import {getAccentColor} from '../../utils/getAccentColor';
 
 export function ColorPicker({value, eyedropper, hasTransparentOption, onChange}) {
@@ -119,7 +120,7 @@ function ColorSwatch({hex, accent, transparent, title, isSelected, onSelect}) {
         <button
             ref={ref}
             className={clsx(
-                `relative flex size-5 shrink-0 items-center rounded-full border border-grey-200 dark:border-grey-800`,
+                `group relative flex size-5 shrink-0 items-center rounded-full border border-grey-250 dark:border-grey-800`,
                 isSelected && 'outline outline-2 outline-green'
             )}
             style={{backgroundColor}}
@@ -128,6 +129,7 @@ function ColorSwatch({hex, accent, transparent, title, isSelected, onSelect}) {
             onClick={onSelectHandler}
         >
             {transparent && <div className="absolute left-0 top-0 z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
+            <Tooltip label={title} />
         </button>
     );
 }
@@ -154,13 +156,14 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                     customContent ? <Fragment key={swatch.title}>{customContent}</Fragment> : <ColorSwatch key={swatch.title} isSelected={selectedSwatch === swatch.title} onSelect={onSwatchChange} {...swatch} />
                 ))}
             </div>
-            <button aria-label="Pick color" className="relative size-6 rounded-full border border-grey-200 dark:border-grey-800" type="button" onClick={onTogglePicker}>
+            <button aria-label="Pick color" className="group relative size-6 rounded-full border border-grey-200 dark:border-grey-800" type="button" onClick={onTogglePicker}>
                 <div className='absolute inset-0 rounded-full bg-[conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))]' />
                 {value && !selectedSwatch && (
                     <div className="absolute inset-[3px] overflow-hidden rounded-full border border-white dark:border-grey-950" style={{backgroundColor}}>
                         {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
                     </div>
                 )}
+                <Tooltip label='Pick color' />
             </button>
         </div>
     );

packages/koenig-lexical/src/components/ui/SettingsPanel.jsx

@@ -236,7 +236,7 @@ export function ColorOptionSetting({label, onClick, selectedName, buttons, layou
         <div className={`flex w-full text-[1.3rem] ${layout === 'stacked' ? 'flex-col' : 'items-center justify-between'}`} data-testid={dataTestId}>
             <div className="text-sm font-medium tracking-normal text-grey-900 dark:text-grey-300">{label}</div>
 
-            <div className={`shrink-0 ${layout === 'stacked' ? '-mx-1 pt-1' : 'pl-2'}`}>
+            <div className={`shrink-0 ${layout === 'stacked' ? '-mx-1 pt-[.6rem]' : 'pl-2'}`}>
                 <ColorOptionButtons buttons={buttons} selectedName={selectedName} onClick={onClick} />
             </div>
         </div>
@@ -286,15 +286,15 @@ export function ColorPickerSetting({label, isExpanded, onSwatchChange, onPickerC
     );
 }
 
-export function MediaUploadSetting({className, label, hideLabel, onFileChange, isDraggedOver, placeholderRef, src, alt, isLoading, errors = [], progress, onRemoveMedia, icon, desc = '', size, borderStyle, mimeTypes, isPinturaEnabled, openImageEditor, setFileInputRef}) {
+export function MediaUploadSetting({className, label, hideLabel, onFileChange, isDraggedOver, placeholderRef, src, alt, isLoading, errors = [], progress, onRemoveMedia, icon, desc = '', size, stacked, borderStyle, mimeTypes, isPinturaEnabled, openImageEditor, setFileInputRef}) {
     return (
-        <div className={clsx(className)} data-testid="media-upload-setting">
+        <div className={clsx(className, !stacked && 'flex justify-between')} data-testid="media-upload-setting">
             <div className={hideLabel ? 'sr-only' : 'mb-2 text-sm font-medium tracking-normal text-grey-900 dark:text-grey-400'}>{label}</div>
 
             <MediaUploader
                 alt={alt}
                 borderStyle={borderStyle}
-                className="h-32"
+                className={clsx(stacked ? 'h-32' : src ? 'h-[5.2rem]' : 'h-[5.2rem] w-[7.2rem]')}
                 desc={desc}
                 dragHandler={{isDraggedOver, setRef: placeholderRef}}
                 errors={errors}

packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx

@@ -7,8 +7,8 @@ import {ColorOptionSetting, SettingsPanel, ToggleSetting} from '../SettingsPanel
 import {ReadOnlyOverlay} from '../ReadOnlyOverlay';
 
 export const CALLOUT_COLORS = {
-    grey: 'bg-grey/10 border-transparent',
     white: 'bg-transparent border-grey/30',
+    grey: 'bg-grey/10 border-transparent',
     blue: 'bg-blue/10 border-transparent',
     green: 'bg-green/10 border-transparent',
     yellow: 'bg-yellow/10 border-transparent',
@@ -22,8 +22,8 @@ const TEXT_BLACK = 'text-black dark:text-grey-300 caret-black dark:caret-grey-30
 const TEXT_WHITE = 'text-white caret-white';
 
 export const CALLOUT_TEXT_COLORS = {
-    grey: TEXT_BLACK,
     white: TEXT_BLACK,
+    grey: TEXT_BLACK,
     blue: TEXT_BLACK,
     green: TEXT_BLACK,
     yellow: TEXT_BLACK,
@@ -35,50 +35,50 @@ export const CALLOUT_TEXT_COLORS = {
 };
 
 export const calloutColorPicker = [
-    {
-        label: 'Grey',
-        name: 'grey',
-        color: 'bg-grey/10 dark:border-white/10'
-    },
     {
         label: 'White',
         name: 'white',
-        color: 'bg-transparent dark:border-white/10'
+        color: 'bg-transparent border-black/15 dark:border-white/10'
+    },
+    {
+        label: 'Grey',
+        name: 'grey',
+        color: 'bg-grey/15 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Blue',
         name: 'blue',
-        color: 'bg-blue/10 dark:border-white/10'
+        color: 'bg-blue/15 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Green',
         name: 'green',
-        color: 'bg-green/10 dark:border-white/10'
+        color: 'bg-green/15 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Yellow',
         name: 'yellow',
-        color: 'bg-yellow/10 dark:border-white/10'
+        color: 'bg-yellow/15 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Red',
         name: 'red',
-        color: 'bg-red/10 dark:border-white/10'
+        color: 'bg-red/15 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Pink',
         name: 'pink',
-        color: 'bg-pink/10 dark:border-white/10'
+        color: 'bg-pink/15 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Purple',
         name: 'purple',
-        color: 'bg-purple/10 dark:border-white/10'
+        color: 'bg-purple/15 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Accent',
         name: 'accent',
-        color: 'bg-accent'
+        color: 'bg-accent border-black/[0.08] dark:border-white/10'
     }
 ];
 
@@ -157,7 +157,7 @@ export function CalloutCard({
                         <ColorOptionSetting
                             buttons={calloutColorPicker}
                             dataTestId='callout-color-picker'
-                            label='Background color'
+                            label='Background'
                             layout='stacked'
                             selectedName={color}
                             onClick={handleColorChange}
@@ -172,7 +172,7 @@ export function CalloutCard({
 }
 
 CalloutCard.propTypes = {
-    color: PropTypes.oneOf(['grey', 'white', 'blue', 'green', 'yellow', 'red', 'pink', 'purple', 'accent']),
+    color: PropTypes.oneOf(['white', 'grey', 'blue', 'green', 'yellow', 'red', 'pink', 'purple', 'accent']),
     text: PropTypes.string,
     hasEmoji: PropTypes.bool,
     placeholder: PropTypes.string,