From 5477f188c3beed70c6d025b569dbc4fca92b81fa Mon Sep 17 00:00:00 2001
From: Anushka Gupta <112319419+Anushkaguptaaaa@users.noreply.github.com>
Date: Tue, 28 Jan 2025 22:18:28 +0530
Subject: [PATCH] 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
---
 .../CollapsibleDropdown.module.css              | 14 --------------
 .../CollapsibleDropdown/CollapsibleDropdown.tsx |  8 ++++----
 src/style/app.module.css                        | 17 +++++++++++++++++
 3 files changed, 21 insertions(+), 18 deletions(-)
 delete mode 100644 src/components/CollapsibleDropdown/CollapsibleDropdown.module.css

diff --git a/src/components/CollapsibleDropdown/CollapsibleDropdown.module.css b/src/components/CollapsibleDropdown/CollapsibleDropdown.module.css
deleted file mode 100644
index 4337742ecc..0000000000
--- a/src/components/CollapsibleDropdown/CollapsibleDropdown.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.iconWrapper {
-  width: 36px;
-}
-
-.collapseBtn {
-  height: 48px;
-}
-
-.iconWrapperSm {
-  width: 36px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx b/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
index 2991c2ade5..91024e026e 100644
--- a/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
+++ b/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,7 +73,7 @@ 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 => {
@@ -81,7 +81,7 @@ const collapsibleDropdown = ({
                       }}
                       data-testid={`collapsible-dropdown-btn-${index}`}
                     >
-                      <div className={styles.iconWrapperSm}>
+                      <div className={styles.collapsibleDropdownIconWrapperSm}>
                         <i className={`fa ${stringIcon}`} />
                       </div>
                       {tCommon(name || '')}
diff --git a/src/style/app.module.css b/src/style/app.module.css
index af8a19dbed..9b86445c1e 100644
--- a/src/style/app.module.css
+++ b/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;
+}