Styles: design update
This commit is contained in:
parent
4fa26a55d2
commit
4709dab695
1010
package-lock.json
generated
1010
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -9,16 +9,22 @@
|
|||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@emotion/cache": "^11.13.1",
|
||||||
|
"@emotion/react": "^11.13.0",
|
||||||
|
"@emotion/styled": "^11.13.0",
|
||||||
|
"@mui/icons-material": "^5.16.6",
|
||||||
|
"@mui/material-nextjs": "^5.16.6",
|
||||||
|
"next": "14.2.5",
|
||||||
"react": "^18",
|
"react": "^18",
|
||||||
"react-dom": "^18",
|
"react-dom": "^18",
|
||||||
"next": "14.2.5"
|
"sass": "^1.77.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"typescript": "^5",
|
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^18",
|
"@types/react": "^18",
|
||||||
"@types/react-dom": "^18",
|
"@types/react-dom": "^18",
|
||||||
"eslint": "^8",
|
"eslint": "^8",
|
||||||
"eslint-config-next": "14.2.5"
|
"eslint-config-next": "14.2.5",
|
||||||
|
"typescript": "^5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
public/assets/images/auth/headerLogo.webp
Normal file
BIN
public/assets/images/auth/headerLogo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
6974
public/assets/images/auth/loginbg.svg
Normal file
6974
public/assets/images/auth/loginbg.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 703 KiB |
8
src/app/(auth)/log-in/layout.tsx
Normal file
8
src/app/(auth)/log-in/layout.tsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
interface RootLayoutProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout(props: RootLayoutProps): JSX.Element {
|
||||||
|
const { children } = props;
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
10
src/app/(auth)/log-in/loginPage.module.scss
Normal file
10
src/app/(auth)/log-in/loginPage.module.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
.loginPage {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.images {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
86
src/app/(auth)/log-in/page.tsx
Normal file
86
src/app/(auth)/log-in/page.tsx
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import React from "react";
|
||||||
|
import styles from "./loginPage.module.scss";
|
||||||
|
import Box from "@mui/material/Box";
|
||||||
|
import Typography from "@mui/material/Typography";
|
||||||
|
import Grid from "@mui/material/Grid";
|
||||||
|
import { UTILITY_CONSTANT } from "@/utilities/utilityConstant";
|
||||||
|
import Link from "next/link";
|
||||||
|
import CustomizedInputsStyled from "@/ui/CustomizedInputsStyled";
|
||||||
|
import CustomizedButtons from "@/ui/customizedButtons";
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
return (
|
||||||
|
<main className={styles.loginPage}>
|
||||||
|
<Grid container sx={{ height: "100%" }}>
|
||||||
|
<Grid item display={{ xs: "none", md: "block" }} md={7}>
|
||||||
|
<Box
|
||||||
|
height={"100%"}
|
||||||
|
sx={{ background: "var(--primary)" }}
|
||||||
|
display={"flex"}
|
||||||
|
alignItems={"center"}
|
||||||
|
justifyContent={"space-between"}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={UTILITY_CONSTANT.IMAGES.AUTH.LOGIN_BG}
|
||||||
|
alt=""
|
||||||
|
className={styles.images}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} md={5}>
|
||||||
|
<Box
|
||||||
|
width={"100%"}
|
||||||
|
height={"100%"}
|
||||||
|
display={"flex"}
|
||||||
|
flexDirection={"column"}
|
||||||
|
justifyContent={"space-between"}
|
||||||
|
alignItems={"flex-start"}
|
||||||
|
gap={4}
|
||||||
|
paddingInline={5}
|
||||||
|
paddingBlock={5}
|
||||||
|
>
|
||||||
|
<img src={UTILITY_CONSTANT.IMAGES.AUTH.HEADER_LOG} alt="logo" />
|
||||||
|
<Box width={"100%"}>
|
||||||
|
<Typography variant="h4">Welcome to Convexsol</Typography>
|
||||||
|
<Typography variant="h4">Sign in to your account</Typography>
|
||||||
|
<Box
|
||||||
|
width={"100%"}
|
||||||
|
marginBlockStart={"40px"}
|
||||||
|
display={"flex"}
|
||||||
|
alignItems={"flex-start"}
|
||||||
|
flexDirection={"column"}
|
||||||
|
gap={3}
|
||||||
|
>
|
||||||
|
<CustomizedInputsStyled label="User Name" type="text" />
|
||||||
|
<CustomizedInputsStyled
|
||||||
|
label="Password"
|
||||||
|
type="password"
|
||||||
|
endAdornmentBoolean
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Box width={"100%"} marginBlockStart={"20px"}>
|
||||||
|
<CustomizedButtons label={"Sign In"} />
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
width={"100%"}
|
||||||
|
display={"flex"}
|
||||||
|
alignItems={"center"}
|
||||||
|
justifyContent={"space-between"}
|
||||||
|
flexWrap={"wrap"}
|
||||||
|
gap={2}
|
||||||
|
>
|
||||||
|
<Typography variant="caption">
|
||||||
|
© 2024 ConvexSol. Pvt.Ltd. All rights reserved.
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="caption">
|
||||||
|
<Link href={"#"}>Privacy Policy</Link> |{" "}
|
||||||
|
<Link href={"#"}>Terms of Use</Link>
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
7
src/app/(dashboard)/home/page.tsx
Normal file
7
src/app/(dashboard)/home/page.tsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const HomePage = () => {
|
||||||
|
return <div>Home page 1</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
10
src/app/(dashboard)/layout.tsx
Normal file
10
src/app/(dashboard)/layout.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import DashboardWrapper from "@/components/wrapper/dashboardWrapper";
|
||||||
|
|
||||||
|
interface RootLayoutProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout(props: RootLayoutProps): JSX.Element {
|
||||||
|
const { children } = props;
|
||||||
|
return <DashboardWrapper>{children}</DashboardWrapper>;
|
||||||
|
}
|
||||||
@ -1,107 +0,0 @@
|
|||||||
:root {
|
|
||||||
--max-width: 1100px;
|
|
||||||
--border-radius: 12px;
|
|
||||||
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
|
|
||||||
"Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
|
|
||||||
"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
|
|
||||||
|
|
||||||
--foreground-rgb: 0, 0, 0;
|
|
||||||
--background-start-rgb: 214, 219, 220;
|
|
||||||
--background-end-rgb: 255, 255, 255;
|
|
||||||
|
|
||||||
--primary-glow: conic-gradient(
|
|
||||||
from 180deg at 50% 50%,
|
|
||||||
#16abff33 0deg,
|
|
||||||
#0885ff33 55deg,
|
|
||||||
#54d6ff33 120deg,
|
|
||||||
#0071ff33 160deg,
|
|
||||||
transparent 360deg
|
|
||||||
);
|
|
||||||
--secondary-glow: radial-gradient(
|
|
||||||
rgba(255, 255, 255, 1),
|
|
||||||
rgba(255, 255, 255, 0)
|
|
||||||
);
|
|
||||||
|
|
||||||
--tile-start-rgb: 239, 245, 249;
|
|
||||||
--tile-end-rgb: 228, 232, 233;
|
|
||||||
--tile-border: conic-gradient(
|
|
||||||
#00000080,
|
|
||||||
#00000040,
|
|
||||||
#00000030,
|
|
||||||
#00000020,
|
|
||||||
#00000010,
|
|
||||||
#00000010,
|
|
||||||
#00000080
|
|
||||||
);
|
|
||||||
|
|
||||||
--callout-rgb: 238, 240, 241;
|
|
||||||
--callout-border-rgb: 172, 175, 176;
|
|
||||||
--card-rgb: 180, 185, 188;
|
|
||||||
--card-border-rgb: 131, 134, 135;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--foreground-rgb: 255, 255, 255;
|
|
||||||
--background-start-rgb: 0, 0, 0;
|
|
||||||
--background-end-rgb: 0, 0, 0;
|
|
||||||
|
|
||||||
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
|
||||||
--secondary-glow: linear-gradient(
|
|
||||||
to bottom right,
|
|
||||||
rgba(1, 65, 255, 0),
|
|
||||||
rgba(1, 65, 255, 0),
|
|
||||||
rgba(1, 65, 255, 0.3)
|
|
||||||
);
|
|
||||||
|
|
||||||
--tile-start-rgb: 2, 13, 46;
|
|
||||||
--tile-end-rgb: 2, 5, 19;
|
|
||||||
--tile-border: conic-gradient(
|
|
||||||
#ffffff80,
|
|
||||||
#ffffff40,
|
|
||||||
#ffffff30,
|
|
||||||
#ffffff20,
|
|
||||||
#ffffff10,
|
|
||||||
#ffffff10,
|
|
||||||
#ffffff80
|
|
||||||
);
|
|
||||||
|
|
||||||
--callout-rgb: 20, 20, 20;
|
|
||||||
--callout-border-rgb: 108, 108, 108;
|
|
||||||
--card-rgb: 100, 100, 100;
|
|
||||||
--card-border-rgb: 200, 200, 200;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
max-width: 100vw;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: rgb(var(--foreground-rgb));
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
transparent,
|
|
||||||
rgb(var(--background-end-rgb))
|
|
||||||
)
|
|
||||||
rgb(var(--background-start-rgb));
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
html {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
157
src/app/globals.scss
Normal file
157
src/app/globals.scss
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
@use "../theme/global/index.scss" as *;
|
||||||
|
@use "../theme/sass/helper" as *;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg_white: 0 0% 100%;
|
||||||
|
--background: 232 95% 7%;
|
||||||
|
--foreground: 222.2 84% 4.9%;
|
||||||
|
|
||||||
|
--card: 0 0% 100%; /* #ffffff */
|
||||||
|
--card-foreground: 222.2 84% 4.9%;
|
||||||
|
|
||||||
|
--popover: 0 0% 100%; /* #ffffff */
|
||||||
|
--popover-foreground: 222.2 84% 4.9%;
|
||||||
|
|
||||||
|
--primary: #6290cb; /* #6290CB */
|
||||||
|
--primary_light: #dae7f9; /* #DAE7F9 */
|
||||||
|
--primary_bg_03: 230 68% 16%; /* #0D1645 */
|
||||||
|
--inputPrimary: 227 49% 17%; /* #161F40 */
|
||||||
|
--primary-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--secondary: 210 40% 96.1%;
|
||||||
|
--secondary-foreground: 212, 100%, 62%; /* #3C96FF */
|
||||||
|
--secondary_bg_02: 219, 100%, 61%; /* #387eff */
|
||||||
|
--secondary_bg_03: 231 41% 21%; /* #20274D */
|
||||||
|
--secondary_bg_04: 224, 100%, 63%; /* #4175FF */
|
||||||
|
|
||||||
|
--input-border-default: #e0e3e7;
|
||||||
|
--input-border-hover: #b2bac2;
|
||||||
|
|
||||||
|
// ========== Font Family ==========
|
||||||
|
--font_primary: "roboto", sans-serif;
|
||||||
|
// ========== Font Weight ==========
|
||||||
|
--fw_light: 300;
|
||||||
|
--fw_regular: 400;
|
||||||
|
--fw_medium: 500;
|
||||||
|
--fw_semiBold: 600;
|
||||||
|
--fw_bold: 700;
|
||||||
|
--fw_extraBold: 800;
|
||||||
|
--fw_black: 900;
|
||||||
|
|
||||||
|
// xs, extra-small: 0px
|
||||||
|
// sm, small: 600px
|
||||||
|
// md, medium: 900px
|
||||||
|
// lg, large: 1200px
|
||||||
|
// xl, extra-large: 1536px
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apply to All Components */
|
||||||
|
*,
|
||||||
|
*::after,
|
||||||
|
*::before {
|
||||||
|
margin: 0;
|
||||||
|
margin-block: 0;
|
||||||
|
margin-inline: 0;
|
||||||
|
padding: 0;
|
||||||
|
padding-block: 0;
|
||||||
|
padding-inline: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Body */
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
:is(html, body, #__next) {
|
||||||
|
width: 100%;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
/* Keeps The Body Centered in Small Screens */
|
||||||
|
@media (max-width: 320px) {
|
||||||
|
width: rem(320);
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(button, input, select, option) {
|
||||||
|
border-color: transparent;
|
||||||
|
outline-color: transparent;
|
||||||
|
}
|
||||||
|
:is(h1, h2, h3, h4, h5, h6) {
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(h1, h2, h3, h4, h5, h6, p, a, th, td) {
|
||||||
|
color: var(--clr_text_primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
&:hover {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
overflow: unset;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
li {
|
||||||
|
margin: 0;
|
||||||
|
margin-block: 0;
|
||||||
|
margin-inline: 0;
|
||||||
|
padding: 0;
|
||||||
|
padding-block: 0;
|
||||||
|
padding-inline: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(html, body) {
|
||||||
|
/* width */
|
||||||
|
/* width */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #888;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on hover */
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #555;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
}
|
||||||
|
:global(.MuiSnackbar-root) {
|
||||||
|
right: 24px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
html {
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,22 +1,21 @@
|
|||||||
import type { Metadata } from "next";
|
import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
|
||||||
import { Inter } from "next/font/google";
|
import { ThemeProvider } from "@mui/material/styles";
|
||||||
import "./globals.css";
|
import theme from "../theme";
|
||||||
|
import "./globals.scss";
|
||||||
|
|
||||||
const inter = Inter({ subsets: ["latin"] });
|
interface RootLayoutProps {
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: "Create Next App",
|
|
||||||
description: "Generated by create next app",
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function RootLayout({
|
|
||||||
children,
|
|
||||||
}: Readonly<{
|
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}
|
||||||
|
|
||||||
|
export default function RootLayout(props: RootLayoutProps): JSX.Element {
|
||||||
|
const { children } = props;
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body className={inter.className}>{children}</body>
|
<body>
|
||||||
|
<AppRouterCacheProvider>
|
||||||
|
<ThemeProvider theme={theme}>{children}</ThemeProvider>
|
||||||
|
</AppRouterCacheProvider>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,230 +0,0 @@
|
|||||||
.main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 6rem;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
display: inherit;
|
|
||||||
justify-content: inherit;
|
|
||||||
align-items: inherit;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
max-width: var(--max-width);
|
|
||||||
width: 100%;
|
|
||||||
z-index: 2;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
.description a {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description p {
|
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
padding: 1rem;
|
|
||||||
background-color: rgba(var(--callout-rgb), 0.5);
|
|
||||||
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.code {
|
|
||||||
font-weight: 700;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, minmax(25%, auto));
|
|
||||||
max-width: 100%;
|
|
||||||
width: var(--max-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 1rem 1.2rem;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
background: rgba(var(--card-rgb), 0);
|
|
||||||
border: 1px solid rgba(var(--card-border-rgb), 0);
|
|
||||||
transition: background 200ms, border 200ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card span {
|
|
||||||
display: inline-block;
|
|
||||||
transition: transform 200ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card h2 {
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card p {
|
|
||||||
margin: 0;
|
|
||||||
opacity: 0.6;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
max-width: 30ch;
|
|
||||||
text-wrap: balance;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
padding: 4rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center::before {
|
|
||||||
background: var(--secondary-glow);
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 480px;
|
|
||||||
height: 360px;
|
|
||||||
margin-left: -400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center::after {
|
|
||||||
background: var(--primary-glow);
|
|
||||||
width: 240px;
|
|
||||||
height: 180px;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center::before,
|
|
||||||
.center::after {
|
|
||||||
content: "";
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
filter: blur(45px);
|
|
||||||
transform: translateZ(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
/* Enable hover only on non-touch devices */
|
|
||||||
@media (hover: hover) and (pointer: fine) {
|
|
||||||
.card:hover {
|
|
||||||
background: rgba(var(--card-rgb), 0.1);
|
|
||||||
border: 1px solid rgba(var(--card-border-rgb), 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover span {
|
|
||||||
transform: translateX(4px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion) {
|
|
||||||
.card:hover span {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile */
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
.content {
|
|
||||||
padding: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
margin-bottom: 120px;
|
|
||||||
max-width: 320px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 1rem 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card h2 {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
padding: 8rem 0 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center::before {
|
|
||||||
transform: none;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description a {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description p,
|
|
||||||
.description div {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description p {
|
|
||||||
align-items: center;
|
|
||||||
inset: 0 0 auto;
|
|
||||||
padding: 2rem 1rem 1.4rem;
|
|
||||||
border-radius: 0;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
rgba(var(--background-start-rgb), 1),
|
|
||||||
rgba(var(--callout-rgb), 0.5)
|
|
||||||
);
|
|
||||||
background-clip: padding-box;
|
|
||||||
backdrop-filter: blur(24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.description div {
|
|
||||||
align-items: flex-end;
|
|
||||||
pointer-events: none;
|
|
||||||
inset: auto 0 0;
|
|
||||||
padding: 2rem;
|
|
||||||
height: 200px;
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
transparent 0%,
|
|
||||||
rgb(var(--background-end-rgb)) 40%
|
|
||||||
);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tablet and Smaller Desktop */
|
|
||||||
@media (min-width: 701px) and (max-width: 1120px) {
|
|
||||||
.grid {
|
|
||||||
grid-template-columns: repeat(2, 50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.vercelLogo {
|
|
||||||
filter: invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate {
|
|
||||||
from {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
6
src/app/page.module.scss
Normal file
6
src/app/page.module.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
@use "@/theme/sass/helper" as *;
|
||||||
|
|
||||||
|
.main {
|
||||||
|
padding: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
@ -1,95 +1,7 @@
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import styles from "./page.module.css";
|
import styles from "./page.module.scss";
|
||||||
|
import ResponsiveDrawer from "@/components/wrapper/dashboardWrapper";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return <main className={styles.main}>fdhdhfh</main>;
|
||||||
<main className={styles.main}>
|
|
||||||
<div className={styles.description}>
|
|
||||||
<p>
|
|
||||||
Get started by editing
|
|
||||||
<code className={styles.code}>src/app/page.tsx</code>
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<a
|
|
||||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
By{" "}
|
|
||||||
<Image
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel Logo"
|
|
||||||
className={styles.vercelLogo}
|
|
||||||
width={100}
|
|
||||||
height={24}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.center}>
|
|
||||||
<Image
|
|
||||||
className={styles.logo}
|
|
||||||
src="/next.svg"
|
|
||||||
alt="Next.js Logo"
|
|
||||||
width={180}
|
|
||||||
height={37}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.grid}>
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
className={styles.card}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2>
|
|
||||||
Docs <span>-></span>
|
|
||||||
</h2>
|
|
||||||
<p>Find in-depth information about Next.js features and API.</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
className={styles.card}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2>
|
|
||||||
Learn <span>-></span>
|
|
||||||
</h2>
|
|
||||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
className={styles.card}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2>
|
|
||||||
Templates <span>-></span>
|
|
||||||
</h2>
|
|
||||||
<p>Explore starter templates for Next.js.</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
className={styles.card}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2>
|
|
||||||
Deploy <span>-></span>
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
149
src/components/wrapper/dashboardWrapper.tsx
Normal file
149
src/components/wrapper/dashboardWrapper.tsx
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
"use client"; // This ensures the file is a client component
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import AppBar from "@mui/material/AppBar";
|
||||||
|
import Box from "@mui/material/Box";
|
||||||
|
import CssBaseline from "@mui/material/CssBaseline";
|
||||||
|
import Divider from "@mui/material/Divider";
|
||||||
|
import Drawer from "@mui/material/Drawer";
|
||||||
|
import IconButton from "@mui/material/IconButton";
|
||||||
|
import InboxIcon from "@mui/icons-material/MoveToInbox";
|
||||||
|
import List from "@mui/material/List";
|
||||||
|
import ListItem from "@mui/material/ListItem";
|
||||||
|
import ListItemButton from "@mui/material/ListItemButton";
|
||||||
|
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||||
|
import ListItemText from "@mui/material/ListItemText";
|
||||||
|
import MailIcon from "@mui/icons-material/Mail";
|
||||||
|
import MenuIcon from "@mui/icons-material/Menu";
|
||||||
|
import Toolbar from "@mui/material/Toolbar";
|
||||||
|
import Typography from "@mui/material/Typography";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
const drawerWidth = 240;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
window?: () => Window;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DashboardWrapper(props: Props) {
|
||||||
|
const { window } = props;
|
||||||
|
const { children: Children } = props;
|
||||||
|
const [mobileOpen, setMobileOpen] = useState(false);
|
||||||
|
const [isClosing, setIsClosing] = useState(false);
|
||||||
|
|
||||||
|
const handleDrawerClose = () => {
|
||||||
|
setIsClosing(true);
|
||||||
|
setMobileOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDrawerTransitionEnd = () => {
|
||||||
|
setIsClosing(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDrawerToggle = () => {
|
||||||
|
if (!isClosing) {
|
||||||
|
setMobileOpen(!mobileOpen);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const drawer = (
|
||||||
|
<>
|
||||||
|
<Toolbar />
|
||||||
|
{/* <Divider /> */}
|
||||||
|
<List>
|
||||||
|
{["Project Table"].map((text, index) => (
|
||||||
|
<ListItem key={text} disablePadding>
|
||||||
|
<ListItemButton>
|
||||||
|
<ListItemIcon>
|
||||||
|
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary={text} />
|
||||||
|
</ListItemButton>
|
||||||
|
</ListItem>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
const container =
|
||||||
|
window !== undefined ? () => window().document.body : undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ display: "flex" }} width={"100%"} height={"100%"}>
|
||||||
|
<CssBaseline />
|
||||||
|
<AppBar
|
||||||
|
position="fixed"
|
||||||
|
sx={{
|
||||||
|
width: { md: `calc(100% - ${drawerWidth}px)` },
|
||||||
|
ml: { md: `${drawerWidth}px` },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Toolbar>
|
||||||
|
<IconButton
|
||||||
|
color="inherit"
|
||||||
|
aria-label="open drawer"
|
||||||
|
edge="start"
|
||||||
|
onClick={handleDrawerToggle}
|
||||||
|
sx={{ mr: 2 }}
|
||||||
|
>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="h6" noWrap component="div">
|
||||||
|
Responsive drawer
|
||||||
|
</Typography>
|
||||||
|
</Toolbar>
|
||||||
|
</AppBar>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
component="nav"
|
||||||
|
sx={{ width: { md: drawerWidth }, flexShrink: { md: 0 } }}
|
||||||
|
aria-label="mailbox folders"
|
||||||
|
>
|
||||||
|
<Drawer
|
||||||
|
container={container}
|
||||||
|
variant="temporary"
|
||||||
|
open={mobileOpen}
|
||||||
|
onTransitionEnd={handleDrawerTransitionEnd}
|
||||||
|
onClose={handleDrawerClose}
|
||||||
|
ModalProps={{
|
||||||
|
keepMounted: true, // Better open performance on mobile.
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
display: { xs: "block", md: "none" },
|
||||||
|
"& .MuiDrawer-paper": {
|
||||||
|
boxSizing: "border-box",
|
||||||
|
width: drawerWidth,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{drawer}
|
||||||
|
</Drawer>
|
||||||
|
<Drawer
|
||||||
|
variant="permanent"
|
||||||
|
sx={{
|
||||||
|
display: { xs: "none", md: "block" },
|
||||||
|
"& .MuiDrawer-paper": {
|
||||||
|
boxSizing: "border-box",
|
||||||
|
width: drawerWidth,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
open
|
||||||
|
>
|
||||||
|
{drawer}
|
||||||
|
</Drawer>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
component="main"
|
||||||
|
sx={{
|
||||||
|
flexGrow: 1,
|
||||||
|
p: 3,
|
||||||
|
width: { md: `calc(100% - ${drawerWidth}px)` },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Toolbar />
|
||||||
|
{Children}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
27
src/theme.ts
Normal file
27
src/theme.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
"use client";
|
||||||
|
import { Roboto } from "next/font/google";
|
||||||
|
import { createTheme } from "@mui/material/styles";
|
||||||
|
|
||||||
|
const roboto = Roboto({
|
||||||
|
weight: ["300", "400", "500", "700"],
|
||||||
|
subsets: ["latin"],
|
||||||
|
display: "swap",
|
||||||
|
});
|
||||||
|
|
||||||
|
const getCssVariableValue = (variable: string): string => {
|
||||||
|
return getComputedStyle(document.documentElement).getPropertyValue(variable);
|
||||||
|
};
|
||||||
|
|
||||||
|
const theme = createTheme({
|
||||||
|
typography: {
|
||||||
|
fontFamily: roboto.style.fontFamily,
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
primary: {
|
||||||
|
main: getCssVariableValue("--primary").trim() || "#6290cb", // Fallback to default color
|
||||||
|
light: getCssVariableValue("--primary_light").trim() || "#dae7f9", // Fallback to default color
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default theme;
|
||||||
96
src/theme/global/_fonts.scss
Normal file
96
src/theme/global/_fonts.scss
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
@use "../sass" as *;
|
||||||
|
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap");
|
||||||
|
|
||||||
|
// Headings
|
||||||
|
html {
|
||||||
|
.extra1 {
|
||||||
|
font-size: scaleValue(26px, 46px);
|
||||||
|
line-height: scaleValue(35px, 52px);
|
||||||
|
font-weight: var(--fw_semiBold);
|
||||||
|
}
|
||||||
|
.heading1 {
|
||||||
|
font-size: scaleValue(26px, 44px);
|
||||||
|
line-height: scaleValue(43px, 68px);
|
||||||
|
font-weight: var(--fw_semiBold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading2 {
|
||||||
|
font-size: scaleValue(20px, 37px);
|
||||||
|
line-height: scaleValue(36px, 46px);
|
||||||
|
font-weight: var(--fw_bold);
|
||||||
|
font-family: var(--fn_accent);
|
||||||
|
}
|
||||||
|
.heading3 {
|
||||||
|
font-size: scaleValue(16px, 22px);
|
||||||
|
line-height: scaleValue(28px, 30px);
|
||||||
|
font-weight: var(--fw_semiBold);
|
||||||
|
}
|
||||||
|
.heading4 {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: var(--fw_medium);
|
||||||
|
}
|
||||||
|
.heading5 {
|
||||||
|
font-size: scaleValue(16px, 24px);
|
||||||
|
line-height: scaleValue(24px, 30px);
|
||||||
|
font-weight: var(--fw_semiBold);
|
||||||
|
}
|
||||||
|
.heading6 {
|
||||||
|
font-size: scaleValue(18px, 20px);
|
||||||
|
line-height: scaleValue(26px, 28px);
|
||||||
|
font-weight: var(--fw_semiBold);
|
||||||
|
}
|
||||||
|
.heading7 {
|
||||||
|
font-size: scaleValue(22px, 32px);
|
||||||
|
line-height: scaleValue(38px, 48px);
|
||||||
|
font-weight: var(--fw_semiBold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading9 {
|
||||||
|
font-size: scaleValue(12px, 28px);
|
||||||
|
line-height: scaleValue(20px, 36px);
|
||||||
|
font-weight: var(--fw_semiBold);
|
||||||
|
}
|
||||||
|
.heading10 {
|
||||||
|
font-size: scaleValue(20px, 30px);
|
||||||
|
line-height: scaleValue(30px, 36px);
|
||||||
|
font-weight: var(--fw_semiBold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.head4 {
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 32px;
|
||||||
|
font-weight: var(--fw_regular);
|
||||||
|
}
|
||||||
|
|
||||||
|
.details1 {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 28px;
|
||||||
|
font-weight: var(--fw_regular);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body1 {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-weight: var(--fw_regular);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body2 {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-weight: var(--fw_regular);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body3 {
|
||||||
|
font-size: 12px !important;
|
||||||
|
line-height: 18px;
|
||||||
|
font-weight: var(--fw_regular) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
font-size: 12px !important;
|
||||||
|
line-height: 18px;
|
||||||
|
font-weight: var(--fw_regular) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
24
src/theme/global/global.module.scss
Normal file
24
src/theme/global/global.module.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
@use "../sass" as *;
|
||||||
|
@use "../sass/helper" as *;
|
||||||
|
|
||||||
|
@forward "./fonts";
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1240px;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section_padding {
|
||||||
|
padding-inline: 36px;
|
||||||
|
|
||||||
|
@include max(576px) {
|
||||||
|
padding-inline: 30px;
|
||||||
|
}
|
||||||
|
@include max(480px) {
|
||||||
|
padding-inline: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.padding_block {
|
||||||
|
padding-block: scaleValue(40px, 100px);
|
||||||
|
}
|
||||||
2
src/theme/global/index.scss
Normal file
2
src/theme/global/index.scss
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@use "../sass" as *;
|
||||||
|
@forward "./fonts";
|
||||||
57
src/theme/sass/_helper.scss
Normal file
57
src/theme/sass/_helper.scss
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
// ===== Mixins & Functions =====
|
||||||
|
// Scale Size According to Width
|
||||||
|
|
||||||
|
@use "sass:math";
|
||||||
|
|
||||||
|
@function rem($pixel) {
|
||||||
|
@if math.is-unitless($pixel) {
|
||||||
|
@return math.div($pixel, 16) + rem;
|
||||||
|
} @else {
|
||||||
|
@error 'Don\'t use units when using the rem() function; only numbers.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@function scaleValue($min, $max) {
|
||||||
|
$viewportRange: 1440px - 350px;
|
||||||
|
$contentSizeRange: $max - $min;
|
||||||
|
$idealSize: calc($min + (100vw * $contentSizeRange / $viewportRange));
|
||||||
|
@return clamp($min, $idealSize, $max);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Flexbox
|
||||||
|
@mixin displayFlex($dir, $align, $justify) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: $dir;
|
||||||
|
align-items: $align;
|
||||||
|
justify-content: $justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
// card Wrapper
|
||||||
|
@mixin cardWrapper() {
|
||||||
|
background: linear-gradient(0deg, rgba(7, 18, 58, 0.1), rgba(7, 18, 58, 0.1)),
|
||||||
|
linear-gradient(
|
||||||
|
201.08deg,
|
||||||
|
rgba(113, 169, 235, 0.1) 3.22%,
|
||||||
|
rgba(0, 0, 0, 0) 125.98%
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
border: 1px solid rgba(113, 169, 235, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin textGradient($clr) {
|
||||||
|
background: $clr;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin min($minWidth) {
|
||||||
|
@media (min-width: $minWidth) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin max($maxWidth) {
|
||||||
|
@media (max-width: $maxWidth) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
2
src/theme/sass/index.scss
Normal file
2
src/theme/sass/index.scss
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
// Custom Functions
|
||||||
|
@forward './helper';
|
||||||
53
src/ui/CustomizedInputsStyled.tsx
Normal file
53
src/ui/CustomizedInputsStyled.tsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
"use client"; // Ensure this is at the top of your file
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { styled } from "@mui/material/styles";
|
||||||
|
import TextField from "@mui/material/TextField";
|
||||||
|
import Visibility from "@mui/icons-material/Visibility";
|
||||||
|
import VisibilityOff from "@mui/icons-material/VisibilityOff";
|
||||||
|
|
||||||
|
// Define your styled component
|
||||||
|
const CssTextField = styled(TextField)({
|
||||||
|
width: "100%",
|
||||||
|
"& label.Mui-focused": {
|
||||||
|
color: "var(--primary)",
|
||||||
|
},
|
||||||
|
"& .MuiInputBase-root": {
|
||||||
|
borderRadius: 8,
|
||||||
|
},
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
"& fieldset": {
|
||||||
|
borderColor: "var(--input-border-default)",
|
||||||
|
},
|
||||||
|
"&:hover fieldset": {
|
||||||
|
borderColor: "var(--input-border-hover)",
|
||||||
|
},
|
||||||
|
"&.Mui-focused fieldset": {
|
||||||
|
borderColor: "var(--primary)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
type InputType = {
|
||||||
|
label: string;
|
||||||
|
type: string;
|
||||||
|
endAdornmentBoolean?: React.ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Client component
|
||||||
|
export default function CustomizedInputsStyled({
|
||||||
|
label,
|
||||||
|
type,
|
||||||
|
endAdornmentBoolean,
|
||||||
|
}: InputType) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<CssTextField
|
||||||
|
label={label}
|
||||||
|
type={type}
|
||||||
|
id="custom-css-outlined-input"
|
||||||
|
InputProps={{ endAdornment: endAdornmentBoolean && <VisibilityOff /> }}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
30
src/ui/customizedButtons.tsx
Normal file
30
src/ui/customizedButtons.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
"use client";
|
||||||
|
import * as React from "react";
|
||||||
|
import { styled } from "@mui/material/styles";
|
||||||
|
import Button, { ButtonProps } from "@mui/material/Button";
|
||||||
|
|
||||||
|
const ColorButton = styled(Button)<ButtonProps>(() => ({
|
||||||
|
textTransform: "capitalize",
|
||||||
|
paddingInline: "30px",
|
||||||
|
borderRadius: "6px",
|
||||||
|
boxShadow: "none",
|
||||||
|
minHeight: "40px",
|
||||||
|
fontSize: "18px",
|
||||||
|
fontWeight: "400",
|
||||||
|
}));
|
||||||
|
|
||||||
|
type InputType = {
|
||||||
|
label: string;
|
||||||
|
statIcon?: React.ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function CustomizedButtons({ label, statIcon }: InputType) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ColorButton variant="contained">
|
||||||
|
{statIcon && statIcon}
|
||||||
|
{label}
|
||||||
|
</ColorButton>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/utilities/pathUrl.ts
Normal file
1
src/utilities/pathUrl.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export const AuthUrl = ["/signin", "/signup"];
|
||||||
17
src/utilities/svgConstant.tsx
Normal file
17
src/utilities/svgConstant.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import exp from "constants";
|
||||||
|
|
||||||
|
export const EYE_SLASH = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<svg width="19" height="19" viewBox="0 0 19 19" fill="none">
|
||||||
|
<path
|
||||||
|
d="M13.7408 5.25904L16.6248 2.375M13.7408 5.25904C15.2275 6.20904 16.3232 7.48362 16.981 8.38692C17.1964 8.68221 17.304 8.83025 17.3785 9.11525C17.4295 9.36894 17.4295 9.63027 17.3785 9.88396C17.304 10.1697 17.1964 10.3178 16.981 10.6123C15.8023 12.2313 13.2183 15.0417 9.49979 15.0417C7.85709 15.0417 6.43604 14.493 5.25884 13.741M13.7408 5.25904L10.6192 8.38058M5.25884 13.741L2.37479 16.625M5.25884 13.741L8.38038 10.6194M10.6192 8.38058C10.9076 8.6792 11.0672 9.07916 11.0636 9.4943C11.06 9.90945 10.8935 10.3066 10.5999 10.6001C10.3064 10.8937 9.90924 11.0602 9.4941 11.0638C9.07895 11.0674 8.679 10.9078 8.38038 10.6194M10.6192 8.38058L8.38038 10.6194M3.05563 11.875C2.68529 11.475 2.33873 11.0537 2.01775 10.6131C1.80242 10.3178 1.69475 10.1698 1.62034 9.88475C1.56926 9.63106 1.56926 9.36973 1.62034 9.11604C1.69475 8.83025 1.80242 8.68221 2.01775 8.38771C3.19734 6.76875 5.78134 3.95833 9.49979 3.95833C9.96688 3.95833 10.4165 4.00267 10.848 4.08342"
|
||||||
|
stroke="#7E90B0"
|
||||||
|
strokeWidth="1.35714"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
8
src/utilities/utilityConstant.ts
Normal file
8
src/utilities/utilityConstant.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export const UTILITY_CONSTANT = {
|
||||||
|
IMAGES: {
|
||||||
|
AUTH: {
|
||||||
|
HEADER_LOG: "/assets/images/auth/headerLogo.webp",
|
||||||
|
LOGIN_BG: "/assets/images/auth/loginbg.svg",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -19,7 +19,8 @@
|
|||||||
],
|
],
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"]
|
"@/*": ["./src/*"]
|
||||||
}
|
},
|
||||||
|
"baseUrl": ""
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
"exclude": ["node_modules"]
|
"exclude": ["node_modules"]
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user