global css

PalisadoesFoundation · Jan 19, 2025 · 8d87af3 · 8d87af3
1 parent dff319a
commit 8d87af3
Show file tree

Hide file tree

Showing 15 changed files with 642 additions and 993 deletions.
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -70,24 +70,24 @@ const leftDrawer = ({
               {({ isActive }) => (
                 <Button
                   variant={isActive === true ? 'success' : ''}
-                  className={` ${
-                    isActive === true
-                      ? 'text-black font-weight-bold'
-                      : 'text-secondary'
-                  }`}
                   style={{
-                    backgroundColor: isActive === true ? '#EAEBEF' : '',
+                    backgroundColor:
+                      isActive === true ? 'var(--sidebar-option-bg)' : '',
+                    fontWeight: isActive ? 'bold' : 'normal',
+                    color: isActive
+                      ? 'var(--sidebar-option-text-active)'
+                      : 'var(--sidebar-option-text-inactive)',
                   }}
                   data-testid="orgsBtn"
                 >
                   <div className={styles.iconWrapper}>
                     <OrganizationsIcon
                       fill="none"
-                      stroke={
+                      stroke={`${
                         isActive === true
-                          ? 'var(--bs-black)'
-                          : 'var(--bs-secondary)'
-                      }
+                          ? 'var(--sidebar-icon-stroke-active)'
+                          : 'var(--sidebar-icon-stroke-inactive)'
+                      }`}
                     />
                   </div>
                   {t('my organizations')}
@@ -100,13 +100,13 @@ const leftDrawer = ({
                   {({ isActive }) => (
                     <Button
                       variant={isActive === true ? 'success' : ''}
-                      className={` ${
-                        isActive === true
-                          ? 'text-black font-weight-bold'
-                          : 'text-secondary'
-                      }`}
                       style={{
-                        backgroundColor: isActive === true ? '#EAEBEF' : '',
+                        backgroundColor:
+                          isActive === true ? 'var(--sidebar-option-bg)' : '',
+                        fontWeight: isActive ? 'bold' : 'normal',
+                        color: isActive
+                          ? 'var(--sidebar-option-text-active)'
+                          : 'var(--sidebar-option-text-inactive)',
                       }}
                       data-testid="rolesBtn"
                     >
@@ -115,8 +115,8 @@ const leftDrawer = ({
                           fill="none"
                           stroke={`${
                             isActive === true
-                              ? 'var(--black)'
-                              : 'var(--bs-secondary)'
+                              ? 'var(--sidebar-icon-stroke-active)'
+                              : 'var(--sidebar-icon-stroke-inactive)'
                           }`}
                         />
                       </div>
@@ -128,13 +128,13 @@ const leftDrawer = ({
                   {({ isActive }) => (
                     <Button
                       variant={isActive === true ? 'success' : ''}
-                      className={` ${
-                        isActive === true
-                          ? 'text-black font-weight-bold'
-                          : 'text-secondary'
-                      }`}
                       style={{
-                        backgroundColor: isActive === true ? '#EAEBEF' : '',
+                        backgroundColor:
+                          isActive === true ? 'var(--sidebar-option-bg)' : '',
+                        fontWeight: isActive ? 'bold' : 'normal',
+                        color: isActive
+                          ? 'var(--sidebar-option-text-active)'
+                          : 'var(--sidebar-option-text-inactive)',
                       }}
                       data-testid="communityProfileBtn"
                     >
@@ -143,8 +143,8 @@ const leftDrawer = ({
                           fill="none"
                           stroke={`${
                             isActive === true
-                              ? 'var(--black)'
-                              : 'var(--bs-secondary)'
+                              ? 'var(--sidebar-icon-stroke-active)'
+                              : 'var(--sidebar-icon-stroke-inactive)'
                           }`}
                         />
                       </div>

diff --git a/src/components/OrgListCard/OrgListCard.module.css b/src/components/OrgListCard/OrgListCard.module.css
diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx
@@ -4,7 +4,7 @@ import TruncatedText from './TruncatedText';
 import FlaskIcon from 'assets/svgs/flask.svg?react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
-import styles from './OrgListCard.module.css';
+import styles from '../../style/app.module.css';
 import { useNavigate } from 'react-router-dom';
 import type {
   InterfaceOrgConnectionInfoType,

diff --git a/src/components/ProfileDropdown/ProfileDropdown.module.css b/src/components/ProfileDropdown/ProfileDropdown.module.css
diff --git a/src/components/ProfileDropdown/ProfileDropdown.tsx b/src/components/ProfileDropdown/ProfileDropdown.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { ButtonGroup, Dropdown } from 'react-bootstrap';
 import { useNavigate, useParams } from 'react-router-dom';
 import useLocalStorage from 'utils/useLocalstorage';
-import styles from './ProfileDropdown.module.css';
+import styles from '../../style/app.module.css';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import { useMutation } from '@apollo/client';
 import { useTranslation } from 'react-i18next';