MyFit/users-myfit
2
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'change_icons_dashboard' of MyFit/users-myfit into master

Browse Source
This commit is contained in:
Toks Law
2023-02-06 23:27:22 +00:00
committed by Gogs
parent 86d379ac38 9d98e156cb
commit b51ee6170e
11 changed files with 48 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2 -2
View File
@@ -13,5 +13,5 @@ REACT_APP_USERS_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfitu
REACT_APP_SESSION_EXPIRE_MINUTES = 5 REACT_APP_SESSION_EXPIRE_MINUTES = 5
REACT_APP_TRACKING = "Tracking" REACT_APP_TRACKING="Tracking"
REACT_APP_RESOURCES = "Resources" REACT_APP_RESOURCES="Resources"
src/assets/images/icons/myFit_calendar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

src/assets/images/icons/myFit_history.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

src/assets/images/icons/myFit_profile.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

src/assets/images/icons/myFit_reminder.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

src/assets/images/icons/myFit_resources.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

src/assets/images/icons/myFit_settings.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

src/assets/images/icons/myFit_tracking.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

src/components/Helpers/Icons.jsx
+15 -1
View File
@@ -1,4 +1,11 @@
import React from "react"; import React from "react";
import Calendar from "../../assets/images/icons/myFit_calendar.png";
import History from "../../assets/images/icons/myFit_history.png";
import Profile from "../../assets/images/icons/myFit_profile.png";
import Reminder from "../../assets/images/icons/myFit_reminder.png";
import Resources from "../../assets/images/icons/myFit_resources.png";
import Settings from "../../assets/images/icons/myFit_settings.png";
import Tracking from "../../assets/images/icons/myFit_tracking.png";
export default function Icons({ name }) { export default function Icons({ name }) {
return ( return (
@@ -468,7 +475,14 @@ export default function Icons({ name }) {
> >
<rect y="0.823242" width="20" height="2.35294" rx="1.17647" /> <rect y="0.823242" width="20" height="2.35294" rx="1.17647" />
</svg> </svg>
) : ( ) : name === "settings" ? (<img src={Settings} alt="image" className="w-[24px] h-[24px]" />)
: name === "tracking" ? (<img src={Tracking} alt="image" className="w-[24px] h-[24px]" />)
: name === "resources" ? (<img src={Resources} alt="image" className="w-[24px] h-[24px]" />)
: name === "reminder" ? (<img src={Reminder} alt="image" className="w-[24px] h-[24px]" />)
: name === "profile" ? (<img src={Profile} alt="image" className="w-[24px] h-[24px]" />)
: name === "History" ? (<img src={History} alt="image" className="w-[24px] h-[24px]" />)
: name === "calendar" ? (<img src={Calendar} alt="image" className="w-[24px] h-[24px]" />)
: (
"" ""
)} )}
</> </>
src/components/Partials/Sidebar.jsx
+24 -24
View File
@@ -116,11 +116,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
} `} } `}
to="/" to="/"
> >
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray"> <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
<Icons name="dashboard" /> <Icons name="dashboard" />
</span> </span>
<span <span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${ className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white dark:focus:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0" sidebar ? "active flex-1" : "w-0"
}`} }`}
> >
@@ -136,16 +136,16 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
sidebar ? "justify-start space-x-3.5" : "justify-center") sidebar ? "justify-start space-x-3.5" : "justify-center")
}`} }`}
> >
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray"> <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
<Icons name="active-bids" /> <Icons name="reminder" />
</span> </span>
<span <span
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${ className={`item-content relative group-hover:text-purple dark:hover:text-white dark:focus:text-white text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
sidebar ? "active flex-1" : "w-0" sidebar ? "active flex-1" : "w-0"
}`} }`}
> >
Reminders Reminders
<span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white"> <span className={`absolute left-24 -top-1 text-sm flex primary-gradient justify-center items-center w-5 h-5 rounded-full text-white ${'dark' ? 'dark-primary-gradient text-purple' : '', userReminders.length == 0 ? 'hidden' : ''}`}>
{userReminders.length > 0 && userReminders.length} {userReminders.length > 0 && userReminders.length}
</span> </span>
</span> </span>
@@ -159,11 +159,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
sidebar ? "justify-start space-x-3.5" : "justify-center") sidebar ? "justify-start space-x-3.5" : "justify-center")
}`} }`}
> >
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray"> <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
<Icons name="active-bids" /> <Icons name="tracking" />
</span> </span>
<span <span
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${ className={`item-content relative group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
sidebar ? "active flex-1" : "w-0" sidebar ? "active flex-1" : "w-0"
}`} }`}
> >
@@ -179,11 +179,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
sidebar ? "justify-start space-x-3.5" : "justify-center") sidebar ? "justify-start space-x-3.5" : "justify-center")
}`} }`}
> >
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray"> <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
<Icons name="active-bids" /> <Icons name="calendar" />
</span> </span>
<span <span
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${ className={`item-content relative group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
sidebar ? "active flex-1" : "w-0" sidebar ? "active flex-1" : "w-0"
}`} }`}
> >
@@ -199,11 +199,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
sidebar ? "justify-start space-x-3.5" : "justify-center") sidebar ? "justify-start space-x-3.5" : "justify-center")
}`} }`}
> >
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray"> <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
<Icons name="star" /> <Icons name="resources" />
</span> </span>
<span <span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${ className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0" sidebar ? "active flex-1" : "w-0"
}`} }`}
> >
@@ -220,11 +220,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
sidebar ? "justify-start space-x-3.5" : "justify-center") sidebar ? "justify-start space-x-3.5" : "justify-center")
}`} }`}
> >
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray"> <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
<Icons name="history" /> <Icons name="History" />
</span> </span>
<span <span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${ className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0" sidebar ? "active flex-1" : "w-0"
}`} }`}
> >
@@ -249,11 +249,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
sidebar ? "justify-start space-x-3.5" : "justify-center") sidebar ? "justify-start space-x-3.5" : "justify-center")
}`} }`}
> >
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray"> <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
<Icons name="people-two" /> <Icons name="profile" />
</span> </span>
<span <span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${ className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0" sidebar ? "active flex-1" : "w-0"
}`} }`}
> >
@@ -269,11 +269,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
sidebar ? "justify-start space-x-3.5" : "justify-center") sidebar ? "justify-start space-x-3.5" : "justify-center")
}`} }`}
> >
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray"> <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
<Icons name="setting" /> <Icons name="settings" />
</span> </span>
<span <span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${ className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0" sidebar ? "active flex-1" : "w-0"
}`} }`}
> >
src/index.css
+7
View File
@@ -47,6 +47,10 @@ html {
background-size: cover; */ background-size: cover; */
} }
.dark .dark-primary-gradient {
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(188,73,190,1) 100%);
}
.primary-home { .primary-home {
/*background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%); */ /*background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%); */
background-image: url("./assets/images/left-myft.jpg"); background-image: url("./assets/images/left-myft.jpg");
@@ -309,6 +313,9 @@ input[type="number"] {
.menu-setting-items .nav-item.active span.item-content { .menu-setting-items .nav-item.active span.item-content {
@apply text-purple; @apply text-purple;
} }
.dark .menu-setting-items .nav-item.active span.item-content {
@apply text-white
}
/* TODO: =================================layout end================================ */ /* TODO: =================================layout end================================ */
/* TODO: =================================HomePage ================================ */ /* TODO: =================================HomePage ================================ */
.home-page-wrapper .hero-slider .slick-slider .slick-dots li { .home-page-wrapper .hero-slider .slick-slider .slick-dots li {