chore(webb-ui-components): Update Radios component in UI Kit (#2491)

Co-authored-by: Trung-Tin Pham <[email protected]>
tangle-network · Aug 6, 2024 · b5746bf · b5746bf
1 parent ccf3bb9
commit b5746bf
Show file tree

Hide file tree

Showing 2 changed files with 167 additions and 198 deletions.
diff --git a/libs/webb-ui-components/src/components/Radio/RadioItem.tsx b/libs/webb-ui-components/src/components/Radio/RadioItem.tsx
@@ -23,41 +23,48 @@ export const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(
     return (
       <div
         {...props}
-        className={twMerge('flex items-center space-x-2', className)}
+        className={twMerge('flex items-center space-x-1', className)}
         ref={ref}
       >
-        <RadioGroup.Item
-          {...overrideRadixRadioItemProps}
-          className={twMerge(
-            'peer w-[18px] h-[18px] rounded-full bg-mono-0 dark:bg-mono-180 border border-mono-100',
-            'enabled:radix-state-unchecked:hover:bg-blue-10 enabled:radix-state-unchecked:hover:dark:bg-blue-120',
-            'enabled:radix-state-unchecked:hover:border-blue-40 enabled:radix-state-unchecked:hover:dark:border-blue-90',
-            'enabled:radix-state-unchecked:hover:shadow-[0_0_0_1px_rgba(213,230,255,1)] hover:dark:shadow-none',
-            'radix-state-checked:border-2 radix-state-checked:border-blue-70 dark:radix-state-checked:border-blue-50',
-            'radix-disabled:border-mono-80 dark:radix-disabled:border-mono-120 dark:radix-disabled:bg-mono-140',
-            overrideRadixRadioItemProps?.className,
-          )}
-          value={value}
-          id={id}
-        >
-          <RadioGroup.Indicator
-            {...overrideRadixRadioIndicatorProps}
+        <div className="size-[36px] rounded-full hover:bg-[#5953F91A] hover:dark:bg-[#5953F933] flex items-center justify-center has-[:disabled]:hover:!bg-transparent has-[:radix-state-checked]:!bg-[#5953F933] has-[:radix-state-checked]:dark:!bg-[#58F98F00]">
+          <RadioGroup.Item
+            {...overrideRadixRadioItemProps}
             className={twMerge(
-              'flex items-center justify-center w-full h-full relative',
-              "after:content-[''] after:block after:w-2.5 after:h-2.5 after:rounded-[50%]",
-              'after:bg-blue-70 after:dark:bg-blue-50',
-              overrideRadixRadioIndicatorProps?.className,
+              'size-[18px] rounded-full border-[2px] border-mono-100 dark:border-mono-100',
+              'radix-disabled:border-mono-60 dark:radix-disabled:border-mono-140',
+              'radix-disabled:radix-state-checked:border-mono-60 dark:radix-disabled:radix-state-checked:border-mono-140',
+              'radix-state-checked:border-blue-50 dark:radix-state-checked:border-blue-50',
+              'radix-state-checked:hover:border-blue-50 dark:radix-state-checked:hover:border-blue-50',
+              'active:border-blue-60 dark:active:border-blue-40',
+              overrideRadixRadioItemProps?.className,
             )}
-          />
-        </RadioGroup.Item>
+            value={value}
+            id={id}
+          >
+            <RadioGroup.Indicator
+              {...overrideRadixRadioIndicatorProps}
+              className={twMerge(
+                'flex items-center justify-center w-full h-full relative',
+                "after:content-[''] after:block after:w-2.5 after:h-2.5 after:rounded-[50%]",
+                'radix-state-checked:after:bg-blue-50 radix-state-checked:after:dark:bg-blue-50',
+                'radix-state-checked:hover:after:bg-blue-50 radix-state-checked:hover:after:dark:bg-blue-50',
+                'radix-state-checked:active:after:bg-blue-60 radix-state-checked:active:after:dark:bg-blue-40',
+                'radix-disabled:radix-state-checked:after:bg-mono-60 dark:radix-disabled:radix-state-checked:after:bg-mono-140',
+                overrideRadixRadioIndicatorProps?.className,
+              )}
+            />
+          </RadioGroup.Item>
+        </div>
+
         {typeof label === 'string' || typeof label === 'number' ? (
           <Typography
             component="label"
             variant="body1"
             className={twMerge(
               'text-mono-140 dark:text-mono-20',
-              'group-radix-disabled:text-mono-80 dark:group-radix-disabled:text-mono-120',
-              'peer-radix-disabled:text-mono-80 dark:peer-radix-disabled:text-mono-120',
+              overrideRadixRadioItemProps?.disabled
+                ? 'text-mono-60 dark:text-mono-140'
+                : '',
             )}
           >
             {label}