diff --git a/src/screens/OrganizationPeople/OrganizationPeople.tsx b/src/screens/OrganizationPeople/OrganizationPeople.tsx index 36efdba63c..47a2d2a3b2 100644 --- a/src/screens/OrganizationPeople/OrganizationPeople.tsx +++ b/src/screens/OrganizationPeople/OrganizationPeople.tsx @@ -393,21 +393,21 @@ function organizationPeople(): JSX.Element { ), }} sx={{ - borderRadius: '20px', - backgroundColor: '#EAEBEF', + borderRadius: 'var(--table-head-radius)', + backgroundColor: 'var(--grey-bg-color)', '& .MuiDataGrid-row': { - backgroundColor: '#eff1f7', + backgroundColor: 'var(--tablerow-bg-color)', '&:focus-within': { outline: '2px solid #000', outlineOffset: '-2px', }, }, '& .MuiDataGrid-row:hover': { - backgroundColor: '#EAEBEF', + backgroundColor: 'var(--grey-bg-color)', boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)', }, '& .MuiDataGrid-row.Mui-hovered': { - backgroundColor: '#EAEBEF', + backgroundColor: 'var(--grey-bg-color)', boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)', }, '& .MuiDataGrid-cell:focus': { diff --git a/src/style/app.module.css b/src/style/app.module.css index cd55f8c1c0..6be00d217a 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -2,6 +2,7 @@ --brown-color: #555555; --dropdown-hover-color: #eff1f7; --grey-bg-color: #eaebef; + --grey-border-box-color: #e8e5e5; --subtle-blue-grey: #7c9beb; --subtle-blue-grey-hover: #5f7e91; --modal-width: 670px; @@ -15,13 +16,13 @@ --table-image-small-size: 25px; --bs-primary: #0056b3; --bs-white: #fff; - --table-head-bg: var(--bs-primary, blue); --table-head-bg: var( --bs-primary, - blue --loader-size: 10em; --loader-border-width: 1.1em; --loader-color: - #febc59; + blue ); /* Assuming var(--bs-primary) is defined elsewhere */ - + --loader-size: 10em; + --loader-border-width: 1.1em; + --loader-color: #febc59; --table-head-color: white; --table-header-color: var(--bs-greyish-black, black); --table-head-radius: 20px; @@ -165,7 +166,7 @@ .sidebarsticky > input { text-decoration: none; margin-bottom: 50px; - border-color: #e8e5e5; + border-color: var(--grey-border-box-color); width: 80%; border-radius: 7px; padding-top: 5px; @@ -184,13 +185,13 @@ color: var(--delete-button-color); margin-right: 5px; background-color: var(--delete-button-bg); - border: white; + border: var(--bs-white); } .closeButton:hover { color: var(--delete-button-bg) !important; background-color: var(--delete-button-color) !important; - border: white; + border: var(--bs-white); } .modalContent { @@ -209,7 +210,7 @@ } .dropdown { - background-color: white; + background-color: var(--bs-white); border: 1px solid var(--brown-color); color: var(--brown-color); position: relative; @@ -229,7 +230,7 @@ } .dropdownItem { - background-color: white !important; + background-color: var(--bs-white) !important; color: var(--brown-color) !important; border: none !important; } @@ -346,13 +347,13 @@ .inputField { margin-top: 10px; margin-bottom: 10px; - background-color: white; + background-color: var(--bs-white); box-shadow: 0 1px 1px var(--input-shadow-color); } .inputFieldModal { margin-bottom: 10px; - background-color: white; + background-color: var(--bs-white); box-shadow: 0 1px 1px var(--input-shadow-color); } @@ -652,7 +653,7 @@ hr { .greenregbtnPledge { margin-top: 15px; border: 1px solid var(--bs-gray-300); - box-shadow: 0 2px 2px #e8e5e5; + box-shadow: 0 2px 2px var(--grey-border-box-color); padding: 10px 10px; border-radius: 5px; background-color: var(--bs-primary); @@ -688,12 +689,12 @@ hr { } .inputFieldPledge { - background-color: white; + background-color: var(--bs-white); box-shadow: 0 1px 1px #31bb6b; } .dropdownPledge { - background-color: white; + background-color: var(--bs-white); border: 1px solid var(--bs-primary); position: relative; display: inline-block; @@ -827,7 +828,7 @@ hr { margin-top: 0.5rem; padding: 0.75rem; border: 1px solid #e2e8f0; - background-color: white; + background-color: var(--bs-white); color: #1e293b; box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15); display: flex; @@ -1007,7 +1008,7 @@ hr { .customcell { background-color: #31bb6b !important; - color: white !important; + color: var(--bs-white) !important; font-size: medium !important; font-weight: 500 !important; padding-top: 10px !important; @@ -1054,13 +1055,13 @@ hr { margin: 1rem 0 0; margin-top: 15px; border: 1px solid var(--bs-gray-300); - box-shadow: 0 2px 2px #e8e5e5; + box-shadow: 0 2px 2px var(--grey-border-box-color); padding: 10px 10px; border-radius: 5px; background-color: var(--bs-primary); width: 100%; font-size: 16px; - color: white; + color: var(--bs-white); outline: none; font-weight: 600; cursor: pointer; @@ -1071,7 +1072,7 @@ hr { } .goalButtonOrganizationFundCampaign { - border: 1px solid #e8e5e5 !important; + border: 1px solid var(--grey-border-box-color) !important; color: #707070 !important; width: 75%; padding: 10px; @@ -1084,13 +1085,13 @@ hr { .redregbtn { margin: 1rem 0 0; margin-top: 15px; - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; + border: 1px solid var(--grey-border-box-color); + box-shadow: 0 2px 2px var(--grey-border-box-color); padding: 10px 10px; border-radius: 5px; width: 100%; font-size: 16px; - color: white; + color: var(--bs-white); outline: none; font-weight: 600; cursor: pointer; @@ -1111,13 +1112,13 @@ hr { } .inputFieldOrganizationFundCampaign { - background-color: white; + background-color: var(--bs-white); box-shadow: 0 1px 1px var(--search-button-bg); } .dropdownOrganizationFundCampaign { - background-color: white; - border: 1px solid #e8e5e5; + background-color: var(--bs-white); + border: 1px solid var(--grey-border-box-color); position: relative; display: inline-block; color: #707070; @@ -1510,12 +1511,12 @@ input[type='radio']:checked + label:hover { .manageBtn { margin: 1rem 0 0; margin-top: 15px; - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; + border: 1px solid var(--grey-border-box-color); + box-shadow: 0 2px 2px var(--grey-border-box-color); padding: 10px 10px; border-radius: 5px; font-size: 16px; - color: white; + color: var(--bs-white); outline: none; font-weight: 600; cursor: pointer; @@ -1578,7 +1579,7 @@ input[type='radio']:checked + label:hover { } .dropdowns { - background-color: white; + background-color: var(--bs-white); border: 1px solid #31bb6b; position: relative; display: inline-block; @@ -1676,7 +1677,7 @@ input[type='radio']:checked + label:hover { .pluginStoreBtn { width: 100%; - background-color: white; + background-color: var(--bs-white); color: var(--brown-color); border: 0.5px solid var(--brown-color); } @@ -1845,7 +1846,7 @@ input[type='radio']:checked + label:hover { .sidebarstickyMemberDetail > input { text-decoration: none; margin-bottom: 50px; - border-color: #e8e5e5; + border-color: var(--grey-border-box-color); width: 80%; border-radius: 7px; padding-top: 5px; @@ -1918,12 +1919,12 @@ input[type='radio']:checked + label:hover { } .invitebtn { - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; + border: 1px solid var(--grey-border-box-color); + box-shadow: 0 2px 2px var(--grey-border-box-color); border-radius: 5px; font-size: 16px; height: 60%; - color: white; + color: var(--bs-white); outline: none; font-weight: 600; cursor: pointer; @@ -1952,7 +1953,7 @@ input[type='radio']:checked + label:hover { width: 30%; padding: 40px 30px; background: #ffffff; - border-color: #e8e5e5; + border-color: var(--grey-border-box-color); border-width: 5px; border-radius: 10px; max-height: 86vh; @@ -2004,13 +2005,13 @@ input[type='radio']:checked + label:hover { .greenregbtnMemberDetail { margin: 1rem 0 0; margin-top: 10px; - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; + border: 1px solid var(--grey-border-box-color); + box-shadow: 0 2px 2px var(--grey-border-box-color); padding: 10px 10px; border-radius: 5px; background-color: #eaebef; font-size: 16px; - color: white; + color: var(--bs-white); outline: none; font-weight: 600; cursor: pointer; @@ -2026,7 +2027,7 @@ input[type='radio']:checked + label:hover { border: 1px solid #eaebef; padding: 10px 10px; border-radius: 5px; - background-color: white; + background-color: var(--bs-white); font-size: 16px; color: #707070; outline: none; @@ -2112,9 +2113,9 @@ input[type='radio']:checked + label:hover { .memberfontcreatedbtn { border-radius: 7px; - border-color: #e8e5e5; + border-color: var(--grey-border-box-color); background-color: #eaebef; - color: white; + color: var(--bs-white); box-shadow: none; height: 2.5rem; width: max-content; @@ -2266,7 +2267,7 @@ input[type='radio']:checked + label:hover { .dateboxMemberDetail { border-radius: 7px; - border-color: #e8e5e5; + border-color: var(--grey-border-box-color); outline: none; box-shadow: none; padding-top: 2px; @@ -2301,7 +2302,7 @@ input[type='radio']:checked + label:hover { input::file-selector-button { background-color: black; - color: white; + color: var(--bs-white); } .Outline { @@ -2484,8 +2485,8 @@ form label { form > input { display: block; margin-bottom: 20px; - border: 1px solid #e8e5e5; - box-shadow: 2px 1px #e8e5e5; + border: 1px solid var(--grey-border-box-color); + box-shadow: 2px 1px var(--grey-border-box-color); padding: 10px 20px; border-radius: 5px; background: none; @@ -2647,7 +2648,7 @@ form > input { background-color: var(--dropdown-border-color); border-color: var(--dropdown-border-color); margin-top: 1rem; - color: white; + color: var(--bs-white); margin-bottom: 1rem; width: 100%; transition: background-color 0.2s ease; @@ -3014,13 +3015,13 @@ form > input { } } .addbtnOrgPost { - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; + border: 1px solid var(--grey-border-box-color); + box-shadow: 0 2px 2px var(--grey-border-box-color); border-radius: 5px; font-size: 16px; height: 60%; width: 60%; - color: white; + color: var(--bs-white); outline: none; font-weight: 600; cursor: pointer;