Fix colors of texts

src/components/energy/Energy.module.sass

@@ -170,7 +170,7 @@
     gap: $space_normal
 
     :global(.ant-collapse-content-box)
-      padding: $space_small $space_big 0 $space_big !important
+      padding: $space_small 0 0 $space_large !important
 
       p
         color: #64748B
@@ -224,6 +224,9 @@
 
     width: 100%
 
+  .QuestionWrapper
+    align-items: center
+
 @media (max-width: 560px)
   .InfoSection
     flex-direction: column

src/components/energy/EnergyForm.tsx

@@ -149,7 +149,7 @@ const EnergyInfoSection = ({ amount }: EnergyInfoSectionProps) => {
               'The approximate number of transactions you can complete by using this many SUB tokens'
             }
           >
-            <QuestionCircleOutlined />
+            <QuestionCircleOutlined style={{ color: '#94A3B8' }} />
           </Tooltip>
         </div>
         <div className={styles.ItemValue}>
@@ -166,7 +166,7 @@ const EnergyInfoSection = ({ amount }: EnergyInfoSectionProps) => {
               'The approximate number of transactions you can complete by using energy, which will be created by burning this many SUB tokens'
             }
           >
-            <QuestionCircleOutlined />
+            <QuestionCircleOutlined style={{ color: '#94A3B8' }} />
           </Tooltip>
         </div>
         <div className={styles.ItemValue}>~ {<TokenBalance value={txsCount.toString()} />}</div>

src/components/energy/EnergyPage.tsx

@@ -1,6 +1,5 @@
-import clsx from 'clsx'
+import { useMyAddress } from '../auth/MyAccountsContext'
 import { HeadMetaProps, PageContent } from '../main/PageWrapper'
-import { MutedDiv } from '../utils/MutedText'
 import styles from './Energy.module.sass'
 import EnergyForm from './EnergyForm'
 import EnergyStats from './EnergyStats'
@@ -17,14 +16,16 @@ const meta: HeadMetaProps = {
 }
 
 export const EnergyPage = () => {
+  const myAddress = useMyAddress()
+
   return (
-    <PageContent className={clsx(styles.EnergyStationLayout)} meta={meta}>
+    <PageContent className={styles.EnergyStationLayout} meta={meta}>
       <div className={styles.LeftSideLayout}>
         <div className={styles.TitleSection}>
-          <div className={clsx(styles.Title)}>Energy Station</div>
-          <MutedDiv>{desc}</MutedDiv>
+          <div className={styles.Title}>Energy Station</div>
+          <div className={styles.Description}>{desc}</div>
         </div>
-        <EnergyStats />
+        {myAddress && <EnergyStats />}
         <EnergyForm />
       </div>
       <div className={styles.RightSideLayout}>

src/components/energy/EnergyStats.tsx

@@ -23,12 +23,19 @@ const EnergyStats = () => {
   const transactionsLeft = <TokenBalance value={transactionsCount.toString()} />
 
   const data = [
-    { title: 'Energy left', value: energyLeft, withEnergyIcon: true, tooltipText: 'blabla' },
+    {
+      title: 'Energy left',
+      value: energyLeft,
+      withEnergyIcon: true,
+      tooltipText:
+        'The amount of energy you have left. Please generate more energy before this reaches 0.',
+    },
     {
       title: 'Transactions left',
       value: transactionsLeft,
       withEnergyIcon: false,
-      tooltipText: 'blabla',
+      tooltipText:
+        'How many transactions you can do with your remaining energy. Please generate more energy before this reaches 0.',
     },
   ]