Move them className to css var (#9797)

packages/apps/public/index.html

@@ -45,6 +45,7 @@
       }
 
       [data-theme="dark"] {
+        --bg-identicon-circle: #282829;
         --bg-input: #38393f;
         --bg-input-error: #48393f;
         --bg-inverse: rgba(78, 78, 78, 0.66);
@@ -55,9 +56,11 @@
         --bg-toggle: #58595f;
         --bg-sidebar: #1a1b20;
         --bg-static-extra: rgba(200, 200, 200, 0.1);
+        --border-identicon: transparent;
         --border-input: rgba(234, 236, 238, .15);
         --border-table: #343536;
         --border-tabs: #343536;
+        --color-bounty-info: #8E8E8E;
         --color-checkbox: rgba(78, 78, 78, 0.66);
         --color-error: rgba(255, 83, 83, 0.8);
         /* --color-header: rgba(244, 242, 240, 0.8); */
@@ -70,6 +73,7 @@
       }
 
       [data-theme="light"] {
+        --bg-identicon-circle: inherit;
         --bg-input: #ffffff;
         --bg-input-error: #fff6f6;
         --bg-inverse: rgba(244, 242, 240, 0.91);
@@ -80,9 +84,11 @@
         --bg-toggle: #e4e5e6;
         --bg-sidebar: #fafafa;
         --bg-static-extra: rgba(200, 200, 200, 0.1);
+        --border-identicon: #ddd;
         --border-input: rgba(34, 36, 38, .15);
         --border-table: #efedeb;
         --border-tabs: #f1efed;
+        --color-bounty-info: #4D4D4D;
         --color-checkbox: rgba(34, 36, 38, 0.15);
         --color-error: rgba(139, 0, 0);
         /* --color-header: rgba(78, 78, 78, 0.8); */

packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx

@@ -4,7 +4,6 @@
 import React from 'react';
 
 import { Icon, styled } from '@polkadot/react-components';
-import { useTheme } from '@polkadot/react-hooks';
 
 interface Props {
   className?: string;
@@ -13,10 +12,8 @@ interface Props {
 }
 
 function BountyInfo ({ className = '', description, type = 'info' }: Props): React.ReactElement<Props> {
-  const { themeClassName } = useTheme();
-
   return (
-    <StyledDiv className={`${themeClassName} ${className}`}>
+    <StyledDiv className={className}>
       {type === 'warning' && (
         <div className='info-icon'>
           <Icon icon={'exclamation-triangle'} />
@@ -35,28 +32,12 @@ const StyledDiv = styled.div`
   font-size: var(--font-size-small);
   line-height: 1.5rem;
 
-  &.theme--dark {
-    .info-icon {
-      margin-right: 0.2rem;
-
-      svg {
-        color: #8E8E8E;
-      }
-    }
-  }
-
-  &.theme--light {
-    .info-icon {
-      margin-right: 0.2rem;
-
-      svg {
-        color: #4D4D4D;
-      }
-    }
-  }
-
   .info-icon {
     margin-right: 0.2rem;
+
+    svg {
+      color: var(--color-bounty-info);
+    }
   }
 
   .description {

packages/react-components/src/IdentityIcon/index.tsx

@@ -8,7 +8,7 @@ import type { AccountId, AccountIndex, Address } from '@polkadot/types/interface
 import React, { useCallback } from 'react';
 
 import { getSystemIcon } from '@polkadot/apps-config';
-import { useApi, useQueue, useTheme } from '@polkadot/react-hooks';
+import { useApi, useQueue } from '@polkadot/react-hooks';
 import BaseIdentityIcon from '@polkadot/react-identicon';
 import { settings } from '@polkadot/ui-settings';
 
@@ -42,7 +42,6 @@ function isCodec (value?: AccountId | AccountIndex | Address | string | Uint8Arr
 function IdentityIcon ({ className = '', forceIconType, prefix, size = 24, theme, value }: Props): React.ReactElement<Props> {
   const { apiEndpoint, isEthereum, specName, systemName } = useApi();
   const { t } = useTranslation();
-  const { themeClassName } = useTheme();
   const { queueAction } = useQueue();
   const thisTheme = theme || getIdentityTheme(apiEndpoint, systemName, specName);
 
@@ -63,7 +62,7 @@ function IdentityIcon ({ className = '', forceIconType, prefix, size = 24, theme
   return (
     <StyledBaseIdentityIcon
       Custom={Custom}
-      className={`${themeClassName} ${className}`}
+      className={className}
       onCopy={onCopy}
       prefix={prefix}
       size={size}
@@ -74,20 +73,13 @@ function IdentityIcon ({ className = '', forceIconType, prefix, size = 24, theme
 }
 
 const StyledBaseIdentityIcon = styled(BaseIdentityIcon)`
+  border: 1px solid var(--border-identicon);
   border-radius: 50%;
   display: inline-block;
   overflow: hidden;
 
-  &.theme--dark {
-    circle:first-child {
-      fill: #282829;
-    }
-
-    border: 1px solid transparent;
-  }
-
-  &.theme--light {
-    border: 1px solid #ddd;
+  circle:first-child {
+    fill: var(--bg-identicon-circle);
   }
 `;
 

packages/test-support/src/pages/Page.tsx

@@ -108,7 +108,10 @@ jest.mock('@polkadot/react-hooks/useRegistrars', () => ({
 }));
 
 jest.mock('@polkadot/react-hooks/useTheme', () => ({
-  useTheme: () => ({ theme: 'light', themeClassName: 'theme--light' })
+  useTheme: () => ({
+    theme: 'light',
+    themeClassName: 'theme--light'
+  })
 }));
 
 export abstract class Page {