MetatroncubeSoftwareSolutions/Metatron_Admin_Frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

color code updated

Browse Source
This commit is contained in:
Selvi 2025-12-20 15:38:21 +05:30
parent 0b01318aa6
commit a3ace66ce9
14 changed files with 210 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/(auth)/change-password/page.tsx
View File

@ -19,8 +19,8 @@ const CoverLockScreen = () => {
<img src="/assets/images/auth/coming-soon-object3.png" alt="image" className="absolute right-0 top-0 h-[300px]" /> <img src="/assets/images/auth/coming-soon-object3.png" alt="image" className="absolute right-0 top-0 h-[300px]" />
<img src="/assets/images/auth/polygon-object.svg" alt="image" className="absolute bottom-0 end-[28%]" /> <img src="/assets/images/auth/polygon-object.svg" alt="image" className="absolute bottom-0 end-[28%]" />
<div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"> <div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0">
<div className="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,#333333_35%,#325aa9_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"> <div className="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,#1a1f2b_35%,#3779b9_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]">
<div className="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div> <div className="absolute inset-y-0 w-8 from-[#3779b9]/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div>
<div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]"> <div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
<Link href="/" className="ms-10 block w-48 lg:w-72"> <Link href="/" className="ms-10 block w-48 lg:w-72">
<img src="/assets/images/auth/logo-white.svg" alt="Logo" className="w-full" /> <img src="/assets/images/auth/logo-white.svg" alt="Logo" className="w-full" />

8
app/(auth)/forgot-password/page.tsx
View File

@ -23,8 +23,8 @@ export default function CoverForgotPassword() {
<img src="/assets/images/auth/top-right.webp" alt="image" className="absolute right-0 top-0 h-[300px]" /> <img src="/assets/images/auth/top-right.webp" alt="image" className="absolute right-0 top-0 h-[300px]" />
<img src="/assets/images/auth/bottom.webp" alt="image" className="absolute bottom-0 end-[28%]" /> <img src="/assets/images/auth/bottom.webp" alt="image" className="absolute bottom-0 end-[28%]" />
<div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"> <div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0">
<div className="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,#333333_35%,#325aa9_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"> <div className="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,#1a1f2b_35%,#3779b9_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]">
<div className="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div> <div className="absolute inset-y-0 w-8 from-[#3779b9]/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div>
<div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]"> <div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
<Link href="/" className="ms-10 block w-48 lg:w-72"> <Link href="/" className="ms-10 block w-48 lg:w-72">
<img src="/assets/images/white-logo.png" alt="Logo" className="w-full" /> <img src="/assets/images/white-logo.png" alt="Logo" className="w-full" />
@ -45,7 +45,7 @@ export default function CoverForgotPassword() {
<div className="w-full max-w-[440px] lg:mt-16"> <div className="w-full max-w-[440px] lg:mt-16">
<div className="mb-10"> <div className="mb-10">
<h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl"> <h1 className="text-3xl font-extrabold uppercase !leading-snug text-[#3779b9] md:text-4xl">
Forgot Password Forgot Password
</h1> </h1>
<p className="text-base font-bold leading-normal text-white-dark"> <p className="text-base font-bold leading-normal text-white-dark">
@ -58,7 +58,7 @@ export default function CoverForgotPassword() {
<div className="text-center mt-8 dark:text-white"> <div className="text-center mt-8 dark:text-white">
Remember your password?&nbsp; Remember your password?&nbsp;
<Link href="/login" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white"> <Link href="/login" className="uppercase text-[#3779b9] underline transition hover:text-black dark:hover:text-white">
SIGN IN SIGN IN
</Link> </Link>
</div> </div>

16
app/(auth)/login/page.tsx
View File

@ -25,8 +25,8 @@ const CoverLogin = () => {
<img src="/assets/images/auth/top-right.webp" alt="image" className="absolute right-0 top-0 h-[300px]" /> <img src="/assets/images/auth/top-right.webp" alt="image" className="absolute right-0 top-0 h-[300px]" />
<img src="/assets/images/auth/bottom.webp" alt="image" className="absolute bottom-0 end-[28%]" /> <img src="/assets/images/auth/bottom.webp" alt="image" className="absolute bottom-0 end-[28%]" />
<div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"> <div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0">
<div className="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,#333333_35%,#325aa9_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"> <div className="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,#1a1f2b_35%,#3779b9_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]">
<div className="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div> <div className="absolute inset-y-0 w-8 from-[#3779b9]/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div>
<div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]"> <div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
<Link href="/" className="ms-10 block w-48 lg:w-72"> <Link href="/" className="ms-10 block w-48 lg:w-72">
<img src="/assets/images/white-logo.png" alt="Logo" className="w-full" /> <img src="/assets/images/white-logo.png" alt="Logo" className="w-full" />
@ -45,7 +45,7 @@ const CoverLogin = () => {
</div> </div>
<div className="w-full max-w-[440px] lg:mt-16"> <div className="w-full max-w-[440px] lg:mt-16">
<div className="mb-10"> <div className="mb-10">
<h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign in</h1> <h1 className="text-3xl font-extrabold uppercase !leading-snug text-[#3779b9] md:text-4xl">Sign in</h1>
<p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to login</p> <p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to login</p>
</div> </div>
<ComponentsAuthLoginForm /> <ComponentsAuthLoginForm />
@ -60,7 +60,7 @@ const CoverLogin = () => {
<Link <Link
href="#" href="#"
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110" className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style={{ background: 'linear-gradient(135deg, #333333 0%, #325aa9 100%)' }} style={{ background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)' }}
> >
<IconInstagram /> <IconInstagram />
</Link> </Link>
@ -69,7 +69,7 @@ const CoverLogin = () => {
<Link <Link
href="#" href="#"
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110" className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style={{ background: 'linear-gradient(135deg, #333333 0%, #325aa9 100%)' }} style={{ background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)' }}
> >
<IconFacebookCircle /> <IconFacebookCircle />
</Link> </Link>
@ -78,7 +78,7 @@ const CoverLogin = () => {
<Link <Link
href="#" href="#"
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110" className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style={{ background: 'linear-gradient(135deg, #333333 0%, #325aa9 100%)' }} style={{ background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)' }}
> >
<IconTwitter fill={true} /> <IconTwitter fill={true} />
</Link> </Link>
@ -87,7 +87,7 @@ const CoverLogin = () => {
<Link <Link
href="#" href="#"
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110" className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style={{ background: 'linear-gradient(135deg, #333333 0%, #325aa9 100%)' }} style={{ background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)' }}
> >
<IconGoogle /> <IconGoogle />
</Link> </Link>
@ -96,7 +96,7 @@ const CoverLogin = () => {
</div> </div>
<div className="text-center dark:text-white"> <div className="text-center dark:text-white">
Don&apos;t have an account ?&nbsp; Don&apos;t have an account ?&nbsp;
<Link href="/register" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white"> <Link href="/register" className="uppercase text-[#3779b9] underline transition hover:text-black dark:hover:text-white">
SIGN UP SIGN UP
</Link> </Link>
</div> </div>

16
app/(auth)/register/page.tsx
View File

@ -25,8 +25,8 @@ const CoverRegister = () => {
<img src="/assets/images/auth/top-right.webp" alt="image" className="absolute right-0 top-0 h-[300px]" /> <img src="/assets/images/auth/top-right.webp" alt="image" className="absolute right-0 top-0 h-[300px]" />
<img src="/assets/images/auth/bottom.webp" alt="image" className="absolute bottom-0 end-[28%]" /> <img src="/assets/images/auth/bottom.webp" alt="image" className="absolute bottom-0 end-[28%]" />
<div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"> <div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0">
<div className="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,#333333_35%,#325aa9_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"> <div className="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,#1a1f2b_35%,#3779b9_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]">
<div className="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div> <div className="absolute inset-y-0 w-8 from-[#3779b9]/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div>
<div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]"> <div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
<Link href="/" className="ms-10 block w-48 lg:w-72"> <Link href="/" className="ms-10 block w-48 lg:w-72">
<img src="/assets/images/white-logo.png" alt="Logo" className="w-full" /> <img src="/assets/images/white-logo.png" alt="Logo" className="w-full" />
@ -45,7 +45,7 @@ const CoverRegister = () => {
</div> </div>
<div className="w-full max-w-[440px] lg:mt-16"> <div className="w-full max-w-[440px] lg:mt-16">
<div className="mb-10"> <div className="mb-10">
<h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign Up</h1> <h1 className="text-3xl font-extrabold uppercase !leading-snug text-[#3779b9] md:text-4xl">Sign Up</h1>
<p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to register</p> <p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to register</p>
</div> </div>
<ComponentsAuthRegisterForm /> <ComponentsAuthRegisterForm />
@ -60,7 +60,7 @@ const CoverRegister = () => {
<Link <Link
href="#" href="#"
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110" className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style={{ background: 'linear-gradient(135deg, #333333 0%, #325aa9 100%)' }} style={{ background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)' }}
> >
<IconInstagram /> <IconInstagram />
</Link> </Link>
@ -69,7 +69,7 @@ const CoverRegister = () => {
<Link <Link
href="#" href="#"
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110" className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style={{ background: 'linear-gradient(135deg, #333333 0%, #325aa9 100%)' }} style={{ background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)' }}
> >
<IconFacebookCircle /> <IconFacebookCircle />
</Link> </Link>
@ -78,7 +78,7 @@ const CoverRegister = () => {
<Link <Link
href="#" href="#"
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110" className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style={{ background: 'linear-gradient(135deg, #333333 0%, #325aa9 100%)' }} style={{ background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)' }}
> >
<IconTwitter fill={true} /> <IconTwitter fill={true} />
</Link> </Link>
@ -87,7 +87,7 @@ const CoverRegister = () => {
<Link <Link
href="#" href="#"
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110" className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style={{ background: 'linear-gradient(135deg, #333333 0%, #325aa9 100%)' }} style={{ background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)' }}
> >
<IconGoogle /> <IconGoogle />
</Link> </Link>
@ -96,7 +96,7 @@ const CoverRegister = () => {
</div> </div>
<div className="text-center dark:text-white"> <div className="text-center dark:text-white">
Already have an account ?&nbsp; Already have an account ?&nbsp;
<Link href="/login" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white"> <Link href="/login" className="uppercase text-[#3779b9] underline transition hover:text-black dark:hover:text-white">
SIGN IN SIGN IN
</Link> </Link>
</div> </div>

8
app/(auth)/reset-password/page.tsx
View File

@ -24,8 +24,8 @@ export default function CoverForgotPassword() {
<img src="/assets/images/auth/top-right.webp" alt="image" className="absolute right-0 top-0 h-[300px]" /> <img src="/assets/images/auth/top-right.webp" alt="image" className="absolute right-0 top-0 h-[300px]" />
<img src="/assets/images/auth/bottom.webp" alt="image" className="absolute bottom-0 end-[28%]" /> <img src="/assets/images/auth/bottom.webp" alt="image" className="absolute bottom-0 end-[28%]" />
<div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"> <div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0">
<div className="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,#333333_35%,#325aa9_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"> <div className="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,#1a1f2b_35%,#3779b9_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]">
<div className="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div> <div className="absolute inset-y-0 w-8 from-[#3779b9]/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div>
<div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]"> <div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
<Link href="/" className="ms-10 block w-48 lg:w-72"> <Link href="/" className="ms-10 block w-48 lg:w-72">
<img src="/assets/images/white-logo.png" alt="Logo" className="w-full" /> <img src="/assets/images/white-logo.png" alt="Logo" className="w-full" />
@ -46,7 +46,7 @@ export default function CoverForgotPassword() {
<div className="w-full max-w-[440px] lg:mt-16"> <div className="w-full max-w-[440px] lg:mt-16">
<div className="mb-10"> <div className="mb-10">
<h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl"> <h1 className="text-3xl font-extrabold uppercase !leading-snug text-[#3779b9] md:text-4xl">
Reset Password Reset Password
</h1> </h1>
<p className="text-base font-bold leading-normal text-white-dark"> <p className="text-base font-bold leading-normal text-white-dark">
@ -59,7 +59,7 @@ export default function CoverForgotPassword() {
<div className="text-center mt-8 dark:text-white"> <div className="text-center mt-8 dark:text-white">
Remember your password?&nbsp; Remember your password?&nbsp;
<Link href="/login" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white"> <Link href="/login" className="uppercase text-[#3779b9] underline transition hover:text-black dark:hover:text-white">
SIGN IN SIGN IN
</Link> </Link>
</div> </div>

4
app/(defaults)/reverse-proxy/page.tsx
View File

@ -148,7 +148,7 @@ export default function ReverseProxyPage() {
style={{ style={{
padding: 12, padding: 12,
marginTop: 10, marginTop: 10,
backgroundColor: loading ? "#93c5fd" : "#2563eb", backgroundColor: loading ? "#93c5fd" : "#3779b9",
color: "#ffffff", color: "#ffffff",
border: "none", border: "none",
borderRadius: 6, borderRadius: 6,
@ -187,7 +187,7 @@ export default function ReverseProxyPage() {
input:focus, input:focus,
select:focus { select:focus {
border-color: #2563eb; border-color: #3779b9;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
} }
`}</style> `}</style>

4
components/auth/components-auth-forgot-form.tsx
View File

@ -41,11 +41,11 @@ export default function ForgotPasswordForm() {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="btn btn-primary w-full uppercase font-bold" className="btn btn-gradient border-0 shadow-[0_10px_20px_-10px_rgba(55,121,185,0.44)] w-full uppercase font-bold"
> >
{loading ? "Sending..." : "Send Reset Link"} {loading ? "Sending..." : "Send Reset Link"}
</button> </button>
{message && <p className="mt-2 text-center text-sm font-semibold text-primary">{message}</p>} {message && <p className="mt-2 text-center text-sm font-semibold text-[#3779b9]">{message}</p>}
</form> </form>
); );
} }

2
components/auth/components-auth-login-form.tsx
View File

@ -113,7 +113,7 @@ const ComponentsAuthLoginForm = () => {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]" className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(55,121,185,0.44)]"
> >
{loading ? 'Signing in...' : 'Sign in'} {loading ? 'Signing in...' : 'Sign in'}
</button> </button>

2
components/auth/components-auth-register-form.tsx
View File

@ -137,7 +137,7 @@ const ComponentsAuthRegisterForm = () => {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]" className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(55,121,185,0.44)]"
> >
{loading ? 'Signing up...' : 'Sign Up'} {loading ? 'Signing up...' : 'Sign Up'}
</button> </button>

4
components/auth/components-auth-reset-form.tsx
View File

@ -53,13 +53,13 @@ export default function ResetPasswordForm() {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="btn btn-primary w-full uppercase font-bold" className="btn btn-gradient border-0 shadow-[0_10px_20px_-10px_rgba(55,121,185,0.44)] w-full uppercase font-bold"
> >
{loading ? "Resetting..." : "Reset Password"} {loading ? "Resetting..." : "Reset Password"}
</button> </button>
{message && ( {message && (
<p className="mt-2 text-center text-sm font-semibold text-primary"> <p className="mt-2 text-center text-sm font-semibold text-[#3779b9]">
{message} {message}
</p> </p>
)} )}

2
components/auth/components-auth-unlock-form.tsx
View File

@ -107,7 +107,7 @@ const ComponentsAuthChangePasswordForm = () => {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]" className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(55,121,185,0.44)]"
> >
{loading ? 'UPDATING…' : 'CHANGE PASSWORD'} {loading ? 'UPDATING…' : 'CHANGE PASSWORD'}
</button> </button>

4
components/layouts/header.tsx
View File

@ -159,7 +159,7 @@ const Header = () => {
return ( return (
<header className={`bg-[#1a1f2b] z-40 ${themeConfig.semidark && themeConfig.menu === 'horizontal' ? 'dark' : ''}`}> <header className={`bg-[#1a1f2b] z-40 ${themeConfig.semidark && themeConfig.menu === 'horizontal' ? 'dark' : ''}`}>
<div className="shadow-sm"> <div className="shadow-sm">
<div className="relative flex w-full items-center bg-[#1a1f2b] px-5 py-2.5 dark:bg-black"> <div className="relative flex w-full items-center bg-[#1a1f2b] px-5 py-2.5">
<div className="horizontal-logo flex items-center justify-between ltr:mr-2 rtl:ml-2 lg:hidden"> <div className="horizontal-logo flex items-center justify-between ltr:mr-2 rtl:ml-2 lg:hidden">
<Link href="/" className="main-logo flex shrink-0 items-center w-[200px]"> <Link href="/" className="main-logo flex shrink-0 items-center w-[200px]">
<img className="" src="/assets/images/logo.webp" alt="logo" /> <img className="" src="/assets/images/logo.webp" alt="logo" />
@ -490,7 +490,7 @@ const Header = () => {
</div> </div>
{/* horizontal menu */} {/* horizontal menu */}
<ul className="horizontal-menu hidden border-t border-[#ebedf2] bg-white px-6 py-1.5 font-semibold text-black rtl:space-x-reverse dark:border-[#191e3a] dark:bg-black dark:text-white-dark lg:space-x-1.5 xl:space-x-8"> <ul className="horizontal-menu hidden border-t border-[#ebedf2] bg-[#1a1f2b] px-6 py-1.5 font-semibold text-white rtl:space-x-reverse lg:space-x-1.5 xl:space-x-8">
<li className="menu nav-item relative"> <li className="menu nav-item relative">
<button type="button" className="nav-link"> <button type="button" className="nav-link">
<div className="flex items-center"> <div className="flex items-center">

100
components/layouts/sidebar.tsx
View File

@ -87,7 +87,7 @@ const Sidebar = () => {
<nav <nav
className={`sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300 ${semidark ? 'text-white-dark' : ''}`} className={`sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300 ${semidark ? 'text-white-dark' : ''}`}
> >
<div className="h-full bg-white dark:bg-black"> <div className="h-full bg-[#1a1f2b] text-white">
<div className="flex items-center justify-between px-4 py-3"> <div className="flex items-center justify-between px-4 py-3">
<Link href="/" className="main-logo flex shrink-0 items-center w-[200px]"> <Link href="/" className="main-logo flex shrink-0 items-center w-[200px]">
<img src="/assets/images/logo.webp" alt="logo" /> <img src="/assets/images/logo.webp" alt="logo" />
@ -107,17 +107,17 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<button type="button" className={`${currentMenu === 'dashboard' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('dashboard')}> <button type="button" className={`${currentMenu === 'dashboard' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('dashboard')}>
<div className="flex items-center"> <div className="flex items-center">
<IconMenuDashboard className="shrink-0 group-hover:!text-primary" /> <IconMenuDashboard className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('dashboard')}</span> <span className="text-white ltr:pl-3 rtl:pr-3">{t('dashboard')}</span>
</div> </div>
<div className={currentMenu !== 'dashboard' ? '-rotate-90 rtl:rotate-90' : ''}> <div className={currentMenu !== 'dashboard' ? '-rotate-90 rtl:rotate-90' : ''}>
<IconCaretDown /> <IconCaretDown className="text-white/50" />
</div> </div>
</button> </button>
<AnimateHeight duration={300} height={currentMenu === 'dashboard' ? 'auto' : 0}> <AnimateHeight duration={300} height={currentMenu === 'dashboard' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500"> <ul className="sub-menu text-white/70">
<li> <li>
<Link href="/">{t('sales')}</Link> <Link href="/">{t('sales')}</Link>
</li> </li>
@ -134,7 +134,7 @@ const Sidebar = () => {
</AnimateHeight> </AnimateHeight>
</li> </li>
<h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]"> <h2 className="-mx-4 mb-1 flex items-center bg-white-light/10 px-7 py-3 font-extrabold uppercase text-white/50">
<IconMinus className="hidden h-5 w-4 flex-none" /> <IconMinus className="hidden h-5 w-4 flex-none" />
<span>{t('apps')}</span> <span>{t('apps')}</span>
</h2> </h2>
@ -144,15 +144,15 @@ const Sidebar = () => {
<li className="nav-item"> <li className="nav-item">
<Link href="/crawl" className="group"> <Link href="/crawl" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuChat className="shrink-0 group-hover:!text-primary" /> <IconMenuChat className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('crawl')}</span> <span className="text-white ltr:pl-3 rtl:pr-3">{t('crawl')}</span>
</div> </div>
</Link> </Link>
</li> </li>
{/* <li className="nav-item"> {/* <li className="nav-item">
<Link href="/apps/mailbox" className="group"> <Link href="/apps/mailbox" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuMailbox className="shrink-0 group-hover:!text-primary" /> <IconMenuMailbox className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('mailbox')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('mailbox')}</span>
</div> </div>
</Link> </Link>
@ -160,7 +160,7 @@ const Sidebar = () => {
<li className="nav-item"> <li className="nav-item">
<Link href="/apps/todolist" className="group"> <Link href="/apps/todolist" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuTodo className="shrink-0 group-hover:!text-primary" /> <IconMenuTodo className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('todo_list')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('todo_list')}</span>
</div> </div>
</Link> </Link>
@ -168,7 +168,7 @@ const Sidebar = () => {
<li className="nav-item"> <li className="nav-item">
<Link href="/apps/notes" className="group"> <Link href="/apps/notes" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuNotes className="shrink-0 group-hover:!text-primary" /> <IconMenuNotes className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('notes')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('notes')}</span>
</div> </div>
</Link> </Link>
@ -176,7 +176,7 @@ const Sidebar = () => {
<li className="nav-item"> <li className="nav-item">
<Link href="/apps/scrumboard" className="group"> <Link href="/apps/scrumboard" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuScrumboard className="shrink-0 group-hover:!text-primary" /> <IconMenuScrumboard className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('scrumboard')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('scrumboard')}</span>
</div> </div>
</Link> </Link>
@ -184,7 +184,7 @@ const Sidebar = () => {
<li className="nav-item"> <li className="nav-item">
<Link href="/apps/contacts" className="group"> <Link href="/apps/contacts" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuContacts className="shrink-0 group-hover:!text-primary" /> <IconMenuContacts className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('contacts')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('contacts')}</span>
</div> </div>
</Link> </Link>
@ -193,17 +193,17 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<button type="button" className={`${currentMenu === 'invoice' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('invoice')}> <button type="button" className={`${currentMenu === 'invoice' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('invoice')}>
<div className="flex items-center"> <div className="flex items-center">
<IconMenuInvoice className="shrink-0 group-hover:!text-primary" /> <IconMenuInvoice className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('invoice')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('invoice')}</span>
</div> </div>
<div className={currentMenu !== 'invoice' ? '-rotate-90 rtl:rotate-90' : ''}> <div className={currentMenu !== 'invoice' ? '-rotate-90 rtl:rotate-90' : ''}>
<IconCaretDown /> <IconCaretDown className="text-white/50" />
</div> </div>
</button> </button>
<AnimateHeight duration={300} height={currentMenu === 'invoice' ? 'auto' : 0}> <AnimateHeight duration={300} height={currentMenu === 'invoice' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500"> <ul className="sub-menu text-white/70">
<li> <li>
<Link href="/apps/invoice/list">{t('list')}</Link> <Link href="/apps/invoice/list">{t('list')}</Link>
</li> </li>
@ -223,7 +223,7 @@ const Sidebar = () => {
<li className="nav-item"> <li className="nav-item">
<Link href="/apps/calendar" className="group"> <Link href="/apps/calendar" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuCalendar className="shrink-0 group-hover:!text-primary" /> <IconMenuCalendar className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('calendar')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('calendar')}</span>
</div> </div>
</Link> </Link>
@ -231,7 +231,7 @@ const Sidebar = () => {
</ul> </ul>
</li> </li>
<h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]"> <h2 className="-mx-4 mb-1 flex items-center bg-white-light/10 px-7 py-3 font-extrabold uppercase text-white/50">
<IconMinus className="hidden h-5 w-4 flex-none" /> <IconMinus className="hidden h-5 w-4 flex-none" />
<span>{t('user_interface')}</span> <span>{t('user_interface')}</span>
</h2> </h2>
@ -239,17 +239,17 @@ const Sidebar = () => {
{/* <li className="menu nav-item"> {/* <li className="menu nav-item">
<button type="button" className={`${currentMenu === 'component' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('component')}> <button type="button" className={`${currentMenu === 'component' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('component')}>
<div className="flex items-center"> <div className="flex items-center">
<IconMenuComponents className="shrink-0 group-hover:!text-primary" /> <IconMenuComponents className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('components')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('components')}</span>
</div> </div>
<div className={currentMenu !== 'component' ? '-rotate-90 rtl:rotate-90' : ''}> <div className={currentMenu !== 'component' ? '-rotate-90 rtl:rotate-90' : ''}>
<IconCaretDown /> <IconCaretDown className="text-white/50" />
</div> </div>
</button> </button>
<AnimateHeight duration={300} height={currentMenu === 'component' ? 'auto' : 0}> <AnimateHeight duration={300} height={currentMenu === 'component' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500"> <ul className="sub-menu text-white/70">
<li> <li>
<Link href="/components/tabs">{t('tabs')}</Link> <Link href="/components/tabs">{t('tabs')}</Link>
</li> </li>
@ -299,17 +299,17 @@ const Sidebar = () => {
{/* <li className="menu nav-item"> {/* <li className="menu nav-item">
<button type="button" className={`${currentMenu === 'element' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('element')}> <button type="button" className={`${currentMenu === 'element' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('element')}>
<div className="flex items-center"> <div className="flex items-center">
<IconMenuElements className="shrink-0 group-hover:!text-primary" /> <IconMenuElements className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('elements')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('elements')}</span>
</div> </div>
<div className={currentMenu !== 'element' ? '-rotate-90 rtl:rotate-90' : ''}> <div className={currentMenu !== 'element' ? '-rotate-90 rtl:rotate-90' : ''}>
<IconCaretDown /> <IconCaretDown className="text-white/50" />
</div> </div>
</button> </button>
<AnimateHeight duration={300} height={currentMenu === 'element' ? 'auto' : 0}> <AnimateHeight duration={300} height={currentMenu === 'element' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500"> <ul className="sub-menu text-white/70">
<li> <li>
<Link href="/elements/alerts">{t('alerts')}</Link> <Link href="/elements/alerts">{t('alerts')}</Link>
</li> </li>
@ -371,7 +371,7 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<Link href="/charts" className="group"> <Link href="/charts" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuCharts className="shrink-0 group-hover:!text-primary" /> <IconMenuCharts className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('charts')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('charts')}</span>
</div> </div>
</Link> </Link>
@ -380,7 +380,7 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<Link href="/widgets" className="group"> <Link href="/widgets" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuWidgets className="shrink-0 group-hover:!text-primary" /> <IconMenuWidgets className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('widgets')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('widgets')}</span>
</div> </div>
</Link> </Link>
@ -389,7 +389,7 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<Link href="/font-icons" className="group"> <Link href="/font-icons" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuFontIcons className="shrink-0 group-hover:!text-primary" /> <IconMenuFontIcons className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('font_icons')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('font_icons')}</span>
</div> </div>
</Link> </Link>
@ -398,13 +398,13 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<Link href="/dragndrop" className="group"> <Link href="/dragndrop" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuDragAndDrop className="shrink-0 group-hover:!text-primary" /> <IconMenuDragAndDrop className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('drag_and_drop')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('drag_and_drop')}</span>
</div> </div>
</Link> </Link>
</li> </li>
<h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]"> <h2 className="-mx-4 mb-1 flex items-center bg-white-light/10 px-7 py-3 font-extrabold uppercase text-white/50">
<IconMinus className="hidden h-5 w-4 flex-none" /> <IconMinus className="hidden h-5 w-4 flex-none" />
<span>{t('tables_and_forms')}</span> <span>{t('tables_and_forms')}</span>
</h2> </h2>
@ -412,7 +412,7 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<Link href="/tables" className="group"> <Link href="/tables" className="group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuTables className="shrink-0 group-hover:!text-primary" /> <IconMenuTables className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('tables')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('tables')}</span>
</div> </div>
</Link> </Link>
@ -421,17 +421,17 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<button type="button" className={`${currentMenu === 'datalabel' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('datalabel')}> <button type="button" className={`${currentMenu === 'datalabel' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('datalabel')}>
<div className="flex items-center"> <div className="flex items-center">
<IconMenuDatatables className="shrink-0 group-hover:!text-primary" /> <IconMenuDatatables className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('datatables')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('datatables')}</span>
</div> </div>
<div className={currentMenu !== 'datalabel' ? '-rotate-90 rtl:rotate-90' : ''}> <div className={currentMenu !== 'datalabel' ? '-rotate-90 rtl:rotate-90' : ''}>
<IconCaretDown /> <IconCaretDown className="text-white/50" />
</div> </div>
</button> </button>
<AnimateHeight duration={300} height={currentMenu === 'datalabel' ? 'auto' : 0}> <AnimateHeight duration={300} height={currentMenu === 'datalabel' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500"> <ul className="sub-menu text-white/70">
<li> <li>
<Link href="/datatables/basic">{t('basic')}</Link> <Link href="/datatables/basic">{t('basic')}</Link>
</li> </li>
@ -472,17 +472,17 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<button type="button" className={`${currentMenu === 'forms' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('forms')}> <button type="button" className={`${currentMenu === 'forms' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('forms')}>
<div className="flex items-center"> <div className="flex items-center">
<IconMenuForms className="shrink-0 group-hover:!text-primary" /> <IconMenuForms className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('forms')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('forms')}</span>
</div> </div>
<div className={currentMenu !== 'forms' ? '-rotate-90 rtl:rotate-90' : ''}> <div className={currentMenu !== 'forms' ? '-rotate-90 rtl:rotate-90' : ''}>
<IconCaretDown /> <IconCaretDown className="text-white/50" />
</div> </div>
</button> </button>
<AnimateHeight duration={300} height={currentMenu === 'forms' ? 'auto' : 0}> <AnimateHeight duration={300} height={currentMenu === 'forms' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500"> <ul className="sub-menu text-white/70">
<li> <li>
<Link href="/forms/basic">{t('basic')}</Link> <Link href="/forms/basic">{t('basic')}</Link>
</li> </li>
@ -532,7 +532,7 @@ const Sidebar = () => {
</AnimateHeight> </AnimateHeight>
</li> </li>
<h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]"> <h2 className="-mx-4 mb-1 flex items-center bg-white-light/10 px-7 py-3 font-extrabold uppercase text-white/50">
<IconMinus className="hidden h-5 w-4 flex-none" /> <IconMinus className="hidden h-5 w-4 flex-none" />
<span>{t('user_and_pages')}</span> <span>{t('user_and_pages')}</span>
</h2> </h2>
@ -540,17 +540,17 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<button type="button" className={`${currentMenu === 'users' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('users')}> <button type="button" className={`${currentMenu === 'users' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('users')}>
<div className="flex items-center"> <div className="flex items-center">
<IconMenuUsers className="shrink-0 group-hover:!text-primary" /> <IconMenuUsers className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('users')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('users')}</span>
</div> </div>
<div className={currentMenu !== 'users' ? '-rotate-90 rtl:rotate-90' : ''}> <div className={currentMenu !== 'users' ? '-rotate-90 rtl:rotate-90' : ''}>
<IconCaretDown /> <IconCaretDown className="text-white/50" />
</div> </div>
</button> </button>
<AnimateHeight duration={300} height={currentMenu === 'users' ? 'auto' : 0}> <AnimateHeight duration={300} height={currentMenu === 'users' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500"> <ul className="sub-menu text-white/70">
<li> <li>
<Link href="/users/profile">{t('profile')}</Link> <Link href="/users/profile">{t('profile')}</Link>
</li> </li>
@ -564,17 +564,17 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<button type="button" className={`${currentMenu === 'page' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('page')}> <button type="button" className={`${currentMenu === 'page' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('page')}>
<div className="flex items-center"> <div className="flex items-center">
<IconMenuPages className="shrink-0 group-hover:!text-primary" /> <IconMenuPages className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('pages')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('pages')}</span>
</div> </div>
<div className={currentMenu !== 'page' ? '-rotate-90 rtl:rotate-90' : ''}> <div className={currentMenu !== 'page' ? '-rotate-90 rtl:rotate-90' : ''}>
<IconCaretDown /> <IconCaretDown className="text-white/50" />
</div> </div>
</button> </button>
<AnimateHeight duration={300} height={currentMenu === 'page' ? 'auto' : 0}> <AnimateHeight duration={300} height={currentMenu === 'page' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500"> <ul className="sub-menu text-white/70">
<li> <li>
<Link href="/pages/knowledge-base">{t('knowledge_base')}</Link> <Link href="/pages/knowledge-base">{t('knowledge_base')}</Link>
</li> </li>
@ -615,7 +615,7 @@ const Sidebar = () => {
</div> </div>
</button> </button>
<AnimateHeight duration={300} height={errorSubMenu ? 'auto' : 0}> <AnimateHeight duration={300} height={errorSubMenu ? 'auto' : 0}>
<ul className="sub-menu text-gray-500"> <ul className="sub-menu text-white/70">
<li> <li>
<a href="/pages/error404" target="_blank"> <a href="/pages/error404" target="_blank">
{t('404')} {t('404')}
@ -647,17 +647,17 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<button type="button" className={`${currentMenu === 'auth' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('auth')}> <button type="button" className={`${currentMenu === 'auth' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('auth')}>
<div className="flex items-center"> <div className="flex items-center">
<IconMenuAuthentication className="shrink-0 group-hover:!text-primary" /> <IconMenuAuthentication className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('authentication')}</span> <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('authentication')}</span>
</div> </div>
<div className={currentMenu !== 'auth' ? '-rotate-90 rtl:rotate-90' : ''}> <div className={currentMenu !== 'auth' ? '-rotate-90 rtl:rotate-90' : ''}>
<IconCaretDown /> <IconCaretDown className="text-white/50" />
</div> </div>
</button> </button>
<AnimateHeight duration={300} height={currentMenu === 'auth' ? 'auto' : 0}> <AnimateHeight duration={300} height={currentMenu === 'auth' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500"> <ul className="sub-menu text-white/70">
<li> <li>
<Link href="/auth/boxed-signin" target="_blank"> <Link href="/auth/boxed-signin" target="_blank">
{t('login_boxed')} {t('login_boxed')}
@ -702,7 +702,7 @@ const Sidebar = () => {
</AnimateHeight> </AnimateHeight>
</li> </li>
*/} */}
<h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]"> <h2 className="-mx-4 mb-1 flex items-center bg-white-light/10 px-7 py-3 font-extrabold uppercase text-white/50">
<IconMinus className="hidden h-5 w-4 flex-none" /> <IconMinus className="hidden h-5 w-4 flex-none" />
<span>{t('supports')}</span> <span>{t('supports')}</span>
</h2> </h2>
@ -710,8 +710,8 @@ const Sidebar = () => {
<li className="menu nav-item"> <li className="menu nav-item">
<Link href="https://vristo.sbthemes.com" target="_blank" className="nav-link group"> <Link href="https://vristo.sbthemes.com" target="_blank" className="nav-link group">
<div className="flex items-center"> <div className="flex items-center">
<IconMenuDocumentation className="shrink-0 group-hover:!text-primary" /> <IconMenuDocumentation className="shrink-0 group-hover:!text-primary text-white/50" />
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('documentation')}</span> <span className="text-white ltr:pl-3 rtl:pr-3">{t('documentation')}</span>
</div> </div>
</Link> </Link>
</li> </li>

156
styles/tailwind.css
View File

@ -22,48 +22,54 @@
.panel { .panel {
@apply relative rounded-md bg-white p-5 shadow dark:bg-black; @apply relative rounded-md bg-white p-5 shadow dark:bg-black;
} }
/* Navbar */ /* Navbar */
.navbar-sticky header, .navbar-sticky header,
.navbar-floating header { .navbar-floating header {
@apply sticky top-0 z-20; @apply sticky top-0 z-20;
} }
.navbar-floating header { .navbar-floating header {
@apply bg-[#fafafa]/90 px-6 pt-4 dark:bg-[#060818]/90; @apply bg-[#fafafa]/90 px-6 pt-4 dark:bg-[#060818]/90;
} }
.navbar-floating header > div > div:first-child {
.navbar-floating header>div>div:first-child {
@apply rounded-md; @apply rounded-md;
} }
.horizontal .navbar-floating header > div > div:first-child {
.horizontal .navbar-floating header>div>div:first-child {
@apply rounded-b-none; @apply rounded-b-none;
} }
.horizontal .navbar-floating header .horizontal-menu { .horizontal .navbar-floating header .horizontal-menu {
@apply rounded-b-md; @apply rounded-b-md;
} }
/* Sidebar */ /* Sidebar */
.sidebar:hover .nav-item > a { .sidebar:hover .nav-item>a {
@apply w-auto; @apply w-auto;
} }
.sidebar .nav-item > button, .sidebar .nav-item>button,
.sidebar .nav-item > a { .sidebar .nav-item>a {
@apply mb-1 flex w-full items-center justify-between overflow-hidden whitespace-nowrap rounded-md p-2.5 text-[#506690] hover:bg-[#000]/[0.08] hover:text-black dark:hover:bg-[#181f32] dark:hover:text-white-dark; @apply mb-1 flex w-full items-center justify-between overflow-hidden whitespace-nowrap rounded-md p-2.5 text-[#506690] hover:bg-[#000]/[0.08] hover:text-black dark:hover:bg-[#181f32] dark:hover:text-white-dark;
} }
.sidebar .nav-item > button.active,
.sidebar .nav-item > a.active { .sidebar .nav-item>button.active,
.sidebar .nav-item>a.active {
@apply bg-[#000]/[0.08] text-black dark:bg-[#181f32] dark:text-white-dark; @apply bg-[#000]/[0.08] text-black dark:bg-[#181f32] dark:text-white-dark;
} }
.sidebar .nav-item > button.active > div > span, .sidebar .nav-item>button.active>div>span,
.sidebar .nav-item > a.active > div > span { .sidebar .nav-item>a.active>div>span {
@apply dark:!text-white-dark; @apply dark:!text-white-dark;
} }
.sidebar ul.sub-menu li button, .sidebar ul.sub-menu li button,
.sidebar ul.sub-menu li a { .sidebar ul.sub-menu li a {
@apply flex w-full items-center px-9 py-2.5 before:h-0.5 before:w-2 before:rounded before:bg-gray-300 hover:bg-gray-100 @apply flex w-full items-center px-9 py-2.5 before:h-0.5 before:w-2 before:rounded before:bg-gray-300 hover:bg-gray-100 hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark:before:bg-gray-500 dark:hover:bg-gray-900 dark:hover:text-primary;
hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark:before:bg-gray-500 dark:hover:bg-gray-900 dark:hover:text-primary;
} }
.sidebar ul.sub-menu li button.active, .sidebar ul.sub-menu li button.active,
.sidebar ul.sub-menu li a.active { .sidebar ul.sub-menu li a.active {
@apply text-primary before:bg-primary; @apply text-primary before:bg-primary;
@ -82,15 +88,19 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.horizontal .horizontal-menu { .horizontal .horizontal-menu {
@apply hidden shadow-md lg:flex; @apply hidden shadow-md lg:flex;
} }
.horizontal .horizontal-logo { .horizontal .horizontal-logo {
@apply flex; @apply flex;
} }
.horizontal .main-container .main-content { .horizontal .main-container .main-content {
@apply ltr:ml-0 rtl:mr-0; @apply ltr:ml-0 rtl:mr-0;
} }
.horizontal .sidebar { .horizontal .sidebar {
@apply ltr:-left-[260px] rtl:-right-[260px]; @apply ltr:-left-[260px] rtl:-right-[260px];
} }
.horizontal.toggle-sidebar .sidebar { .horizontal.toggle-sidebar .sidebar {
@apply ltr:left-0 rtl:right-0 lg:ltr:-left-[260px] lg:rtl:-right-[260px]; @apply ltr:left-0 rtl:right-0 lg:ltr:-left-[260px] lg:rtl:-right-[260px];
} }
@ -129,8 +139,8 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
@apply bg-gray-100 text-primary dark:bg-primary/10; @apply bg-gray-100 text-primary dark:bg-primary/10;
} }
.horizontal-menu > li.nav-item:hover > ul.sub-menu, .horizontal-menu>li.nav-item:hover>ul.sub-menu,
.horizontal-menu > li.nav-item > ul.sub-menu > li:hover > ul { .horizontal-menu>li.nav-item>ul.sub-menu>li:hover>ul {
@apply block; @apply block;
} }
@ -139,12 +149,15 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.vertical.toggle-sidebar .collapse-icon { .vertical.toggle-sidebar .collapse-icon {
@apply flex; @apply flex;
} }
.vertical.toggle-sidebar .main-container .main-content { .vertical.toggle-sidebar .main-container .main-content {
@apply ltr:ml-0 rtl:mr-0; @apply ltr:ml-0 rtl:mr-0;
} }
.vertical .sidebar { .vertical .sidebar {
@apply ltr:-left-[260px] rtl:-right-[260px] lg:ltr:left-0 lg:rtl:right-0; @apply ltr:-left-[260px] rtl:-right-[260px] lg:ltr:left-0 lg:rtl:right-0;
} }
.vertical.toggle-sidebar .sidebar { .vertical.toggle-sidebar .sidebar {
@apply ltr:left-0 rtl:right-0 lg:ltr:-left-[260px] lg:rtl:-right-[260px]; @apply ltr:left-0 rtl:right-0 lg:ltr:-left-[260px] lg:rtl:-right-[260px];
} }
@ -153,15 +166,19 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.collapsible-vertical .sidebar { .collapsible-vertical .sidebar {
@apply hover:w-[260px] ltr:-left-[260px] rtl:-right-[260px] lg:w-[70px] lg:ltr:left-0 lg:rtl:right-0; @apply hover:w-[260px] ltr:-left-[260px] rtl:-right-[260px] lg:w-[70px] lg:ltr:left-0 lg:rtl:right-0;
} }
.collapsible-vertical.toggle-sidebar .sidebar { .collapsible-vertical.toggle-sidebar .sidebar {
@apply ltr:left-0 rtl:right-0; @apply ltr:left-0 rtl:right-0;
} }
.collapsible-vertical.toggle-sidebar .sidebar { .collapsible-vertical.toggle-sidebar .sidebar {
@apply lg:w-[260px]; @apply lg:w-[260px];
} }
.collapsible-vertical.toggle-sidebar .sidebar .nav-item > a {
.collapsible-vertical.toggle-sidebar .sidebar .nav-item>a {
@apply w-auto; @apply w-auto;
} }
.collapsible-vertical.toggle-sidebar .main-content { .collapsible-vertical.toggle-sidebar .main-content {
@apply lg:w-[calc(100%-260px)] lg:ltr:ml-[260px] lg:rtl:mr-[260px]; @apply lg:w-[calc(100%-260px)] lg:ltr:ml-[260px] lg:rtl:mr-[260px];
} }
@ -169,42 +186,52 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.collapsible-vertical .sidebar .sub-menu { .collapsible-vertical .sidebar .sub-menu {
@apply lg:hidden; @apply lg:hidden;
} }
.collapsible-vertical .sidebar:hover .sub-menu, .collapsible-vertical .sidebar:hover .sub-menu,
.collapsible-vertical .sidebar:hover .sub-menu.recent-submenu, .collapsible-vertical .sidebar:hover .sub-menu.recent-submenu,
.collapsible-vertical.toggle-sidebar .sidebar .sub-menu { .collapsible-vertical.toggle-sidebar .sidebar .sub-menu {
@apply block; @apply block;
} }
.collapsible-vertical .main-content { .collapsible-vertical .main-content {
@apply lg:w-[calc(100%-70px)] lg:ltr:ml-[70px] lg:rtl:mr-[70px]; @apply lg:w-[calc(100%-70px)] lg:ltr:ml-[70px] lg:rtl:mr-[70px];
} }
.collapsible-vertical .sidebar .collapse-icon, .collapsible-vertical .sidebar .collapse-icon,
.collapsible-vertical .main-logo > span { .collapsible-vertical .main-logo>span {
@apply transition-opacity duration-300 lg:opacity-0; @apply transition-opacity duration-300 lg:opacity-0;
} }
.collapsible-vertical .sidebar:hover .collapse-icon, .collapsible-vertical .sidebar:hover .collapse-icon,
.collapsible-vertical.toggle-sidebar .collapse-icon, .collapsible-vertical.toggle-sidebar .collapse-icon,
.collapsible-vertical .sidebar:hover .main-logo > span, .collapsible-vertical .sidebar:hover .main-logo>span,
.collapsible-vertical.toggle-sidebar .main-logo > span { .collapsible-vertical.toggle-sidebar .main-logo>span {
@apply duration-500 lg:opacity-100; @apply duration-500 lg:opacity-100;
} }
.collapsible-vertical.toggle-sidebar .sidebar .collapse-icon { .collapsible-vertical.toggle-sidebar .sidebar .collapse-icon {
@apply flex rotate-0; @apply flex rotate-0;
} }
.collapsible-vertical .sidebar:hover .collapse-icon { .collapsible-vertical .sidebar:hover .collapse-icon {
@apply flex rotate-180; @apply flex rotate-180;
} }
.collapsible-vertical .sidebar ul > h2 span {
.collapsible-vertical .sidebar ul>h2 span {
@apply hidden whitespace-nowrap; @apply hidden whitespace-nowrap;
} }
.collapsible-vertical .sidebar ul > h2 svg {
.collapsible-vertical .sidebar ul>h2 svg {
@apply block; @apply block;
} }
.collapsible-vertical .sidebar:hover ul > h2 span,
.collapsible-vertical.toggle-sidebar .sidebar ul > h2 span { .collapsible-vertical .sidebar:hover ul>h2 span,
.collapsible-vertical.toggle-sidebar .sidebar ul>h2 span {
@apply inline; @apply inline;
} }
.collapsible-vertical .sidebar:hover ul > h2 svg,
.collapsible-vertical.toggle-sidebar .sidebar ul > h2 svg { .collapsible-vertical .sidebar:hover ul>h2 svg,
.collapsible-vertical.toggle-sidebar .sidebar ul>h2 svg {
@apply hidden; @apply hidden;
} }
@ -226,12 +253,15 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.btn { .btn {
@apply relative flex items-center justify-center rounded-md border px-5 py-2 text-sm font-semibold shadow-[0_10px_20px_-10px] outline-none transition duration-300 hover:shadow-none; @apply relative flex items-center justify-center rounded-md border px-5 py-2 text-sm font-semibold shadow-[0_10px_20px_-10px] outline-none transition duration-300 hover:shadow-none;
} }
.btn-lg { .btn-lg {
@apply px-7 py-2.5 text-base; @apply px-7 py-2.5 text-base;
} }
.btn-sm { .btn-sm {
@apply px-2.5 py-1.5 text-xs; @apply px-2.5 py-1.5 text-xs;
} }
.btn[disabled] { .btn[disabled] {
@apply cursor-not-allowed opacity-60; @apply cursor-not-allowed opacity-60;
} }
@ -239,6 +269,7 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.btn-primary { .btn-primary {
@apply border-primary bg-primary text-white shadow-primary/60; @apply border-primary bg-primary text-white shadow-primary/60;
} }
.btn-outline-primary { .btn-outline-primary {
@apply border-primary text-primary shadow-none hover:bg-primary hover:text-white; @apply border-primary text-primary shadow-none hover:bg-primary hover:text-white;
} }
@ -246,6 +277,7 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.btn-secondary { .btn-secondary {
@apply border-secondary bg-secondary text-white shadow-secondary/60; @apply border-secondary bg-secondary text-white shadow-secondary/60;
} }
.btn-outline-secondary { .btn-outline-secondary {
@apply border-secondary text-secondary shadow-none hover:bg-secondary hover:text-white; @apply border-secondary text-secondary shadow-none hover:bg-secondary hover:text-white;
} }
@ -253,6 +285,7 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.btn-success { .btn-success {
@apply border-success bg-success text-white shadow-success/60; @apply border-success bg-success text-white shadow-success/60;
} }
.btn-outline-success { .btn-outline-success {
@apply border-success text-success shadow-none hover:bg-success hover:text-white; @apply border-success text-success shadow-none hover:bg-success hover:text-white;
} }
@ -260,6 +293,7 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.btn-danger { .btn-danger {
@apply border-danger bg-danger text-white shadow-danger/60; @apply border-danger bg-danger text-white shadow-danger/60;
} }
.btn-outline-danger { .btn-outline-danger {
@apply border-danger text-danger shadow-none hover:bg-danger hover:text-white; @apply border-danger text-danger shadow-none hover:bg-danger hover:text-white;
} }
@ -267,6 +301,7 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.btn-warning { .btn-warning {
@apply border-warning bg-warning text-white shadow-warning/60; @apply border-warning bg-warning text-white shadow-warning/60;
} }
.btn-outline-warning { .btn-outline-warning {
@apply border-warning text-warning shadow-none hover:bg-warning hover:text-white; @apply border-warning text-warning shadow-none hover:bg-warning hover:text-white;
} }
@ -274,6 +309,7 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.btn-info { .btn-info {
@apply border-info bg-info text-white shadow-info/60; @apply border-info bg-info text-white shadow-info/60;
} }
.btn-outline-info { .btn-outline-info {
@apply border-info text-info shadow-none hover:bg-info hover:text-white; @apply border-info text-info shadow-none hover:bg-info hover:text-white;
} }
@ -287,31 +323,38 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
} }
.btn-gradient { .btn-gradient {
@apply bg-gradient-to-r from-[#333333] to-[#325aa9] text-white hover:from-[#325aa9] hover:to-[#333333]; @apply bg-gradient-to-r from-[#1a1f2b] to-[#3779b9] text-white hover:from-[#3779b9] hover:to-[#1a1f2b];
} }
/* Badge */ /* Badge */
.badge { .badge {
@apply relative my-1 rounded border border-transparent px-2 py-0.5 text-xs font-semibold text-white; @apply relative my-1 rounded border border-transparent px-2 py-0.5 text-xs font-semibold text-white;
} }
.badge-outline-primary { .badge-outline-primary {
@apply border-primary text-primary hover:bg-primary-light dark:hover:bg-primary dark:hover:text-white-light; @apply border-primary text-primary hover:bg-primary-light dark:hover:bg-primary dark:hover:text-white-light;
} }
.badge-outline-secondary { .badge-outline-secondary {
@apply border-secondary text-secondary hover:bg-secondary-light dark:hover:bg-secondary dark:hover:text-white-light; @apply border-secondary text-secondary hover:bg-secondary-light dark:hover:bg-secondary dark:hover:text-white-light;
} }
.badge-outline-success { .badge-outline-success {
@apply border-success text-success hover:bg-success-light dark:hover:bg-success dark:hover:text-white-light; @apply border-success text-success hover:bg-success-light dark:hover:bg-success dark:hover:text-white-light;
} }
.badge-outline-danger { .badge-outline-danger {
@apply border-danger text-danger hover:bg-danger-light dark:hover:bg-danger dark:hover:text-white-light; @apply border-danger text-danger hover:bg-danger-light dark:hover:bg-danger dark:hover:text-white-light;
} }
.badge-outline-warning { .badge-outline-warning {
@apply border-warning text-warning hover:bg-warning-light dark:hover:bg-warning dark:hover:text-white-light; @apply border-warning text-warning hover:bg-warning-light dark:hover:bg-warning dark:hover:text-white-light;
} }
.badge-outline-info { .badge-outline-info {
@apply border-info text-info hover:bg-info-light dark:hover:bg-info dark:hover:text-white-light; @apply border-info text-info hover:bg-info-light dark:hover:bg-info dark:hover:text-white-light;
} }
.badge-outline-dark { .badge-outline-dark {
@apply border-dark text-dark hover:bg-dark-light dark:hover:bg-dark dark:hover:text-white-light; @apply border-dark text-dark hover:bg-dark-light dark:hover:bg-dark dark:hover:text-white-light;
} }
@ -330,15 +373,18 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.form-multiselect-lg { .form-multiselect-lg {
@apply py-2.5 text-base; @apply py-2.5 text-base;
} }
.form-input-sm, .form-input-sm,
.form-textarea-sm, .form-textarea-sm,
.form-select-sm, .form-select-sm,
.form-multiselect-sm { .form-multiselect-sm {
@apply py-1.5 text-xs; @apply py-1.5 text-xs;
} }
label { label {
@apply mb-1.5 block font-semibold; @apply mb-1.5 block font-semibold;
} }
[dir='rtl'] select { [dir='rtl'] select {
background-position: left 0.5rem center; background-position: left 0.5rem center;
} }
@ -350,15 +396,18 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.has-error .multiselect__tags { .has-error .multiselect__tags {
@apply border-danger bg-danger/[0.08] text-danger placeholder-danger/70 focus:border-danger; @apply border-danger bg-danger/[0.08] text-danger placeholder-danger/70 focus:border-danger;
} }
.has-error .form-label, .has-error .form-label,
.has-error .form-help, .has-error .form-help,
.has-error .form-icon, .has-error .form-icon,
.has-error .multiselect__placeholder { .has-error .multiselect__placeholder {
@apply text-danger; @apply text-danger;
} }
.has-error .multiselect__input { .has-error .multiselect__input {
@apply bg-[#F7ECF0] !placeholder-danger/70; @apply bg-[#F7ECF0] !placeholder-danger/70;
} }
.has-error .multiselect__tags:hover, .has-error .multiselect__tags:hover,
.has-error .form-checkbox { .has-error .form-checkbox {
@apply border-danger; @apply border-danger;
@ -371,15 +420,18 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.has-success .multiselect__tags { .has-success .multiselect__tags {
@apply border-success bg-success/[0.08] text-success placeholder-success/70 focus:border-success; @apply border-success bg-success/[0.08] text-success placeholder-success/70 focus:border-success;
} }
.has-success .form-label, .has-success .form-label,
.has-success .form-help, .has-success .form-help,
.has-success .form-icon, .has-success .form-icon,
.has-success .multiselect__placeholder { .has-success .multiselect__placeholder {
@apply text-success; @apply text-success;
} }
.has-success .multiselect__input { .has-success .multiselect__input {
@apply bg-[#F7ECF0] !placeholder-success/70; @apply bg-[#F7ECF0] !placeholder-success/70;
} }
.has-success .multiselect__tags:hover { .has-success .multiselect__tags:hover {
@apply border-success; @apply border-success;
} }
@ -387,34 +439,39 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
/* checkbox & radio */ /* checkbox & radio */
.form-radio, .form-radio,
.form-checkbox { .form-checkbox {
@apply h-5 w-5 cursor-pointer rounded border-2 border-white-light bg-transparent text-primary !shadow-none !outline-none !ring-0 !ring-offset-0 checked:bg-[length:90%_90%] disabled:cursor-not-allowed disabled:bg-[#eee] ltr:mr-1.5 rtl:ml-1.5 @apply h-5 w-5 cursor-pointer rounded border-2 border-white-light bg-transparent text-primary !shadow-none !outline-none !ring-0 !ring-offset-0 checked:bg-[length:90%_90%] disabled:cursor-not-allowed disabled:bg-[#eee] ltr:mr-1.5 rtl:ml-1.5 dark:border-[#253b5c] dark:checked:border-transparent dark:disabled:bg-[#1b2e4b];
dark:border-[#253b5c] dark:checked:border-transparent dark:disabled:bg-[#1b2e4b];
} }
.form-checkbox.outline-primary:checked { .form-checkbox.outline-primary:checked {
@apply border-primary bg-transparent; @apply border-primary bg-transparent;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%234361ee' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>"); background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%234361ee' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
} }
.form-checkbox.outline-secondary:checked { .form-checkbox.outline-secondary:checked {
@apply border-secondary bg-transparent; @apply border-secondary bg-transparent;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23805dca' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>"); background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23805dca' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
} }
.form-checkbox.outline-success:checked { .form-checkbox.outline-success:checked {
@apply border-success bg-transparent; @apply border-success bg-transparent;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%2300ab55' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>"); background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%2300ab55' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
} }
.form-checkbox.outline-danger:checked { .form-checkbox.outline-danger:checked {
@apply border-danger bg-transparent; @apply border-danger bg-transparent;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23e7515a' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>"); background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23e7515a' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
} }
.form-checkbox.outline-warning:checked { .form-checkbox.outline-warning:checked {
@apply border-warning bg-transparent; @apply border-warning bg-transparent;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23e2a03f' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>"); background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23e2a03f' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
} }
.form-checkbox.outline-info:checked { .form-checkbox.outline-info:checked {
@apply border-info bg-transparent; @apply border-info bg-transparent;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%232196f3' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>"); background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%232196f3' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
} }
.form-checkbox.outline-dark:checked { .form-checkbox.outline-dark:checked {
@apply border-dark bg-transparent; @apply border-dark bg-transparent;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%233b3f5c' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>"); background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%233b3f5c' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
@ -427,21 +484,27 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.form-radio.outline-primary:checked { .form-radio.outline-primary:checked {
@apply border-primary bg-transparent bg-none; @apply border-primary bg-transparent bg-none;
} }
.form-radio.outline-secondary:checked { .form-radio.outline-secondary:checked {
@apply border-secondary bg-transparent bg-none; @apply border-secondary bg-transparent bg-none;
} }
.form-radio.outline-success:checked { .form-radio.outline-success:checked {
@apply border-success bg-transparent bg-none; @apply border-success bg-transparent bg-none;
} }
.form-radio.outline-danger:checked { .form-radio.outline-danger:checked {
@apply border-danger bg-transparent bg-none; @apply border-danger bg-transparent bg-none;
} }
.form-radio.outline-warning:checked { .form-radio.outline-warning:checked {
@apply border-warning bg-transparent bg-none; @apply border-warning bg-transparent bg-none;
} }
.form-radio.outline-info:checked { .form-radio.outline-info:checked {
@apply border-info bg-transparent bg-none; @apply border-info bg-transparent bg-none;
} }
.form-radio.outline-dark:checked { .form-radio.outline-dark:checked {
@apply border-dark bg-transparent bg-none; @apply border-dark bg-transparent bg-none;
} }
@ -450,17 +513,21 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.dropdown { .dropdown {
@apply relative; @apply relative;
} }
.dropdown > button {
.dropdown>button {
@apply flex; @apply flex;
} }
.dropdown ul { .dropdown ul {
@apply my-1 min-w-[120px] rounded bg-white p-0 py-2 text-black shadow dark:bg-[#1b2e4b] dark:text-white-dark; @apply my-1 min-w-[120px] rounded bg-white p-0 py-2 text-black shadow dark:bg-[#1b2e4b] dark:text-white-dark;
} }
.dropdown ul li > a,
.dropdown ul li > button { .dropdown ul li>a,
.dropdown ul li>button {
@apply flex items-center px-4 py-2 hover:bg-primary/10 hover:text-primary; @apply flex items-center px-4 py-2 hover:bg-primary/10 hover:text-primary;
} }
.dropdown ul li > button {
.dropdown ul li>button {
@apply w-full; @apply w-full;
} }
@ -468,28 +535,35 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.table-responsive { .table-responsive {
@apply overflow-auto; @apply overflow-auto;
} }
table { table {
@apply w-full !border-collapse; @apply w-full !border-collapse;
} }
table thead tr, table thead tr,
table tfoot tr { table tfoot tr {
@apply border-b-0 !bg-[#f6f8fa] dark:!bg-[#1a2941]; @apply border-b-0 !bg-[#f6f8fa] dark:!bg-[#1a2941];
} }
table thead tr th, table thead tr th,
table tfoot tr th, table tfoot tr th,
table tbody tr td { table tbody tr td {
@apply px-4 py-3 ltr:text-left rtl:text-right; @apply px-4 py-3 ltr:text-left rtl:text-right;
} }
table thead tr th, table thead tr th,
table tfoot tr th { table tfoot tr th {
@apply font-semibold; @apply font-semibold;
} }
table tbody tr { table tbody tr {
@apply border-b !border-white-light/40 dark:!border-[#191e3a]; @apply border-b !border-white-light/40 dark:!border-[#191e3a];
} }
table.table-hover tbody tr { table.table-hover tbody tr {
@apply hover:!bg-white-light/20 dark:hover:!bg-[#1a2941]/40; @apply hover:!bg-white-light/20 dark:hover:!bg-[#1a2941]/40;
} }
table.table-striped tbody tr:nth-child(odd) { table.table-striped tbody tr:nth-child(odd) {
@apply !bg-white-light/20 dark:!bg-[#1a2941]/40; @apply !bg-white-light/20 dark:!bg-[#1a2941]/40;
} }
@ -498,6 +572,7 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
table.dataTable-table tbody tr td { table.dataTable-table tbody tr td {
@apply border-b border-white-light/40 px-4 py-3 ltr:text-left rtl:text-right dark:border-[#191e3a]; @apply border-b border-white-light/40 px-4 py-3 ltr:text-left rtl:text-right dark:border-[#191e3a];
} }
table.dataTable-table tbody tr:last-child td { table.dataTable-table tbody tr:last-child td {
@apply border-b-0; @apply border-b-0;
} }
@ -509,10 +584,11 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
} }
/* perfect scrollbar */ /* perfect scrollbar */
.ps__rail-y > .ps__thumb-y, .ps__rail-y>.ps__thumb-y,
.ps__rail-y > .ps__thumb-y { .ps__rail-y>.ps__thumb-y {
@apply !w-1.5 !bg-[#DDDDDD] dark:!bg-[#2d334c]; @apply !w-1.5 !bg-[#DDDDDD] dark:!bg-[#2d334c];
} }
.ps .ps__rail-x:hover, .ps .ps__rail-x:hover,
.ps .ps__rail-y:hover, .ps .ps__rail-y:hover,
.ps .ps__rail-x:focus, .ps .ps__rail-x:focus,
@ -521,6 +597,7 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.ps .ps__rail-y.ps--clicking { .ps .ps__rail-y.ps--clicking {
@apply !opacity-60; @apply !opacity-60;
} }
.ps .ps__rail-x:hover, .ps .ps__rail-x:hover,
.ps .ps__rail-y:hover, .ps .ps__rail-y:hover,
.ps .ps__rail-x:focus, .ps .ps__rail-x:focus,
@ -534,13 +611,16 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.slide-down-enter-active { .slide-down-enter-active {
@apply transition duration-100 ease-out; @apply transition duration-100 ease-out;
} }
.slide-down-leave-active { .slide-down-leave-active {
@apply transition duration-75 ease-in; @apply transition duration-75 ease-in;
} }
.slide-down-enter-from, .slide-down-enter-from,
.slide-down-leave-to { .slide-down-leave-to {
@apply scale-95 transform opacity-0; @apply scale-95 transform opacity-0;
} }
.slide-down-enter-to, .slide-down-enter-to,
.slide-down-leave-from { .slide-down-leave-from {
@apply scale-100 transform opacity-100; @apply scale-100 transform opacity-100;
@ -549,13 +629,16 @@ hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark
.modal-fade-enter-active { .modal-fade-enter-active {
@apply transition duration-300 ease-out; @apply transition duration-300 ease-out;
} }
.modal-fade-leave-active { .modal-fade-leave-active {
@apply transition duration-200 ease-in; @apply transition duration-200 ease-in;
} }
.modal-fade-enter-from, .modal-fade-enter-from,
.modal-fade-leave-to { .modal-fade-leave-to {
@apply scale-95 transform opacity-0; @apply scale-95 transform opacity-0;
} }
.modal-fade-enter-to, .modal-fade-enter-to,
.modal-fade-leave-from { .modal-fade-leave-from {
@apply scale-100 transform opacity-100; @apply scale-100 transform opacity-100;
@ -611,6 +694,7 @@ pre.hljs {
.dark .apexcharts-canvas .apexcharts-radialbar-track.apexcharts-track .apexcharts-radialbar-area { .dark .apexcharts-canvas .apexcharts-radialbar-track.apexcharts-track .apexcharts-radialbar-area {
stroke: #191e3a; stroke: #191e3a;
} }
.dark .apexcharts-canvas .apexcharts-series-markers.apexcharts-series-bubble .apexcharts-marker { .dark .apexcharts-canvas .apexcharts-series-markers.apexcharts-series-bubble .apexcharts-marker {
stroke: #191e3a; stroke: #191e3a;
} }
@ -647,6 +731,7 @@ pre.hljs {
.swal2-container .swal2-popup.swal2-toast .swal2-html-container { .swal2-container .swal2-popup.swal2-toast .swal2-html-container {
@apply text-white; @apply text-white;
} }
.swal2-container .swal2-popup.swal2-toast.color-primary { .swal2-container .swal2-popup.swal2-toast.color-primary {
@apply bg-primary; @apply bg-primary;
} }
@ -658,12 +743,15 @@ pre.hljs {
.swal2-container .swal2-popup.swal2-toast.color-warning { .swal2-container .swal2-popup.swal2-toast.color-warning {
@apply bg-warning; @apply bg-warning;
} }
.swal2-container .swal2-popup.swal2-toast.color-info { .swal2-container .swal2-popup.swal2-toast.color-info {
@apply bg-info; @apply bg-info;
} }
.swal2-container .swal2-popup.swal2-toast.color-danger { .swal2-container .swal2-popup.swal2-toast.color-danger {
@apply bg-danger; @apply bg-danger;
} }
.swal2-container .swal2-popup.swal2-toast.color-success { .swal2-container .swal2-popup.swal2-toast.color-success {
@apply bg-success; @apply bg-success;
} }
@ -671,9 +759,11 @@ pre.hljs {
img.dark-img { img.dark-img {
@apply hidden; @apply hidden;
} }
.dark img.light-img { .dark img.light-img {
@apply !hidden; @apply !hidden;
} }
.dark img.dark-img { .dark img.dark-img {
@apply !block; @apply !block;
} }