Merge pull request #73 from compolabs/fix/scroll

[798] Add pretty scroll for UI
compolabs · Feb 24, 2024 · 6dcd30c · 6dcd30c
2 parents cbd79ba + a2cc62d
commit 6dcd30c
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 7 deletions.
diff --git a/spark-frontend/src/components/Table.tsx b/spark-frontend/src/components/Table.tsx
@@ -95,6 +95,13 @@ const Root = styled.div<{ hovered?: boolean; fitContent?: boolean }>`
   table {
     width: 100%;
     border-spacing: 0;
+    position: relative;
+
+    thead {
+      position: sticky;
+      top: 0;
+      background: ${({ theme }) => theme.colors.bgPrimary};
+    }
 
     tr {
       color: ${({ theme }) => `${theme.colors.textPrimary}`};

diff --git a/spark-frontend/src/index.css b/spark-frontend/src/index.css
@@ -23,6 +23,32 @@ body.noscroll {
   overflow-y: hidden;
 }
 
+.better-scroll {
+  pointer-events: auto;
+
+  transition: scrollbar-color 250ms;
+
+  -webkit-overflow-scrolling: touch;
+  scrollbar-color: rgba(150, 150, 150, 0) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(150, 150, 150, 0);
+    border-radius: 6px;
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0.01);
+  }
+
+  &:hover,
+  &:focus,
+  &:focus-within {
+    scrollbar-color: rgba(150, 150, 150, 0.3) transparent;
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(150, 150, 150, 0.3);
+    }
+  }
+}
+
 @font-face {
   font-family: "JetBrains Mono";
   src:

diff --git a/spark-frontend/src/screens/ConnectWallet/ConnectWalletDialog.tsx b/spark-frontend/src/screens/ConnectWallet/ConnectWalletDialog.tsx
@@ -125,7 +125,7 @@ const ConnectWalletDialog: React.FC<IProps> = observer(({ onClose, ...rest }) =>
   const renderAgreement = () => {
     return (
       <>
-        <AgreementContainer>{AGREEMENT_TEXT}</AgreementContainer>
+        <AgreementContainer className="better-scroll">{AGREEMENT_TEXT}</AgreementContainer>
         <ButtonContainer>
           <CheckboxContainer>
             <Checkbox checked={settingsStore.isUserAgreedWithTerms} onChange={toggleUserAgreement}>

diff --git a/spark-frontend/src/screens/Faucet/TokensFaucetTable.tsx b/spark-frontend/src/screens/Faucet/TokensFaucetTable.tsx
@@ -15,7 +15,7 @@ interface IProps {}
 const TokensFaucetTable: React.FC<IProps> = observer((assetId) => {
   const { faucetStore } = useStores();
   return (
-    <Root>
+    <Root className="better-scroll">
       <StyledTableRow>
         <TableTitle>Asset</TableTitle>
         <TableTitle>Mint amount</TableTitle>
@@ -84,7 +84,6 @@ const TableTitle = styled(Text)`
 `;
 
 const TableBody = styled(Column)`
-  //overflow: scroll;
   width: 100%;
   box-sizing: border-box;
 `;
diff --git a/...eens/TradeScreen/BottomTables/BottomTablesInterfaceSpot/BottomTablesInterfaceSpotImpl.tsx b/...eens/TradeScreen/BottomTables/BottomTablesInterfaceSpot/BottomTablesInterfaceSpotImpl.tsx
@@ -367,7 +367,7 @@ const BottomTablesInterfaceSpotImpl: React.FC<IProps> = observer(() => {
             </Tooltip>
           </TableSizeSelector>
         </TabContainer>
-        <TableContainer>{renderTable()}</TableContainer>
+        <TableContainer className="better-scroll">{renderTable()}</TableContainer>
       </TableRoot>
       {!!vm.myOrders.length && tabIndex === 0 && <CancelAllButton>Cancel all orders</CancelAllButton>}
     </Root>
@@ -385,7 +385,7 @@ const TableRoot = styled.div`
   flex: 1;
   border-radius: 10px;
   max-width: 100%;
-  overflow-x: scroll;
+  height: 100%;
 
   ${media.mobile} {
     flex: initial;
@@ -475,6 +475,7 @@ const TableSize = styled.div<{ active?: boolean }>`
 
 const TableContainer = styled(SmartFlex)`
   width: 100%;
+  height: 100%;
   overflow-y: scroll;
 `;
 

diff --git a/spark-frontend/src/screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx b/spark-frontend/src/screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx
@@ -49,7 +49,7 @@ const SpotTradesImpl: React.FC<IProps> = observer(() => {
       </Header>
       <SizedBox height={8} />
 
-      <Container>
+      <Container className="better-scroll">
         {trades.map((trade) => (
           <Row key={"trade" + trade.id} alignItems="center" justifyContent="space-between" style={{ marginBottom: 2 }}>
             <Text color={theme.colors.textPrimary} type={TEXT_TYPES.BODY}>
@@ -106,7 +106,6 @@ const Container = styled.div<{
   height: 100%;
   box-sizing: border-box;
   padding: 0 12px;
-  overflow-x: hidden;
   overflow-y: auto;
   max-height: calc(100vh - 200px);