(improvements) Navigation tabs

src/components/AppSummary/_AppSummary.scss

@@ -1,7 +1,6 @@
 .app-summary {
   &-card {
-    padding-left: 32px;
-    padding-right: 32px;
+    padding-top: 18px;
     padding-bottom: 0;
   }
 
@@ -11,7 +10,7 @@
 
       &-title {
         max-height: 35px;
-        margin-bottom: 5px;
+        margin-bottom: 18px;
       }
     }
   }

src/components/Candles/Candles.js

@@ -132,12 +132,13 @@ class Candles extends PureComponent {
     return (
       <Card
         elevation={Elevation.ZERO}
-        className='col-lg-12 col-md-12 col-sm-12 col-xs-12'
+        className='candles col-lg-12 col-md-12 col-sm-12 col-xs-12'
       >
         <SectionHeader>
           <SectionHeaderTitle>
             {t('candles.title')}
           </SectionHeaderTitle>
+          <SectionSwitch target={TYPE} />
           <SectionHeaderRow>
             <SectionHeaderItem>
               <SectionHeaderItemLabel>
@@ -165,12 +166,9 @@ class Candles extends PureComponent {
             />
             <RefreshButton onClick={refresh} />
             <CandlesSyncPref />
+            <GoToButton onClick={toggleGoToRangeDialog} />
           </SectionHeaderRow>
         </SectionHeader>
-        <div className='candles-header'>
-          <SectionSwitch target={TYPE} hasSubSections />
-          <GoToButton onClick={toggleGoToRangeDialog} />
-        </div>
         {showContent}
       </Card>
     )

src/components/Candles/_Candles.scss

@@ -1,12 +1,7 @@
-.candles-header {
-  display: flex;
-
-  .section-switch {
-    margin-right: 20px;
-  }
-
+.candles {
   .go-to-button {
     margin-top: 3px;
     cursor: pointer;
+    transform: scale(0.9);
   }
 }

src/components/Positions/Positions.js

@@ -7,7 +7,6 @@ import DataTable from 'ui/DataTable'
 import Pagination from 'ui/Pagination'
 import { getPath } from 'state/query/utils'
 import SectionHeader from 'ui/SectionHeader'
-import SectionSwitch from 'ui/SectionSwitch'
 import queryConstants from 'state/query/constants'
 import {
   checkInit,
@@ -161,7 +160,6 @@ class Positions extends PureComponent {
           refresh={refresh}
           clearTargetPairs={this.clearPairs}
         />
-        <SectionSwitch target={TYPE} hasSubSections />
         {showContent}
       </Card>
     )

src/components/PositionsActive/PositionsActive.js

@@ -7,7 +7,6 @@ import DataTable from 'ui/DataTable'
 import { checkFetch } from 'state/utils'
 import { getPath } from 'state/query/utils'
 import SectionHeader from 'ui/SectionHeader'
-import SectionSwitch from 'ui/SectionSwitch'
 import queryConstants from 'state/query/constants'
 import getColumns from 'components/Positions/Positions.columns'
 
@@ -110,13 +109,10 @@ class PositionsActive extends PureComponent {
         <SectionHeader
           filter={false}
           target={TYPE}
+          showHeaderTabs
           timeframe={false}
-          title='activepositions.title'
-        />
-        <SectionSwitch
-          target={TYPE}
-          hasSubSections
           refresh={refresh}
+          title='activepositions.title'
         />
         {showContent}
       </Card>

src/components/PositionsAudit/PositionsAudit.js

@@ -7,7 +7,6 @@ import DataTable from 'ui/DataTable'
 import Pagination from 'ui/Pagination'
 import { getPath } from 'state/query/utils'
 import SectionHeader from 'ui/SectionHeader'
-import SectionSwitch from 'ui/SectionSwitch'
 import queryConstants from 'state/query/constants'
 import { checkInit, checkFetch } from 'state/utils'
 import getColumns from 'components/Positions/Positions.columns'
@@ -113,12 +112,9 @@ class PositionsAudit extends PureComponent {
         <SectionHeader
           filter={false}
           target={TYPE}
-          title='paudit.title'
-        />
-        <SectionSwitch
-          target={TYPE}
-          hasSubSections
+          showHeaderTabs
           refresh={refresh}
+          title='paudit.title'
         />
         {showContent}
       </Card>

src/components/Snapshots/Snapshots.js

@@ -154,9 +154,18 @@ class Snapshots extends PureComponent {
     }
 
     return (
-      <Card elevation={Elevation.ZERO} className='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
+      <Card elevation={Elevation.ZERO} className='snapshots col-lg-12 col-md-12 col-sm-12 col-xs-12'>
         <SectionHeader>
           <SectionHeaderTitle>{t('snapshots.title')}</SectionHeaderTitle>
+          <NavSwitcher
+            items={[
+              { value: MENU_POSITIONS, label: t('positions.title') },
+              { value: MENU_TICKERS, label: t('tickers.title') },
+              { value: MENU_WALLETS, label: t('wallets.title') },
+            ]}
+            onChange={this.switchSection}
+            value={section}
+          />
           <SectionHeaderRow>
             <SectionHeaderItem>
               <SectionHeaderItemLabel>
@@ -175,16 +184,6 @@ class Snapshots extends PureComponent {
             <RefreshButton onClick={refresh} />
           </SectionHeaderRow>
         </SectionHeader>
-
-        <NavSwitcher
-          items={[
-            { value: MENU_POSITIONS, label: t('positions.title') },
-            { value: MENU_TICKERS, label: t('tickers.title') },
-            { value: MENU_WALLETS, label: t('wallets.title') },
-          ]}
-          onChange={this.switchSection}
-          value={section}
-        />
         {showContent}
       </Card>
     )

src/components/Snapshots/_Snapshots.scss

@@ -1,14 +1,22 @@
+.snapshots {
+  .section-header {
+    &-title {
+      margin-bottom: 29px;
+    }
+  }
+
 .tickers {
   .tables-row {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: space-between;
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      justify-content: space-between;
 
     &-item {
-      width: 49%;
-      margin-right: 0;
-      min-width: 300px;
+        width: 49%;
+        margin-right: 0;
+        min-width: 300px;
+      }
     }
   }
 }

src/components/Trades/Trades.js

@@ -6,7 +6,6 @@ import { isEmpty } from '@bitfinex/lib-js-util-base'
 import DataTable from 'ui/DataTable'
 import Pagination from 'ui/Pagination'
 import SectionHeader from 'ui/SectionHeader'
-import SectionSwitch from 'ui/SectionSwitch'
 import queryConstants from 'state/query/constants'
 import {
   checkInit,
@@ -102,7 +101,6 @@ class Trades extends PureComponent {
           refresh={refresh}
           clearTargetPairs={this.clearPairs}
         />
-        <SectionSwitch target={TYPE} hasSubSections />
         {showContent}
       </Card>
     )

src/styles/index.scss

@@ -265,7 +265,7 @@ a {
 
 .section-switch {
   margin-left: 1px;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 
   .bp3-button-group  {
     display: block;

src/ui/NavSwitcher/_NavSwitcher.scss

@@ -1,22 +1,23 @@
 .nav-switcher {
   width: 100%;
-  border-bottom: 1px solid var(--borderColor);
-  padding-bottom: 5px;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
+  padding-bottom: 6px;
+  border-bottom: 2px solid var(--borderColor);
 
   &-item {
-    width: fit-content;
-    margin-bottom: 10px;
-    padding: 0 3px 6px 3px;
+    border: none;
+    padding: 7px 0;
+    border-radius: 0;
+    margin-right: 20px;
+    color: var(--color2);
+    min-width: fit-content;
+    background-color: var(--bgColor2);
+    border-bottom: 2px solid var(--borderColor);
     cursor: pointer;
 
-    &:not(:last-child) {
-      margin-right: 24px;
-    }
-
     &--active {
-      color: var(--activeColor);
-      border-bottom: 4px solid var(--activeColor);
+      color: var(--color);
+      border-bottom: 2px solid var(--color);
     }
   }
 }

src/ui/SectionSwitch/SectionSwitch.helpers.js

@@ -113,9 +113,9 @@ export const POSITIONS_SECTIONS = [
   },
 ]
 
-export const getSections = (target, hasSubSections) => {
-  if (_includes(TRADES_TARGETS, target) && hasSubSections) return TRADES_SECTIONS
-  if (_includes(POSITIONS_TARGETS, target) && hasSubSections) return POSITIONS_SECTIONS
+export const getSections = (target) => {
+  if (_includes(TRADES_TARGETS, target)) return TRADES_SECTIONS
+  if (_includes(POSITIONS_TARGETS, target)) return POSITIONS_SECTIONS
   if (_includes(ANALYSIS_STAT_TARGETS, target)) return ANALYSIS_STAT_SECTIONS
   if (_includes(FUNDING_TARGETS, target)) return FUNDING_SECTIONS
   if (_includes(EARNINGS_TARGETS, target)) return EARNINGS_SECTIONS

src/ui/SectionSwitch/_SectionSwitch.scss

@@ -0,0 +1,29 @@
+.section-switch {
+  width: 100%;
+  margin-bottom: 20px;
+  border-bottom: 2px solid var(--borderColor);
+
+  .bp3-button-group {
+    margin-bottom: -2px;
+
+    .bp3-button {
+      border: none;
+      padding: 17px 0;
+      border-radius: 0;
+      color: var(--color2);
+      min-width: fit-content;
+      margin-right: 20px !important;
+      background-color: var(--bgColor2);
+      border-bottom: 2px solid var(--borderColor);
+
+      &:hover {
+        color: var(--color);
+      }
+
+      &.bp3-intent-primary {
+        color: var(--color);
+        border-bottom: 2px solid var(--color);
+      }
+    }
+  }
+}

src/ui/_index.scss

@@ -23,6 +23,7 @@
 @import "./RefreshButton/_RefreshButton.scss";
 @import "./ClearFiltersButton/_ClearFiltersButton.scss";
 @import "./SectionHeader/_SectionHeader.scss";
+@import "./SectionSwitch/_SectionSwitch.scss";
 @import "./Select/_Select.scss";
 @import "./SyncButton/_SyncButton.scss";
 @import "./SyncPrefButton/_SyncPrefButton.scss";