From 880f6f3140fc500829f2c8eb545fa602f742ee27 Mon Sep 17 00:00:00 2001 From: Devender singh shekhawat <50149675+devender18@users.noreply.github.com> Date: Fri, 13 Dec 2024 21:30:49 +0530 Subject: [PATCH] refactored OrganizationDashboard css/ closes #2513 (#2593) * refactored OrganizationDashboard css/ closes #2513 * refactor:OrganizationDashboard_css(fixes #2513) * Plugin and advertisement screen revamp (#2006) * advertisement and plugin screen * added revamped design * fixes added * fixed testcases * chore(deps): bump sass from 1.80.6 to 1.80.7 (#2433) Bumps [sass](https://github.com/sass/dart-sass) from 1.80.6 to 1.80.7. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](https://github.com/sass/dart-sass/compare/1.80.6...1.80.7) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump eslint-plugin-import from 2.30.0 to 2.31.0 (#2434) Bumps [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import) from 2.30.0 to 2.31.0. - [Release notes](https://github.com/import-js/eslint-plugin-import/releases) - [Changelog](https://github.com/import-js/eslint-plugin-import/blob/main/CHANGELOG.md) - [Commits](https://github.com/import-js/eslint-plugin-import/compare/v2.30.0...v2.31.0) --- updated-dependencies: - dependency-name: eslint-plugin-import dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @mui/x-charts from 7.22.1 to 7.22.2 (#2435) Bumps [@mui/x-charts](https://github.com/mui/mui-x/tree/HEAD/packages/x-charts) from 7.22.1 to 7.22.2. - [Release notes](https://github.com/mui/mui-x/releases) - [Changelog](https://github.com/mui/mui-x/blob/v7.22.2/CHANGELOG.md) - [Commits](https://github.com/mui/mui-x/commits/v7.22.2/packages/x-charts) --- updated-dependencies: - dependency-name: "@mui/x-charts" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @types/react from 18.3.3 to 18.3.12 (#2436) Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.3.3 to 18.3.12. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update pull-request.yml * Update dependabot.yaml * added docker check to workflow (#2414) * added docker check to workflow * made recommended changes to docker check in workflow * added changes to docker check inn workflow as recommended * added changes * updated indentation in pull-request.yml file * updated indentation in pull-request.yml file * added Dockerfile and Docker-compose.yml file * added Dockerfile and Docker-compose.yml file * updated .docker-ignore file * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * properly formatted code * trying to make docker check pass * trying to make docker check pass * updated INSTALLATION.md * updated INSTALLATION.md * added recommended changes to INSTALLATION.md * added recommended changes to INSTALLATION.md * added recommended changes to INSTALLATION.md * updated docker workflow * updated INSTALLATION.md * eslint-rule-no_unused_vars (#2428) * Updated pr template with checklist (#2454) * Updated pr template with checklist * Additional changes for the PR template * Changed the url for the PR template * refactored addOnStore * refactored addOnEntry v1 --------- Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Peter Harrison <16875803+palisadoes@users.noreply.github.com> Co-authored-by: Vanshika Sabharwal <143436704+VanshikaSabharwal@users.noreply.github.com> Co-authored-by: prayansh_chhablani <135210710+prayanshchh@users.noreply.github.com> Co-authored-by: Dhiraj Udhani * refactored: CSS files in src/screens/OrgSettings(fixes: #2523) (#2610) * refactored: CSS files in src/screens/OrgSettings(fixes: #2523) * refactored: CSS files in src/screens/OrgSettings(fixes: #2523) * refactored: CSS files in src/screens/OrgSettings(fixes: #2523) * refactored: CSS files in src/screens/OrgSettings(fixes: #2523) * Update pull-request.yml * refactored: CSS files in src/screens/OrganizationDashboard(fixes: #2513) * refactored: CSS files in src/screens/OrganizationDashboard(fixes: #2513) * improve import for global css --------- Signed-off-by: dependabot[bot] Co-authored-by: Shekhar Patel <90516956+duplixx@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Peter Harrison <16875803+palisadoes@users.noreply.github.com> Co-authored-by: Vanshika Sabharwal <143436704+VanshikaSabharwal@users.noreply.github.com> Co-authored-by: prayansh_chhablani <135210710+prayanshchh@users.noreply.github.com> Co-authored-by: Dhiraj Udhani --- .../OrganizationDashboard.module.css | 35 ---------------- .../OrganizationDashboard.tsx | 17 ++++---- src/style/app.module.css | 40 ++++++++++++++++++- 3 files changed, 49 insertions(+), 43 deletions(-) delete mode 100644 src/screens/OrganizationDashboard/OrganizationDashboard.module.css diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css deleted file mode 100644 index 3ffe274196..0000000000 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css +++ /dev/null @@ -1,35 +0,0 @@ -.cardHeader { - padding: 1.25rem 1rem 1rem 1rem; - border-bottom: 1px solid var(--bs-gray-200); - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; -} - -.cardHeader .cardTitle { - font-size: 1.2rem; - font-weight: 600; -} - -.cardBody { - min-height: 180px; - padding-top: 0; - max-height: 570px; - overflow-y: scroll; - width: 100%; - max-width: 400px; -} - -.cardBody .emptyContainer { - display: flex; - height: 180px; - justify-content: center; - align-items: center; -} - -.rankings { - aspect-ratio: 1; - border-radius: 50%; - width: 35px; -} diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx index ebea874d2e..abc712289c 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx +++ b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx @@ -31,7 +31,7 @@ import type { InterfaceQueryOrganizationsListObject, InterfaceVolunteerRank, } from 'utils/interfaces'; -import styles from './OrganizationDashboard.module.css'; +import styles from 'style/app.module.css'; import { VOLUNTEER_RANKING } from 'GraphQl/Queries/EventVolunteerQueries'; /** @@ -41,7 +41,7 @@ import { VOLUNTEER_RANKING } from 'GraphQl/Queries/EventVolunteerQueries'; * * @returns The rendered component. */ -function organizationDashboard(): JSX.Element { +function OrganizationDashboard(): JSX.Element { const { t } = useTranslation('translation', { keyPrefix: 'dashboard' }); const { t: tCommon } = useTranslation('common'); const { t: tErrors } = useTranslation('errors'); @@ -299,7 +299,7 @@ function organizationDashboard(): JSX.Element { {t('viewAll')} - + {loadingEvent ? ( [...Array(4)].map((_, index) => { return ; @@ -341,7 +341,7 @@ function organizationDashboard(): JSX.Element { {t('viewAll')} - + {loadingPost ? ( [...Array(4)].map((_, index) => { return ; @@ -392,7 +392,7 @@ function organizationDashboard(): JSX.Element { {loadingOrgData ? ( @@ -435,7 +435,10 @@ function organizationDashboard(): JSX.Element { {t('viewAll')} - + {rankingsLoading ? ( [...Array(3)].map((_, index) => { return ; @@ -483,4 +486,4 @@ function organizationDashboard(): JSX.Element { ); } -export default organizationDashboard; +export default OrganizationDashboard; diff --git a/src/style/app.module.css b/src/style/app.module.css index 461e2cc260..3bc2e1fd6c 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -1,5 +1,7 @@ :root { + /* Color contrast ratio: 7.5:1 (exceeds WCAG AAA) */ --high-contrast-text: #494949; + /* Color contrast ratio: 9:1 (exceeds WCAG AAA) */ --high-contrast-border: #2c2c2c; } @@ -561,13 +563,49 @@ hr { display: flex; justify-content: space-between; align-items: center; + margin-bottom: 10px; } - .cardHeader .cardTitle { font-size: 1.2rem; font-weight: 600; } +.containerBody { + min-height: 180px; + padding-top: 0; + max-height: 570px; + overflow-y: auto; + width: 100%; + max-width: min(400px, 90vw); + scrollbar-width: thin; + scrollbar-color: rgba(0, 0, 0, 0.3) transparent; + + &::-webkit-scrollbar { + width: thin; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.3); + } +} + +.containerBody .emptyContainer { + display: flex; + min-height: 180px; + justify-content: center; + align-items: center; +} + +.containerBody .rankings { + aspect-ratio: 1; + border-radius: 50%; + width: 35px; +} + .cardBody { min-height: 180px; }