ui(orderbook): improve readability with alternating colors (#563)

* ui(orderbook): improve readability with alternate colors for rows * ui(orderbook): improve mobile view * ui(orderbook): change row bg color on hover
joinmarket-webui · Nov 5, 2022 · 691faf7 · 691faf7
1 parent 669827c
commit 691faf7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/src/components/Orderbook.module.css b/src/components/Orderbook.module.css
@@ -6,38 +6,39 @@
 .overlayContainer .orderbookContainer {
   display: flex;
   flex-direction: column;
-  gap: 2.5rem;
+  gap: 0.5rem;
   background-color: var(--bs-body-bg);
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 992px) {
   .overlayContainer .orderbookContainer {
+    gap: 1.5rem;
     padding: 2rem;
     border-radius: 0.5rem;
   }
 }
 
-.overlayContainer .orderbookContainer > .titleBar {
+.overlayContainer .orderbookContainer .titleBar {
   min-height: 3.6rem;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
-  padding: 0 0 0.8rem 0;
+  padding: 0 0.5rem 0.8rem 0.5rem;
   background-color: var(--bs-gray-100);
 }
 
-@media only screen and (min-width: 768px) {
-  .overlayContainer .orderbookContainer > .titleBar {
-    align-items: center;
+@media only screen and (min-width: 992px) {
+  .overlayContainer .orderbookContainer .titleBar {
     padding: 0.8rem 1rem;
     border-radius: 0.6rem;
   }
 }
 
 @media only screen and (min-width: 768px) {
-  .overlayContainer .orderbookContainer > .titleBar {
+  .overlayContainer .orderbookContainer .titleBar {
+    align-items: center;
     flex-direction: row;
   }
 }
@@ -46,7 +47,7 @@
   background-color: var(--bs-gray-800);
 }
 
-.overlayContainer .orderbookContainer > .titleBar .refreshButton {
+.overlayContainer .orderbookContainer .titleBar .refreshButton {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -56,6 +57,23 @@
   border: none;
 }
 
-.highlighted td {
+.orderbookContainer tr:nth-child(2n) td {
+  background-color: var(--bs-gray-100);
+}
+:root[data-theme='dark'] .orderbookContainer tr:nth-child(2n) td {
+  background-color: var(--bs-gray-800);
+}
+
+.orderbookContainer tr:hover td {
+  background-color: var(--bs-gray-200) !important;
+}
+:root[data-theme='dark'] tr:hover td {
+  background-color: var(--bs-gray-700) !important;
+}
+
+.orderbookContainer tr.highlighted td {
   background-color: rgba(var(--bs-success-rgb), 0.33) !important;
 }
+.orderbookContainer tr:hover.highlighted td {
+  background-color: rgba(var(--bs-success-rgb), 0.66) !important;
+}
diff --git a/src/components/Orderbook.tsx b/src/components/Orderbook.tsx
@@ -9,7 +9,6 @@ import { TFunction } from 'i18next'
 import { useTranslation } from 'react-i18next'
 import { Helper as ApiHelper } from '../libs/JmWalletApi'
 import * as ObwatchApi from '../libs/JmObwatchApi'
-// @ts-ignore
 import { useSettings } from '../context/SettingsContext'
 import Balance from './Balance'
 import Sprite from './Sprite'
@@ -233,7 +232,7 @@ const OrderbookTable = ({ data }: OrderbookTableProps) => {
           </>
         )}
       </Table>
-      <div className="mt-4 mb-4 mb-md-0">
+      <div className="mt-4 mb-4 mb-lg-0">
         <TablePagination data={data} pagination={pagination} />
       </div>
     </>
@@ -357,7 +356,7 @@ export function Orderbook({ orders, refresh, nickname }: OrderbookProps) {
         ) : (
           <>
             {nickname && (
-              <div className="mb-3">
+              <div className="mb-3 ps-3 ps-md-0 pt-3 pt-lg-0">
                 <rb.Form.Check
                   type="checkbox"
                   id="highlight-own-offers"
@@ -440,7 +439,7 @@ export function OrderbookOverlay({ nickname, show, onHide }: OrderbookOverlayPro
       placement="bottom"
     >
       <rb.Offcanvas.Header>
-        <rb.Container>
+        <rb.Container fluid="lg">
           <div className="w-100 d-flex">
             <div className="d-flex align-items-center flex-1">
               <rb.Offcanvas.Title>{t('orderbook.title')}</rb.Offcanvas.Title>
@@ -454,7 +453,7 @@ export function OrderbookOverlay({ nickname, show, onHide }: OrderbookOverlayPro
         </rb.Container>
       </rb.Offcanvas.Header>
       <rb.Offcanvas.Body>
-        <rb.Container fluid="md" className="py-4 py-sm-5">
+        <rb.Container fluid="lg" className="py-3">
           {!isInitialized && isLoading ? (
             Array(5)
               .fill('')
@@ -470,7 +469,7 @@ export function OrderbookOverlay({ nickname, show, onHide }: OrderbookOverlayPro
               {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
               {orders && (
                 <rb.Row>
-                  <rb.Col>
+                  <rb.Col className="px-0">
                     <Orderbook nickname={nickname} orders={orders} refresh={refresh} />
                   </rb.Col>
                 </rb.Row>