Figma: Refactor CSS files in src/components/CollapsibleDropdown #3330 (…

…#3473)

* Refactoring CollapsibleDropdown to import css from app.module

* Typo Fix - fixing directory file for sytle in CollapsibleDropdowm

* Test Fix: Pritter app.module

src/components/CollapsibleDropdown/CollapsibleDropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { Button, Collapse } from 'react-bootstrap';
 import type { TargetsType } from 'state/reducers/routesReducer';
-import styles from './CollapsibleDropdown.module.css';
+import styles from '../../style/app.module.css';
 import IconComponent from 'components/IconComponent/IconComponent';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -48,7 +48,7 @@ const collapsibleDropdown = ({
         aria-expanded={showDropdown}
         data-testid="collapsible-dropdown"
       >
-        <div className={styles.iconWrapper}>
+        <div className={styles.collapsibleDropdownIconWrapper}>
           <IconComponent
             name={name}
             fill={showDropdown ? 'var(--bs-white)' : 'var(--bs-secondary)'}
@@ -73,15 +73,15 @@ const collapsibleDropdown = ({
                       key={name}
                       variant={isActive === true ? 'success' : 'light'}
                       size="sm"
-                      className={`${styles.collapseBtn} ${
+                      className={`${styles.collapsibleDropdownCollapseBtn} ${
                         isActive === true ? 'text-white' : 'text-secondary'
                       }`}
                       onClick={(): void => {
                         navigate(url);
                       }}
                       data-testid={`collapsible-dropdown-btn-${index}`}
                     >
-                      <div className={styles.iconWrapperSm}>
+                      <div className={styles.collapsibleDropdownIconWrapperSm}>
                         <i className={`fa ${stringIcon}`} />
                       </div>
                       {tCommon(name || '')}

src/style/app.module.css

@@ -9126,3 +9126,20 @@ button[data-testid='createPostBtn'] {
     font-style: oblique;
   }
 }
+
+/* CollapsibleDropdown */
+
+.collapsibleDropdownIconWrapper {
+  width: 36px;
+}
+
+.collapsibleDropdownCollapseBtn {
+  height: 48px;
+}
+
+.collapsibleDropdownIconWrapperSm {
+  width: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}