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

fix missing styles
deepfence · Dec 9, 2022 · f39a803 · f39a803
2 parents a42e3a0 + 9d128a7
commit f39a803
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 11 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
@@ -83,7 +83,7 @@ export const AccordionContent = React.forwardRef<
 >(({ children, className, ...props }, forwardedRef) => (
   <AccordionPrimitive.Content
     className={cx(
-      'bg-white dark:bg-gray-900 p-2 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-[150%]',
       '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/breadcrumb/Breadcrumb.stories.tsx b/deepfence_frontend/packages/ui-components/src/components/breadcrumb/Breadcrumb.stories.tsx
@@ -9,7 +9,7 @@ export default {
   component: Breadcrumb,
 } as ComponentMeta<typeof Breadcrumb>;
 
-export const Link = forwardRef<
+const Link = forwardRef<
   HTMLAnchorElement,
   {
     children: React.ReactNode;
@@ -24,7 +24,7 @@ export const Link = forwardRef<
 });
 
 const Template: ComponentStory<typeof Breadcrumb> = ({ separator }) => (
-  <Breadcrumb separator={separator}>
+  <Breadcrumb separator={separator} outline>
     <BreadcrumbLink asChild icon={<HiHome />}>
       <Link>Link One</Link>
     </BreadcrumbLink>

diff --git a/deepfence_frontend/packages/ui-components/src/components/breadcrumb/Breadcrumb.tsx b/deepfence_frontend/packages/ui-components/src/components/breadcrumb/Breadcrumb.tsx
@@ -17,6 +17,7 @@ type BreadcrumbLinkType = {
 
 type BreadCrumbProps = {
   children: React.ReactNode | React.ReactNode[];
+  outline?: boolean;
   separator?: React.ReactNode;
 };
 
@@ -31,7 +32,7 @@ export const BreadcrumbLink = React.forwardRef<
       className={twMerge(
         cx(
           `inline-flex items-center leading-[21px] item-center`,
-          'focus:outline-none focus:ring-1 focus:ring-blue-600 dark:focus:ring-blue-800',
+          'outline-none focus-visible:outline-none focus:ring-1 focus-visible:ring-blue-600 dark:focus-visible:ring-blue-800',
           `text-gray-700 dark:text-gray-400 ${Typography.size.sm}`,
           {
             [`text-gray-500 dark:text-gray-300`]: isLast,
@@ -64,7 +65,7 @@ export const BreadcrumbLink = React.forwardRef<
   );
 });
 
-export const Breadcrumb = ({ children, separator }: BreadCrumbProps) => {
+export const Breadcrumb = ({ children, separator, outline = false }: BreadCrumbProps) => {
   const childrenEl = React.Children.map<React.ReactNode, React.ReactNode>(
     children,
     function (child: React.ReactNode, index) {
@@ -88,5 +89,13 @@ export const Breadcrumb = ({ children, separator }: BreadCrumbProps) => {
       return elementChild;
     },
   );
-  return <div className="flex items-center">{childrenEl}</div>;
+  return (
+    <div
+      className={cx('flex w-fit items-center py-2 px-5', {
+        'outline-none border border-gray-200 dark:border-gray-700 rounded-lg': outline,
+      })}
+    >
+      {childrenEl}
+    </div>
+  );
 };
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,7 +11,7 @@ export const Card = (props: CardType) => {
     <div
       className={twMerge(
         cx(
-          `inline-flex flex-col rounded-lg
+          `inline-flex flex-col 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}`,

diff --git a/deepfence_frontend/packages/ui-components/src/components/tabs/Tabs.tsx b/deepfence_frontend/packages/ui-components/src/components/tabs/Tabs.tsx
@@ -47,19 +47,22 @@ const Tabs = (props: TabProps) => {
               data-testid={`tab-item-${_id}`}
               className={cx(
                 'group',
-                'focus:outline-none py-4 px-3',
+                'outline-none pb-4 px-3',
                 'radix-state-active:border-b radix-state-active:-mb-px radix-state-active:text-blue-600 radix-state-active:border-blue-600',
                 'dark:radix-state-active:border-blue-600',
-                'focus:radix-state-active:ring-1 focus:radix-state-active:ring-blue-200',
-                'dark:focus:radix-state-active:ring-blue-800',
+                'focus-visible:radix-state-active:ring-1 focus-visible:radix-state-active:ring-blue-200',
+                'dark:focus-visible:radix-state-active:ring-blue-800',
               )}
             >
               {icon && (
                 <IconContext.Provider value={{ className: cx('w-4 h-4 mr-2 inline') }}>
                   {icon}
                 </IconContext.Provider>
               )}
-              <LabelPrimitive.Label htmlFor={_id} className={cx(`${classes.size[size]}`)}>
+              <LabelPrimitive.Label
+                htmlFor={_id}
+                className={cx(`${classes.size[size]} cursor-pointer leading-[125%]`)}
+              >
                 {label}
               </LabelPrimitive.Label>
             </TabsPrimitive.Trigger>