From e0ba9f74ac0e79b89331f3124900dd5195c9c58d Mon Sep 17 00:00:00 2001 From: tamalCodes Date: Sun, 1 Dec 2024 12:04:17 +0530 Subject: [PATCH] fix: dashboard --- .../private/dashboard/TrackSection.jsx | 42 +++++- src/pages/dashboard/Dashboard.jsx | 66 +++++---- src/pages/dashboard/Dashboard.scss | 134 +++++++++++------- src/styles/TrackSection.scss | 131 +++++++++++++++++ 4 files changed, 294 insertions(+), 79 deletions(-) create mode 100644 src/styles/TrackSection.scss diff --git a/src/components/private/dashboard/TrackSection.jsx b/src/components/private/dashboard/TrackSection.jsx index 3b2583d4..fb424601 100644 --- a/src/components/private/dashboard/TrackSection.jsx +++ b/src/components/private/dashboard/TrackSection.jsx @@ -1,5 +1,45 @@ +/* eslint-disable react/no-unknown-property */ +import { TbExternalLink } from "react-icons/tb"; +import { Link } from "react-router-dom"; +import "../../../../src/styles/TrackSection.scss"; + const TrackSection = () => { - return
TrackSection
; + return ( +
+
+

Analytics

+ +
+

7D

+

14D

+

28D

+
+
+ +
+
+

Impressions

+ +
+

6,025

+
+
+ +
+

Click Rate

+ +
+

43%

+ {/* */} +
+
+
+ + + See detailed analytics + +
+ ); }; export default TrackSection; diff --git a/src/pages/dashboard/Dashboard.jsx b/src/pages/dashboard/Dashboard.jsx index 576d2cbe..0f16e8d9 100644 --- a/src/pages/dashboard/Dashboard.jsx +++ b/src/pages/dashboard/Dashboard.jsx @@ -20,37 +20,47 @@ const Dashboard = () => { return ( <> -
-
- - - - -
-

- 1.25k Followers -

- -

- 231 Hosted Events -

-
+
+
+ - -
+ + +
+

+ 1.25k Followers +

+ +

+ 231 Hosted Events +

+
-
- + + +
+

The Monk community

+

+ Organizing @Hack4Bengal, Engineering @Edilitics • Worked w/ 5+ + startups • Building OSS product with 200+ users • Open to + Frontend Roles +

+
+
+ +
+ +
diff --git a/src/pages/dashboard/Dashboard.scss b/src/pages/dashboard/Dashboard.scss index 9d100d6c..35ec4ebf 100644 --- a/src/pages/dashboard/Dashboard.scss +++ b/src/pages/dashboard/Dashboard.scss @@ -1,66 +1,100 @@ .dashboard_parent { - display: flex; - align-items: start; - padding: 3rem; - gap: 2rem; + .profile_header { + display: flex; + align-items: start; + padding: 2rem 7rem; + gap: 1.2rem; + height: 100%; - .profileSection_container { - width: 70%; - position: relative; - - .profile_Coverpicture { - width: 100%; - height: 200px; - object-fit: cover; + .profileSection_container { + width: 70%; + flex-grow: 1; + position: relative; border-radius: 12px; - } - .profile_picture { - width: 100px; - height: 100px; - object-fit: cover; - border-radius: 50%; - border: 2px solid #fff; - position: absolute; - top: 197px; - left: 8%; - transform: translate(-50%, -50%); - } + .profile_Coverpicture { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 12px; + } - .profile_numbers { - font-family: var(--outfit); - display: flex; - align-items: center; - gap: 2rem; + .profile_picture { + width: 100px; + height: 100px; + object-fit: cover; + border-radius: 50%; + border: 2px solid #fff; + position: absolute; + top: 197px; + left: 64px; + transform: translate(-50%, -50%); + } - position: absolute; - top: 225px; - left: 269px; - transform: translate(-50%, -50%); + .profile_numbers { + font-family: var(--outfit); + display: flex; + align-items: center; + gap: 2rem; - .counts { - font-size: 16px; - line-height: 1; - margin: 0; - span { - font-weight: 600; + position: absolute; + top: 225px; + left: 269px; + transform: translate(-50%, -50%); + + .counts { + font-size: 15px; + line-height: 1; + margin: 0; + span { + font-weight: 600; + } } } + + button { + transition: all 0.2s ease-in-out; + border: 1.2px solid #ff5b31; + background-color: transparent; + padding: 0.3rem 1.5rem; + border-radius: 5px; + font-family: var(--outfit); + font-size: 16px; + cursor: pointer; + position: absolute; + top: 225px; + right: -63px; + transform: translate(-50%, -50%); + } + } + + .dashboard_track { + width: 30%; + border-radius: 12px; + height: 100%; + } + } + + .profile_details { + display: flex; + align-items: start; + flex-direction: column; + margin-top: 4rem; + left: 18px; + position: relative; + + h2 { + font-family: var(--outfit); + font-size: 24px; + font-weight: 600; + margin: 0; } - button { - transition: all 0.2s ease-in-out; - border: 1.2px solid #ff5b31; - background-color: transparent; - padding: 0.3rem 1.5rem; - border-radius: 5px; + p { font-family: var(--outfit); font-size: 16px; - cursor: pointer; - position: absolute; - top: 225px; - right: -63px; - transform: translate(-50%, -50%); + margin: 0; + margin-top: 0.5rem; } } } diff --git a/src/styles/TrackSection.scss b/src/styles/TrackSection.scss new file mode 100644 index 00000000..ec95c24a --- /dev/null +++ b/src/styles/TrackSection.scss @@ -0,0 +1,131 @@ +.trackSection_parent { + display: flex; + flex-direction: column; + gap: 1.2rem; + -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1); + border-radius: 12px; + padding: 1rem 1rem; + height: 200px; + + .trackSection_title { + font-size: 18px; + font-weight: 500; + margin: 0; + line-height: 1; + font-family: var(--outfit); + } + + .trackSection_header { + display: flex; + justify-content: space-between; + align-items: center; + p { + margin: 0; + } + + .tracker_calendar { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 12px; + font-weight: 600; + + p { + border: 1px solid #ff5b31; + padding: 0rem 0.5rem; + border-radius: 5px; + cursor: pointer; + } + + .active_calendar { + background-color: #4a11030e; + } + } + } + + .tracker_container { + display: flex; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + .tracker_box { + width: 50%; + padding: 6px; + display: flex; + flex-direction: column; + gap: 10px; + font-family: var(--outfit); + + border: 1px solid #e0e0e0; + border-radius: 4px; + + .tracker_header { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + font-size: 14px; + line-height: 1; + } + + .tracker_footer { + display: flex; + justify-content: space-between; + align-items: end; + gap: 1rem; + p { + margin: 0; + } + + .tracker_number { + font-size: 24px; + font-weight: 600; + margin: 0; + line-height: 1; + } + + .tracker_icon { + background-color: #ebefea; + border-radius: 3px; + } + + .tracker_percentage { + display: flex; + align-items: center; + font-size: 12px; + font-weight: 600; + margin: 0; + line-height: 1; + } + + .positive { + color: #2ca806; + } + + .negative { + color: #ff3131; + } + } + } + } + + a { + text-decoration: none; + display: flex; + align-items: center; + gap: 5px; + font-family: var(--outfit); + font-size: 14px; + color: black; + font-weight: 400; + padding-top: 10px; + } +} + +// /* Add responsive design */ +// @media (max-width: 1024px) { +// .tracker_container { +// grid-template-columns: 1fr; /* Switch to single column */ +// } +// }