Refactor styles for 'warning` components (TW only) (#2504)

Extracted from #2502 to be part of #2503
thorchain · Dec 30, 2022 · 02e62cd · 02e62cd
1 parent 1d538e4
commit 02e62cd
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 85 deletions.
diff --git a/src/renderer/components/deposit/add/AssetMissmatchWarning.styles.ts b/src/renderer/components/deposit/add/AssetMissmatchWarning.styles.ts
diff --git a/src/renderer/components/deposit/add/AssetMissmatchWarning.tsx b/src/renderer/components/deposit/add/AssetMissmatchWarning.tsx
@@ -1,40 +1,46 @@
 import React, { useState } from 'react'
 
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import { useIntl } from 'react-intl'
 
 import { Network } from '../../../../shared/api/types'
 import { AssetsWithAddress } from '../../../types/asgardex'
-import * as CStyled from './AssetMissmatchWarning.styles'
-import * as Styled from './Deposit.styles'
+import { Alert } from '../../uielements/alert'
+import { AssetAddress } from '../../uielements/assets/assetAddress'
+import { TextButton } from '../../uielements/button'
 
 export type Props = {
   network: Network
   assets: AssetsWithAddress
+  className?: string
 }
 
 export const AssetMissmatchWarning: React.FC<Props> = (props): JSX.Element => {
-  const { assets: assetsWA, network } = props
+  const { assets: assetsWA, network, className = '' } = props
 
   const intl = useIntl()
 
   const [collapsed, setCollapsed] = useState(false)
 
   const subContent = (
     <>
-      <Styled.AssetWarningInfoButton selected={collapsed} onClick={() => setCollapsed((v) => !v)}>
-        <Styled.AssetWarningInfoButtonLabel>
-          {intl.formatMessage({ id: 'common.informationMore' })}
-        </Styled.AssetWarningInfoButtonLabel>
-        <Styled.AssetWarningInfoButtonIcon selected={collapsed} />
-      </Styled.AssetWarningInfoButton>
+      <TextButton
+        size="normal"
+        color="neutral"
+        className="mr-10px whitespace-nowrap pl-0 !font-mainBold uppercase"
+        onClick={() => setCollapsed((v) => !v)}>
+        {intl.formatMessage({ id: 'common.informationMore' })}
+        <ChevronRightIcon className={`text-turquoise ${collapsed ? 'rotate-90' : ''} ease h-[20px] w-[20px] `} />
+      </TextButton>
       {collapsed && (
         <>
-          <Styled.AssetWarningDescription>
+          <p className="p-0 pb-10px font-main text-[12px] uppercase leading-[17px]">
             {intl.formatMessage({ id: 'deposit.add.assetMissmatch.description' })}
-          </Styled.AssetWarningDescription>
+          </p>
           <div>
             {assetsWA.map(({ asset, address }, index) => (
-              <CStyled.AssetAddress
+              <AssetAddress
+                className="pt-10px first:pt-0"
                 network={network}
                 asset={asset}
                 size="small"
@@ -49,7 +55,8 @@ export const AssetMissmatchWarning: React.FC<Props> = (props): JSX.Element => {
   )
 
   return (
-    <Styled.Alert
+    <Alert
+      className={className}
       type="warning"
       message={intl.formatMessage({ id: 'deposit.add.assetMissmatch.title' })}
       description={subContent}

diff --git a/src/renderer/components/deposit/add/AsymAssetsWarning.tsx b/src/renderer/components/deposit/add/AsymAssetsWarning.tsx
@@ -1,67 +1,77 @@
 import React, { useState } from 'react'
 
+import { ArrowTopRightOnSquareIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import { Asset, assetToString } from '@xchainjs/xchain-util'
 import * as FP from 'fp-ts/lib/function'
 import { FormattedMessage, useIntl } from 'react-intl'
 
 import { Network } from '../../../../shared/api/types'
 import { ASYM_DEPOSIT_TOOL_URL } from '../../../const'
+import { Alert } from '../../uielements/alert'
 import { AssetData } from '../../uielements/assets/assetData'
-import * as Styled from './Deposit.styles'
+import { BorderButton, TextButton } from '../../uielements/button'
 
 export type AsymAssetsWarningProps = {
   network: Network
   assets: Asset[]
   loading: boolean
   onClickOpenAsymTool: FP.Lazy<void>
+  className?: string
 }
 
 export const AsymAssetsWarning: React.FC<AsymAssetsWarningProps> = (props): JSX.Element => {
-  const { assets, network, onClickOpenAsymTool } = props
+  const { assets, network, onClickOpenAsymTool, className = '' } = props
 
   const intl = useIntl()
 
   const [collapsed, setCollapsed] = useState(false)
 
+  const Description: React.FC<{ children: React.ReactNode }> = ({ children }): JSX.Element => (
+    <p className="p-0 pb-10px font-main text-[12px] uppercase leading-[17px]">{children}</p>
+  )
+
   const subContent = (
     <>
-      <Styled.AssetWarningInfoButton selected={collapsed} onClick={() => setCollapsed((v) => !v)}>
-        <Styled.AssetWarningInfoButtonLabel>
-          {intl.formatMessage({ id: 'common.informationMore' })}
-        </Styled.AssetWarningInfoButtonLabel>
-        <Styled.AssetWarningInfoButtonIcon selected={collapsed} />
-      </Styled.AssetWarningInfoButton>
+      <TextButton
+        size="normal"
+        color="neutral"
+        className="mr-10px whitespace-nowrap pl-0 !font-mainBold uppercase"
+        onClick={() => setCollapsed((v) => !v)}>
+        {intl.formatMessage({ id: 'common.informationMore' })}
+        <ChevronRightIcon className={`text-turquoise ${collapsed ? 'rotate-90' : ''} ease h-[20px] w-[20px] `} />
+      </TextButton>
       {collapsed && (
         <>
-          <Styled.AssetWarningDescription>
-            {intl.formatMessage({ id: 'deposit.add.asymAssets.description' })}
-          </Styled.AssetWarningDescription>
+          <Description>{intl.formatMessage({ id: 'deposit.add.asymAssets.description' })}</Description>
           {assets.map((asset) => (
             <AssetData asset={asset} network={network} key={`${assetToString(asset)}`} />
           ))}
-          <Styled.AssetWarningDescription>
+          <Description>
             <FormattedMessage
               id="deposit.add.asymAssets.recoveryDescription"
               values={{
                 url: (
-                  <Styled.AssetWarningDescriptionLink onClick={onClickOpenAsymTool}>
+                  <span
+                    className="cursor-pointer uppercase text-inherit underline hover:text-turquoise"
+                    onClick={onClickOpenAsymTool}>
                     {ASYM_DEPOSIT_TOOL_URL[network]}
-                  </Styled.AssetWarningDescriptionLink>
+                  </span>
                 )
               }}
             />
-          </Styled.AssetWarningDescription>
-          <Styled.WarningOpenExternalUrlButton onClick={onClickOpenAsymTool}>
+          </Description>
+          <BorderButton color="warning" className="my-10px" onClick={onClickOpenAsymTool}>
             {intl.formatMessage({ id: 'deposit.add.asymAssets.recoveryTitle' })}
-            <Styled.AssetWarningOpenExternalUrlIcon />
-          </Styled.WarningOpenExternalUrlButton>
+            <ArrowTopRightOnSquareIcon className="ml-5px h-20px w-20px text-inherit" />
+          </BorderButton>
         </>
       )}
     </>
   )
 
   return (
-    <Styled.Alert
+    <Alert
+      className={className}
       type="warning"
       message={intl.formatMessage({ id: 'deposit.add.asymAssets.title' })}
       description={subContent}

diff --git a/src/renderer/components/deposit/add/PendingAssetsWarning.tsx b/src/renderer/components/deposit/add/PendingAssetsWarning.tsx
@@ -1,13 +1,18 @@
 import React, { useState } from 'react'
 
+import { ArrowTopRightOnSquareIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import { assetToString, baseToAsset, formatAssetAmount } from '@xchainjs/xchain-util'
 import * as FP from 'fp-ts/lib/function'
 import { FormattedMessage, useIntl } from 'react-intl'
 
 import { Network } from '../../../../shared/api/types'
 import { RECOVERY_TOOL_URL } from '../../../const'
 import { AssetWithAmount1e8, AssetsWithAmount1e8 } from '../../../types/asgardex'
-import * as Styled from './Deposit.styles'
+import { Alert } from '../../uielements/alert'
+import { AssetIcon } from '../../uielements/assets/assetIcon'
+import { AssetLabel } from '../../uielements/assets/assetLabel'
+import { BorderButton, TextButton } from '../../uielements/button'
+import { Label } from '../../uielements/label'
 
 type AssetIconAmountProps = {
   assetWA: AssetWithAmount1e8
@@ -22,16 +27,18 @@ const AssetIconAmount: React.FC<AssetIconAmountProps> = (props): JSX.Element =>
     loading
   } = props
   return (
-    <Styled.AssetWarningAssetContainer>
-      <Styled.AssetWarningAssetIcon asset={asset} network={network} />
-      <Styled.AssetWarningAssetLabel asset={asset} />
-      <Styled.AssetWarningAmountLabel loading={loading}>
+    <div className="my-10px flex h-[32px] items-center first:mr-10px last:m-0">
+      <AssetIcon className="mr-5px" size="small" asset={asset} network={network} />
+      <AssetLabel className="p-0" asset={asset} />
+      <Label
+        className="!md:text-[24px] !md:leading-[24px] !w-auto p-0 font-mainBold !text-[17px] !leading-[17px]"
+        loading={loading}>
         {formatAssetAmount({
           amount: baseToAsset(amount1e8),
           trimZeros: true
         })}
-      </Styled.AssetWarningAmountLabel>
-    </Styled.AssetWarningAssetContainer>
+      </Label>
+    </div>
   )
 }
 
@@ -40,29 +47,34 @@ export type PendingAssetsProps = {
   assets: AssetsWithAmount1e8
   loading: boolean
   onClickRecovery: FP.Lazy<void>
+  className?: string
 }
 
 export const PendingAssetsWarning: React.FC<PendingAssetsProps> = (props): JSX.Element => {
-  const { assets, network, loading, onClickRecovery } = props
+  const { assets, network, loading, onClickRecovery, className = '' } = props
 
   const intl = useIntl()
 
   const [collapsed, setCollapsed] = useState(false)
 
+  const Description: React.FC<{ children: React.ReactNode }> = ({ children }): JSX.Element => (
+    <p className="p-0 pb-10px font-main text-[12px] uppercase leading-[17px]">{children}</p>
+  )
+
   const subContent = (
     <>
-      <Styled.AssetWarningInfoButton selected={collapsed} onClick={() => setCollapsed((v) => !v)}>
-        <Styled.AssetWarningInfoButtonLabel>
-          {intl.formatMessage({ id: 'common.informationMore' })}
-        </Styled.AssetWarningInfoButtonLabel>
-        <Styled.AssetWarningInfoButtonIcon selected={collapsed} />
-      </Styled.AssetWarningInfoButton>
+      <TextButton
+        size="normal"
+        color="neutral"
+        className="mr-10px whitespace-nowrap pl-0 !font-mainBold uppercase"
+        onClick={() => setCollapsed((v) => !v)}>
+        {intl.formatMessage({ id: 'common.informationMore' })}
+        <ChevronRightIcon className={`text-turquoise ${collapsed ? 'rotate-90' : ''} ease h-[20px] w-[20px] `} />
+      </TextButton>
 
       {collapsed && (
         <>
-          <Styled.AssetWarningDescription>
-            {intl.formatMessage({ id: 'deposit.add.pendingAssets.description' })}
-          </Styled.AssetWarningDescription>
+          <Description>{intl.formatMessage({ id: 'deposit.add.pendingAssets.description' })}</Description>
           {assets.map((assetWB, index) => (
             <AssetIconAmount
               network={network}
@@ -71,29 +83,32 @@ export const PendingAssetsWarning: React.FC<PendingAssetsProps> = (props): JSX.E
               key={`${assetToString(assetWB.asset)}-${index}`}
             />
           ))}
-          <Styled.AssetWarningDescription>
+          <Description>
             <FormattedMessage
               id="deposit.add.pendingAssets.recoveryDescription"
               values={{
                 url: (
-                  <Styled.AssetWarningDescriptionLink onClick={onClickRecovery}>
+                  <span
+                    className="cursor-pointer uppercase text-inherit underline hover:text-turquoise"
+                    onClick={onClickRecovery}>
                     {RECOVERY_TOOL_URL[network]}
-                  </Styled.AssetWarningDescriptionLink>
+                  </span>
                 )
               }}
             />
-          </Styled.AssetWarningDescription>
-          <Styled.WarningOpenExternalUrlButton onClick={onClickRecovery}>
+          </Description>
+          <BorderButton color="warning" className="my-10px" onClick={onClickRecovery}>
             {intl.formatMessage({ id: 'deposit.add.pendingAssets.recoveryTitle' })}
-            <Styled.AssetWarningOpenExternalUrlIcon />
-          </Styled.WarningOpenExternalUrlButton>
+            <ArrowTopRightOnSquareIcon className="ml-5px h-20px w-20px text-inherit" />
+          </BorderButton>
         </>
       )}
     </>
   )
 
   return (
-    <Styled.Alert
+    <Alert
+      className={className}
       type="warning"
       message={intl.formatMessage({ id: 'deposit.add.pendingAssets.title' })}
       description={subContent}

diff --git a/src/renderer/components/uielements/assets/assetAddress/AssetAddress.tsx b/src/renderer/components/uielements/assets/assetAddress/AssetAddress.tsx
@@ -13,17 +13,18 @@ export type Props = {
   network: Network
   size?: Size
   className?: string
+  classNameAddress?: string
 }
 
 export const AssetAddress: React.FC<Props> = (props): JSX.Element => {
-  const { asset, address, network, size = 'normal', className } = props
+  const { asset, address, network, size = 'normal', className = '', classNameAddress = '' } = props
 
   return (
     <Styled.Wrapper className={className}>
       <AssetIcon asset={asset} size={size} network={network} />
       <Styled.AddressWrapper>
         <Styled.AddressEllipsis
-          className={`${className}-address`}
+          className={`${classNameAddress}`}
           address={address}
           iconSize={size}
           chain={asset.chain}