Move css into theme folder, add dynamic class depending on selected theme

src/components/CoreSyncStatus.tsx

@@ -1,25 +1,28 @@
-import React, { useEffect, useState } from 'react';
-import syncedImg from '../assets/syncStatus/synced.png'
-import syncedMintingImg from '../assets/syncStatus/synced_minting.png'
-import syncingImg from '../assets/syncStatus/syncing.png'
+import { useEffect, useState } from 'react';
+import syncedImg from '../assets/syncStatus/synced.png';
+import syncedMintingImg from '../assets/syncStatus/synced_minting.png';
+import syncingImg from '../assets/syncStatus/syncing.png';
 import { getBaseApiReact } from '../App';
-import './CoreSyncStatus.css'
-export const CoreSyncStatus = ({imageSize, position}) => {
+import '../styles/CoreSyncStatus.css';
+import { useTheme } from '@mui/material';
+
+export const CoreSyncStatus = ({ imageSize, position }) => {
   const [nodeInfos, setNodeInfos] = useState({});
   const [coreInfos, setCoreInfos] = useState({});
   const [isUsingGateway, setIsUsingGateway] = useState(false);
+  const theme = useTheme();
 
   useEffect(() => {
     const getNodeInfos = async () => {
-  
-
       try {
-        setIsUsingGateway(!!getBaseApiReact()?.includes('ext-node.qortal.link'))
+        setIsUsingGateway(
+          !!getBaseApiReact()?.includes('ext-node.qortal.link')
+        );
         const url = `${getBaseApiReact()}/admin/status`;
         const response = await fetch(url, {
-        method: "GET",
+          method: 'GET',
           headers: {
-          "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
         });
         const data = await response.json();
@@ -30,14 +33,12 @@ export const CoreSyncStatus = ({imageSize, position}) => {
     };
 
     const getCoreInfos = async () => {
-  
-
       try {
         const url = `${getBaseApiReact()}/admin/info`;
         const response = await fetch(url, {
-          method: "GET",
+          method: 'GET',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
         });
         const data = await response.json();
@@ -59,55 +60,85 @@ export const CoreSyncStatus = ({imageSize, position}) => {
   }, []);
 
   const renderSyncStatusIcon = () => {
-    const { isSynchronizing = false, syncPercent = 0, isMintingPossible = false, height = 0, numberOfConnections = 0 } = nodeInfos;
-    const buildVersion = coreInfos?.buildVersion ? coreInfos?.buildVersion.substring(0, 12) : '';
+    const {
+      isSynchronizing = false,
+      syncPercent = 0,
+      isMintingPossible = false,
+      height = 0,
+      numberOfConnections = 0,
+    } = nodeInfos;
+    const buildVersion = coreInfos?.buildVersion
+      ? coreInfos?.buildVersion.substring(0, 12)
+      : '';
 
     let imagePath = syncingImg;
-    let message = `Synchronizing`
+    let message = `Synchronizing`;
     if (isMintingPossible && !isUsingGateway) {
       imagePath = syncedMintingImg;
-      message = `${isSynchronizing ? 'Synchronizing' : 'Synchronized'} ${'(Minting)'}`
+      message = `${isSynchronizing ? 'Synchronizing' : 'Synchronized'} ${'(Minting)'}`;
     } else if (isSynchronizing === true && syncPercent === 99) {
-      imagePath = syncingImg
+      imagePath = syncingImg;
     } else if (isSynchronizing && !isMintingPossible && syncPercent === 100) {
       imagePath = syncingImg;
-      message = `Synchronizing ${isUsingGateway ? '' :'(Not Minting)'}`
+      message = `Synchronizing ${isUsingGateway ? '' : '(Not Minting)'}`;
     } else if (!isSynchronizing && !isMintingPossible && syncPercent === 100) {
-      imagePath = syncedImg
-      message = `Synchronized ${isUsingGateway ? '' :'(Not Minting)'}`
+      imagePath = syncedImg;
+      message = `Synchronized ${isUsingGateway ? '' : '(Not Minting)'}`;
     } else if (isSynchronizing && isMintingPossible && syncPercent === 100) {
       imagePath = syncingImg;
-      message = `Synchronizing ${isUsingGateway ? '' :'(Minting)'}`
+      message = `Synchronizing ${isUsingGateway ? '' : '(Minting)'}`;
     } else if (!isSynchronizing && isMintingPossible && syncPercent === 100) {
       imagePath = syncedMintingImg;
-      message = `Synchronized ${isUsingGateway ? '' :'(Minting)'}`
+      message = `Synchronized ${isUsingGateway ? '' : '(Minting)'}`;
     }
 
-    
-
     return (
-      <div className="tooltip" style={{ display: 'inline' }}>
-        <span><img src={imagePath} style={{ height: 'auto', width: imageSize ? imageSize : '24px' }} alt="sync status" /></span>
-        <div className="bottom" style={{
+      <div
+        className="tooltip"
+        data-theme={theme.palette.mode}
+        style={{ display: 'inline' }}
+      >
+        <span>
+          <img
+            src={imagePath}
+            style={{ height: 'auto', width: imageSize ? imageSize : '24px' }}
+            alt="sync status"
+          />
+        </span>
+        <div
+          className="bottom"
+          style={{
             right: position && 'unset',
-          left: position && '0px'
-        }}>
+            left: position && '0px',
+          }}
+        >
           <h3>Core Information</h3>
-          <h4 className="lineHeight">Core Version: <span style={{ color: '#03a9f4' }}>{buildVersion}</span></h4>
+          <h4 className="lineHeight">
+            Core Version:{' '}
+            <span style={{ color: '#03a9f4' }}>{buildVersion}</span>
+          </h4>
           <h4 className="lineHeight">{message}</h4>
-          <h4 className="lineHeight">Block Height: <span style={{ color: '#03a9f4' }}>{height || ''}</span></h4>
-          <h4 className="lineHeight">Connected Peers: <span style={{ color: '#03a9f4' }}>{numberOfConnections || ''}</span></h4>
-          <h4 className="lineHeight">Using public node: <span style={{ color: '#03a9f4' }}>{isUsingGateway?.toString()}</span></h4>
+          <h4 className="lineHeight">
+            Block Height:{' '}
+            <span style={{ color: '#03a9f4' }}>{height || ''}</span>
+          </h4>
+          <h4 className="lineHeight">
+            Connected Peers:{' '}
+            <span style={{ color: '#03a9f4' }}>
+              {numberOfConnections || ''}
+            </span>
+          </h4>
+          <h4 className="lineHeight">
+            Using public node:{' '}
+            <span style={{ color: '#03a9f4' }}>
+              {isUsingGateway?.toString()}
+            </span>
+          </h4>
           <i></i>
         </div>
       </div>
     );
   };
 
-  return (
-    <div id="core-sync-status-id">
-      {renderSyncStatusIcon()}
-    </div>
-  );
+  return <div id="core-sync-status-id">{renderSyncStatusIcon()}</div>;
 };
-

src/styles/CoreSyncStatus.css

@@ -9,25 +9,32 @@
 }
 
 .tooltip .bottom {
-  min-width: 225px;
-  max-width: 250px;
-  top: 35px;
-  right: 0px;
-  /* transform: translate(-50%, 0); */
-  padding: 10px 10px;
-  color: var(--black);
-  background-color: var(--bg-2);
-  font-weight: normal;
-  font-size: 13px;
   border-radius: 8px;
-  position: absolute;
-  z-index: 99999999;
-  box-sizing: border-box;
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
   border: 1px solid var(--black);
-  visibility: hidden;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: normal;
+  max-width: 250px;
+  min-width: 225px;
   opacity: 0;
+  padding: 10px 10px;
+  position: absolute;
+  right: 0px;
+  top: 35px;
   transition: opacity 0.2s;
+  visibility: hidden;
+  z-index: 99999999;
+}
+
+.tooltip[data-theme='light'] .bottom {
+  background-color: #f1f1f1;
+  color: #000000;
+}
+
+.tooltip[data-theme='dark'] .bottom {
+  background-color: var(--bg-2);
+  color: var(--black);
 }
 
 .tooltip:hover .bottom {
@@ -47,13 +54,13 @@
 }
 
 .tooltip .bottom i::after {
-  content: "";
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  left: 50%;
-  transform: translate(-50%, 50%) rotate(45deg);
   background-color: var(--white);
   border: 1px solid var(--black);
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
+  content: '';
+  height: 12px;
+  left: 50%;
+  position: absolute;
+  transform: translate(-50%, 50%) rotate(45deg);
+  width: 12px;
 }