fix: tabs styles (#107)

Author: dan-ziv

deployment/README.md

@@ -50,7 +50,6 @@ helm install starkgate starkware/webapp-general-helm \
 
 > **Note:** Upgrade only if you already run `helm install`
 
-
 Upgrade starknet faucet helm chart.
 
 ### Production

src/components/Containers/Header/Header.js

@@ -38,7 +38,7 @@ export const Header = () => {
   };
 
   const onTabDiscordClick = () => {
-    utils.browser.openInNewTab(DISCORD_LINK_URL, DISCORD_LINK_URL);
+    utils.browser.openInNewTab(DISCORD_LINK_URL);
   };
 
   return (
@@ -54,23 +54,25 @@ export const Header = () => {
 
       <div className={utils.object.toClasses(styles.right, 'row')}>
         <div className={styles.tabs}>
-          <Tab label={TAB_FAQ_TXT} onClick={showFaqMenu}></Tab>
-          <Tab label={TAB_DISCORD_TXT} onClick={onTabDiscordClick}></Tab>
+          <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>
-        {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

@@ -55,18 +55,20 @@ $chain-color: $--color-white-1;
   .right {
     margin-left: 20px;
 
-    button {
-      &:not(:last-child) {
-        margin: 0 16px 0 0;
-      }
+    .tabs {
+      display: flex;
+      flex-direction: row;
+      margin-right: 10px;
     }
 
-    .tabs {
+    .walletButtons {
       display: flex;
-      flex-flow: row nowrap;
+      flex-direction: row;
 
       button {
-        margin: 0 12px 0 0;
+        &:not(:last-child) {
+          margin-right: 30px;
+        }
       }
     }
   }

src/components/Features/Bridge/Bridge.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Account, FAQ, SelectToken, ToastProvider, Transfer} from '..';
+import {Account, Faq, SelectToken, ToastProvider, Transfer} from '..';
 import {MenuType} from '../../../enums';
 import {useMenu} from '../../../providers/MenuProvider';
 import styles from './Bridge.module.scss';
@@ -17,7 +17,7 @@ export const Bridge = () => {
       case MenuType.ACCOUNT:
         return <Account {...menuProps[MenuType.ACCOUNT]} />;
       case MenuType.FAQ:
-        return <FAQ />;
+        return <Faq />;
     }
   };
 

src/components/Features/FAQ/FAQ.js src/components/Features/Faq/Faq.js

@@ -3,10 +3,10 @@ import React from 'react';
 import {faqs} from '../../../config/faqs';
 import {useMenu} from '../../../providers/MenuProvider';
 import {BackButton, Menu, MenuTitle} from '../../UI';
-import styles from './FAQ.module.scss';
-import {TITLE_TXT} from './FAQ.strings';
+import styles from './Faq.module.scss';
+import {TITLE_TXT} from './Faq.strings';
 
-export const FAQ = () => {
+export const Faq = () => {
   const {showTransferMenu} = useMenu();
 
   return (

src/components/Features/FAQ/FAQ.module.scss src/components/Features/Faq/Faq.module.scss

@@ -1,7 +1,7 @@
 export * from './Account/Account';
 export * from './Bridge/Bridge';
 export * from './Login/Login';
-export * from './FAQ/FAQ';
+export * from './Faq/Faq';
 export * from './SelectToken/SelectToken';
 export * from './Transfer/Transfer';
 export * from './TransferLog/TransferLog';

src/components/Features/FAQ/FAQ.strings.js src/components/Features/Faq/Faq.strings.js

@@ -1,16 +1,18 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import {toClasses} from '../../../utils/object';
 import styles from './Tab.module.scss';
 
-export const Tab = ({label, onClick}) => {
+export const Tab = ({label, isLink, onClick}) => {
   return (
-    <button className={styles.tab} onClick={onClick}>
+    <button className={toClasses(styles.tab, isLink && styles.link)} onClick={onClick}>
       {label}
     </button>
   );
 };
 Tab.propTypes = {
   label: PropTypes.string,
+  isLink: PropTypes.bool,
   onClick: PropTypes.func
 };

src/components/Features/index.js

@@ -1,30 +1,26 @@
 @import '../../../index';
 
 $color: $--color-white;
-$active-color: $--color-beta;
+$color: $--color-white;
 
 .tab {
-  text-align: center;
   text-transform: capitalize;
-  font-weight: bold;
-  font-size: 14px;
+  font-weight: 500;
+  font-size: 18px;
   line-height: 1.2;
-  margin: 10px 0;
-  padding: 20px 4px;
+  margin-right: 30px;
   cursor: pointer;
   background-color: transparent;
   color: $color;
   text-decoration: none;
   box-sizing: border-box;
   border: none;
-  border-radius: 7px;
-
-  &:hover {
-    text-decoration: underline;
-  }
+  transition: 0.3s ease-in-out;
+  font-family: $--primary-font;
 
-  &:active {
-    color: $active-color;
-    text-decoration-color: $active-color;
+  &.link {
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }

src/components/UI/Tab/Tab.js

@@ -2,13 +2,62 @@
 @import './styles/colors.module';
 @import './styles/fonts.module';
 
+@font-face {
+  font-family: 'Inter';
+  font-weight: 100;
+  font-style: normal;
+  src: url('assets/fonts/Inter/Inter-Thin.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-weight: 200;
+  font-style: normal;
+  src: url('assets/fonts/Inter/Inter-ExtraLight.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-weight: 300;
+  font-style: normal;
+  src: url('assets/fonts/Inter/Inter-Light.ttf') format('truetype');
+}
+
 @font-face {
   font-family: 'Inter';
   font-weight: 400;
   font-style: normal;
   src: url('assets/fonts/Inter/Inter-Regular.ttf') format('truetype');
 }
 
+@font-face {
+  font-family: 'Inter';
+  font-weight: 500;
+  font-style: normal;
+  src: url('assets/fonts/Inter/Inter-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-weight: 600;
+  font-style: normal;
+  src: url('assets/fonts/Inter/Inter-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-weight: 700;
+  font-style: normal;
+  src: url('assets/fonts/Inter/Inter-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-weight: 800;
+  font-style: normal;
+  src: url('assets/fonts/Inter/Inter-ExtraBold.ttf') format('truetype');
+}
+
 html,
 body {
   padding: 0;