refactor(topbar): replace inline style with css modules

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");

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}>

src/views/settings/settings.module.css

@@ -1,6 +1,7 @@
 .temporary {
   display: flex;
   position: relative;
+  padding: 5px;
 }
 
 .temporary select {

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}>