feat(refactor): Move CardHeader to core-ui

packages/app/src/library/Card/Wrappers.ts

@@ -3,69 +3,7 @@
 
 import { PageWidthMediumThreshold } from 'consts'
 import styled from 'styled-components'
-import type { CardHeaderWrapperProps, CardWrapperProps } from '../Graphs/types'
-
-/* CardHeaderWrapper
- *
- * Used as headers for individual cards. Usually a h4 accompanied
- * with a h2. withAction allows a full-width header with a right-side
- * button.
- */
-export const CardHeaderWrapper = styled.div<CardHeaderWrapperProps>`
-  display: flex;
-  flex-flow: ${(props) => (props.$withAction ? 'row' : 'column')} wrap;
-  align-items: ${(props) => (props.$withAction ? 'center' : 'none')};
-  justify-content: ${(props) => (props.$withAction ? 'none' : 'center')};
-  margin-bottom: ${(props) => (props.$withMargin ? '1rem' : 0)};
-  padding: 0rem 0.25rem;
-  width: 100%;
-
-  h2 {
-    font-family: InterBold, sans-serif;
-    margin-bottom: 1rem;
-  }
-  h2,
-  h3 {
-    color: var(--text-color-primary);
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    flex-grow: ${(props) => (props.$withAction ? 1 : 0)};
-
-    @media (max-width: ${PageWidthMediumThreshold}px) {
-      margin-top: 0.5rem;
-    }
-  }
-  h3,
-  h4 {
-    font-family: InterSemiBold, sans-serif;
-  }
-  h4 {
-    margin-top: 0;
-    margin-bottom: 0.4rem;
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    flex-grow: ${(props) => (props.$withAction ? 1 : 0)};
-  }
-  .note {
-    color: var(--text-color-secondary);
-    font-family: InterSemiBold, sans-serif;
-    font-size: 1.1rem;
-    margin-top: 0.2rem;
-    margin-left: 0.4rem;
-  }
-  .networkIcon {
-    width: 1.9rem;
-    height: 1.9rem;
-    margin-right: 0.5rem;
-  }
-
-  > div {
-    display: flex;
-    align-items: center;
-  }
-`
+import type { CardWrapperProps } from '../Graphs/types'
 
 /* CardWrapper
  *

packages/app/src/library/Nominations/index.tsx

@@ -11,12 +11,12 @@ import { useStaking } from 'contexts/Staking'
 import { useValidators } from 'contexts/Validators/ValidatorEntries'
 import { useSyncing } from 'hooks/useSyncing'
 import { useUnstaking } from 'hooks/useUnstaking'
-import { CardHeaderWrapper } from 'library/Card/Wrappers'
 import { ListStatusHeader } from 'library/List'
 import { ValidatorList } from 'library/ValidatorList'
 import { useTranslation } from 'react-i18next'
 import type { MaybeAddress } from 'types'
 import { ButtonHelp, ButtonPrimary } from 'ui-buttons'
+import { ButtonRow, CardHeader } from 'ui-core/base'
 import { useOverlay } from 'ui-overlay'
 import { Wrapper } from './Wrapper'
 
@@ -83,53 +83,51 @@ export const Nominations = ({
 
   return (
     <Wrapper>
-      <CardHeaderWrapper $withAction $withMargin>
+      <CardHeader action margin>
         <h3>
           {isPool ? t('nominate.poolNominations') : t('nominate.nominations')}
           <ButtonHelp marginLeft onClick={() => openHelp('Nominations')} />
         </h3>
-        <div>
-          {displayBtns && (
-            <>
-              <ButtonPrimary
-                text={t('nominate.stop')}
-                iconLeft={faStopCircle}
-                iconTransform="grow-1"
-                disabled={btnsDisabled}
-                onClick={() =>
-                  openModal({
-                    key: 'StopNominations',
-                    options: {
-                      nominations: [],
-                      bondFor,
-                    },
-                    size: 'sm',
-                  })
-                }
-              />
-              <ButtonPrimary
-                text={t('nominate.manage')}
-                iconLeft={faCog}
-                iconTransform="grow-1"
-                disabled={btnsDisabled}
-                marginLeft
-                onClick={() =>
-                  openCanvas({
-                    key: 'ManageNominations',
-                    scroll: false,
-                    options: {
-                      bondFor,
-                      nominator,
-                      nominated,
-                    },
-                    size: 'xl',
-                  })
-                }
-              />
-            </>
-          )}
-        </div>
-      </CardHeaderWrapper>
+        {displayBtns && (
+          <ButtonRow>
+            <ButtonPrimary
+              text={t('nominate.stop')}
+              iconLeft={faStopCircle}
+              iconTransform="grow-1"
+              disabled={btnsDisabled}
+              onClick={() =>
+                openModal({
+                  key: 'StopNominations',
+                  options: {
+                    nominations: [],
+                    bondFor,
+                  },
+                  size: 'sm',
+                })
+              }
+            />
+            <ButtonPrimary
+              text={t('nominate.manage')}
+              iconLeft={faCog}
+              iconTransform="grow-1"
+              disabled={btnsDisabled}
+              marginLeft
+              onClick={() =>
+                openCanvas({
+                  key: 'ManageNominations',
+                  scroll: false,
+                  options: {
+                    bondFor,
+                    nominator,
+                    nominated,
+                  },
+                  size: 'xl',
+                })
+              }
+            />
+          </ButtonRow>
+        )}
+      </CardHeader>
       {!isPool && syncing ? (
         <ListStatusHeader>{`${t('nominate.syncing')}...`}</ListStatusHeader>
       ) : !nominator ? (

packages/app/src/overlay/modals/UpdateReserve/index.tsx

@@ -10,14 +10,14 @@ import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useHelp } from 'contexts/Help'
 import { useNetwork } from 'contexts/Network'
 import { useTransferOptions } from 'contexts/TransferOptions'
-import { CardHeaderWrapper } from 'library/Card/Wrappers'
 import { Title } from 'library/Modal/Title'
 import { StyledSlider } from 'library/StyledSlider'
 import { SliderWrapper } from 'overlay/modals/ManagePool/Wrappers'
 import 'rc-slider/assets/index.css'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonPrimaryInvert } from 'ui-buttons'
+import { CardHeader } from 'ui-core/base'
 import { Padding } from 'ui-core/modal'
 import { useOverlay } from 'ui-overlay'
 import { planckToUnitBn } from 'utils'
@@ -80,9 +80,8 @@ export const UpdateReserve = () => {
             }}
           />
         </div>
-
         <div className="stats">
-          <CardHeaderWrapper>
+          <CardHeader>
             <h4>
               {t('reserveForExistentialDeposit')}
               <FontAwesomeIcon
@@ -106,9 +105,8 @@ export const UpdateReserve = () => {
                 `${minReserve.decimalPlaces(4).toString()} ${unit}`
               )}
             </h2>
-          </CardHeaderWrapper>
-
-          <CardHeaderWrapper>
+          </CardHeader>
+          <CardHeader>
             <h4>{t('reserveForTxFees')}</h4>
             <h2>
               {BigNumber.max(
@@ -121,9 +119,8 @@ export const UpdateReserve = () => {
               &nbsp;
               {unit}
             </h2>
-          </CardHeaderWrapper>
+          </CardHeader>
         </div>
-
         <div className="done">
           <ButtonPrimaryInvert
             text={t('done')}

packages/app/src/overlay/modals/ValidatorGeo/index.tsx

@@ -10,7 +10,7 @@ import { useNetwork } from 'contexts/Network'
 import { usePlugins } from 'contexts/Plugins'
 import { useUi } from 'contexts/UI'
 import { PolkaWatch } from 'controllers/PolkaWatch'
-import { CardHeaderWrapper, CardWrapper } from 'library/Card/Wrappers'
+import { CardWrapper } from 'library/Card/Wrappers'
 import { GeoDonut } from 'library/Graphs/GeoDonut'
 import { formatSize } from 'library/Graphs/Utils'
 import { GraphWrapper } from 'library/Graphs/Wrapper'
@@ -20,6 +20,7 @@ import { StatusLabel } from 'library/StatusLabel'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp } from 'ui-buttons'
+import { CardHeader } from 'ui-core/base'
 import { AddressHeader } from 'ui-core/modal'
 import { useOverlay } from 'ui-overlay'
 
@@ -89,15 +90,15 @@ export const ValidatorGeo = () => {
             height: 350,
           }}
         >
-          <CardHeaderWrapper $withMargin>
+          <CardHeader margin>
             <h4>
               {t('rewardsByCountryAndNetwork')}{' '}
               <ButtonHelp
                 marginLeft
                 onClick={() => openHelp('Rewards By Country And Network')}
               />
             </h4>
-          </CardHeaderWrapper>
+          </CardHeader>
           <div
             ref={ref}
             style={{
@@ -135,7 +136,6 @@ export const ValidatorGeo = () => {
                 maxLabelLen={10}
               />
             </GraphWrapper>
-
             <div style={{ display: isSmallScreen ? 'none' : 'block' }}>
               <GraphWrapper
                 style={{

packages/app/src/pages/Nominate/Active/ManageBond.tsx

@@ -15,10 +15,9 @@ import { useTransferOptions } from 'contexts/TransferOptions'
 import { useSyncing } from 'hooks/useSyncing'
 import { useUnstaking } from 'hooks/useUnstaking'
 import { BondedChart } from 'library/BarChart/BondedChart'
-import { CardHeaderWrapper } from 'library/Card/Wrappers'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonPrimary } from 'ui-buttons'
-import { ButtonRow } from 'ui-core/base'
+import { ButtonRow, CardHeader } from 'ui-core/base'
 import { useOverlay } from 'ui-overlay'
 import { planckToUnitBn } from 'utils'
 
@@ -49,13 +48,13 @@ export const ManageBond = () => {
 
   return (
     <>
-      <CardHeaderWrapper>
+      <CardHeader>
         <h4>
           {t('nominate.bondedFunds')}
           <ButtonHelp marginLeft onClick={() => openHelp('Bonding')} />
         </h4>
         <h2>
-          <Token className="networkIcon" />
+          <Token />
           <Odometer
             value={minDecimalPlaces(
               planckToUnitBn(active, units).toFormat(),
@@ -117,7 +116,7 @@ export const ManageBond = () => {
             text={String(totalUnlockChunks ?? 0)}
           />
         </ButtonRow>
-      </CardHeaderWrapper>
+      </CardHeader>
       <BondedChart
         active={planckToUnitBn(active, units)}
         unlocking={planckToUnitBn(totalUnlocking, units)}

packages/app/src/pages/Nominate/Active/index.tsx

@@ -9,14 +9,14 @@ import { useStaking } from 'contexts/Staking'
 import { useValidators } from 'contexts/Validators/ValidatorEntries'
 import { useSyncing } from 'hooks/useSyncing'
 import { useUnstaking } from 'hooks/useUnstaking'
-import { CardHeaderWrapper, CardWrapper } from 'library/Card/Wrappers'
+import { CardWrapper } from 'library/Card/Wrappers'
 import { ListStatusHeader } from 'library/List'
 import { Nominations } from 'library/Nominations'
 import { StatBoxList } from 'library/StatBoxList'
 import { WithdrawPrompt } from 'library/WithdrawPrompt'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonPrimary } from 'ui-buttons'
-import { PageRow, RowSection } from 'ui-core/base'
+import { CardHeader, PageRow, RowSection } from 'ui-core/base'
 import { useOverlay } from 'ui-overlay'
 import { CommissionPrompt } from './CommissionPrompt'
 import { ManageBond } from './ManageBond'
@@ -67,7 +67,7 @@ export const Active = () => {
             <Nominations bondFor="nominator" nominator={activeAccount} />
           ) : (
             <>
-              <CardHeaderWrapper $withAction $withMargin>
+              <CardHeader action margin>
                 <h3>
                   {t('nominate.nominate', { ns: 'pages' })}
                   <ButtonHelp
@@ -95,7 +95,7 @@ export const Active = () => {
                     }
                   />
                 </div>
-              </CardHeaderWrapper>
+              </CardHeader>
               <ListStatusHeader>
                 {t('notNominating', { ns: 'library' })}.
               </ListStatusHeader>

packages/app/src/pages/Nominate/NominationGeo/NominationGeoList/index.tsx

@@ -6,11 +6,10 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts'
 import { useHelp } from 'contexts/Help'
 import { useNetwork } from 'contexts/Network'
 import { useStaking } from 'contexts/Staking'
-import { CardHeaderWrapper } from 'library/Card/Wrappers'
 import { Header, List, Wrapper as ListWrapper } from 'library/List'
 import { MotionContainer } from 'library/List/MotionContainer'
 import { ButtonHelp, ButtonPrimaryInvert } from 'ui-buttons'
-import { Separator } from 'ui-core/base'
+import { CardHeader, Separator } from 'ui-core/base'
 import type { NomninationGeoListProps } from '../types'
 import { Node } from './Node'
 
@@ -33,15 +32,15 @@ export const NominationGeoList = ({ title, data }: NomninationGeoListProps) => {
       <ListWrapper>
         <Header className="noBorder">
           <div>
-            <CardHeaderWrapper $withAction $withMargin>
+            <CardHeader action margin>
               <h3>
                 {title}
                 <ButtonHelp
                   marginLeft
                   onClick={() => openHelp('Geolocation of Each Nomination')}
                 />
               </h3>
-            </CardHeaderWrapper>
+            </CardHeader>
           </div>
         </Header>
         <List $flexBasisLarge={'33.33%'}>