diff --git a/app/globals.css b/app/globals.css index c0ba6ac..756e519 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,262 +1,270 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap"); + @tailwind base; @tailwind components; @tailwind utilities; -@layer base { - :root { - --svg-fill: white; - --svg-background: black; - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 142.1 76.2% 36.3%; - --primary-foreground: 355.7 100% 97.3%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 142.1 76.2% 36.3%; - --radius: 0.5rem; - } +html { + height: 100%; + width: 100%; + font-family: "Poppins" sans-serif; +} - .dark { - --svg-fill: black; - --svg-background: white; - --background: 20 14.3% 4.1%; - --foreground: 0 0% 95%; - --card: 24 9.8% 10%; - --card-foreground: 0 0% 95%; - --popover: 0 0% 9%; - --popover-foreground: 0 0% 95%; - --primary: 142.1 70.6% 45.3%; - --primary-foreground: 144.9 80.4% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - --muted: 0 0% 15%; - --muted-foreground: 240 5% 64.9%; - --accent: 12 6.5% 15.1%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 85.7% 97.3%; - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --ring: 142.4 71.8% 29.2%; - } +@layer base { + :root { + --svg-fill: white; + --svg-background: black; + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 142.1 76.2% 36.3%; + --primary-foreground: 355.7 100% 97.3%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 142.1 76.2% 36.3%; + --radius: 0.5rem; + } + + .dark { + --svg-fill: black; + --svg-background: white; + --background: 20 14.3% 4.1%; + --foreground: 0 0% 95%; + --card: 24 9.8% 10%; + --card-foreground: 0 0% 95%; + --popover: 0 0% 9%; + --popover-foreground: 0 0% 95%; + --primary: 142.1 70.6% 45.3%; + --primary-foreground: 144.9 80.4% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 15%; + --muted-foreground: 240 5% 64.9%; + --accent: 12 6.5% 15.1%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 85.7% 97.3%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 142.4 71.8% 29.2%; + } } * { - list-style: none; - padding: 0; - margin: 0; - scroll-behavior: smooth; + list-style: none; + padding: 0; + margin: 0; + scroll-behavior: smooth; } html { - overflow-x: hidden; + overflow-x: hidden; } body { - font-family: var(--font-poppins); - user-select: text; - overflow-x: clip; + font-family: var(--font-poppins); + user-select: text; + overflow-x: clip; } @layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground w-full h-full; - } + * { + @apply border-border; + } + body { + @apply bg-background text-foreground w-full h-full; + } } @layer utilities { - .wrapper { - @apply max-w-screen-xl lg:mx-auto p-5 md:px-10 xl:px-0 w-full; - } + .wrapper { + @apply max-w-screen-xl lg:mx-auto p-5 md:px-10 xl:px-0 w-full; + } - .flex-center { - @apply flex justify-center items-center; - } + .flex-center { + @apply flex justify-center items-center; + } - .flex-between { - @apply flex justify-between items-center; - } + .flex-between { + @apply flex justify-between items-center; + } - .flex-start { - @apply flex justify-between items-start; - } + .flex-start { + @apply flex justify-between items-start; + } - .flex-end { - @apply flex justify-between items-end; - } - .root { - @apply flex max-h-screen w-full flex-col lg:flex-row; - } - .root-container { - @apply mt-16 flex-1 overflow-auto py-8 lg:mt-0 lg:max-h-screen lg:py-10; - } + .flex-end { + @apply flex justify-between items-end; + } + .root { + @apply flex max-h-screen w-full flex-col lg:flex-row; + } + .root-container { + @apply mt-16 flex-1 overflow-auto py-8 lg:mt-0 lg:max-h-screen lg:py-10; + } - /* .gradient-text { + /* .gradient-text { @apply bg-purple-gradient bg-cover bg-clip-text text-transparent; } */ - .sheet-content button { - @apply focus:ring-0 focus-visible:ring-transparent focus:ring-offset-0 focus-visible:ring-offset-0 focus-visible:outline-none focus-visible:border-none !important; - } + .sheet-content button { + @apply focus:ring-0 focus-visible:ring-transparent focus:ring-offset-0 focus-visible:ring-offset-0 focus-visible:outline-none focus-visible:border-none !important; + } - .sidebar { - @apply hidden h-screen w-72 p-5 shadow-md shadow-purple-200/50 lg:flex; - } - .header { - @apply flex-between fixed h-16 w-full border-b p-5 lg:hidden; - } + .sidebar { + @apply hidden h-screen w-72 p-5 shadow-md shadow-purple-200/50 lg:flex; + } + .header { + @apply flex-between fixed h-16 w-full border-b p-5 lg:hidden; + } - .header-nav_elements { - @apply mt-8 flex w-full flex-col items-start gap-5; - } + .header-nav_elements { + @apply mt-8 flex w-full flex-col items-start gap-5; + } - /* Search Component */ - .search { - @apply flex w-full rounded-[16px] border-2 border-purple-200/20 bg-white px-4 shadow-sm shadow-purple-200/15 md:max-w-96; - } - .sidebar-logo { - @apply flex items-center gap-2 md:py-2; - } + /* Search Component */ + .search { + @apply flex w-full rounded-[16px] border-2 border-purple-200/20 bg-white px-4 shadow-sm shadow-purple-200/15 md:max-w-96; + } + .sidebar-logo { + @apply flex items-center gap-2 md:py-2; + } - .sidebar-nav { - @apply h-full flex-col justify-between md:flex md:gap-4; - } + .sidebar-nav { + @apply h-full flex-col justify-between md:flex md:gap-4; + } - .sidebar-nav_elements { - @apply hidden w-full flex-col items-start gap-2 md:flex; - } + .sidebar-nav_elements { + @apply hidden w-full flex-col items-start gap-2 md:flex; + } - .sidebar-nav_element { - @apply flex-center p-medium-16 w-full whitespace-nowrap rounded-full bg-cover transition-all hover:bg-white/10 hover:shadow-inner; - } + .sidebar-nav_element { + @apply flex-center p-medium-16 w-full whitespace-nowrap rounded-full bg-cover transition-all hover:bg-white/10 hover:shadow-inner; + } - .sidebar-link { - @apply flex p-medium-16 size-full gap-4 p-4; - } + .sidebar-link { + @apply flex p-medium-16 size-full gap-4 p-4; + } - /* TYPOGRAPHY */ - /* 64 */ - .h1-bold { - @apply font-bold text-[40px] leading-[48px] lg:text-[48px] lg:leading-[60px] xl:text-[58px] xl:leading-[74px]; - } + /* TYPOGRAPHY */ + /* 64 */ + .h1-bold { + @apply font-bold text-[40px] leading-[48px] lg:text-[48px] lg:leading-[60px] xl:text-[58px] xl:leading-[74px]; + } - /* 40 */ - .h2-bold { - @apply font-bold text-[32px] leading-[40px] lg:text-[36px] lg:leading-[44px] xl:text-[40px] xl:leading-[48px]; - } + /* 40 */ + .h2-bold { + @apply font-bold text-[32px] leading-[40px] lg:text-[36px] lg:leading-[44px] xl:text-[40px] xl:leading-[48px]; + } - .h2-medium { - @apply font-medium text-[32px] leading-[40px] lg:text-[36px] lg:leading-[44px] xl:text-[40px] xl:leading-[48px]; - } + .h2-medium { + @apply font-medium text-[32px] leading-[40px] lg:text-[36px] lg:leading-[44px] xl:text-[40px] xl:leading-[48px]; + } - /* 36 */ - .h3-bold { - @apply font-bold text-[28px] leading-[36px] md:text-[36px] md:leading-[44px]; - } + /* 36 */ + .h3-bold { + @apply font-bold text-[28px] leading-[36px] md:text-[36px] md:leading-[44px]; + } - .h3-medium { - @apply font-medium text-[28px] leading-[36px] md:text-[36px] md:leading-[44px]; - } + .h3-medium { + @apply font-medium text-[28px] leading-[36px] md:text-[36px] md:leading-[44px]; + } - /* 32 */ - .h4-medium { - @apply font-medium text-[32px] leading-[40px]; - } + /* 32 */ + .h4-medium { + @apply font-medium text-[32px] leading-[40px]; + } - /* 28 */ - .h5-bold { - @apply font-bold text-[28px] leading-[36px]; - } + /* 28 */ + .h5-bold { + @apply font-bold text-[28px] leading-[36px]; + } - /* 24 */ - .p-bold-24 { - @apply font-bold text-[24px] leading-[36px]; - } + /* 24 */ + .p-bold-24 { + @apply font-bold text-[24px] leading-[36px]; + } - .p-medium-24 { - @apply font-medium text-[24px] leading-[36px]; - } + .p-medium-24 { + @apply font-medium text-[24px] leading-[36px]; + } - .p-regular-24 { - @apply font-normal text-[24px] leading-[36px]; - } + .p-regular-24 { + @apply font-normal text-[24px] leading-[36px]; + } - /* 20 */ - .p-bold-20 { - @apply font-bold text-[20px] leading-[30px] tracking-[2%]; - } + /* 20 */ + .p-bold-20 { + @apply font-bold text-[20px] leading-[30px] tracking-[2%]; + } - .p-semibold-20 { - @apply text-[20px] font-semibold leading-[30px] tracking-[2%]; - } + .p-semibold-20 { + @apply text-[20px] font-semibold leading-[30px] tracking-[2%]; + } - .p-medium-20 { - @apply text-[20px] font-medium leading-[30px]; - } + .p-medium-20 { + @apply text-[20px] font-medium leading-[30px]; + } - .p-regular-20 { - @apply text-[20px] font-normal leading-[30px] tracking-[2%]; - } + .p-regular-20 { + @apply text-[20px] font-normal leading-[30px] tracking-[2%]; + } - /* 18 */ - .p-semibold-18 { - @apply text-[18px] font-semibold leading-[28px] tracking-[2%]; - } + /* 18 */ + .p-semibold-18 { + @apply text-[18px] font-semibold leading-[28px] tracking-[2%]; + } - .p-medium-18 { - @apply text-[18px] font-medium leading-[28px]; - } + .p-medium-18 { + @apply text-[18px] font-medium leading-[28px]; + } - .p-regular-18 { - @apply text-[18px] font-normal leading-[28px] tracking-[2%]; - } + .p-regular-18 { + @apply text-[18px] font-normal leading-[28px] tracking-[2%]; + } - /* 16 */ - .p-bold-16 { - @apply text-[16px] font-bold leading-[24px]; - } + /* 16 */ + .p-bold-16 { + @apply text-[16px] font-bold leading-[24px]; + } - .p-medium-16 { - @apply text-[16px] font-medium leading-[24px]; - } + .p-medium-16 { + @apply text-[16px] font-medium leading-[24px]; + } - .p-regular-16 { - @apply text-[16px] font-normal leading-[24px]; - } + .p-regular-16 { + @apply text-[16px] font-normal leading-[24px]; + } - /* 14 */ - .p-semibold-14 { - @apply text-[14px] font-semibold leading-[20px]; - } + /* 14 */ + .p-semibold-14 { + @apply text-[14px] font-semibold leading-[20px]; + } - .p-medium-14 { - @apply text-[14px] font-medium leading-[20px]; - } + .p-medium-14 { + @apply text-[14px] font-medium leading-[20px]; + } - .p-regular-14 { - @apply text-[14px] font-normal leading-[20px]; - } + .p-regular-14 { + @apply text-[14px] font-normal leading-[20px]; + } - /* 12 */ - .p-medium-12 { - @apply text-[12px] font-medium leading-[20px]; - } + /* 12 */ + .p-medium-12 { + @apply text-[12px] font-medium leading-[20px]; + } - .toggle-switch { - @apply bg-gray-300 !important; - } + .toggle-switch { + @apply bg-gray-300 !important; + } } diff --git a/pages/_app.js b/pages/_app.js new file mode 100644 index 0000000..04c818c --- /dev/null +++ b/pages/_app.js @@ -0,0 +1,11 @@ +import "@/app/globals.css"; + +function MyApp({ Component, pageProps }) { + return ( +
+ ; +
+ ); +} + +export default MyApp; diff --git a/tsconfig.json b/tsconfig.json index 2dcdff9..e7a8a9e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,6 +21,6 @@ "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "lib/Hoc/withAuth.jsx" , "**/*.mdx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "lib/Hoc/withAuth.jsx" , "**/*.mdx", "pages/_app.jsx"], "exclude": ["node_modules"] }