Skip to content

Commit

Permalink
ENH:revamps designs of profile page and navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@Charvit123
Charvit123 committed Aug 25, 2023
1 parent a4e2995 commit 58f5480
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 93 deletions.
2 changes: 1 addition & 1 deletion admin/src/css/utilities/Navbar.css
View file
@@ -1,5 +1,5 @@
.NavbarContainer {
@apply bg-white;
@apply bg-white shadow-md mb-4;
}

.NavbarInnerContainer {
Expand Down
154 changes: 77 additions & 77 deletions frontend/src/components/user/Profile.tsx
View file
Expand Up @@ -60,8 +60,6 @@ const Profile = () => {
if (response && response.ok) {
const responseUser = await response.json();
setUser(responseUser);
} else {
navigator("/auth/signin");
}
} catch (error) {
toast.error("An error occurred" + error, {
Expand All @@ -85,8 +83,6 @@ const Profile = () => {
const responseCourse = await response.json();
setActiveCourse(responseCourse.courses);
setCompletedCourseCount(responseCourse.count);
} else {
navigator("/auth/signin");
}
} catch (error) {
toast.error("An error occurred" + error, {
Expand Down Expand Up @@ -208,20 +204,24 @@ const Profile = () => {
</>
) : (
<>
<img
data-testid="profileImage"
className="ProfilePhoto"
src={avatar ? URL.createObjectURL(blob) : user?.profilePhoto}
></img>
<svg
xmlns="http://www.w3.org/2000/svg"
data-testid="profileImageButton"
className="ProfileImageUpdateIcon"
onClick={() => setShowModal(true)}
viewBox="0 0 24 24"
>
<path d="M19,13a1,1,0,0,0-1,1v.38L16.52,12.9a2.79,2.79,0,0,0-3.93,0l-.7.7L9.41,11.12a2.85,2.85,0,0,0-3.93,0L4,12.6V7A1,1,0,0,1,5,6h7a1,1,0,0,0,0-2H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V14A1,1,0,0,0,19,13ZM5,20a1,1,0,0,1-1-1V15.43l2.9-2.9a.79.79,0,0,1,1.09,0l3.17,3.17,0,0L15.46,20Zm13-1a.89.89,0,0,1-.18.53L13.31,15l.7-.7a.77.77,0,0,1,1.1,0L18,17.21ZM22.71,4.29l-3-3a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-3,3a1,1,0,0,0,1.42,1.42L18,4.41V10a1,1,0,0,0,2,0V4.41l1.29,1.3a1,1,0,0,0,1.42,0A1,1,0,0,0,22.71,4.29Z" />
</svg>
<div className="PhotoWithSvg">
<img
data-testid="profileImage"
className="ProfilePhoto"
src={
avatar ? URL.createObjectURL(blob) : user?.profilePhoto
}
></img>
<svg
xmlns="http://www.w3.org/2000/svg"
data-testid="profileImageButton"
className="ProfileImageUpdateIcon"
onClick={() => setShowModal(true)}
viewBox="0 0 24 24"
>
<path d="M19,13a1,1,0,0,0-1,1v.38L16.52,12.9a2.79,2.79,0,0,0-3.93,0l-.7.7L9.41,11.12a2.85,2.85,0,0,0-3.93,0L4,12.6V7A1,1,0,0,1,5,6h7a1,1,0,0,0,0-2H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V14A1,1,0,0,0,19,13ZM5,20a1,1,0,0,1-1-1V15.43l2.9-2.9a.79.79,0,0,1,1.09,0l3.17,3.17,0,0L15.46,20Zm13-1a.89.89,0,0,1-.18.53L13.31,15l.7-.7a.77.77,0,0,1,1.1,0L18,17.21ZM22.71,4.29l-3-3a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-3,3a1,1,0,0,0,1.42,1.42L18,4.41V10a1,1,0,0,0,2,0V4.41l1.29,1.3a1,1,0,0,0,1.42,0A1,1,0,0,0,22.71,4.29Z" />
</svg>
</div>
</>
)}
</div>
Expand All @@ -235,95 +235,95 @@ const Profile = () => {
{isLoading ? (
<>
<div className="block xsm:hidden sm:hidden md:block lg:block">
<Skeleton height={40} width={176} />
<Skeleton height={20} width={176} />
</div>
<div className="hidden lg:hidden md:hidden sm:block xsm:block">
<Skeleton height={40} width={144} />
<Skeleton height={20} width={144} />
</div>
</>
) : (
<>
<input
disabled
<div
data-testid="profileEmailInput"
value={user?.email}
className="ProfileInput"
></input>
>
{user?.email}
</div>
</>
)}
</div>

<div className="ProfileGridContent">
<label data-testid="profileEidLabel" className="ProfileLabel">
Employee Id
</label>
{isLoading ? (
<>
<div className="block xsm:hidden sm:hidden md:block lg:block">
<Skeleton height={40} width={176} />
<Skeleton height={20} width={176} />
</div>
<div className="hidden lg:hidden md:hidden sm:block xsm:block">
<Skeleton height={40} width={144} />
<Skeleton height={20} width={144} />
</div>
</>
) : (
<>
<input
disabled
data-testid="profileEidInput"
value={user?.eId}
className="ProfileInput"
></input>
</>
)}
</div>
<div className="ProfileGridContent">
<label
data-testid="profileClientTeamLabel"
className="ProfileLabel"
>
Client Team
</label>
{isLoading ? (
<>
<div className="block xsm:hidden sm:hidden md:block lg:block">
<Skeleton height={40} width={176} />
</div>
<div className="hidden lg:hidden md:hidden sm:block xsm:block">
<Skeleton height={40} width={144} />
<div data-testid="profileEidInput" className="ProfileInput">
{user?.eId}
</div>
</>
) : (
<>
<input
disabled
data-testid="profileClientTeamInput"
value={user?.clientTeam}
className="ProfileInput"
></input>
</>
)}
</div>
{user?.clientTeam && (
<div className="ProfileGridContent">
<label
data-testid="profileClientTeamLabel"
className="ProfileLabel"
>
Client Team
</label>
{isLoading ? (
<>
<div className="block xsm:hidden sm:hidden md:block lg:block">
<Skeleton height={20} width={176} />
</div>
<div className="hidden lg:hidden md:hidden sm:block xsm:block">
<Skeleton height={20} width={144} />
</div>
</>
) : (
<>
<div
data-testid="profileClientTeamInput"
className="ProfileInput"
>
{user?.clientTeam}
</div>
</>
)}
</div>
)}
<div className="ProfileGridContent">
<label data-testid="profileRoleLabel" className="ProfileLabel">
Role
</label>
{isLoading ? (
<>
<div className="block xsm:hidden sm:hidden md:block lg:block">
<Skeleton height={40} width={176} />
<Skeleton height={20} width={176} />
</div>
<div className="hidden lg:hidden md:hidden sm:block xsm:block">
<Skeleton height={40} width={144} />
<Skeleton height={20} width={144} />
</div>
</>
) : (
<>
<input
disabled
<div
data-testid="profileRoleInput"
value={user?.role}
className="ProfileInput"
></input>
>
{user?.role}
</div>
</>
)}
</div>
Expand All @@ -337,24 +337,24 @@ const Profile = () => {
{isLoading ? (
<>
<div className="block xsm:hidden sm:hidden md:block lg:block">
<Skeleton height={40} width={176} />
<Skeleton height={20} width={176} />
</div>
<div className="hidden lg:hidden md:hidden sm:block xsm:block">
<Skeleton height={40} width={144} />
<Skeleton height={20} width={144} />
</div>
</>
) : (
<>
<input
disabled
<div
data-testid="profileCreditInput"
value={completedCourseCount * 10}
className="ProfileInput"
></input>
>
{completedCourseCount * 10}
</div>
</>
)}
</div>
<div className="ProfileGridContent mb-5">
<div className="ProfileGridContent">
<label
data-testid="profileTotalCourseLabel"
className="ProfileLabel"
Expand All @@ -364,20 +364,20 @@ const Profile = () => {
{isLoading ? (
<>
<div className="block xsm:hidden sm:hidden md:block lg:block">
<Skeleton height={40} width={176} />
<Skeleton height={20} width={176} />
</div>
<div className="hidden lg:hidden md:hidden sm:block xsm:block">
<Skeleton height={40} width={144} />
<Skeleton height={20} width={144} />
</div>
</>
) : (
<>
<input
disabled
<div
data-testid="profileTotalCourseInput"
value={activeCourse.length}
className="ProfileInput"
></input>
>
{activeCourse.length}
</div>
</>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/css/courseDetails/courseDetails.css
View file
Expand Up @@ -23,7 +23,7 @@
@apply container w-10/12 xsm:max-w-full bg-slate-300 rounded-lg mb-4;
}
.courseButtons {
@apply text-white font-bold text-base px-6 py-3 rounded shadow hover:shadow-lg mr-1 mb-1 ease-linear transition-all duration-150 bg-[#0e3252] hover:bg-[#05243f] tracking-[.08px];
@apply text-white font-bold text-base px-5 py-2 rounded shadow hover:shadow-lg mr-1 mb-1 ease-linear transition-all duration-150 bg-[#0e3252] hover:bg-[#05243f] tracking-[.08px];
}
.resourceContainer {
@apply flex flex-col items-center gap-7 content-center;
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/css/courses/Carousel.css
View file
@@ -1,9 +1,9 @@
.carouselTitleName {
@apply text-center py-8 text-3xl font-bold tracking-[.08px];
@apply text-center py-3 lg:py-8 md:py-8 text-3xl font-bold tracking-[.08px];
}

.buttons {
@apply absolute right-0 top-5;
@apply lg:absolute md:absolute lg:right-0 lg:top-5 md:right-0 md:top-5 items-center;
}

.button {
Expand Down
25 changes: 14 additions & 11 deletions frontend/src/css/user/profile.css
View file
Expand Up @@ -27,42 +27,45 @@
@apply flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b;
}
.ProfileModalCloseButton {
@apply text-[#141414] font-bold uppercase px-6 py-2 text-sm outline-none mr-1 mb-1 transition-all duration-150 tracking-[.08px];
@apply text-[#141414] font-bold uppercase px-5 py-2 text-sm outline-none mr-1 mb-1 transition-all duration-150 tracking-[.08px];
}
.ProfileModalSaveButton {
@apply text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg mr-1 mb-1 ease-linear transition-all duration-150 tracking-[.08px] bg-[#0e3252] hover:bg-[#05243f];
@apply text-white font-bold uppercase text-sm px-5 py-2 rounded shadow hover:shadow-lg mr-1 mb-1 ease-linear transition-all duration-150 tracking-[.08px] bg-[#0e3252] hover:bg-[#05243f];
}

.ProfileHeader {
@apply text-3xl font-bold py-8 grid grid-cols-1 justify-items-center content-center tracking-[.08px];
}
.ProfileDiv {
@apply grid justify-items-center content-center;
@apply grid justify-items-center content-center lg:px-20 mdl:px-20 md:px-10;
}
.ProfilePhotoDiv {
@apply grid grid-cols-1 justify-items-center content-center relative;
@apply grid grid-cols-1 justify-items-center content-center min-w-fit;
}
.PhotoWithSvg{
@apply relative
}
.ProfilePhoto {
@apply rounded-full lg:h-60 lg:w-60 sm:h-48 sm:w-48 xsm:w-40 xsm:h-40 md:h-52 md:w-52 object-cover;
}
.ProfileImageUpdateIcon {
@apply h-7 w-7 absolute lg:bottom-24 md:bottom-24 bottom-3 lg:right-3 right-4 bg-white rounded-md hover:cursor-pointer hover:h-8 hover:w-8;
@apply h-7 w-7 absolute lg:bottom-6 md:bottom-6 bottom-3 lg:right-3 right-4 bg-white rounded-md hover:cursor-pointer hover:h-8 hover:w-8;
}
.ProfileContainer {
@apply container lg:w-8/12 mdl:w-9/12 md:w-10/12 max-w-full grid lg:grid-cols-2 md:grid-cols-2 smd:grid-cols-1 grid-cols-1 justify-items-center content-center;
@apply w-full flex flex-col lg:flex-row md:flex-row mdl:flex-row relative justify-evenly;
}
.ProfileContentContainer {
@apply grid grid-cols-1 p-4 md:pl-0 md:pr-0;
@apply self-center w-fit flex items-center justify-center bg-[#f3f4f6] rounded-lg shadow-table min-w-fit mt-10 lg:mt-0 md:mt-0;
}
.ProfileContentGridContainer {
@apply grid grid-cols-1 justify-items-center content-center gap-3;
@apply grid grid-cols-1 gap-3 lg:px-7 md:px-7 sm:px-5 px-2 py-4 min-w-fit;
}
.ProfileInput {
@apply text-center w-36 lg:w-44 mdl:w-44 md:w-40 smd:w-36 sm:w-40 bg-gray-100 border border-gray-300 text-gray-900 text-sm lg:text-base md:text-base smd:text-sm rounded-lg block lg:max-w-fit p-2 cursor-not-allowed tracking-[.08px];
@apply text-left text-gray-900 text-sm lg:text-base md:text-base smd:text-sm block cursor-default tracking-[.08px];
}
.ProfileLabel {
@apply grid justify-items-center content-center text-gray-700 text-sm lg:text-base md:text-base font-bold tracking-[.08px];
@apply text-left text-gray-700 text-sm lg:text-base md:text-base font-bold tracking-[.08px];
}
.ProfileGridContent {
@apply grid grid-cols-2 justify-items-center content-center;
@apply grid grid-cols-2 p-1 gap-2;
}
2 changes: 1 addition & 1 deletion frontend/src/css/utilities/Navbar.css
View file
@@ -1,5 +1,5 @@
.NavbarContainer {
@apply bg-white;
@apply bg-white shadow-md mb-4;
}

.NavbarInnerContainer {
Expand Down

0 comments on commit 58f5480

Please sign in to comment.