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

arranged styles

Browse Source
This commit is contained in:
Chukwumdiebube
2023-02-06 22:42:29 +01:00
parent 4237947003
commit bc74d0a854
2 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Partials/Sidebar.jsx
+16 -16
View File
@@ -116,11 +116,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
} `}
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" />
</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"
}`}
>
@@ -136,11 +136,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
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="reminder" />
</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"
}`}
>
@@ -159,11 +159,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
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="tracking" />
</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"
}`}
>
@@ -179,11 +179,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
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="calendar" />
</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"
}`}
>
@@ -199,11 +199,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
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="resources" />
</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"
}`}
>
@@ -220,11 +220,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
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" />
</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"
}`}
>
@@ -249,11 +249,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
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="profile" />
</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"
}`}
>
@@ -269,11 +269,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
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" />
</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"
}`}
>
src/index.css
+3
View File
@@ -309,6 +309,9 @@ input[type="number"] {
.menu-setting-items .nav-item.active span.item-content {
@apply text-purple;
}
.dark .menu-setting-items .nav-item.active span.item-content {
@apply text-white
}
/* TODO: =================================layout end================================ */
/* TODO: =================================HomePage ================================ */
.home-page-wrapper .hero-slider .slick-slider .slick-dots li {