diff --git a/package.json b/package.json index 80c4c1d..8b92d89 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-label": "^2.1.2", "@radix-ui/react-scroll-area": "^1.2.3", + "@radix-ui/react-separator": "^1.1.2", "@radix-ui/react-slot": "^1.1.2", "@sentry/nextjs": "^9", "@supabase/ssr": "^0.6.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ae3dda5..87b72cf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ importers: '@radix-ui/react-scroll-area': specifier: ^1.2.3 version: 1.2.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-separator': + specifier: ^1.1.2 + version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-slot': specifier: ^1.1.2 version: 1.1.2(@types/react@18.3.18)(react@18.3.1) @@ -890,6 +893,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-separator@1.1.2': + resolution: {integrity: sha512-oZfHcaAp2Y6KFBX6I5P1u7CQoy4lheCGiYj+pGFrHy8E/VNRb5E39TkTr3JrV520csPBTZjkuKFdEsjS5EUNKQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-slot@1.1.2': resolution: {integrity: sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==} peerDependencies: @@ -4144,6 +4160,15 @@ snapshots: '@types/react': 18.3.18 '@types/react-dom': 18.3.5(@types/react@18.3.18) + '@radix-ui/react-separator@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.18 + '@types/react-dom': 18.3.5(@types/react@18.3.18) + '@radix-ui/react-slot@1.1.2(@types/react@18.3.18)(react@18.3.1)': dependencies: '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1) diff --git a/public/images/apple_black.svg b/public/images/apple_black.svg new file mode 100644 index 0000000..82b0cdd --- /dev/null +++ b/public/images/apple_black.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index b83cd5a..781bb9f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -8,9 +8,11 @@ const HomePage = async () => { const { data: { session } } = await supabase.auth.getSession(); if (!session) { return ( -
+
- +
+ +
); } diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx index 69258c7..ae4c500 100644 --- a/src/components/auth/LoginForm.tsx +++ b/src/components/auth/LoginForm.tsx @@ -15,6 +15,17 @@ import { FormItem, } from '@/components/ui/form'; import { useRef } from 'react'; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card" +import { Separator } from '@/components/ui/separator'; +import MicrosoftSignIn from '@/components/auth/microsoft/SignIn'; +import AppleSignIn from './apple/SignIn'; const formSchema = z.object({ fullName: z.string().optional(), @@ -50,68 +61,107 @@ const LoginForm = () => { }; return ( -
-
- - ( - - - Full Name - - - - - - Full name is only required when signing up. - - - - )} - /> - ( - - - Email - - - - - - - )} - /> - ( - - - Password - - - - - - - )} - /> -
- - + + + Sign In + + Log in or create an account. + + + + + + ( + + + Full Name + + + + + + Full name is only required when signing up. + + + + )} + /> + ( + + + Email + + + + + + + )} + /> + ( + + + Password + + + + + + + )} + /> +
+ + +
+ + + + +
+ +

+ or +

+ +
+
+ < MicrosoftSignIn /> +
+
- - -
+
+ + ); }; diff --git a/src/components/auth/apple/SignIn.tsx b/src/components/auth/apple/SignIn.tsx new file mode 100644 index 0000000..6b99634 --- /dev/null +++ b/src/components/auth/apple/SignIn.tsx @@ -0,0 +1,23 @@ +import { Button } from '@/components/ui/button'; +import Image from 'next/image'; + +const AppleSignIn = () => { + return ( + + ); +}; +export default AppleSignIn; diff --git a/src/components/auth/microsoft/SignIn.tsx b/src/components/auth/microsoft/SignIn.tsx new file mode 100644 index 0000000..00a3a9d --- /dev/null +++ b/src/components/auth/microsoft/SignIn.tsx @@ -0,0 +1,22 @@ +import { Button } from '@/components/ui/button'; +import Image from 'next/image'; + +const MicrosoftSignIn = () => { + return ( + + ); +}; +export default MicrosoftSignIn; diff --git a/src/components/defaults/Header.tsx b/src/components/defaults/Header.tsx index 08c764c..4fcc743 100644 --- a/src/components/defaults/Header.tsx +++ b/src/components/defaults/Header.tsx @@ -8,25 +8,34 @@ const Header = () => { const { tvMode } = useTVMode(); if (tvMode) { return ( -
-
- +
+
+ +
+ +
+
); } else { return ( -
-
-
- - +
+
+
+
+ +
+
{ className='max-w-[40px] md:max-w-[120px]' />

Tech Tracker diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx new file mode 100644 index 0000000..cabfbfc --- /dev/null +++ b/src/components/ui/card.tsx @@ -0,0 +1,76 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Card = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +Card.displayName = "Card" + +const CardHeader = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardHeader.displayName = "CardHeader" + +const CardTitle = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardTitle.displayName = "CardTitle" + +const CardDescription = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardDescription.displayName = "CardDescription" + +const CardContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardContent.displayName = "CardContent" + +const CardFooter = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardFooter.displayName = "CardFooter" + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx new file mode 100644 index 0000000..12d81c4 --- /dev/null +++ b/src/components/ui/separator.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@/lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } diff --git a/src/styles/globals.css b/src/styles/globals.css index b54ed82..d65fca5 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -10,7 +10,10 @@ --card-foreground: 224 71.4% 4.1%; --popover: 0 0% 100%; --popover-foreground: 224 71.4% 4.1%; - --primary: 262.1 83.3% 57.8%; + /*--primary: 262.1 83.3% 57.8%;*/ + --primary: 231 39% 48%; + --primary-dark: 231 39% 38%; + --primary-light: 231 45% 58%; --primary-foreground: 210 20% 98%; --secondary: 220 14.3% 95.9%; --secondary-foreground: 220.9 39.3% 11%; @@ -37,7 +40,10 @@ --card-foreground: 210 20% 98%; --popover: 224 71.4% 4.1%; --popover-foreground: 210 20% 98%; - --primary: 263.4 70% 50.4%; + /*--primary: 263.4 70% 50.4%;*/ + --primary: 231 39% 48%; + --primary-dark: 231 39% 38%; + --primary-light: 231 45% 58%; --primary-foreground: 210 20% 98%; --secondary: 215 27.9% 16.9%; --secondary-foreground: 210 20% 98%; diff --git a/tailwind.config.ts b/tailwind.config.ts index d7f2eb9..d45c3a7 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -32,6 +32,14 @@ export default { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))' }, + primarydark: { + DEFAULT: 'hsl(var(--primary-dark))', + foreground: 'hsl(var(--primary-foreground))' + }, + primarylight: { + DEFAULT: 'hsl(var(--primary-light))', + foreground: 'hsl(var(--primary-foreground))' + }, secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))'