Merge pull request #820 from autonomys/feat/organizeBrandColor

Organize brand color
autonomys · Aug 27, 2024 · e572e98 · e572e98
2 parents 9d1c1a0 + ca93889
commit e572e98
Show file tree

Hide file tree

Showing 123 changed files with 266 additions and 2,147 deletions.
diff --git a/explorer/src/components/AutoId/index.tsx b/explorer/src/components/AutoId/index.tsx
@@ -8,7 +8,7 @@ export const AutoIdPage: FC = () => {
   return (
     <div className='flex w-full flex-col items-center space-y-4'>
       <div className='w-full'>
-        <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset sm:p-6'>
+        <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo sm:p-6'>
           <div className='mb-10 flex flex-col items-center justify-center'>
             <h1 className='mb-8 mt-6 text-center text-4xl font-bold text-gray-900 dark:text-white'>
               Auto-ID
@@ -31,7 +31,7 @@ export const AutoIdPage: FC = () => {
             </div>
           </div>
         </div>
-        <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset sm:p-6'>
+        <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo sm:p-6'>
           <div className='m-6 flow-root text-gray-900 dark:text-white'>
             <div className='mb-12 flex w-full flex-row items-start justify-between gap-5 overflow-x-auto'>
               <div className='w-1/2 pr-4'>

diff --git a/explorer/src/components/Consensus/Account/AccountBalancePieChart.tsx b/explorer/src/components/Consensus/Account/AccountBalancePieChart.tsx
@@ -34,7 +34,7 @@ export const AccountBalancePieChart: FC<Props> = ({ account }) => {
       id: 'staking',
       label: 'Staking',
       value: staking,
-      color: '#D9F0FC',
+      color: '#ABCFEF',
     },
   ]
 

diff --git a/explorer/src/components/Consensus/Account/AccountBalanceStats.tsx b/explorer/src/components/Consensus/Account/AccountBalanceStats.tsx
@@ -18,7 +18,7 @@ export const AccountBalanceStats: FC<Props> = ({ account, isDesktop = false }) =
   const reservedPercent = accountTotal ? (100 * accountReserved) / accountTotal : 0
 
   const backgroundStyle = !isDesktop
-    ? 'dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset rounded-[20px]'
+    ? 'dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo rounded-[20px]'
     : ''
 
   return (
@@ -39,14 +39,14 @@ export const AccountBalanceStats: FC<Props> = ({ account, isDesktop = false }) =
       <div className='flex w-full items-center lg:gap-4 lg:py-8'>
         <div className='flex flex-row justify-center gap-8 lg:flex-none lg:flex-col'>
           <div className='flex items-center'>
-            <div className='mr-2 h-[30px] w-1 bg-purpleElectric' />
+            <div className='mr-2 h-[30px] w-1 bg-primaryAccent' />
             <StatItem
               title='Free'
               value={`${numberWithCommas(accountFree)} ${TOKEN.symbol} (${freePercent.toFixed(2)}%)`}
             />
           </div>
           <div className='flex items-center'>
-            <div className='mr-2 h-[30px] w-1 bg-blueShade2' />
+            <div className='mr-2 h-[30px] w-1 bg-pastelBlue' />
             <StatItem
               title='Reserved'
               value={`${numberWithCommas(accountReserved)} ${TOKEN.symbol} (${reservedPercent.toFixed(2)}%)`}

diff --git a/explorer/src/components/Consensus/Account/AccountDetailsCard.tsx b/explorer/src/components/Consensus/Account/AccountDetailsCard.tsx
@@ -21,7 +21,7 @@ export const AccountDetailsCard: FC<Props> = ({ account, accountAddress, isDeskt
 
   const theme = section === Routes.nova ? 'ethereum' : 'beachball'
   return (
-    <div className='mb-4 rounded-[20px] border border-slate-100 bg-white p-6 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset md:p-4'>
+    <div className='mb-4 rounded-[20px] border border-slate-100 bg-white p-6 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo md:p-4'>
       <div className='flex w-full items-center gap-3'>
         <Accordion
           title={

diff --git a/explorer/src/components/Consensus/Account/AccountExtrinsicFilterDropdown.tsx b/explorer/src/components/Consensus/Account/AccountExtrinsicFilterDropdown.tsx
@@ -62,7 +62,7 @@ export const AccountExtrinsicFilterDropdown: FC<Props> = ({ filters, setFilters
   return (
     <div className='relative z-10'>
       <Listbox value={selectedPeople} onChange={handleSelect} multiple>
-        <Listbox.Button className='inline-flex w-full justify-center justify-items-end gap-x-1.5 rounded-md bg-white px-2 py-1 text-sm font-semibold text-purpleAccent shadow-sm dark:bg-grayDarker dark:text-white'>
+        <Listbox.Button className='inline-flex w-full justify-center justify-items-end gap-x-1.5 rounded-md bg-white px-2 py-1 text-sm font-semibold text-primaryAccent shadow-sm dark:bg-grayDarker dark:text-white'>
           <div className='size-3'>
             <FunnelIcon />
           </div>

diff --git a/explorer/src/components/Consensus/Account/AccountExtrinsicList.tsx b/explorer/src/components/Consensus/Account/AccountExtrinsicList.tsx
@@ -137,7 +137,7 @@ export const AccountExtrinsicList: FC<Props> = ({ accountId }) => {
         cell: ({ row }: Row) => (
           <Link
             key={`${row.original.id}-extrinsic-block-${row.original.indexInBlock}`}
-            className='hover:text-purpleAccent'
+            className='hover:text-primaryAccent'
             href={INTERNAL_ROUTES.extrinsics.id.page(network, section, row.original.id)}
           >
             <div>{`${row.original.block.height}-${row.original.indexInBlock}`}</div>
@@ -205,9 +205,9 @@ export const AccountExtrinsicList: FC<Props> = ({ accountId }) => {
 
   return (
     <div className='mt-5 flex w-full flex-col align-middle'>
-      <div className='mt-6 rounded-[20px] bg-white p-6 dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset'>
+      <div className='mt-6 rounded-[20px] bg-white p-6 dark:border-none dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo'>
         <div className='flex w-full justify-center gap-2'>
-          <div className='text-sm text-purpleShade2 dark:text-white/75'>Action Filter:</div>
+          <div className='text-sm text-purpleShade dark:text-white/75'>Action Filter:</div>
           <AccountExtrinsicFilterDropdown filters={filters} setFilters={setFilters} />
         </div>
       </div>

diff --git a/explorer/src/components/Consensus/Account/AccountGraphTabs.tsx b/explorer/src/components/Consensus/Account/AccountGraphTabs.tsx
@@ -13,11 +13,11 @@ export const AccountGraphTabs: FC<Props> = ({ children, total, isDesktop = false
   const [selectedTab, setSelectedTab] = useState(0)
 
   const tabStyle = isDesktop
-    ? 'bg-white border border-slate-100 shadow rounded-[20px] p-4 dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset dark:border-none'
+    ? 'bg-white border border-slate-100 shadow rounded-[20px] p-4 dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo dark:border-none'
     : ''
 
   const tabTitleStyle = !isDesktop
-    ? 'bg-white rounded-full mb-5 px-5 dark:bg-blueAccent dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset justify-center items-center'
+    ? 'bg-white rounded-full mb-5 px-5 dark:bg-blueAccent dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo justify-center items-center'
     : ''
 
   const activePillStyle = 'dark:text-white text-white bg-grayDarker dark:bg-blueAccent'

diff --git a/explorer/src/components/Consensus/Account/AccountLatestRewards.tsx b/explorer/src/components/Consensus/Account/AccountLatestRewards.tsx
@@ -23,21 +23,21 @@ export const AccountLatestRewards: FC<AccountLatestRewardsProps> = ({ rewards })
   const { push } = useRouter()
 
   return (
-    <div className='flex w-full flex-col rounded-[20px] border border-gray-200 bg-white px-4 dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset'>
+    <div className='flex w-full flex-col rounded-[20px] border border-gray-200 bg-white px-4 dark:border-none dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo'>
       <div className='flex w-full flex-col gap-6 pl-4'>
         <div className='flex w-full justify-between'>
-          <div className='flex-1 grow text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
+          <div className='flex-1 grow text-[13px] font-normal text-purpleShade dark:text-white/75'>
             Block Number
           </div>
-          <div className='flex-1 grow text-center text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
+          <div className='flex-1 grow text-center text-[13px] font-normal text-purpleShade dark:text-white/75'>
             Type
           </div>
-          <div className='flex-1 grow text-end text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
+          <div className='flex-1 grow text-end text-[13px] font-normal text-purpleShade dark:text-white/75'>
             Amount
           </div>
         </div>
         <div className='w-full'>
-          <ol className='relative w-full border-l border-purpleLight dark:border-blueShade1'>
+          <ol className='relative w-full border-l border-purpleLight dark:border-purpleLighterAccent'>
             {rewards.map(({ id, name, block, amount }, index) => (
               <li
                 key={`${id}-account-rewards-block`}
@@ -49,14 +49,14 @@ export const AccountLatestRewards: FC<AccountLatestRewardsProps> = ({ rewards })
                   <div
                     className={`absolute -left-1.5 size-3 rounded-full ${
                       index === 0
-                        ? 'bg-purpleAccent dark:bg-purpleAccent'
-                        : 'bg-purpleLight dark:bg-blueShade1'
+                        ? 'bg-primaryAccent dark:bg-primaryAccent'
+                        : 'bg-purpleLight dark:bg-purpleLighterAccent'
                     }`}
                   ></div>
                   <div className='-mt-1 ml-4 flex-1 grow text-[13px] font-normal text-grayDark dark:text-white '>
                     <Link
                       key={`${id}-account-index`}
-                      className='hover:text-purpleAccent'
+                      className='hover:text-primaryAccent'
                       href={INTERNAL_ROUTES.blocks.id.page(network, section, block?.height)}
                     >
                       {block?.height}
@@ -82,7 +82,7 @@ export const AccountLatestRewards: FC<AccountLatestRewardsProps> = ({ rewards })
           onClick={() =>
             push(INTERNAL_ROUTES.accounts.rewards.page(network, section, accountId || ''))
           }
-          className='mt-4 w-full rounded-[20px] bg-blueLight py-4 dark:bg-whiteTransparent dark:text-white'
+          className='mt-4 w-full rounded-[20px] bg-purpleLight py-4 dark:bg-whiteTransparent dark:text-white'
         >
           See All Rewards
         </button>

diff --git a/explorer/src/components/Consensus/Account/AccountList.tsx b/explorer/src/components/Consensus/Account/AccountList.tsx
@@ -106,7 +106,7 @@ export const AccountList: FC = () => {
             <Link
               data-testid={`account-link-${row.index}`}
               href={INTERNAL_ROUTES.accounts.id.page(network, section, row.original.id)}
-              className='hover:text-purpleAccent'
+              className='hover:text-primaryAccent'
             >
               <div>{isLargeLaptop ? row.original.id : shortString(row.original.id)}</div>
             </Link>

diff --git a/explorer/src/components/Consensus/Account/AccountPreviousRewards.tsx b/explorer/src/components/Consensus/Account/AccountPreviousRewards.tsx
@@ -242,23 +242,23 @@ export const AccountPreviousRewards: FC<AccountPreviousRewardsProps> = () => {
 
   return (
     <div
-      className='flex w-full flex-col rounded-[20px] border border-gray-200 bg-white p-4 dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset'
+      className='flex w-full flex-col rounded-[20px] border border-gray-200 bg-white p-4 dark:border-none dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo'
       ref={ref}
     >
       <div className='flex w-full flex-col gap-6 py-4 pl-4'>
         <div className='grid w-full grid-cols-3 gap-8 xl:gap-8'>
-          <div className='col-span-1 text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
+          <div className='col-span-1 text-[13px] font-normal text-purpleShade dark:text-white/75'>
             Testnet
           </div>
-          <div className='col-span-1 text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
+          <div className='col-span-1 text-[13px] font-normal text-purpleShade dark:text-white/75'>
             Localized {TOKEN.symbol}
           </div>
-          <div className='col-span-1 text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
+          <div className='col-span-1 text-[13px] font-normal text-purpleShade dark:text-white/75'>
             Mainnet allocation %
           </div>
         </div>
         <div className='w-full'>
-          <ol className='relative border-l border-purpleLight dark:border-blueShade1'>
+          <ol className='relative border-l border-purpleLight dark:border-purpleLighterAccent'>
             {rewardsPhase.map((phase, index) => (
               <li
                 key={`${index}-account-rewards-block`}
@@ -270,8 +270,8 @@ export const AccountPreviousRewards: FC<AccountPreviousRewardsProps> = () => {
                   <div
                     className={`absolute -left-1.5 size-3 rounded-full ${
                       index === 0
-                        ? 'bg-purpleAccent dark:bg-purpleAccent'
-                        : 'bg-purpleLight dark:bg-blueShade1'
+                        ? 'bg-primaryAccent dark:bg-primaryAccent'
+                        : 'bg-purpleLight dark:bg-purpleLighterAccent'
                     }`}
                   ></div>
                   <div className='-mt-1 ml-4 text-[13px] font-normal text-grayDark dark:text-white '>

diff --git a/explorer/src/components/Consensus/Account/AccountRewardList.tsx b/explorer/src/components/Consensus/Account/AccountRewardList.tsx
@@ -116,7 +116,7 @@ export const AccountRewardList: FC = () => {
           return (
             <Link
               key={`${row.original.id}-account-index`}
-              className='hover:text-purpleAccent'
+              className='hover:text-primaryAccent'
               href={INTERNAL_ROUTES.blocks.id.page(network, section, row.original.block?.height)}
             >
               <div>{row.original.block?.height}</div>

diff --git a/explorer/src/components/Consensus/Account/AccountRewardsTabs.tsx b/explorer/src/components/Consensus/Account/AccountRewardsTabs.tsx
@@ -10,11 +10,11 @@ export const AccountRewardsTabs: FC<Props> = ({ children, isDesktop = false }) =
   const [selectedTab, setSelectedTab] = useState(0)
 
   const tabStyle = isDesktop
-    ? 'bg-white border border-slate-100 shadow rounded-[20px] p-4 dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset dark:border-none'
+    ? 'bg-white border border-slate-100 shadow rounded-[20px] p-4 dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo dark:border-none'
     : ''
 
   const tabTitleStyle = !isDesktop
-    ? 'bg-white rounded-full mb-5 px-5 dark:bg-blueAccent dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset justify-center items-center'
+    ? 'bg-white rounded-full mb-5 px-5 dark:bg-blueAccent dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo justify-center items-center'
     : ''
 
   const activePillStyle = 'dark:text-white text-white bg-grayDarker dark:bg-blueAccent'

diff --git a/explorer/src/components/Consensus/Block/BlockDetailsCard.tsx b/explorer/src/components/Consensus/Block/BlockDetailsCard.tsx
@@ -21,7 +21,7 @@ export const BlockDetailsCard: FC<Props> = ({ block, isDesktop = false }) => {
 
   return (
     <div className='w-full'>
-      <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset sm:p-6'>
+      <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo sm:p-6'>
         <div className='mb-10 flex items-center justify-between'>
           <h3 className='text-sm font-semibold leading-none text-gray-900 dark:text-white lg:text-2xl'>
             Block #{block.height}

diff --git a/explorer/src/components/Consensus/Block/BlockDetailsEventList.tsx b/explorer/src/components/Consensus/Block/BlockDetailsEventList.tsx
@@ -75,7 +75,7 @@ export const BlockDetailsEventList: FC = () => {
         cell: ({ row }: Cell<Event>) => (
           <div className='flex w-full gap-1' key={`${row.index}-block-event-id`}>
             <Link
-              className='w-full hover:text-purpleAccent'
+              className='w-full hover:text-primaryAccent'
               href={INTERNAL_ROUTES.events.id.page(network, section, row.original.id)}
             >
               {`${row.original.block?.height}-${row.index}`}

diff --git a/explorer/src/components/Consensus/Block/BlockDetailsExtrinsicList.tsx b/explorer/src/components/Consensus/Block/BlockDetailsExtrinsicList.tsx
@@ -65,7 +65,7 @@ export const BlockDetailsExtrinsicList: FC<Props> = ({ isDesktop = false }) => {
         cell: ({ row }: Cell<Extrinsic>) => (
           <Link
             key={`${row.index}-block-extrinsic-id`}
-            className='hover:text-purpleAccent'
+            className='hover:text-primaryAccent'
             href={INTERNAL_ROUTES.extrinsics.id.page(network, section, row.original.id)}
           >
             {`${row.original.block.height}-${row.index}`}

diff --git a/explorer/src/components/Consensus/Block/BlockDetailsLogList.tsx b/explorer/src/components/Consensus/Block/BlockDetailsLogList.tsx
@@ -36,7 +36,7 @@ export const BlockDetailsLogList: FC<Props> = ({ logs }) => {
         cell: ({ row }: Cell<Log>) => (
           <Link
             key={`${row.index}-block-log-id`}
-            className='hover:text-purpleAccent'
+            className='hover:text-primaryAccent'
             href={INTERNAL_ROUTES.logs.id.page(network, section, row.original.id)}
           >
             {row.original.id}

diff --git a/explorer/src/components/Consensus/Block/BlockList.tsx b/explorer/src/components/Consensus/Block/BlockList.tsx
@@ -99,7 +99,7 @@ export const BlockList: FC = () => {
           <Link
             key={`${row.index}-block-height`}
             data-testid={`block-link-${row.index}`}
-            className='hover:text-purpleAccent'
+            className='hover:text-primaryAccent'
             href={INTERNAL_ROUTES.blocks.id.page(chain, section, row.original.height)}
           >
             <div>{row.original.height}</div>

diff --git a/explorer/src/components/Consensus/Event/EventDetailsCard.tsx b/explorer/src/components/Consensus/Event/EventDetailsCard.tsx
@@ -24,7 +24,7 @@ export const EventDetailsCard: FC<Props> = ({ event }) => {
   return (
     <div className='w-full'>
       <div className='flex'>
-        <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white p-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset sm:p-6'>
+        <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white p-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo sm:p-6'>
           <div className='mb-10 flex items-center justify-between'>
             <h3 className='text-sm font-medium text-grayDarker dark:text-white md:text-2xl'>
               Event #{event.id}
@@ -68,7 +68,7 @@ export const EventDetailsCard: FC<Props> = ({ event }) => {
                 </StyledListItem>
               </List>
             </div>
-            <div className='mb-4 w-full break-all rounded-lg border border-blueLight bg-blueLight p-4 shadow dark:border-none dark:bg-white/10 sm:max-w-xs sm:p-6 lg:max-w-md'>
+            <div className='mb-4 w-full break-all rounded-lg border border-purpleLight bg-purpleLight p-4 shadow dark:border-none dark:bg-white/10 sm:max-w-xs sm:p-6 lg:max-w-md'>
               <Arguments args={event.args} />
             </div>
           </div>

diff --git a/explorer/src/components/Consensus/Event/EventList.tsx b/explorer/src/components/Consensus/Event/EventList.tsx
@@ -99,7 +99,7 @@ export const EventList: FC = () => {
         cell: ({ row }: Cell<Event>) => (
           <div className='flex w-full gap-1' key={`${row.index}-event-id`}>
             <Link
-              className='w-full hover:text-purpleAccent'
+              className='w-full hover:text-primaryAccent'
               href={INTERNAL_ROUTES.events.id.page(network, section, row.original.id)}
               data-testid={`event-link-${row.index}`}
             >
@@ -120,7 +120,7 @@ export const EventList: FC = () => {
         cell: ({ row }: Cell<Event>) => (
           <Link
             key={`${row.index}-event-block`}
-            className='hover:text-purpleAccent'
+            className='hover:text-primaryAccent'
             href={INTERNAL_ROUTES.events.id.page(network, section, row.original.id)}
           >
             {row.original.block?.height}