From 21b52bfa2889c4bd170ea7db53044b2bcff694e9 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 16 Nov 2023 10:29:33 +0100
Subject: [PATCH] refactor(topbar): replace inline style with css modules

---
 src/components/topbar/topbar.module.css | 12 ++++++++++++
 src/components/topbar/topbar.tsx        |  5 +++--
 src/views/settings/settings.module.css  |  1 +
 src/views/settings/settings.tsx         |  4 ++--
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/topbar/topbar.module.css b/src/components/topbar/topbar.module.css
index 754c831c..0ffee491 100644
--- a/src/components/topbar/topbar.module.css
+++ b/src/components/topbar/topbar.module.css
@@ -53,6 +53,18 @@
   color: var(--text-primary);
 }
 
+.dropChoicesHidden {
+  display: none;
+}
+
+.dropChoicesVisible {
+  display: block;
+}
+
+.separator {
+  cursor: default;
+}
+
 .selectedTitle {
   background: none no-repeat scroll center right;
   background-image: url("/public/assets/buttons/droparrowgray.gif");
diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
index 58e46324..0d522500 100644
--- a/src/components/topbar/topbar.tsx
+++ b/src/components/topbar/topbar.tsx
@@ -14,6 +14,7 @@ const TopBar = () => {
 
   const subscriptions = account?.subscriptions;
   const ethFilteredAddresses = subplebbitAddresses.filter((address: string) => address.endsWith('.eth'));
+  const dropChoicesClass = isClicked && subscriptions?.length ? styles.dropChoicesVisible : styles.dropChoicesHidden;
 
   const toggleClick = () => {
     setIsClicked(!isClicked);
@@ -40,7 +41,7 @@ const TopBar = () => {
             {t('topbar_my_subs')}
           </span>
         </div>
-        <div className={styles.dropChoices} style={{ display: isClicked && subscriptions?.length ? 'block' : 'none' }}>
+        <div className={`${styles.dropChoices} ${dropChoicesClass}`}>
           {subscriptions?.map((subscription: string, index: number) => (
             <Link key={index} to={`/p/${subscription}`} className={styles.choice}>
               {subscription}
@@ -61,7 +62,7 @@ const TopBar = () => {
               </Link>
             </li>
           </ul>
-          <span style={{ cursor: 'default' }} className={styles.separator}>
+          <span className={styles.separator}>
               |  
           </span>
           <ul className={styles.srBar}>
diff --git a/src/views/settings/settings.module.css b/src/views/settings/settings.module.css
index 0b4a3ec4..bda000f9 100644
--- a/src/views/settings/settings.module.css
+++ b/src/views/settings/settings.module.css
@@ -1,6 +1,7 @@
 .temporary {
   display: flex;
   position: relative;
+  padding: 5px;
 }
 
 .temporary select {
diff --git a/src/views/settings/settings.tsx b/src/views/settings/settings.tsx
index 89b9b45b..a850b84b 100644
--- a/src/views/settings/settings.tsx
+++ b/src/views/settings/settings.tsx
@@ -20,7 +20,7 @@ const Settings = () => {
   };
 
   const themeSelect = (
-    <div style={{ padding: '5px' }}>
+    <div>
       <select value={theme} onChange={(e) => setTheme(e.target.value)}>
         <option value='light'>{t('light')}</option>
         <option value='dark'>{t('dark')}</option>
@@ -29,7 +29,7 @@ const Settings = () => {
   );
 
   const languageSelect = (
-    <div style={{ padding: '5px' }}>
+    <div>
       <select value={language} onChange={onSelectLanguage}>
         {availableLanguages.map((lang) => (
           <option key={lang} value={lang}>