Merge pull request #747 from deepfence/bugfix/v2-uicomponents

fix:update styles
deepfence · Dec 14, 2022 · 0c2e7cf · 0c2e7cf
2 parents 1396de5 + 595f570
commit 0c2e7cf
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 32 deletions.
diff --git a/deepfence_frontend/packages/ui-components/src/components/accordion/Accordion.tsx b/deepfence_frontend/packages/ui-components/src/components/accordion/Accordion.tsx
@@ -39,7 +39,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
       value={value}
       className={twMerge(
         cx(
-          'w-full overflow-hidden text-gray-900 dark:text-white dark:bg-gray-800 border-b last:border-b-0', // border bottom on each header trigger except last
+          'w-full overflow-hidden text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 border-b last:border-b-0', // border bottom on each header trigger except last
           'border-gray-200 dark:border-gray-700 dark:border-opacity-50',
           className,
         ),
@@ -83,7 +83,7 @@ export const AccordionContent = React.forwardRef<
 >(({ children, className, ...props }, forwardedRef) => (
   <AccordionPrimitive.Content
     className={cx(
-      'bg-white dark:bg-gray-900 w-full text-gray-500 dark:text-gray-400 leading-[150%]',
+      'bg-white dark:bg-gray-900 w-full text-gray-500 dark:text-gray-400 leading-6',
       'radix-state-open:border-t dark:radix-state-open:border-gray-700 dark:radix-state-open:border-opacity-50', // border top of its content
       'radix-state-open:animate-accordion-open',
       'radix-state-closed:animate-accordion-closed',

diff --git a/deepfence_frontend/packages/ui-components/src/components/badge/Badge.stories.tsx b/deepfence_frontend/packages/ui-components/src/components/badge/Badge.stories.tsx
@@ -42,7 +42,7 @@ export const MediumDanger = Template.bind({});
 MediumDanger.args = {
   label: 'Badge sm',
   color: 'danger',
-  sizing: 'md',
+  size: 'lg',
 };
 
 export const WithCloseAction = () => {
@@ -79,7 +79,7 @@ export const WithCloseAction = () => {
             id={id}
             value={value}
             color={value as ColorType}
-            sizing="md"
+            size="lg"
             icon={<HiInformationCircle />}
             isRemove={true}
             onRemove={(badge) => {
@@ -118,7 +118,7 @@ export const CustomColor = () => {
             id={id}
             value={value}
             color={value as ColorType}
-            sizing="md"
+            size="lg"
             icon={<HiInformationCircle />}
             isRemove={true}
             className={'bg-lime-700 text-teal-300'}

diff --git a/deepfence_frontend/packages/ui-components/src/components/badge/Badge.tsx b/deepfence_frontend/packages/ui-components/src/components/badge/Badge.tsx
@@ -7,7 +7,7 @@ import { twMerge } from 'tailwind-merge';
 
 import { Typography } from '@/components/typography/Typography';
 
-export type SizeType = 'sm' | 'md';
+export type SizeType = 'sm' | 'lg';
 export type ColorType = 'default' | 'primary' | 'success' | 'danger';
 export type SelectedBadgeProps = {
   id: string | number | undefined;
@@ -16,7 +16,7 @@ export type SelectedBadgeProps = {
 export interface BadgeProps extends Omit<ComponentProps<'span'>, 'ref' | 'color'> {
   label?: string;
   value?: string;
-  sizing?: SizeType;
+  size?: SizeType;
   color?: ColorType;
   icon?: React.ReactNode;
   isRemove?: boolean;
@@ -32,11 +32,11 @@ const classes = {
   },
   size: {
     sm: `${Typography.size.sm} py-0.5 px-2.5`,
-    md: `${Typography.size.base} py-0.5 px-3`,
+    lg: `${Typography.size.base} py-0.5 px-3`,
   },
   icon: {
     sm: 'w-3.5 h-3.5',
-    md: 'w-4 h-4',
+    lg: 'w-4 h-4',
   },
 };
 
@@ -47,7 +47,7 @@ export const Badge = forwardRef<HTMLLabelElement, BadgeProps>(
       value,
       id,
       icon,
-      sizing = 'sm',
+      size = 'sm',
       color = 'default',
       className,
       onRemove,
@@ -65,7 +65,7 @@ export const Badge = forwardRef<HTMLLabelElement, BadgeProps>(
           className={twMerge(
             cx(
               `${Typography.weight.normal} inline-flex gap-1.5 justify-center items-center rounded-md text-gray-900 dark:text-white`,
-              `${classes.size[sizing]}`,
+              `${classes.size[size]}`,
               `${classes.color[color]}`,
             ),
             className,
@@ -76,7 +76,7 @@ export const Badge = forwardRef<HTMLLabelElement, BadgeProps>(
           {icon && (
             <IconContext.Provider
               value={{
-                className: cx(`${classes.icon[sizing]}`),
+                className: cx(`${classes.icon[size]}`),
               }}
             >
               {icon}

diff --git a/deepfence_frontend/packages/ui-components/src/components/card/Card.tsx b/deepfence_frontend/packages/ui-components/src/components/card/Card.tsx
@@ -11,10 +11,10 @@ export const Card = (props: CardType) => {
     <div
       className={twMerge(
         cx(
-          `inline-flex flex-col rounded-lg overflow-hidden outline-none border border-gray-200 dark:border-gray-700
+          `rounded-lg overflow-hidden outline-none border border-gray-200 dark:border-gray-700
          bg-white shadow-[0px_4px_6px_-1px_rgba(0,_0,_0,_0.01),_0px_2px+4px_-2px_rgba(0,_0,_0,_0.05)] 
          dark:bg-gray-800 dark:shadow-[0px_4px_6px_-1px_rgba(0,_0,_0,_0.01),_0px_2px+4px_-2px_rgba(0,_0,_0,_0.05)] 
-         ${props.className}`,
+         text-gray-900 dark:text-white`,
         ),
         className,
       )}

diff --git a/deepfence_frontend/packages/ui-components/src/components/checkbox/Checkbox.tsx b/deepfence_frontend/packages/ui-components/src/components/checkbox/Checkbox.tsx
@@ -65,9 +65,9 @@ export const Checkbox: React.FC<CheckboxProps> = (props) => {
         <LabelPrimitive.Label
           htmlFor={_id}
           className={cx(
-            Typography.size.xs,
-            Typography.weight.normal,
-            'ml-2 text-gray-500 dark:text-gray-400 cursor-default',
+            Typography.size.sm,
+            Typography.weight.medium,
+            'ml-2 text-gray-600 dark:text-gray-300 cursor-default',
           )}
         >
           {label}

diff --git a/deepfence_frontend/packages/ui-components/src/components/select/Select.tsx b/deepfence_frontend/packages/ui-components/src/components/select/Select.tsx
@@ -34,6 +34,7 @@ export interface SelectProps<T extends Value = Value> {
   color?: ColorType;
   helperText?: string;
   placeholder?: string;
+  className?: string;
 }
 
 type IconProps = {
@@ -131,6 +132,7 @@ export function Select<T extends Value>({
   color = COLOR_DEFAULT,
   placeholder,
   startIcon,
+  className = '',
 }: SelectProps<T>) {
   const select = useSelectState<T>({
     defaultValue: defaultValue ?? ((Array.isArray(value) ? [] : '') as T),
@@ -167,19 +169,22 @@ export function Select<T extends Value>({
           <AriaKitSelect
             state={select}
             name={name}
-            className={cx(
-              'w-full border box-border rounded-lg bg-gray-50 dark:bg-gray-700',
-              'block text-left relative',
-              'focus:outline-none select-none overscroll-contain',
-              `${classes.color[color]}`,
-              `${classes.size[sizing]}`,
-              `${Typography.weight.normal}`,
-              `${Typography.leading.none}`,
-              {
-                'pl-[38px]': startIcon,
-                'h-[42px]': sizing === 'sm',
-                'h-[52px]': sizing === 'md',
-              },
+            className={twMerge(
+              cx(
+                'w-full border box-border rounded-lg bg-gray-50 dark:bg-gray-700',
+                'block text-left relative',
+                'focus:outline-none select-none overscroll-contain',
+                `${classes.color[color]}`,
+                `${classes.size[sizing]}`,
+                `${Typography.weight.normal}`,
+                `${Typography.leading.none}`,
+                {
+                  'pl-[38px]': startIcon,
+                  'h-[42px]': sizing === 'sm',
+                  'h-[52px]': sizing === 'md',
+                },
+                className,
+              ),
             )}
             data-testid={`ariakit-select-${name}`}
           >

diff --git a/deepfence_frontend/packages/ui-components/src/components/separator/Separator.tsx b/deepfence_frontend/packages/ui-components/src/components/separator/Separator.tsx
@@ -6,7 +6,9 @@ import { twMerge } from 'tailwind-merge';
 type SeparatorProps = {
   className?: string;
 };
-const Separator: FC<SeparatorProps> = ({ className = '' }) => (
+const Separator: FC<SeparatorProps> = ({
+  className = 'bg-gray-100 dark:bg-gray-700 h-px',
+}) => (
   <SeparatorPrimitive.Root className={twMerge(cx(className))}></SeparatorPrimitive.Root>
 );
 

diff --git a/deepfence_frontend/packages/ui-components/src/components/switch/Switch.tsx b/deepfence_frontend/packages/ui-components/src/components/switch/Switch.tsx
@@ -3,6 +3,8 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 import cx from 'classnames';
 import { useId } from 'react';
 
+import { Typography } from '@/main';
+
 export type SwitchProps = SwitchPrimitive.SwitchProps & {
   label?: string;
 };
@@ -41,7 +43,8 @@ const Switch = (props: SwitchProps) => {
         <LabelPrimitive.Label
           htmlFor={_id}
           className={cx(
-            'pl-2 text-xs font-normal text-gray-500 dark:text-gray-400 cursor-default',
+            'pl-2 font-normal text-gray-600 dark:text-gray-300 cursor-default',
+            `${Typography.size.sm} ${Typography.weight.medium}`,
             {
               'cursor-not-allowed': disabled,
             },

diff --git a/deepfence_frontend/packages/ui-components/src/main.ts b/deepfence_frontend/packages/ui-components/src/main.ts
@@ -7,6 +7,7 @@ export {
   AccordionTrigger,
 } from '@/components/accordion/Accordion';
 export { Avatar } from '@/components/avatar/Avatar';
+export { Badge } from '@/components/badge/Badge';
 export { Breadcrumb, BreadcrumbLink } from '@/components/breadcrumb/Breadcrumb';
 export { default as Button } from '@/components/button/Button';
 export { default as IconButton } from '@/components/button/IconButton';