Merge pull request #88 from web3ui/fix/tabs

fix: style fixed
web3ui · Jan 24, 2022 · a8cd310 · a8cd310
2 parents bff4c13 + d77b7cb
commit a8cd310
Showing 1 changed file with 21 additions and 10 deletions.
diff --git a/src/components/Tabs/Tabs.styles.ts b/src/components/Tabs/Tabs.styles.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import resetCSS from '../../styles/reset';
 import color from '../../styles/colors';
 import fonts from '../../styles/fonts';
@@ -33,8 +33,8 @@ export const StyleTabBarParent = styled.div<IStyledTabBarParent>`
 export const StyledTabBar = styled.div<IStyledTabBar>`
     display: flex;
     ${(props) => props.isVertical && 'flex-direction: column;'}
-    overflow-x: auto;
     max-width: fit-content;
+    height: 40px;
     ${(props) =>
         props.haveBackground &&
         `
@@ -56,10 +56,10 @@ export const StyledTab = styled.div<IStyledTab>`
     padding-bottom: 4px;
     margin-bottom: 11px;
     cursor: pointer;
-    ${(props) => props.isActive && `font-weight:600;`};
-    ${(props) => props.isActive && `border-bottom: 2px solid #21BF96;`};
+    ${(props) => props.isActive && 'font-weight:600;'};
+    ${(props) => props.isActive && 'border-bottom: 2px solid #21BF96;'};
     ${(props) =>
-        (props.isActive || props.isDisabled) && `pointer-events: none;`};
+        (props.isActive || props.isDisabled) && 'pointer-events: none;'};
     ${(props) => !props.isActive && `color:${color.greyIcons};`};
     line-height: ${(props) => props.lineHeight && `${props.lineHeight}px`};
     ${(props) => props.isDisabled && `color:${color.greyDisabled};`}
@@ -68,20 +68,31 @@ export const StyledTab = styled.div<IStyledTab>`
 export const BulbTab = styled.div<IStyledBulb>`
     transition-duration: 200ms;
     transition-timing-function: ease-in-out;
-    font-size: 14px;
     border-radius: 16px;
-    padding: 8px 16px 8px 16px;
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
     background-color: #f2f6ff;
+    border: 2px solid transparent;
     cursor: pointer;
     color: ${color.blue};
-    ${(props) => props.isActive && `border:1px solid ${color.blue};`};
-    ${(props) => props.isActive && `background-color: ${color.white};`};
+    ${({ isActive }) =>
+        isActive &&
+        css`
+            border-color: ${color.blue};
+            background-color: transparent;
+        `};
     ${(props) =>
-        (props.isActive || props.isDisabled) && `pointer-events: none;`};
+        (props.isActive || props.isDisabled) && 'pointer-events: none;'};
     ${(props) => props.hasMargin && 'margin-right:6px;'}
     ${(props) => props.isDisabled && `color:${color.greyDisabled};`}
     line-height: ${(props) => props.lineHeight && `${props.lineHeight}px`};
     &:hover {
         background: #e5edff;
     }
+
+    & > span {
+        font-weight: 600;
+        font-size: 14px;
+    }
 `;