Update WithdrawalsListItem styles

pshenmic · Nov 11, 2024 · 8715ff2 · 8715ff2
1 parent 31596bd
commit 8715ff2
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 39 deletions.
diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsList.js b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsList.js
@@ -15,16 +15,16 @@ function WithdrawalsList ({ withdrawals = [], headerStyles = 'default' }) {
         <GridItem className={'WithdrawalsList__ColumnTitle'}>
           Timestamp
         </GridItem>
-        <GridItem className={'WithdrawalsList__ColumnTitle WithdrawalsList__ColumnTitle--Hash'}>
+        <GridItem className={'WithdrawalsList__ColumnTitle WithdrawalsList__ColumnTitle--TxHash'}>
           Tx hash
         </GridItem>
-        <GridItem className={'WithdrawalsList__ColumnTitle'}>
+        <GridItem className={'WithdrawalsList__ColumnTitle WithdrawalsList__ColumnTitle--Address'}>
           Address
         </GridItem>
-        <GridItem className={'WithdrawalsList__ColumnTitle'}>
+        <GridItem className={'WithdrawalsList__ColumnTitle WithdrawalsList__ColumnTitle--Document'}>
           Document
         </GridItem>
-        <GridItem className={'WithdrawalsList__ColumnTitle'}>
+        <GridItem className={'WithdrawalsList__ColumnTitle WithdrawalsList__ColumnTitle--Amount'}>
           Amount
         </GridItem>
         <GridItem className={'WithdrawalsList__ColumnTitle'}>

diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.js b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.js
@@ -1,11 +1,16 @@
 import { Grid, GridItem } from '@chakra-ui/react'
 import { ArrowCornerIcon } from '../../ui/icons'
 import { Identifier, Credits } from '../../data'
+import { ValueContainer } from '../../ui/containers'
 import './WithdrawalsListItem.scss'
 
 function WithdrawalsListItem ({ withdrawal }) {
+  console.log(withdrawal)
+
   // temp
   if (!withdrawal?.recipient) withdrawal.recipient = '376neLp6VAHDRvEFUG5ZR1tuevHynCGB3Scjaa8BodG7'
+  if (!withdrawal?.document) withdrawal.document = '9ek4kMqGBHZtoBq3QatveYmDXHLjigeq4JsNZ77Qvsgi'
+  if (!withdrawal?.status) withdrawal.status = 'OK'
 
   return (
     <div className={'WithdrawalsListItem'}>
@@ -15,28 +20,40 @@ function WithdrawalsListItem ({ withdrawal }) {
         </GridItem>
 
         <GridItem className={'WithdrawalsListItem__Column WithdrawalsListItem__Column--TxHash'}>
-          <Identifier styles={['highlight-both']}>{withdrawal.txHash}</Identifier>
+          <a href={'/transaction/' + withdrawal.txHash}>
+            <ValueContainer className={''} light={true} clickable={true}>
+              <Identifier styles={['highlight-both']}>{withdrawal.txHash}</Identifier>
+            </ValueContainer>
+          </a>
         </GridItem>
 
         <GridItem className={'WithdrawalsListItem__Column WithdrawalsListItem__Column--Address'}>
-          {withdrawal?.recipient &&
-            <a href={withdrawal.recipient}>
-              <ArrowCornerIcon color={'brand.normal'} w={'10px'} h={'10px'} mr={'10px'}/>
-              <Identifier styles={['highlight-both']}>{withdrawal.recipient}</Identifier>
-            </a>
+          {withdrawal?.recipient
+            ? <a href={withdrawal.recipient}>
+                <ArrowCornerIcon color={'brand.normal'} w={'10px'} h={'10px'} mr={'10px'}/>
+                <Identifier styles={['highlight-both']}>{withdrawal.recipient}</Identifier>
+              </a>
+            : '-'
           }
         </GridItem>
 
         <GridItem className={'WithdrawalsListItem__Column WithdrawalsListItem__Column--Document'}>
-          -
+          {withdrawal?.document
+            ? <a href={'/document/' + withdrawal.recipient}>
+                <ValueContainer className={''} light={true} clickable={true}>
+                  <Identifier styles={['highlight-both']}>{withdrawal.recipient}</Identifier>
+                </ValueContainer>
+              </a>
+            : '-'
+          }
         </GridItem>
 
         <GridItem className={'WithdrawalsListItem__Column WithdrawalsListItem__Column--Amount'}>
           <Credits>{withdrawal.amount}</Credits>
         </GridItem>
 
         <GridItem className={'WithdrawalsListItem__Column WithdrawalsListItem__Column--Status'}>
-
+          {withdrawal.status}
         </GridItem>
       </Grid>
     </div>

diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.scss b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.scss
@@ -3,7 +3,7 @@
 @import '../../../styles/variables.scss';
 
 .WithdrawalsListItem {
-  @include mixins.DefListItem;
+  @include mixins.DefListItem(false);
   flex-wrap: wrap;
 
   &:hover {
@@ -16,7 +16,15 @@
 
   &__Column {
     @include withdrawals.Column();
-    font-size: 0.688rem;
+
+    &, .Identifier {
+      font-size: 0.688rem;
+    }
+
+    .ValueContainer {
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
 
     &--Timestamp {
       font-size: 0.688rem;
@@ -39,5 +47,9 @@
         overflow: hidden;
       }
     }
+
+    &--Amount {
+      font-weight: 700;
+    }
   }
 }
diff --git a/packages/frontend/src/components/transfers/withdrawals/_variables.scss b/packages/frontend/src/components/transfers/withdrawals/_variables.scss
@@ -1,18 +1,46 @@
 @mixin Columns () {
   display: grid;
   gap: 16px;
-  grid-template-columns: 133px 70px 78px 78px 118px 18px;
+  grid-template-columns:
+    133px
+    minmax(0, 400px)
+    minmax(0, 400px)
+    minmax(0, 400px)
+    minmax(0, 200px)
+    44px;
 
-  @container (max-width: 810px) {
-    grid-template-columns: 133px 70px 78px 78px 118px 18px;
+  @container (max-width: 700px) {
+    grid-template-columns:
+      133px
+      minmax(0, 400px)
+      minmax(0, 400px)
+      minmax(0, 400px)
+      minmax(50px, 200px)
+      44px;
+  }
+
+  @container (max-width: 430px) {
+    grid-template-columns:
+      133px
+      minmax(0, 400px)
+      minmax(0, 200px)
+      44px;
   }
 }
 
 @mixin Column () {
   display: flex;
   align-items: center;
 
-  &--Hash {
+  &:last-child {
+    justify-content: flex-end;
+  }
+
+  &, a {
+    overflow: hidden;
+  }
+
+  &--TxHash {
     max-width: 600px;
   }
 
@@ -26,18 +54,17 @@
     white-space: nowrap;
   }
 
-  &--GasUsed {
-    width: 150px;
+  &--Amount {
+    width: 100%;
+    overflow: visible;
   }
 
-  @container (max-width: 810px) {
-    &--GasUsed {
+  @container (max-width: 430px) {
+    &--Document {
       display: none;
     }
-  }
 
-  @container (max-width: 430px) {
-    &--Sender {
+    &--TxHash {
       display: none;
     }
   }

diff --git a/packages/frontend/src/components/ui/containers/ValueContainer.js b/packages/frontend/src/components/ui/containers/ValueContainer.js
@@ -1,11 +1,12 @@
 import './ValueContainer.scss'
-import { ArrowCornerIcon } from '../../ui/icons'
+import { ArrowCornerIcon } from '../icons'
 
-function ValueContainer ({ children, clickable, external, className, ...props }) {
+function ValueContainer ({ children, clickable, external, light, className, ...props }) {
   let extraClass = ''
 
   if (clickable) extraClass += ' ValueContainer--Clickable'
   if (external) extraClass += ' ValueContainer--External'
+  if (light) extraClass += ' ValueContainer--Light'
 
   return (
     <div className={`ValueContainer ${extraClass} ${className || ''}`} {...props}>

diff --git a/packages/frontend/src/components/ui/containers/ValueContainer.scss b/packages/frontend/src/components/ui/containers/ValueContainer.scss
@@ -24,6 +24,16 @@
     }
   }
 
+  &--Light {
+    background: rgba(255, 255, 255, .1);
+
+    &.ValueContainer--Clickable {
+      &:hover {
+        background: rgba(255, 255, 255, .15);
+      }
+    }
+  }
+
   &--External {
     background: rgba(var(--chakra-colors-brand-normal-rgb), .2);
 
@@ -38,4 +48,8 @@
       background: rgba(var(--chakra-colors-brand-light-rgb), .15);
     }
   }
+
+  &__Value {
+    width: 100%;
+  }
 }
diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss
@@ -1,6 +1,6 @@
 @import './variables.scss';
 
-@mixin DefListItem {
+@mixin DefListItem($clickable: true) {
   display: flex;
   width: 100%;
   text-decoration: none;
@@ -15,17 +15,19 @@
   background-color: rgba(var(--chakra-colors-gray-800-rgb), .5);
   transition: all .1s;
 
-  @media (hover: hover) and (pointer: fine) {
-    &:hover {
-      background-color: var(--chakra-colors-gray-750);
-      text-decoration: none;
-      cursor: pointer;
+  @if $clickable {
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background-color: var(--chakra-colors-gray-750);
+        text-decoration: none;
+        cursor: pointer;
+      }
     }
-  }
 
-  &:active {
-    transform: translateY(1px);
-    box-shadow: 0 0px 9999px 0px rgba(0, 0, 0, .25) inset;
+    &:active {
+      transform: translateY(1px);
+      box-shadow: 0 0 9999px 0 rgba(0, 0, 0, .25) inset;
+    }
   }
 
   &:last-child {
@@ -355,8 +357,6 @@
 }
 
 @mixin TooltipElement () {
-  transition: .2s;
-
   &, .chakra-icon {
     transition: .2s;
   }