From 8715ff26992be9447689f74f7f4be248fbd637ba Mon Sep 17 00:00:00 2001 From: Alexey Date: Mon, 11 Nov 2024 19:10:03 +0300 Subject: [PATCH] Update WithdrawalsListItem styles --- .../transfers/withdrawals/WithdrawalsList.js | 8 +-- .../withdrawals/WithdrawalsListItem.js | 33 ++++++++++--- .../withdrawals/WithdrawalsListItem.scss | 16 +++++- .../transfers/withdrawals/_variables.scss | 49 ++++++++++++++----- .../ui/containers/ValueContainer.js | 5 +- .../ui/containers/ValueContainer.scss | 14 ++++++ packages/frontend/src/styles/mixins.scss | 24 ++++----- 7 files changed, 110 insertions(+), 39 deletions(-) diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsList.js b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsList.js index 15bddcfd0..ba4c5aa8f 100644 --- 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' }) { Timestamp - + Tx hash - + Address - + Document - + Amount diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.js b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.js index 915323ca2..e0ef2a9f8 100644 --- 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 (
@@ -15,20 +20,32 @@ function WithdrawalsListItem ({ withdrawal }) { - {withdrawal.txHash} + + + {withdrawal.txHash} + + - {withdrawal?.recipient && - - - {withdrawal.recipient} - + {withdrawal?.recipient + ? + + {withdrawal.recipient} + + : '-' } - - + {withdrawal?.document + ? + + {withdrawal.recipient} + + + : '-' + } @@ -36,7 +53,7 @@ function WithdrawalsListItem ({ withdrawal }) { - + {withdrawal.status}
diff --git a/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.scss b/packages/frontend/src/components/transfers/withdrawals/WithdrawalsListItem.scss index 752aff0ca..84cf04a75 100644 --- 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 index c4836782d..6891adbcf 100644 --- a/packages/frontend/src/components/transfers/withdrawals/_variables.scss +++ b/packages/frontend/src/components/transfers/withdrawals/_variables.scss @@ -1,10 +1,30 @@ @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; } } @@ -12,7 +32,15 @@ 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 index fb49d57b5..e1814db2f 100644 --- 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 (
diff --git a/packages/frontend/src/components/ui/containers/ValueContainer.scss b/packages/frontend/src/components/ui/containers/ValueContainer.scss index 164a2565e..619ee3dba 100644 --- 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 index 29f3c985a..18875eee7 100644 --- 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; }