fix: tab UX

src/components/Containers/Header/Header.js

@@ -5,6 +5,7 @@ import {track} from '../../../analytics';
 import {ReactComponent as StarkGateLogo} from '../../../assets/img/starkgate.svg';
 import constants from '../../../config/constants';
 import {Breakpoint} from '../../../enums';
+import {useColors} from '../../../hooks';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useIsL1, useIsL2} from '../../../providers/TransferProvider';
 import {useL1Wallet, useL2Wallet, useWallets} from '../../../providers/WalletsProvider';
@@ -23,6 +24,7 @@ export const Header = () => {
   const {account: l1Account, isConnected: isL1AccountConnected, config: l1Config} = useL1Wallet();
   const {account: l2Account, isConnected: isL2AccountConnected, config: l2Config} = useL2Wallet();
   const {breakpoint} = useBreakpoint(Breakpoint);
+  const {colorDiscord, colorWhiteOp50} = useColors();
 
   const onL2WalletButtonClick = () => {
     swapToL2();
@@ -55,26 +57,22 @@ export const Header = () => {
       </div>
 
       <div className={utils.object.toClasses(styles.right, 'row')}>
-        <div className={styles.tabs}>
-          <Tab label={TAB_FAQ_TXT} onClick={showFaqMenu} />
-          <Tab isLink={true} label={TAB_DISCORD_TXT} onClick={onTabDiscordClick} />
-        </div>
-        <div className={styles.walletButtons}>
-          {isL1AccountConnected && (
-            <WalletButton
-              account={l1Account}
-              logoPath={l1Config?.logoPath}
-              onClick={onL1WalletButtonClick}
-            />
-          )}
-          {isL2AccountConnected && (
-            <WalletButton
-              account={l2Account}
-              logoPath={l2Config?.logoPath}
-              onClick={onL2WalletButtonClick}
-            />
-          )}
-        </div>
+        <Tab color={colorWhiteOp50} label={TAB_FAQ_TXT} onClick={showFaqMenu} />
+        <Tab color={colorDiscord} label={TAB_DISCORD_TXT} onClick={onTabDiscordClick} />
+        {isL1AccountConnected && (
+          <WalletButton
+            account={l1Account}
+            logoPath={l1Config?.logoPath}
+            onClick={onL1WalletButtonClick}
+          />
+        )}
+        {isL2AccountConnected && (
+          <WalletButton
+            account={l2Account}
+            logoPath={l2Config?.logoPath}
+            onClick={onL2WalletButtonClick}
+          />
+        )}
       </div>
     </div>
   );

src/components/Containers/Header/Header.module.scss

@@ -39,22 +39,12 @@ $chain-color: $--color-white-1;
   }
 
   .right {
-    margin-left: 20px;
-
-    .tabs {
-      display: flex;
-      flex-direction: row;
-      margin-right: 10px;
-    }
-
-    .walletButtons {
-      display: flex;
-      flex-direction: row;
+    display: flex;
+    flex-direction: row;
 
-      button {
-        &:not(:last-child) {
-          margin-right: 20px;
-        }
+    * {
+      &:not(:last-child) {
+        margin-right: 15px;
       }
     }
   }

src/components/UI/Button/Button.module.scss

@@ -1,11 +1,14 @@
+@import '../../../index';
+
 .button {
+  font-family: $--primary-font;
   display: flex;
   justify-content: space-around;
   align-items: center;
   text-align: center;
   text-transform: capitalize;
-  font-weight: bold;
-  font-size: 14px;
+  font-weight: 500;
+  font-size: 15px;
   line-height: 24px;
   border: 1px solid;
   box-sizing: border-box;

src/components/UI/Tab/Tab.js

@@ -1,18 +1,28 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {toClasses} from '../../../utils/object';
+import {useColors} from '../../../hooks';
+import {Button} from '../Button/Button';
 import styles from './Tab.module.scss';
 
-export const Tab = ({label, isLink, onClick}) => {
+export const Tab = ({label, color, onClick}) => {
+  const {colorWhite, colorWhiteOp10, colorWhiteOp20} = useColors();
+
   return (
-    <button className={toClasses(styles.tab, isLink && styles.link)} onClick={onClick}>
-      {label}
-    </button>
+    <Button
+      className={styles.tab}
+      colorBorder={color || colorWhite}
+      colorText={colorWhite}
+      colorBackground={colorWhiteOp10}
+      colorBackgroundHover={colorWhiteOp20}
+      height={0}
+      text={label}
+      onClick={onClick}
+    />
   );
 };
 Tab.propTypes = {
   label: PropTypes.string,
-  isLink: PropTypes.bool,
+  color: PropTypes.string,
   onClick: PropTypes.func
 };

src/components/UI/Tab/Tab.module.scss

@@ -1,26 +1,3 @@
-@import '../../../index';
-
-$color: $--color-white;
-$color: $--color-white;
-
 .tab {
-  text-transform: capitalize;
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 1.2;
-  margin-right: 30px;
-  cursor: pointer;
-  background-color: transparent;
-  color: $color;
-  text-decoration: none;
-  box-sizing: border-box;
-  border: none;
-  transition: 0.3s ease-in-out;
-  font-family: $--primary-font;
-
-  &.link {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
+  border-width: 2px;
 }

src/components/UI/WalletButton/WalletButton.js

@@ -12,7 +12,7 @@ import styles from './WalletButton.module.scss';
 import {BTN_TXT} from './WalletButton.strings';
 
 export const WalletButton = ({account, logoPath, onClick}) => {
-  const {colorBeta, colorWhite} = useColors();
+  const {colorBeta, colorWhite, colorWhiteOp10, colorWhiteOp20} = useColors();
   const {breakpoint} = useBreakpoint(Breakpoint);
 
   const getText = () => {
@@ -28,7 +28,8 @@ export const WalletButton = ({account, logoPath, onClick}) => {
   return (
     <Button
       className={toClasses(styles.walletButton, styles[breakpoint.toLowerCase()])}
-      colorBackground="transparent"
+      colorBackground={colorWhiteOp10}
+      colorBackgroundHover={colorWhiteOp20}
       colorBorder={colorBeta}
       colorText={colorWhite}
       height={0}

src/components/UI/WalletButton/WalletButton.module.scss

@@ -1,6 +1,5 @@
 .walletButton {
   border-width: 2px;
-  transition: 0.3s ease-in-out;
 
   &.mobile {
     width: 80px;

src/styles/colors.module.scss

@@ -1,6 +1,9 @@
 $--color-white: #fff;
 $--color-white-1: #d3dae3;
 $--color-white-2: #d3dae3ff;
+$--color-white-op-10: rgba(255, 255, 255, 0.1);
+$--color-white-op-20: rgba(255, 255, 255, 0.2);
+$--color-white-op-50: rgba(255, 255, 255, 0.5);
 $--color-black: #000;
 $--color-alpha: #15174e;
 $--color-alpha-1: #1c1e52;
@@ -19,8 +22,8 @@ $--color-omega: #5f666c;
 $--color-omega-1: #667085;
 $--color-success: #039855;
 $--color-error: #da4646;
+$--color-discord: #5865f2;
 
-/* stylelint scss/dollar-variable-pattern: [/color/, {"ignore": "global"}] */
 :export {
   colorBlack: $--color-black;
   colorWhite: $--color-white;
@@ -29,4 +32,8 @@ $--color-error: #da4646;
   colorAlpha3: $--color-alpha-3;
   colorAlpha5: $--color-alpha-5;
   colorOmega1: $--color-omega-1;
+  colorDiscord: $--color-discord;
+  colorWhiteOp10: $--color-white-op-10;
+  colorWhiteOp20: $--color-white-op-20;
+  colorWhiteOp50: $--color-white-op-50;
 }