fix: user agent border in tabs: overrides ua style (#20)

EightfoldAI · Mar 30, 2022 · 2d13c47 · 2d13c47
1 parent 2a14434
commit 2d13c47
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
@@ -16,6 +16,7 @@
         padding: $space-s $space-m;
         color: $color-secondary-grey;
         background-color: $card-background-color;
+        border: none;
         align-items: center;
         justify-content: center;
         position: relative;

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -20,21 +20,21 @@ const Wrapper: FC = ({ children }) => (
 );
 
 export const Base = () => (
-    <div style={{ maxWidth: '60%', margin: 'auto' }}>
+    <div style={{ margin: 'auto', maxWidth: '60%', marginTop: '50px' }}>
         <Wrapper>
             <Tooltip content={'Light tooltip'}>
                 <PrimaryButton
                     ariaLabel="Light bottom"
                     onClick={_alertClicked}
-                    size={ButtonSize.Large}
+                    size={ButtonSize.Medium}
                     text="Light bottom"
                 />
             </Tooltip>
             <Tooltip content={'Dark tooltip'} theme={TooltipTheme.dark}>
                 <PrimaryButton
                     ariaLabel="Dark bottom"
                     onClick={_alertClicked}
-                    size={ButtonSize.Large}
+                    size={ButtonSize.Medium}
                     text="Dark bottom"
                 />
             </Tooltip>
@@ -44,7 +44,7 @@ export const Base = () => (
                 <PrimaryButton
                     ariaLabel="Light top"
                     onClick={_alertClicked}
-                    size={ButtonSize.Large}
+                    size={ButtonSize.Medium}
                     text="Light top"
                 />
             </Tooltip>
@@ -56,7 +56,7 @@ export const Base = () => (
                 <PrimaryButton
                     ariaLabel="Dark top"
                     onClick={_alertClicked}
-                    size={ButtonSize.Large}
+                    size={ButtonSize.Medium}
                     text="Dark top"
                 />
             </Tooltip>
@@ -66,7 +66,7 @@ export const Base = () => (
                 <PrimaryButton
                     ariaLabel="Light right"
                     onClick={_alertClicked}
-                    size={ButtonSize.Large}
+                    size={ButtonSize.Medium}
                     text="Light right"
                 />
             </Tooltip>
@@ -78,7 +78,7 @@ export const Base = () => (
                 <PrimaryButton
                     ariaLabel="Dark right"
                     onClick={_alertClicked}
-                    size={ButtonSize.Large}
+                    size={ButtonSize.Medium}
                     text="Dark right"
                 />
             </Tooltip>
@@ -91,7 +91,7 @@ export const Base = () => (
                 <PrimaryButton
                     ariaLabel="Light left"
                     onClick={_alertClicked}
-                    size={ButtonSize.Large}
+                    size={ButtonSize.Medium}
                     text="Light left"
                 />
             </Tooltip>
@@ -105,7 +105,7 @@ export const Base = () => (
                 <PrimaryButton
                     ariaLabel="Dark left"
                     onClick={_alertClicked}
-                    size={ButtonSize.Large}
+                    size={ButtonSize.Medium}
                     text="Dark left"
                 />
             </Tooltip>