From 24ec4509e605a318e1d841d6b36ad890b6e5730e Mon Sep 17 00:00:00 2001 From: Aadhil Ahamed Date: Sun, 26 Jan 2025 01:23:13 +0530 Subject: [PATCH] Refactored EventDashboardScreen --- .../EventDashboardScreen.module.css | 198 ------------------ .../EventDashboardScreen.tsx | 8 +- .../ProfileDropdown/ProfileDropdown.tsx | 7 +- src/style/app.module.css | 64 +++++- 4 files changed, 63 insertions(+), 214 deletions(-) delete mode 100644 src/components/EventDashboardScreen/EventDashboardScreen.module.css diff --git a/src/components/EventDashboardScreen/EventDashboardScreen.module.css b/src/components/EventDashboardScreen/EventDashboardScreen.module.css deleted file mode 100644 index 33c642dd95..0000000000 --- a/src/components/EventDashboardScreen/EventDashboardScreen.module.css +++ /dev/null @@ -1,198 +0,0 @@ -.gap { - gap: 20px; -} - -.mainContainer { - width: 50%; - flex-grow: 3; - padding: 20px; - max-height: 100%; - overflow: auto; -} - -.containerHeight { - height: calc(100vh - 66px); -} - -.colorLight { - background-color: #f1f3f6; -} - -.pageContainer { - display: flex; - flex-direction: column; - min-height: 100vh; - padding: 1rem 1.5rem 0 calc(300px + 2rem + 1.5rem); -} - -.expand { - padding-left: 4rem; - animation: moveLeft 0.5s ease-in-out; -} -.avatarStyle { - border-radius: 100%; -} -.profileContainer { - border: none; - padding: 2.1rem 0.5rem; - height: 52px; - border-radius: 8px 0px 0px 8px; - display: flex; - align-items: center; - background-color: white !important; - box-shadow: - 0 4px 4px 0 rgba(177, 177, 177, 0.2), - 0 6px 20px 0 rgba(151, 151, 151, 0.19); -} -.profileContainer:focus { - outline: none; - background-color: var(--bs-gray-100); -} -.imageContainer { - width: 56px; -} -.profileContainer .profileText { - flex: 1; - text-align: start; - overflow: hidden; - margin-right: 4px; -} -.angleDown { - margin-left: 4px; -} -.profileContainer .profileText .primaryText { - font-size: 1rem; - font-weight: 600; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; /* number of lines to show */ - -webkit-box-orient: vertical; - word-wrap: break-word; - white-space: normal; -} -.profileContainer .profileText .secondaryText { - font-size: 0.8rem; - font-weight: 400; - color: var(--bs-secondary); - display: block; - text-transform: capitalize; -} - -.contract { - padding-left: calc(300px + 2rem + 1.5rem); - animation: moveRight 0.5s ease-in-out; -} - -.collapseSidebarButton { - position: fixed; - height: 40px; - bottom: 0; - z-index: 9999; - width: calc(300px + 2rem); - background-color: rgba(245, 245, 245, 0.7); - color: black; - border: none; - border-radius: 0px; -} - -.collapseSidebarButton:hover, -.opendrawer:hover { - opacity: 1; - color: black !important; -} -.opendrawer { - position: fixed; - display: flex; - align-items: center; - justify-content: center; - top: 0; - left: 0; - width: 40px; - height: 100vh; - z-index: 9999; - background-color: rgba(245, 245, 245); - border: none; - border-radius: 0px; - margin-right: 20px; - color: black; -} -.profileDropdown { - background-color: transparent !important; -} -.profileDropdown .dropdown-toggle .btn .btn-normal { - display: none !important; - background-color: transparent !important; -} -.dropdownToggle { - background-image: url(/public/images/svg/angleDown.svg); - background-repeat: no-repeat; - background-position: center; - background-color: azure; -} - -.dropdownToggle::after { - border-top: none !important; - border-bottom: none !important; -} - -.opendrawer:hover { - transition: background-color 0.5s ease; - background-color: var(--bs-primary); -} -.collapseSidebarButton:hover { - transition: background-color 0.5s ease; - background-color: var(--bs-primary); -} - -@media (max-width: 1120px) { - .contract { - padding-left: calc(250px + 2rem + 1.5rem); - } - .collapseSidebarButton { - width: calc(250px + 2rem); - } -} - -@media (max-height: 900px) { - .pageContainer { - padding: 1rem 1.5rem 0 calc(300px + 2rem); - } - .collapseSidebarButton { - height: 30px; - width: calc(300px + 1rem); - } -} -@media (max-height: 650px) { - .pageContainer { - padding: 1rem 1.5rem 0 calc(270px); - } - .collapseSidebarButton { - width: 250px; - height: 20px; - } - .opendrawer { - width: 30px; - } -} - -/* For tablets */ -@media (max-width: 820px) { - .pageContainer { - padding-left: 2.5rem; - } - - .opendrawer { - width: 25px; - } - - .contract, - .expand { - animation: none; - } - - .collapseSidebarButton { - width: 100%; - left: 0; - right: 0; - } -} diff --git a/src/components/EventDashboardScreen/EventDashboardScreen.tsx b/src/components/EventDashboardScreen/EventDashboardScreen.tsx index 11b9ec936f..88d7d8d7ef 100644 --- a/src/components/EventDashboardScreen/EventDashboardScreen.tsx +++ b/src/components/EventDashboardScreen/EventDashboardScreen.tsx @@ -7,7 +7,7 @@ import { updateTargets } from 'state/action-creators'; import { useAppDispatch } from 'state/hooks'; import type { RootState } from 'state/reducers'; import type { TargetsType } from 'state/reducers/routesReducer'; -import styles from './EventDashboardScreen.module.css'; +import styles from '../../style/app.module.css'; import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown'; import useLocalStorage from 'utils/useLocalstorage'; import type { InterfaceMapType } from 'utils/interfaces'; @@ -37,8 +37,10 @@ const EventDashboardScreen = (): JSX.Element => { if (adminFor === null) { return ( <> -
-
+
+
diff --git a/src/components/ProfileDropdown/ProfileDropdown.tsx b/src/components/ProfileDropdown/ProfileDropdown.tsx index 182b0d66db..f61e757d8b 100644 --- a/src/components/ProfileDropdown/ProfileDropdown.tsx +++ b/src/components/ProfileDropdown/ProfileDropdown.tsx @@ -57,11 +57,7 @@ const profileDropdown = (): JSX.Element => { : fullName; return ( - +
{userImage && userImage !== 'null' ? ( @@ -92,7 +88,6 @@ const profileDropdown = (): JSX.Element => {