Improve design

Author: IvanSavoskin

src/popup/components/Main/ChangeBlockchainRadioButtonGroup.tsx

@@ -1,4 +1,6 @@
-import { sendMessage } from "@coreUtils//utils";
+import { sendMessage } from "@coreUtils/utils";
+
+import mainStyles from "./styles/Main.module.scss";
 import styles from "./styles/RadioButtons.module.scss";
 
 interface TrackingRadioButtonGroupProps {
@@ -27,7 +29,7 @@ export default function ChangeBlockchainRadioButtonGroup({
 
     return (
         <div>
-            <h2>Blockchain</h2>
+            <h2 className={mainStyles.header}>Blockchain</h2>
             <div className={styles.formToggle}>
                 <div className={styles.formToggleItemLeft}>
                     <input

src/popup/components/Main/FeeInfo.tsx

@@ -4,6 +4,7 @@ import { sendMessage } from "@coreUtils//utils";
 import { Fees, FeesPopupMessage, PopupMessage } from "@models/types";
 
 import styles from "./styles/FeeInfo.module.scss";
+import mainStyles from "./styles/Main.module.scss";
 
 export default function FeeInfo() {
     const [fees, setFees] = useState<Fees | null>();
@@ -32,7 +33,7 @@ export default function FeeInfo() {
 
     return (
         <div>
-            <h2>Fees info</h2>
+            <h2 className={mainStyles.header}>Fees info</h2>
             {fees ? (
                 <div className={styles.container}>
                     <span>Slow</span>

src/popup/components/Main/LastBlockInfo.tsx

@@ -4,6 +4,7 @@ import { sendMessage } from "@coreUtils/utils";
 import { BlockInfo, BlockPopupMessage, PopupMessage } from "@models/types";
 
 import styles from "./styles/LastBlockInfo.module.scss";
+import mainStyles from "./styles/Main.module.scss";
 
 export default function LastBlockInfo() {
     const [lastBlockInfo, setLastBlockInfo] = useState<BlockInfo | null>();
@@ -43,7 +44,7 @@ export default function LastBlockInfo() {
 
     return (
         <div>
-            <h2>Last block info</h2>
+            <h2 className={mainStyles.header}>Last block info</h2>
             {lastBlockInfo?.lastBlockTime && lastBlockInfo?.lastBlockHeight ? (
                 <div className={styles.container}>
                     <div className={styles.item}>

src/popup/components/Main/TrackingRadioButtonGroup.tsx

@@ -1,4 +1,6 @@
 import { sendMessage } from "@coreUtils/utils";
+
+import mainStyles from "./styles/Main.module.scss";
 import styles from "./styles/RadioButtons.module.scss";
 
 interface TrackingRadioButtonGroupProps {
@@ -27,7 +29,7 @@ export default function TrackingRadioButtonGroup({
 
     return (
         <div>
-            <h2>Blocks tracking enabled</h2>
+            <h2 className={mainStyles.header}>Blocks tracking enabled</h2>
             <div className={styles.formToggle}>
                 <div className={styles.formToggleItemLeft}>
                     <input

src/popup/components/Main/index.tsx

@@ -19,7 +19,7 @@ export default function Main() {
     }, []);
 
     return (
-        <div>
+        <>
             <TrackingRadioButtonGroup
                 isTrackingEnabled={isTrackingEnabled}
                 setTrackingEnabled={setIsTrackingEnabled}
@@ -32,6 +32,6 @@ export default function Main() {
             />
             <FeeInfo />
             <LastBlockInfo />
-        </div>
+        </>
     );
 }

src/popup/components/Main/styles/Main.module.scss

@@ -0,0 +1,3 @@
+.header {
+  margin-top: 0;
+}