From ffd14e54ceaf4237b7bdbb833b03a4b1f8c27554 Mon Sep 17 00:00:00 2001 From: AceHunterr Date: Thu, 9 Jan 2025 22:24:34 +0530 Subject: [PATCH 01/12] Refactored css styles into app.modules.css --- public/locales/en/translation.json | 2 +- .../General/DeleteOrg/DeleteOrg.module.css | 4 +- .../General/DeleteOrg/DeleteOrg.tsx | 6 +- .../OrgProfileFieldSettings.module.css | 4 +- .../OrgProfileFieldSettings.tsx | 2 +- .../General/OrgUpdate/OrgUpdate.module.css | 4 +- .../General/OrgUpdate/OrgUpdate.tsx | 11 ++- src/style/app.module.css | 73 +++++++++++++++++++ 8 files changed, 91 insertions(+), 15 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index a6cb90d3d1..2184d4ba06 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -852,7 +852,7 @@ "title": "Settings", "general": "General", "actionItemCategories": "Action Item Categories", - "updateOrganization": "Update Organization", + "updateOrganization": "Edit Organization", "seeRequest": "See Request", "noData": "No data", "otherSettings": "Other Settings", diff --git a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.module.css b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.module.css index 2b15a2ac0c..1918e39d77 100644 --- a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.module.css +++ b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.module.css @@ -1,4 +1,4 @@ -.settingsBody { +/* .settingsBody { margin: 2.5rem 0; } @@ -22,4 +22,4 @@ .cardBody .textBox { margin: 0 0 3rem 0; color: var(--bs-secondary); -} +} */ diff --git a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx index 8edf11ca22..7e9a431e73 100644 --- a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx +++ b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx @@ -9,7 +9,7 @@ import { REMOVE_SAMPLE_ORGANIZATION_MUTATION, } from 'GraphQl/Mutations/mutations'; import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries'; -import styles from './DeleteOrg.module.css'; +import styles from '../../../../style/app.module.css'; import { useNavigate, useParams } from 'react-router-dom'; import useLocalStorage from 'utils/useLocalstorage'; @@ -96,10 +96,10 @@ function deleteOrg(): JSX.Element { <> {canDelete && ( -
+
{t('deleteOrganization')}
- +
{t('longDelOrgMsg')}
-
+ + + + + + + + + diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx index 641bc27c7d..9e5ff5b0f3 100644 --- a/src/screens/OrgSettings/OrgSettings.tsx +++ b/src/screens/OrgSettings/OrgSettings.tsx @@ -33,6 +33,7 @@ function OrgSettings(): JSX.Element { }); const [tab, setTab] = useState('general'); + const [animationClass, setAnimationClass] = useState('fade-in'); // Default to 'fade-in' // Set the document title using the translated title for this page document.title = t('title'); @@ -44,6 +45,15 @@ function OrgSettings(): JSX.Element { return ; } + const handleTabSwitch = (newTab: SettingType): void => { + // Trigger the exit animation first + setAnimationClass('fade-out'); + setTimeout(() => { + setTab(newTab); + setAnimationClass('fade-in'); + }, 300); + }; + return (
@@ -53,10 +63,14 @@ function OrgSettings(): JSX.Element { {settingtabs.map((setting, index) => ( @@ -65,7 +79,7 @@ function OrgSettings(): JSX.Element { {/* Dropdown menu for selecting settings category */} @@ -82,7 +96,7 @@ function OrgSettings(): JSX.Element { setTab(setting)} + onClick={() => handleTabSwitch(setting)} className={tab === setting ? 'text-secondary' : ''} > {t(setting)} @@ -98,28 +112,30 @@ function OrgSettings(): JSX.Element { {/* Render content based on the selected settings category */} - {(() => { - switch (tab) { - case 'general': - return ( -
- -
- ); - case 'actionItemCategories': - return ( -
- -
- ); - case 'agendaItemCategories': - return ( -
- -
- ); - } - })()} +
+ {(() => { + switch (tab) { + case 'general': + return ( +
+ +
+ ); + case 'actionItemCategories': + return ( +
+ +
+ ); + case 'agendaItemCategories': + return ( +
+ +
+ ); + } + })()} +
); } diff --git a/src/style/app.module.css b/src/style/app.module.css index 451943e987..9f9ebd6442 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -86,7 +86,9 @@ --bs-primary: #0056b3; --bs-warning: #ffc107; --bs-white: #fff; + --bs-gray-700: #333a44; --bs-gray-600: #4b5563; + --bs-gray-500: #5c6878; --bs-gray-400: #9ca3af; --bs-gray-300: #d1d5db; --toggle-button-bg: #1e4e8c; @@ -949,6 +951,9 @@ hr { display: flex; justify-content: space-between; align-items: center; + background-color: var(--bs-gray-200); + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; } .cardHeader .cardTitle { @@ -1699,6 +1704,11 @@ input[type='radio']:checked + label:hover { width: 100%; } +.greenregbtn:hover { + background-color: var(--search-button-bg); + border: 1px solid #1778f2 !important; +} + .manageBtn { margin: 1rem 0 0; margin-top: 15px; @@ -5981,6 +5991,9 @@ button[data-testid='createPostBtn'] { display: flex; justify-content: space-between; align-items: center; + background-color: var(--bs-gray-200); + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; } .deleteOrgCardHeader .cardTitle { @@ -6023,6 +6036,9 @@ button[data-testid='createPostBtn'] { .saveButton { width: 10em; align-self: self-end; + background-color: #1778f2 !important; + color: var(--bs-white) !important; + border: 1px solid #1778f2 !important; } /* OrgUpdate */ @@ -6040,3 +6056,51 @@ button[data-testid='createPostBtn'] { color: var(--bs-danger); margin-bottom: 1rem; } + +.orgSettingHeaderBtn { + background-color: transparent; + color: var(--bs-gray-600); + border: 1px solid var(--bs-gray-400); + box-shadow: 4px 4px 4px var(--grey-bg-color-dark); +} + +.orgSettingHeaderBtn:hover, +.orgSettingHeaderBtn:focus, +.activeTab { + background-color: var(--bs-gray-300) !important; + color: var(--bs-gray-700) !important; + border: 1px solid var(--bs-gray-500) !important; + box-shadow: none !important; +} + +.activeTab { + font-weight: bold; + transition: 0.5s ease-in-out; +} + +.settingsDropdown button { + background-color: transparent; + color: var(--bs-gray-600); + border: 1px solid var(--bs-gray-400); + box-shadow: 4px 4px 4px var(--grey-bg-color-dark); +} + +.settingsDropdown button:hover { + background-color: var(--bs-gray-300); + color: var(--bs-gray-700) !important; + border: 1px solid var(--bs-gray-500); + box-shadow: 4px 4px 4px var(--grey-bg-color-dark); +} + +.settingsDropdown button, +.settingsDropdown button:active, +.settingsDropdown button .show { + background-color: transparent; + border: 1px solid var(--bs-gray-700) !important; +} + +.settingsDropdown button:active { + background-color: var(--blue-search-bg) !important; + color: var(--bs-gray-700) !important; + transform: scale(0.98); +} From a4ee3c7565dd8caf4d2bb7b5ccbf28b548985c29 Mon Sep 17 00:00:00 2001 From: AceHunterr Date: Tue, 14 Jan 2025 03:00:37 +0530 Subject: [PATCH 03/12] Updated Settings UI --- src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx index 1ae008418b..66776b402e 100644 --- a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx +++ b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx @@ -123,7 +123,7 @@ function deleteOrg(): JSX.Element { onHide={toggleDeleteModal} data-testid="orgDeleteModal" > - +
{t('deleteOrganization')}
 {t('deleteMsg')} From 44daf3aa6723a12e46f9d8b3ca21759372523825 Mon Sep 17 00:00:00 2001 From: AceHunterr Date: Tue, 14 Jan 2025 03:37:43 +0530 Subject: [PATCH 04/12] Fixed bugs --- public/locales/fr/translation.json | 1 + public/locales/hi/translation.json | 1 + public/locales/sp/translation.json | 1 + public/locales/zh/translation.json | 1 + src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx | 2 -- 5 files changed, 4 insertions(+), 2 deletions(-) diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json index 886f995f18..2066772640 100644 --- a/public/locales/fr/translation.json +++ b/public/locales/fr/translation.json @@ -875,6 +875,7 @@ "enterNameOrganization": "Entrez le nom de l'organisation", "successfulUpdated": "Organisation mise à jour avec succès", "changesReset": "Formulaire réinitialisé avec succès", + "resetChanges": "réinitialiserLesModifications", "name": "Nom", "description": "Description", "location": "Lieu", diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json index d1d9068d89..383f59bf0e 100644 --- a/public/locales/hi/translation.json +++ b/public/locales/hi/translation.json @@ -875,6 +875,7 @@ "enterNameOrganization": "संगठन का नाम दर्ज करें", "successfulUpdated": "संगठन सफलतापूर्वक अद्यतन किया गया", "changesReset": "फ़ॉर्म सफलतापूर्वक रीसेट किया गया", + "resetChanges": "परिवर्तनरीसेटकरें", "name": "नाम", "description": "विवरण", "location": "स्थान", diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json index 32199802d3..70bee0b6fd 100644 --- a/public/locales/sp/translation.json +++ b/public/locales/sp/translation.json @@ -879,6 +879,7 @@ "userRegistrationRequired": "Registro de usuario requerido", "isVisibleInSearch": "Visible en la búsqueda", "saveChanges": "Guardar cambios", + "resetChanges": "restablecerCambios", "cancel": "Cancelar", "enterNameOrganization": "Ingrese el nombre de la organización", "successfulUpdated": "Exitoso actualizado", diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json index c5df64aff9..b8a3bbe2ff 100644 --- a/public/locales/zh/translation.json +++ b/public/locales/zh/translation.json @@ -875,6 +875,7 @@ "enterNameOrganization": "输入组织名称", "successfulUpdated": "组织更新成功", "changesReset": "表单重置成功", + "resetChanges": "重置更改", "name": "名称", "description": "描述", "location": "位置", diff --git a/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx index 6377ccea87..c30ed0fae1 100644 --- a/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx +++ b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx @@ -142,7 +142,6 @@ function orgUpdate(props: InterfaceOrgUpdateProps): JSX.Element { file: formState.orgImage, }, }); - // istanbul ignore next if (data) { refetch({ id: orgId }); toast.success(t('successfulUpdated') as string); @@ -358,7 +357,6 @@ function orgUpdate(props: InterfaceOrgUpdateProps): JSX.Element { onChange={async (e: React.ChangeEvent): Promise => { const target = e.target as HTMLInputElement; const file = target.files && target.files[0]; - /* istanbul ignore else */ if (file) setFormState({ ...formState, From eb98a2310c3ada8526f44341a916b9e6cf9b1654 Mon Sep 17 00:00:00 2001 From: AceHunterr Date: Wed, 15 Jan 2025 22:06:12 +0530 Subject: [PATCH 05/12] fixed ui changes --- src/assets/css/app.css | 26 ++-- src/style/app.module.css | 290 ++++----------------------------------- 2 files changed, 40 insertions(+), 276 deletions(-) diff --git a/src/assets/css/app.css b/src/assets/css/app.css index 83db8df571..3ceeb559a4 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -2833,21 +2833,21 @@ textarea.form-control-lg { } .reset-changes-btn { - color: #afffe8 !important; + color: #1778f2 !important; background-color: var(--bs-white) !important; - border: 1px solid #afffe8 !important; + border: 1px solid #1778f2 !important; } .reset-changes-btn:hover, .reset-changes-btn:active { - background-color: #afffe8 !important; + background-color: #1778f2 !important; color: var(--bs-white) !important; } .save-changes-btn { - background-color: #afffe8 !important; + background-color: #1778f2 !important; color: var(--bs-white) !important; - border: 1px solid #afffe8 !important; + border: 1px solid #1778f2 !important; } .btn-check { @@ -3963,7 +3963,7 @@ fieldset:disabled .btn { --bs-dropdown-link-hover-color: var(--bs-body-color); --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg); --bs-dropdown-link-active-color: #fff; - --bs-dropdown-link-active-bg: #a8c7fa; + --bs-dropdown-link-active-bg: #31bb6b; --bs-dropdown-link-disabled-color: var(--bs-tertiary-color); --bs-dropdown-item-padding-x: 1rem; --bs-dropdown-item-padding-y: 0.25rem; @@ -4362,15 +4362,15 @@ fieldset:disabled .btn { } .dropdown button { - color: #afffe8; - border: 1px solid #afffe8; + color: #1778f2; + border: 1px solid #1778f2; } .dropdown button:hover, .dropdown button:active { color: var(--bs-white); - background-color: #afffe8; - border: 1px solid #afffe8; + background-color: #1778f2; + border: 1px solid #1778f2; } .dropdown .show { @@ -4378,9 +4378,9 @@ fieldset:disabled .btn { } .createSettingBtn { - background-color: #afffe8 !important; + background-color: #1778f2 !important; color: var(--bs-white) !important; - border: 1px solid #afffe8 !important; + border: 1px solid #1778f2 !important; } .btn-group-vertical { @@ -5729,7 +5729,7 @@ fieldset:disabled .btn { --bs-progress-border-radius: var(--bs-border-radius); --bs-progress-box-shadow: var(--bs-box-shadow-inset); --bs-progress-bar-color: #fff; - --bs-progress-bar-bg: #0056b3; + --bs-progress-bar-bg: #31bb6b; --bs-progress-bar-transition: width 0.6s ease; display: flex; height: var(--bs-progress-height); diff --git a/src/style/app.module.css b/src/style/app.module.css index c7ea999e20..e28f52d1cb 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -55,7 +55,7 @@ --tablerow-bg: #eff1f7; --date-picker-bg: #f2f2f2; --table-bg-color: var(--grey-bg-color); - --tablerow-bg-color: #ffffff; + --tablerow-bg-color: var(--dropdown-hover-color); --row-background: var(--bs-white, var(--bs-white)); --modal-background: rgba(0, 0, 0, 0.7); @@ -93,16 +93,16 @@ --bs-gray-400: #9ca3af; --bs-gray-300: #d1d5db; --toggle-button-bg: #1e4e8c; - --table-head-bg: #eaebef; + + --table-head-bg: var(--blue-subtle, var(--blue-color)); --table-head-color: var(--bs-white, var(--white-color)); - --table-header-color: #000000; + + --table-header-color: var(--bs-white, var(--bs-gray-300)); --input-area-color: #f1f3f6; --date-picker-background: #f2f2f2; --grey-bg-color-dark: #707070; --dropdown-border-color: #cccccc; --primary-border-solid: 1px solid var(--dropdown-border-color); - --light-blue: #a8c7fa; - --dark-blue: #afffe8; --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* breakpoints */ @@ -197,7 +197,7 @@ font-size: 20px; margin-bottom: 30px; padding-bottom: 5px; - border-bottom: 3px solid var(--light-blue); + border-bottom: 3px solid var(--light-green); width: 15%; } @@ -207,7 +207,7 @@ font-size: 18px; margin-bottom: 20px; padding-bottom: 5px; - border-bottom: 3px solid var(--light-blue); + border-bottom: 3px solid var(--light-green); width: 60%; } @@ -285,15 +285,7 @@ margin-bottom: 10px; */ } -.dropdown:is( - :hover, - :focus, - :active, - :focus-visible, - .show, - :disabled, - :checked - ) { +.dropdown:is(:hover, :focus, :active, :focus-visible, .show) { background-color: transparent !important; border: 1px solid var(--brown-color); color: var(--brown-color) !important; @@ -301,21 +293,8 @@ .dropdown:is(:focus, :focus-visible) { outline: 2px solid var(--highlight-color, var(--search-button-bg)); - border: 1px solid var(--brown-color); -} - -.dropdown:not(:focus) { - background-color: var(--bs-white); - border: 1px solid var(--brown-color); - color: var(--brown-color) !important; } -/* .dropdown:disabled { - background-color: transparent !important; - border: 1px solid var(--brown-color); - color: var(--brown-color) !important; -} */ - .dropdownItem { background-color: var(--bs-white) !important; color: var(--brown-color) !important; @@ -403,11 +382,6 @@ gap: 8px; } -.deleteButton:is(:hover, :active) { - background-color: var(--delete-button-color) !important; - color: white; -} - .actionItemDeleteButton { background-color: var(--delete-button-bg); color: var(--delete-button-color); @@ -446,10 +420,6 @@ box-shadow: 0 1px 1px var(--input-shadow-color); } -.inputField:focus { - box-shadow: 0 0 0 0.25rem var(--light-blue); -} - .inputFieldModal { margin-bottom: 10px; background-color: var(--bs-white); @@ -481,49 +451,24 @@ .searchButton:active { transform: scale(0.95); - background-color: var(--search-button-hover-bg, #286fe0) !important; - border-color: transparent !important; } .addButton { margin-bottom: 10px; - background-color: var(--light-blue); + background-color: var(--search-button-bg); border-color: var(--grey-bg-color); } -.addButton:is(:hover, :active) { - background-color: var(--dark-blue) !important; +.addButton:hover { + background-color: var(--light-blue-color); border-color: var(--search-button-border); } -.removeButton { - margin-bottom: 10px; - background-color: var(--delete-button-bg); - color: var(--delete-button-color); - margin-right: 10px; -} - -.removeButton:is(:hover, :active, :focus) { - background-color: var(--delete-button-color) !important; - border-color: var(--delete-button-color); - color: white; -} - .yesButton { background-color: var(--search-button-bg); border-color: var(--search-button-border); } -.regularBtn { - background-color: var(--search-button-bg); - border-color: var(--search-button-border); -} - -.regularBtn:is(:hover, :active) { - background-color: #286fe0 !important; - border-color: var(--search-button-border) !important; -} - .searchIcon { color: var(--brown-color); } @@ -563,56 +508,12 @@ overflow-y: auto; } -.scrollContainer { - height: 100px; - overflow-y: auto; - margin-bottom: 1rem; -} - -.memberBadge { - display: flex; - align-items: center; - padding: 5px 10px; - border-radius: 12px; - box-shadow: 0 1px 3px var(--bs-gray-400); - max-width: calc(100% - 2rem); -} - -.loadingDiv { - min-height: 300px; - display: flex; - justify-content: center; - align-items: center; -} - -.tagBadge { - display: flex; - align-items: center; - padding: 5px 10px; - border-radius: 12px; - box-shadow: 0 1px 3px var(--bs-gray-400); - max-width: calc(100% - 2rem); -} - .tableHeader { background-color: var(--table-head-bg); color: var(--table-header-color); font-size: var(--font-size-header); } -.editButton { - background-color: var(--light-blue); - color: var(--brown-color); - border-color: var(--grey-bg-color); - --bs-btn-active-bg: var(--dark-blue); - --bs-btn-active-border-color: var(--grey-bg-color); -} - -.editButton:is(:hover, :active) { - background-color: var(--dark-blue); - border-color: var(--search-button-border); -} - .errorContainer { min-height: 100vh; } @@ -663,7 +564,6 @@ scrollbar-color: var(--bs-gray-400) var(--bs-white); max-height: calc(100vh - 18rem); overflow: auto; - margin-top: 20px !important; } .tagsBreadCrumbs:hover { @@ -767,18 +667,6 @@ hr { display: flex; justify-content: center; align-items: center; - /* background-color: var(--search-button-bg); */ -} - -.switch input { - /* box-shadow: 0 0 0.1rem 0.2rem var(--light-blue); */ - --bs-form-switch-bg: transparent; -} - -.switch input:checked { - background-color: var(--dark-blue); - border-color: var(--dark-blue); - box-shadow: 0 0 0.1rem 0.2rem var(--light-blue); } .pageNotFound { @@ -805,7 +693,7 @@ hr { .pageNotFound h1.head { font-size: 250px; font-weight: 900; - color: var(--light-blue); + color: var(--light-green); letter-spacing: 25px; margin: 10px 0 0 0; } @@ -848,11 +736,10 @@ hr { .greenregbtnPledge { margin-top: 15px; border: 1px solid var(--bs-gray-300); - border-color: var(--grey-bg-color); box-shadow: 0 2px 2px var(--grey-border-box-color); padding: 10px 10px; border-radius: 5px; - background-color: var(--search-button-bg); + background-color: var(--bs-primary); width: 100%; font-size: 16px; color: var(--bs-white); @@ -886,7 +773,7 @@ hr { .inputFieldPledge { background-color: var(--bs-white); - box-shadow: 0 1px 1px var(--light-blue); + box-shadow: 0 1px 1px var(--light-green); } .dropdownPledge { @@ -988,10 +875,6 @@ hr { gap: 0.3rem; } -/* .progressBar .bg-info { - background-color: #286fe0 !important; -} */ - .endpoints { display: flex; position: relative; @@ -1053,20 +936,10 @@ hr { display: flex; justify-content: center; align-items: center; - border-color: var(--grey-border-box-color); -} - -.toggleBtnPledge:is(:focus, :active, :checked) + label { - color: black !important; - border-color: black !important; -} - -.toggleBtnPledge:not(:checked) + label { - color: var(--subtle-blue-grey-hover) !important; } -.toggleBtnPledge:is(:hover) + label { - color: var(--light-blue) !important; +.toggleBtnPledge:hover { + color: var(--light-green) !important; } .card { @@ -1320,7 +1193,7 @@ hr { } .customcell { - background-color: var(--light-blue) !important; + background-color: var(--light-green) !important; color: var(--bs-white) !important; font-size: medium !important; font-weight: 500 !important; @@ -1346,7 +1219,7 @@ hr { } .table-body > .table-row:nth-child(2n) { - background: var(--light-blue) !important; + background: var(--light-neon-green) !important; } .organizationFundCampaignContainer { @@ -1367,12 +1240,11 @@ hr { .greenregbtnOrganizationFundCampaign { margin: 1rem 0 0; margin-top: 15px; - /* border: 1px solid var(--search-button-bg); */ - border-color: var(--grey-bg-color); + border: 1px solid var(--bs-gray-300); box-shadow: 0 2px 2px var(--grey-border-box-color); padding: 10px 10px; border-radius: 5px; - background-color: var(--search-button-bg); + background-color: var(--bs-primary); width: 100%; font-size: 16px; color: var(--bs-white); @@ -1385,11 +1257,6 @@ hr { flex: 1; } -.greenregbtnOrganizationFundCampaign:hover { - background-color: #286fe0; - border-color: var(--grey-bg-color); -} - .goalButtonOrganizationFundCampaign { border: 1px solid var(--grey-border-box-color) !important; color: var(--grey-bg-color-dark) !important; @@ -1713,13 +1580,6 @@ hr { .modalHeader { border: none; padding-bottom: 0; - background-color: var(--white-color) !important; - padding: 1rem 1rem; - color: #000000; -} - -.modalHeader div { - color: #000000 !important; } .label { @@ -1816,7 +1676,7 @@ hr { } .toggleBtn:hover { - color: var(--light-blue) !important; + color: var(--light-green) !important; } input[type='radio']:checked + label { @@ -1857,7 +1717,7 @@ input[type='radio']:checked + label:hover { .greenregbtn:hover { background-color: var(--search-button-bg); - border: 1px solid #afffe8 !important; + border: 1px solid #1778f2 !important; } .manageBtn { @@ -1930,14 +1790,6 @@ input[type='radio']:checked + label:hover { box-shadow: 0 1px 1px var(--brand-primary); } -.dropdowns { - background-color: var(--bs-white); - border: 1px solid var(--dropdown-border-color); - position: relative; - display: inline-block; - color: black; -} - .chipIcon { height: 0.9rem !important; } @@ -1948,19 +1800,12 @@ input[type='radio']:checked + label:hover { .active { background-color: var(--status-active-bg); - color: var(--light-blue) !important; - border-color: var(--light-blue) !important; } .pending { background-color: var(--status-pending-bg); - color: var(--light-blue) !important; - border-color: var(--light-blue) !important; -} - -.checkboxButton input:checked { - background-color: var(--dark-blue); - border-color: var(--dark-blue); + color: var(--status-pending-text); + border-color: var(--status-pending-border); } /* Modals */ @@ -2041,7 +1886,6 @@ input[type='radio']:checked + label:hover { border: 0.5px solid var(--brown-color); } .searchButtonOrgList { - background-color: var(--light-blue); position: absolute; z-index: 10; bottom: 0; @@ -3579,7 +3423,7 @@ button[data-testid='createPostBtn'] { display: flex !important; align-items: center; background-color: transparent; - color: var(--light-blue); + color: var(--light-green); } .entryaction .spinner-grow { @@ -3589,86 +3433,6 @@ button[data-testid='createPostBtn'] { } } -.entrytoggle { - margin: 24px 24px 0 auto; - width: fit-content; -} - -.entryaction { - display: flex !important; -} - -.entryaction i { - margin-right: 8px; - margin-top: 4px; -} - -.entryaction .spinner-grow { - height: 1rem; - width: 1rem; - margin-right: 8px; -} - -.admedia { - object-fit: cover; - height: 16rem; -} - -.buttons { - display: flex; - justify-content: flex-end; -} - -.addCard { - width: 28rem; -} - -.dropdownButton { - background-color: transparent; - color: #000; - border: none; - cursor: pointer; - display: flex; - width: 100%; - justify-content: flex-end; - padding: 8px 10px; -} - -.dropdownContainer { - position: relative; - display: inline-block; -} - -.dropdownmenu { - display: none; - position: absolute; - z-index: 1; - background-color: white; - width: 120px; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); - padding: 5px 0; - margin: 0; - list-style-type: none; - right: 0; - top: 100%; -} - -.dropdownmenu li { - cursor: pointer; - padding: 8px 16px; - text-decoration: none; - display: block; - color: #333; -} - -.dropdownmenu li:hover { - background-color: #f1f1f1; -} - -.dropdownContainer:hover .dropdownmenu { - display: block; -} - .leftDrawer { width: calc(300px + 2rem); position: fixed; @@ -6275,9 +6039,9 @@ button[data-testid='createPostBtn'] { .saveButton { width: 10em; align-self: self-end; - background-color: #afffe8 !important; + background-color: #1778f2 !important; color: var(--bs-white) !important; - border: 1px solid #afffe8 !important; + border: 1px solid #1778f2 !important; } /* OrgUpdate */ From 2b2e5ed028216be67b6717a77dc0cdc186693c8f Mon Sep 17 00:00:00 2001 From: AceHunterr Date: Wed, 15 Jan 2025 22:25:07 +0530 Subject: [PATCH 06/12] Fixed test issue --- public/locales/en/translation.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 4f236ceb88..b1f4b24102 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -910,7 +910,7 @@ "dependentLocality": "Dependent Locality", "sortingCode": "Sorting code", "state": "State / Province", - "userRegistrationRequired": "Is Public", + "userRegistrationRequired": "User Registration Required", "isVisibleInSearch": "Visible in Search", "enterNameOrganization": "Enter Organization Name", "successfulUpdated": "Organization updated successfully", From 7e7bab22960b3322f40d3441a48bae11e3ca0dab Mon Sep 17 00:00:00 2001 From: AceHunterr Date: Sun, 19 Jan 2025 03:54:11 +0530 Subject: [PATCH 07/12] Fixed UI changes for Org Settings Page --- src/assets/css/app.css | 109 +++++----- .../ChangeLanguageDropDown.tsx | 6 +- .../EditCustomFieldDropDown.tsx | 6 +- .../ActionItemCategories/CategoryModal.tsx | 52 +++-- .../OrgActionItemCategories.tsx | 41 +++- .../General/DeleteOrg/DeleteOrg.tsx | 11 +- .../OrgProfileFieldSettings.tsx | 9 +- .../General/OrgUpdate/ImagePicker.tsx | 62 ++++++ .../General/OrgUpdate/OrgUpdate.tsx | 38 +++- .../ProfileDropdown/ProfileDropdown.tsx | 2 +- src/screens/OrgSettings/OrgSettings.tsx | 70 ++++--- src/style/app.module.css | 186 ++++++++++++++---- 12 files changed, 444 insertions(+), 148 deletions(-) create mode 100644 src/components/OrgSettings/General/OrgUpdate/ImagePicker.tsx diff --git a/src/assets/css/app.css b/src/assets/css/app.css index 3ceeb559a4..de7ef84a73 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -2456,6 +2456,7 @@ progress { border: 1px solid var(--bs-border-color); appearance: none; border-radius: var(--bs-border-radius); + box-shadow: none; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; @@ -2478,9 +2479,10 @@ progress { .form-control:focus { color: var(--bs-body-color); background-color: #f2f2f2; - border-color: #a8c7fa; + box-shadow: 0 6px 5px var(--bs-gray-400) !important; + /* border-color: #a8c7fa; */ outline: 0; - box-shadow: 0 0 0 0.25rem rgba(168, 199, 250, 0.25); + /* box-shadow: 0 0 0 0.25rem rgba(168, 199, 250, 0.25); */ } .form-control::-webkit-date-and-time-value { @@ -2744,7 +2746,7 @@ textarea.form-control-lg { } .form-check-input:focus { - border-color: #a8c7fa; + /* border-color: #a8c7fa; */ outline: 0; box-shadow: 0 0 0 0.25rem rgba(168, 199, 250, 0.25); } @@ -2833,21 +2835,15 @@ textarea.form-control-lg { } .reset-changes-btn { - color: #1778f2 !important; + color: var(--subtle-blue-grey) !important; background-color: var(--bs-white) !important; - border: 1px solid #1778f2 !important; -} - -.reset-changes-btn:hover, -.reset-changes-btn:active { - background-color: #1778f2 !important; - color: var(--bs-white) !important; + border: 1px solid var(--subtle-blue-grey) !important; } .save-changes-btn { - background-color: #1778f2 !important; + background-color: var(--subtle-blue-grey) !important; color: var(--bs-white) !important; - border: 1px solid #1778f2 !important; + border: 1px solid var(--subtle-blue-grey) !important; } .btn-check { @@ -3522,7 +3518,7 @@ textarea.form-control.is-invalid { background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); outline: 0; - box-shadow: var(--bs-btn-focus-box-shadow); + box-shadow: 0 7px 4px var(--bs-gray-300) !important; } .btn-check:focus-visible + .btn { @@ -3537,8 +3533,9 @@ textarea.form-control.is-invalid { .btn.active, .btn.show { color: var(--bs-btn-active-color); - background-color: var(--search-button-bg); - border-color: var(--bs-btn-active-border-color); + /* background-color: var(--subtle-blue-grey); */ + border-color: var(--bs-btn-active-color); + box-shadow: 0 6px 5px var(--bs-gray-400) !important; } .btn-check:checked + .btn:focus-visible, @@ -3930,7 +3927,7 @@ fieldset:disabled .btn { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; - content: ''; + /* content: ''; */ border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; @@ -4220,13 +4217,13 @@ fieldset:disabled .btn { .dropdown-item:hover, .dropdown-item:focus { - color: var(--bs-dropdown-link-hover-color); + color: var(--bs-btn-active-color); background-color: var(--bs-dropdown-link-hover-bg); } .dropdown-item.active, .dropdown-item:active { - color: var(--bs-dropdown-link-active-color); + /* color: var(--bs-dropdown-link-active-color); */ text-decoration: none; background-color: var(--search-button-bg); } @@ -4362,25 +4359,59 @@ fieldset:disabled .btn { } .dropdown button { - color: #1778f2; - border: 1px solid #1778f2; + /* color: var(--subtle-blue-grey); */ + border: 1px solid #555555; } .dropdown button:hover, -.dropdown button:active { - color: var(--bs-white); - background-color: #1778f2; - border: 1px solid #1778f2; +.dropdown button:active, +.dropdown button:focus { + /* color: var(--bs-white); + background-color: var(--subtle-blue-grey); */ + /* border: 1px solid var(--subtle-blue-grey); */ + /* background-color: white !important; + color: var(--subtle-blue-grey) !important; */ + border: 1px solid #555555 !important; + background-color: var(--bs-white) !important; } .dropdown .show { - border: 1px solid var(--search-button-bg); + border: 1px solid var(--bs-gray-600); + /* box-shadow: 6px 6px 5px var(--subtle-blue-grey) !important; */ +} + +.dropdown-menu.show { + box-shadow: 6px 6px 5px var(--bs-gray-400) !important; + border: 1px solid var(--bs-gray-300); +} + +/* Customised Dropdowns CSS */ +.customDropdown button { + color: var(--subtle-blue-grey); + border: 1px solid var(--subtle-blue-grey); +} + +.customDropdown button:hover, +.customDropdown button:active, +.customDropdown button:focus { + background-color: white !important; + color: var(--subtle-blue-grey) !important; + border: 1px solid var(--subtle-blue-grey) !important; +} + +.customDropdown .show { + border: 1px solid var(--bs-gray-600); +} + +.customDropdown .dropdown-menu .show { + box-shadow: 6px 6px 5px var(--bs-gray-400) !important; + border: 1px solid var(--bs-gray-300); } .createSettingBtn { - background-color: #1778f2 !important; + background-color: var(--subtle-blue-grey) !important; color: var(--bs-white) !important; - border: 1px solid #1778f2 !important; + border: 1px solid var(--subtle-blue-grey) !important; } .btn-group-vertical { @@ -14164,28 +14195,12 @@ fieldset:disabled .btn { .btn-warning:active, .btn-info:hover, .btn-info:active { - color: #fff !important; - box-shadow: inset 50px 50px 40px rgba(0, 0, 0, 0.5); + /* color: #fff !important; + box-shadow: inset 50px 50px 40px rgba(0, 0, 0, 0.5); */ background-blend-mode: multiply; - /* background-color: #6c757d ; */ - /* filter: brightness(0.85); */ + box-shadow: 0 6px 5px var(--bs-gray-400) !important; } -/* .btn-primary{ - --hover-bg: #6c757d !important; -} - - -.btn-primary:hover, -.btn-primary:active{ - --hover-bg: hsl(var(--button-hue, 0), 100%, 60%) !important; -} - -.btn-primary:hover, -.btn-primary:active{ - --hover-bg: hsl(var(--button-hue, 0), 100%, 0%) !important; -} */ - .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-secondary:hover, diff --git a/src/components/ChangeLanguageDropdown/ChangeLanguageDropDown.tsx b/src/components/ChangeLanguageDropdown/ChangeLanguageDropDown.tsx index ac758be867..0ce8bcc301 100644 --- a/src/components/ChangeLanguageDropdown/ChangeLanguageDropDown.tsx +++ b/src/components/ChangeLanguageDropdown/ChangeLanguageDropDown.tsx @@ -57,12 +57,12 @@ const ChangeLanguageDropDown = ( return ( {languages.map((language, index: number) => ( @@ -83,7 +83,7 @@ const ChangeLanguageDropDown = ( {languages.map((language, index: number) => ( => changeLanguage(language.code)} disabled={currentLanguageCode === language.code} data-testid={`change-language-btn-${language.code}`} diff --git a/src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.tsx b/src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.tsx index 2350d2c9c4..afcc9eb07b 100644 --- a/src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.tsx +++ b/src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.tsx @@ -44,11 +44,11 @@ const EditOrgCustomFieldDropDown = ({ return ( {customFieldData.type ? t(customFieldData.type) : tCommon('none')} @@ -57,7 +57,7 @@ const EditOrgCustomFieldDropDown = ({ {availableFieldTypes.map((customFieldType, index: number) => ( { setCustomFieldData({ diff --git a/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx b/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx index 317ec9f118..d48d831f7b 100644 --- a/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx +++ b/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx @@ -56,6 +56,10 @@ const CategoryModal: FC = ({ isDisabled: category?.isDisabled ?? false, }); + const blueSearchBg = getComputedStyle( + document.documentElement, + ).getPropertyValue('--blue-search-bg'); + const { name, isDisabled } = formState; useEffect(() => { @@ -143,14 +147,14 @@ const CategoryModal: FC = ({

{t('categoryDetails')}

- + */}
= ({ sx={{ '& .MuiOutlinedInput-root': { '&:hover fieldset': { - borderColor: '#a8c7fa', + borderColor: blueSearchBg.trim(), }, '&.Mui-focused fieldset': { - borderColor: '#a8c7fa', + borderColor: blueSearchBg.trim(), }, }, + '& .MuiInputLabel-root': { + color: 'gray', + }, + '& .MuiInputLabel-root.Mui-focused': { + color: blueSearchBg.trim(), + }, }} /> @@ -199,16 +209,30 @@ const CategoryModal: FC = ({ /> - +
+ + +
diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx index 216bafb12a..a2f4acdb44 100644 --- a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx +++ b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx @@ -18,6 +18,8 @@ import dayjs from 'dayjs'; import { Chip, Stack } from '@mui/material'; import CategoryModal from './CategoryModal'; import SortingButton from 'subComponents/SortingButton'; +// import { borderColor } from '@mui/system'; +// import { blue } from '@mui/material/colors'; enum ModalState { SAME = 'same', @@ -33,6 +35,13 @@ interface InterfaceActionItemCategoryProps { orgId: string; } +const blueSubtle = getComputedStyle(document.documentElement).getPropertyValue( + '--blue-subtle', +); +const greyDark = getComputedStyle(document.documentElement).getPropertyValue( + '--grey-dark', +); + const dataGridStyle = { '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': { outline: 'none !important', @@ -52,6 +61,27 @@ const dataGridStyle = { '& .MuiDataGrid-main': { borderRadius: '0.5rem', }, + '& .MuiDataGrid-row': { + border: 'none', + }, + '& .MuiDataGrid-cell:focus': { + outline: 'none', + }, + '& .MuiDataGrid-cell': { + borderBottom: 'none', + }, + '& .MuiDataGrid-columnSeparator--resizable:hover': { + color: blueSubtle.trim(), + }, + '& .MuiChip-label': { + color: blueSubtle.trim(), + }, + '& .MuiChip-icon': { + color: `${blueSubtle.trim()} !important`, + }, + '& .MuiChip-root': { + borderColor: blueSubtle.trim(), + }, }; /** @@ -182,8 +212,9 @@ const OrgActionItemCategories: FC = ({ renderCell: (params: GridCellParams) => { return (
{params.row.name}
@@ -264,7 +295,11 @@ const OrgActionItemCategories: FC = ({ ) } > - + + Edit ); }, @@ -375,7 +410,7 @@ const OrgActionItemCategories: FC = ({ ), }} - sx={dataGridStyle} + sx={{ ...dataGridStyle, '&, [class^=MuiDataGrid]': { border: 'none' } }} getRowClassName={() => `${styles.rowBackground}`} autoHeight rowHeight={65} diff --git a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx index 66776b402e..f259bd8697 100644 --- a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx +++ b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx @@ -31,6 +31,10 @@ function deleteOrg(): JSX.Element { }); const { t: tCommon } = useTranslation('common'); + const blueSearchBg = getComputedStyle( + document.documentElement, + ).getPropertyValue('--blue-search-bg'); + // Get the current organization ID from the URL const { orgId: currentUrl } = useParams(); // Navigation hook for redirecting @@ -123,8 +127,11 @@ function deleteOrg(): JSX.Element { onHide={toggleDeleteModal} data-testid="orgDeleteModal" > - -
{t('deleteOrganization')}
+ +
{t('deleteOrganization')}
 {t('deleteMsg')} diff --git a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx index 0002a3891d..7b43852860 100644 --- a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx +++ b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx @@ -138,7 +138,9 @@ const OrgProfileFieldSettings = (): JSX.Element => { {/* Form to add a new custom field */}
- {t('customFieldName')} + + {t('customFieldName')} + {
- + {t('customFieldType')} void; // Callback for when an image is selected. +} + +/** + * A component for selecting and previewing an image. + * Converts the selected image to a Base64 string and invokes a callback. + */ +const ImagePicker: React.FC = ({ + defaultImage, + onImageSelect, +}) => { + const [previewImage, setPreviewImage] = useState( + defaultImage || null, + ); + + /** + * Handles image file selection, converts it to Base64, and updates the preview. + */ + const handleImageChange = async ( + e: React.ChangeEvent, + ): Promise => { + const file = e.target.files && e.target.files[0]; + if (file) { + const base64Image = await convertToBase64(file); + setPreviewImage(base64Image); + onImageSelect(base64Image); + } + }; + + return ( +
+
+ Preview +
+ + +
+
+
+ ); +}; + +export default ImagePicker; diff --git a/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx index c30ed0fae1..2416fb138d 100644 --- a/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx +++ b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx @@ -19,6 +19,7 @@ import type { InterfaceAddress, } from 'utils/interfaces'; import { countryOptions } from 'utils/formEnumFields'; +// import ImagePicker from './ImagePicker'; interface InterfaceOrgUpdateProps { orgId: string; @@ -193,7 +194,9 @@ function orgUpdate(props: InterfaceOrgUpdateProps): JSX.Element { <>
- {tCommon('name')} + + {tCommon('name')} + - {tCommon('description')} + + {tCommon('description')} + - {tCommon('address')} + + {tCommon('address')} + - + {t('userRegistrationRequired')}: - + {t('isVisibleInSearch')}: - {tCommon('displayImage')}: + + {tCommon('displayImage')}: + + {/* { + setFormState({ + ...formState, + orgImage: base64Image, + }); + }} + /> */} + ); }, diff --git a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx index f259bd8697..cfee69135c 100644 --- a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx +++ b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx @@ -31,10 +31,6 @@ function deleteOrg(): JSX.Element { }); const { t: tCommon } = useTranslation('common'); - const blueSearchBg = getComputedStyle( - document.documentElement, - ).getPropertyValue('--blue-search-bg'); - // Get the current organization ID from the URL const { orgId: currentUrl } = useParams(); // Navigation hook for redirecting @@ -127,10 +123,7 @@ function deleteOrg(): JSX.Element { onHide={toggleDeleteModal} data-testid="orgDeleteModal" > - +
{t('deleteOrganization')}
 {t('deleteMsg')} diff --git a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx index 7b43852860..c77d8a143a 100644 --- a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx +++ b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx @@ -138,7 +138,7 @@ const OrgProfileFieldSettings = (): JSX.Element => { {/* Form to add a new custom field */}
- + {t('customFieldName')} {
- + {t('customFieldType')}
- - {tCommon('name')} - + {tCommon('name')} - + {tCommon('description')} - - {tCommon('address')} - + {tCommon('address')} - + {t('userRegistrationRequired')}: - + {t('isVisibleInSearch')}: - + {tCommon('displayImage')}: { }); }); + it('should verify animation functionality during tab switches', async () => { + renderOrganisationSettings(); + + const wrapper = screen.getByTestId('settingsWrapper'); + expect(wrapper.className).toContain('fade-in'); + + userEvent.click(screen.getByTestId('actionItemCategoriesSettings')); + + expect(wrapper.className).toContain('fade-out'); + + await new Promise((resolve) => setTimeout(resolve, 300)); + expect(wrapper.className).toContain('fade-in'); + expect(screen.getByTestId('actionItemCategoriesTab')).toBeInTheDocument(); + }); + // it('should handle dropdown item selection correctly', async () => { // renderOrganisationSettings(); diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx index 9a7f541e33..ade4e828b1 100644 --- a/src/screens/OrgSettings/OrgSettings.tsx +++ b/src/screens/OrgSettings/OrgSettings.tsx @@ -118,7 +118,10 @@ function OrgSettings(): JSX.Element { {/* Render content based on the selected settings category */} -
+
{(() => { switch (tab) { case 'general': diff --git a/src/style/app.module.css b/src/style/app.module.css index 86da39a4de..872480cb03 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -1656,6 +1656,7 @@ hr { .modalHeader { border: none; padding-bottom: 0; + background-color: var(--blue-search-bg); } .label { From 82d39fa0e5dd8d006d9827d0f69307cf81061949 Mon Sep 17 00:00:00 2001 From: AceHunterr Date: Sun, 19 Jan 2025 18:34:01 +0530 Subject: [PATCH 12/12] Added code rabbit suggestions --- src/assets/css/app.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/assets/css/app.css b/src/assets/css/app.css index 146fef8dbc..c9e7c1913f 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -2654,7 +2654,6 @@ textarea.form-control-lg { } .form-select:focus { - border-color: #a8c7fa; border: 1px solid var(--bs-light); outline: 0; box-shadow: 0 0 0 0.25rem rgba(168, 199, 250, 0.25);