From 17601c4deaf836b92247d98c0474659789ff343c Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Fri, 31 Mar 2023 21:31:58 -0700
Subject: [PATCH] Style scrollbars.

---
 components/input/SettingsButton.js            | 14 ++++----
 components/layout/AppLayout.module.css        |  4 +++
 components/metrics/DataTable.js               |  6 ++--
 components/metrics/MetricsTable.module.css    |  1 +
 components/metrics/PagesTable.js              |  2 +-
 components/pages/websites/WebsiteMenuView.js  |  3 +-
 .../pages/websites/WebsiteMenuView.module.css |  8 +++--
 styles/index.css                              | 33 +++++++++++++++++++
 8 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/components/input/SettingsButton.js b/components/input/SettingsButton.js
index 37e785da..84a5d675 100644
--- a/components/input/SettingsButton.js
+++ b/components/input/SettingsButton.js
@@ -1,4 +1,4 @@
-import { Button, Icon, Tooltip, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
+import { Button, Icon, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
 import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
 import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
 import Icons from 'components/icons';
@@ -10,13 +10,11 @@ export default function SettingsButton() {
 
   return (
     <PopupTrigger>
-      <Tooltip label={formatMessage(labels.settings)} position="bottom">
-        <Button variant="quiet">
-          <Icon>
-            <Icons.Gear />
-          </Icon>
-        </Button>
-      </Tooltip>
+      <Button variant="quiet">
+        <Icon>
+          <Icons.Gear />
+        </Icon>
+      </Button>
       <Popup
         className={styles.popup}
         position="bottom"
diff --git a/components/layout/AppLayout.module.css b/components/layout/AppLayout.module.css
index 6cc9e414..228d0c35 100644
--- a/components/layout/AppLayout.module.css
+++ b/components/layout/AppLayout.module.css
@@ -19,3 +19,7 @@
   height: calc(100vh - 60px);
   overflow-y: auto;
 }
+
+.body::-webkit-scrollbar-track {
+  border: 0;
+}
diff --git a/components/metrics/DataTable.js b/components/metrics/DataTable.js
index ceb7ea9c..da77868e 100644
--- a/components/metrics/DataTable.js
+++ b/components/metrics/DataTable.js
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import useMeasure from 'react-use-measure';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
@@ -18,6 +19,7 @@ export default function DataTable({
   virtualize = false,
   showPercentage = true,
 }) {
+  const [ref, bounds] = useMeasure();
   const [format, setFormat] = useState(true);
   const formatFunc = format ? formatLongNumber : formatNumber;
 
@@ -56,10 +58,10 @@ export default function DataTable({
           {metric}
         </div>
       </div>
-      <div className={styles.body} style={{ height }}>
+      <div ref={ref} className={styles.body}>
         {data?.length === 0 && <NoData />}
         {virtualize && data.length > 0 ? (
-          <FixedSizeList height={height} itemCount={data.length} itemSize={30}>
+          <FixedSizeList height={bounds.height} itemCount={data.length} itemSize={30}>
             {Row}
           </FixedSizeList>
         ) : (
diff --git a/components/metrics/MetricsTable.module.css b/components/metrics/MetricsTable.module.css
index ab57932b..fc3bc51e 100644
--- a/components/metrics/MetricsTable.module.css
+++ b/components/metrics/MetricsTable.module.css
@@ -4,6 +4,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
 
 .footer {
diff --git a/components/metrics/PagesTable.js b/components/metrics/PagesTable.js
index fda766f1..fd8fd8b0 100644
--- a/components/metrics/PagesTable.js
+++ b/components/metrics/PagesTable.js
@@ -35,12 +35,12 @@ export default function PagesTable({ websiteId, showFilters, ...props }) {
     <>
       {showFilters && <FilterButtons items={buttons} selectedKey={view} onSelect={handleSelect} />}
       <MetricsTable
+        {...props}
         title={formatMessage(labels.pages)}
         type={view}
         metric={formatMessage(labels.views)}
         websiteId={websiteId}
         renderLabel={renderLink}
-        {...props}
       />
     </>
   );
diff --git a/components/pages/websites/WebsiteMenuView.js b/components/pages/websites/WebsiteMenuView.js
index 92ddfc7b..000a46e5 100644
--- a/components/pages/websites/WebsiteMenuView.js
+++ b/components/pages/websites/WebsiteMenuView.js
@@ -108,11 +108,10 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
         </Link>
         <SideNav items={items} selectedKey={view} shallow={true} />
       </GridColumn>
-      <GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.data}>
+      <GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.content}>
         <DetailsComponent
           websiteId={websiteId}
           websiteDomain={websiteDomain}
-          height={500}
           limit={false}
           animate={false}
           showFilters={true}
diff --git a/components/pages/websites/WebsiteMenuView.module.css b/components/pages/websites/WebsiteMenuView.module.css
index fdaa42fb..4ba6ab38 100644
--- a/components/pages/websites/WebsiteMenuView.module.css
+++ b/components/pages/websites/WebsiteMenuView.module.css
@@ -1,3 +1,7 @@
-.data {
-  min-height: 600px;
+.menu {
+  position: relative;
+}
+
+.content {
+  min-height: 800px;
 }
diff --git a/styles/index.css b/styles/index.css
index 66e307b8..edbc9aee 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -63,3 +63,36 @@ svg {
   width: 100%;
   height: 100%;
 }
+
+::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+  background: transparent;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-right: 2px solid var(--base200);
+}
+
+::-webkit-scrollbar-track:hover {
+  border-right: 2px solid var(--base300);
+}
+
+::-webkit-scrollbar-thumb {
+  position: relative;
+  border-right: 2px solid var(--base600);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  border-right: 8px solid var(--base700);
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  position: relative;
+  border-bottom: 2px solid var(--base600);
+}
+
+::-webkit-scrollbar-thumb:horizontal:hover {
+  border-bottom: 8px solid var(--base700);
+}