diff --git a/frontend/public/PROFILE.svg b/frontend/public/PROFILE.svg new file mode 100644 index 0000000..c6c3c9e --- /dev/null +++ b/frontend/public/PROFILE.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/app/components/header/Header.jsx b/frontend/src/app/components/header/Header.jsx index 4bc327e..1713508 100644 --- a/frontend/src/app/components/header/Header.jsx +++ b/frontend/src/app/components/header/Header.jsx @@ -184,7 +184,36 @@ const Header = () => { {/* Profile Section */} -
+
+ {/* Profile */} +
+ {/* Username and Role*/} +
+

JM Grills

+

Super Admin

+
+ + {/* User profile*/} +
+
+ + + +
+
+ + {/* Dropdown */} +
+
); }; diff --git a/frontend/src/app/components/header/styles.module.css b/frontend/src/app/components/header/styles.module.css index b120d3b..9bac787 100644 --- a/frontend/src/app/components/header/styles.module.css +++ b/frontend/src/app/components/header/styles.module.css @@ -240,10 +240,64 @@ font-weight: 500; line-height: normal; } -/* Later */ +/* Profile */ .profileContainer { display: flex; height: 44px; flex-direction: column; align-items: flex-end; } +.profileBadge { + display: flex; + padding: 6px 0 6px 8px; + justify-content: flex-end; + align-items: center; + gap: 10px; +} +.nameRole { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-end; + gap: 6px; +} +.userName { + align-self: stretch; + color: #d2d3e1; + color: color(display-p3 0.8235 0.8275 0.8784); + text-align: right; + leading-trim: both; + text-edge: cap; + font-family: Inter; + font-size: 15px; + font-style: normal; + font-weight: 500; + line-height: 30px; /* 200% */ + letter-spacing: -0.15px; +} +.userRole { + align-self: stretch; + color: #85869b; + color: color(display-p3 0.5216 0.5255 0.6); + text-align: right; + leading-trim: both; + text-edge: cap; + font-family: Inter; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 230.769% */ + letter-spacing: -0.26px; +} +.userImgContainer { + display: flex; + align-items: center; + gap: 5px; +} +.userPic { + width: 32px; + height: 32px; + aspect-ratio: 1/1; + border-radius: 32px; + background: url(/PROFILE.svg) lightgray 50% / cover no-repeat; +}