fix: UI styling bugs (#1371)

* fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set
interlay · Jun 28, 2023 · 06b0ca4 · 06b0ca4 · vercel · Jun 28, 2023
1 parent 7a8db34
commit 06b0ca4
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 35 deletions.
diff --git a/src/assets/img/exchanges/acala-logo.svg b/src/assets/img/exchanges/acala-logo.svg
diff --git a/src/component-library/Select/Select.style.tsx b/src/component-library/Select/Select.style.tsx
@@ -68,8 +68,7 @@ const StyledTriggerValue = styled(Span)<StyledTriggerValueProps>`
 
 const StyledList = styled(List)`
   overflow: auto;
-  padding: 0 ${theme.dialog.medium.body.paddingX} ${theme.dialog.medium.body.paddingY}
-    ${theme.dialog.medium.body.paddingX};
+  padding: 0 ${theme.dialog.medium.body.paddingX} ${theme.dialog.medium.body.paddingX};
 `;
 
 const StyledChevronDown = styled(ChevronDown)`

diff --git a/src/legacy-components/buttons/InterlayDefaultContainedButton/index.tsx b/src/legacy-components/buttons/InterlayDefaultContainedButton/index.tsx
@@ -29,7 +29,7 @@ const InterlayDefaultContainedButton = React.forwardRef<Ref, Props>(
 
           'border',
           'border-black',
-          'border-opacity-25',
+          'border-opacity-10',
           'font-medium',
 
           disabledOrPending

diff --git a/...ransfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.styles.tsx b/...ransfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.styles.tsx
@@ -1,17 +1,10 @@
 import styled from 'styled-components';
 
 import { ArrowRightCircle } from '@/assets/icons';
-import { Dl, Flex, theme } from '@/component-library';
+import { Flex, theme } from '@/component-library';
 
 import { ChainSelect } from '../ChainSelect';
 
-const StyledDl = styled(Dl)`
-  background-color: ${theme.card.bg.secondary};
-  padding: ${theme.spacing.spacing4};
-  font-size: ${theme.text.xs};
-  border-radius: ${theme.rounded.rg};
-`;
-
 const StyledArrowRightCircle = styled(ArrowRightCircle)`
   transform: rotate(90deg);
   align-self: center;
@@ -39,4 +32,4 @@ const StyledSourceChainSelect = styled(ChainSelect)`
   }
 `;
 
-export { ChainSelectSection, StyledArrowRightCircle, StyledDl, StyledSourceChainSelect };
+export { ChainSelectSection, StyledArrowRightCircle, StyledSourceChainSelect };
diff --git a/...pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.tsx b/...pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.tsx
@@ -6,8 +6,15 @@ import { ChangeEventHandler, Key, useCallback, useEffect, useState } from 'react
 import { useTranslation } from 'react-i18next';
 
 import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils';
-import { Dd, DlGroup, Dt, Flex, LoadingSpinner, TokenInput } from '@/component-library';
-import { AccountSelect, AuthCTA } from '@/components';
+import { Flex, LoadingSpinner, TokenInput } from '@/component-library';
+import {
+  AccountSelect,
+  AuthCTA,
+  TransactionDetails,
+  TransactionDetailsDd,
+  TransactionDetailsDt,
+  TransactionDetailsGroup
+} from '@/components';
 import {
   CROSS_CHAIN_TRANSFER_AMOUNT_FIELD,
   CROSS_CHAIN_TRANSFER_FROM_FIELD,
@@ -30,12 +37,7 @@ import { Transaction, useTransaction } from '@/utils/hooks/transaction';
 import useAccountId from '@/utils/hooks/use-account-id';
 
 import { ChainSelect } from '../ChainSelect';
-import {
-  ChainSelectSection,
-  StyledArrowRightCircle,
-  StyledDl,
-  StyledSourceChainSelect
-} from './CrossChainTransferForm.styles';
+import { ChainSelectSection, StyledArrowRightCircle, StyledSourceChainSelect } from './CrossChainTransferForm.styles';
 
 const CrossChainTransferForm = (): JSX.Element => {
   const [destinationChains, setDestinationChains] = useState<Chains>([]);
@@ -249,20 +251,20 @@ const CrossChainTransferForm = (): JSX.Element => {
             onChange: handleDestinationAccountChange
           })}
         />
-        <StyledDl direction='column' gap='spacing2'>
-          <DlGroup justifyContent='space-between'>
-            <Dt size='xs' color='primary'>
+        <TransactionDetails>
+          <TransactionDetailsGroup>
+            <TransactionDetailsDt size='xs' color='primary'>
               Origin chain transfer fee
-            </Dt>
-            <Dd size='xs'>{currentToken?.originFee}</Dd>
-          </DlGroup>
-          <DlGroup justifyContent='space-between'>
-            <Dt size='xs' color='primary'>
-              Destination chain transfer fee estimate
-            </Dt>
-            <Dd size='xs'>{`${currentToken?.destFee.toString()} ${currentToken?.value}`}</Dd>
-          </DlGroup>
-        </StyledDl>
+            </TransactionDetailsDt>
+            <TransactionDetailsDd size='xs'>{currentToken?.originFee}</TransactionDetailsDd>
+          </TransactionDetailsGroup>
+          <TransactionDetailsGroup>
+            <TransactionDetailsDt>Destination chain transfer fee estimate</TransactionDetailsDt>
+            <TransactionDetailsDd size='xs'>{`${currentToken?.destFee.toString()} ${
+              currentToken?.value
+            }`}</TransactionDetailsDd>
+          </TransactionDetailsGroup>
+        </TransactionDetails>
         <AuthCTA size='large' type='submit' disabled={isCTADisabled} loading={transaction.isLoading}>
           {isCTADisabled ? 'Enter transfer amount' : t('transfer')}
         </AuthCTA>

diff --git a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx
@@ -198,7 +198,7 @@ const Navigation = ({
     <nav className={clsx('px-2', 'space-y-1', { 'flex-1': !onSmallScreen }, className)} {...rest}>
       {PRIMARY_NAVIGATION_ITEMS.map((navigationItem) => {
         if (navigationItem.separator) {
-          return <Hr2 key={navigationItem.name} />;
+          return <Hr2 className='opacity-10' key={navigationItem.name} />;
         }
 
         if (navigationItem.hidden) {