Skip to content

Commit 2392a7c

Browse files
mayankkush1mayankkush1
authored
Feat/install script (#72)
New login screen and website UI
1 parent b3eee42 commit 2392a7c

File tree

17 files changed

+1669
-1076
lines changed

17 files changed

+1669
-1076
lines changed

‎app/components/Header/AppHeader.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,21 @@ export const AppHeader = ({user}: {user: User | undefined}) => {
3131
)}>
3232
{/* Left Section */}
3333
<div className="flex items-center gap-4">
34-
{/* App Name - Clickable to go to projects */}
34+
{/* App Logo - Clickable to go to projects */}
3535
<button
3636
onClick={(e) => {
3737
e.preventDefault()
3838
navigate(`/projects?orgId=${ORG_ID}&page=1&pageSize=${SMALL_PAGE_SIZE}`, {})
3939
}}
40-
className="text-xl font-semibold text-white tracking-tight hover:text-slate-300 transition-colors cursor-pointer">
41-
{APP_NAME}
40+
className="flex items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer">
41+
<img
42+
src="/logo.svg"
43+
alt={APP_NAME}
44+
className="h-10 w-auto"
45+
/>
46+
<span className="text-xl font-semibold text-white tracking-tight">
47+
{APP_NAME}
48+
</span>
4249
</button>
4350

4451
{/* Project Switcher - Only show if in a project */}

‎app/root.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ import {APP_NAME} from './constants'
2020
import styles from './globals.css?url'
2121
import {GlobalLoading} from './screens/GlobalLoading'
2222

23-
export const links: LinksFunction = () => [{rel: 'stylesheet', href: styles}]
23+
export const links: LinksFunction = () => [
24+
{rel: 'stylesheet', href: styles},
25+
{rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml'},
26+
]
2427

2528
export {ErrorBoundary} from './components/ErrorBoundry/ErrorBoundry'
2629

@@ -60,6 +63,7 @@ export function Layout({children}: {children: React.ReactNode}) {
6063
const location = useLocation()
6164
const hideHeaderRoutes = ['/login']
6265
const showHeader = !hideHeaderRoutes.includes(location.pathname)
66+
const isLoginPage = location.pathname === '/login'
6367

6468
return (
6569
<html lang="en">
@@ -73,11 +77,17 @@ export function Layout({children}: {children: React.ReactNode}) {
7377
{showHeader && <AppHeader user={user} />}
7478
<GlobalLoading />
7579
<SearchModal />
76-
<div className="h-[calc(100%-64px)] bg-slate-50">
77-
<div className="px-8 py-0 h-full">
80+
{isLoginPage ? (
81+
<div className="h-screen bg-slate-50">
7882
{children}
7983
</div>
80-
</div>
84+
) : (
85+
<div className="h-[calc(100%-64px)] bg-slate-50">
86+
<div className="px-8 py-0 h-full">
87+
{children}
88+
</div>
89+
</div>
90+
)}
8191
<Toaster />
8292
<ScrollRestoration />
8393
<Scripts />

‎app/screens/Login/GoogleAuthButton.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,42 @@ export type GoogleAuthButtonType = {
44
onClick:() => void
55
}
66

7-
export function GoogleAuthButton({ onClick }: GoogleAuthButtonType) {
7+
export function GoogleAuthButton({onClick}: GoogleAuthButtonType) {
88
return (
99
<Button
1010
size={'lg'}
1111
variant={'default'}
12-
className={'gap-3 w-[250px] '}
12+
className={'w-full gap-3 h-12 font-medium'}
1313
onClick={onClick}
1414
>
1515
<svg
16-
version='1.1'
17-
xmlns='http://www.w3.org/2000/svg'
18-
viewBox='0 0 48 48'
19-
width='24'
20-
height='24'
16+
version="1.1"
17+
xmlns="http://www.w3.org/2000/svg"
18+
viewBox="0 0 48 48"
19+
width="20"
20+
height="20"
2121
>
2222
<g>
2323
<path
24-
fill='#EA4335'
25-
d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'
24+
fill="#EA4335"
25+
d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
2626
></path>
2727
<path
28-
fill='#4285F4'
29-
d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'
28+
fill="#4285F4"
29+
d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
3030
></path>
3131
<path
32-
fill='#FBBC05'
33-
d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'
32+
fill="#FBBC05"
33+
d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
3434
></path>
3535
<path
36-
fill='#34A853'
37-
d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'
36+
fill="#34A853"
37+
d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
3838
></path>
39-
<path fill='none' d='M0 0h48v48H0z'></path>
39+
<path fill="none" d="M0 0h48v48H0z"></path>
4040
</g>
4141
</svg>
42-
<span className='font-semibold'>Sign in with Google</span>
42+
<span>Sign in with Google</span>
4343
</Button>
44-
);
44+
)
4545
}

‎app/screens/Login/Login.tsx‎

Lines changed: 74 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import {useSubmit} from '@remix-run/react'
2-
import {cn} from '@ui/utils'
32
import {APP_NAME} from '~/constants'
43
import {GoogleAuthButton} from '~/screens/Login/GoogleAuthButton'
5-
import {useHomePageDots} from '~/screens/Login/useDots'
64
import {AuthenticatorRoutes} from '~/services/auth/interfaces'
75

86
export const Login = () => {
9-
const {dots, mousePosition} = useHomePageDots({rows: 20, cols: 30})
10-
117
const submit = useSubmit()
128
const login = () => {
139
submit(null, {
@@ -17,37 +13,84 @@ export const Login = () => {
1713
}
1814

1915
return (
20-
<div className="fixed inset-0 flex flex-row justify-center items-center overflow-hidden">
21-
<div className="relative w-full h-full bg-[#000000]">
22-
<div
23-
className="absolute inset-0 transition-opacity duration-300"
24-
style={{
25-
background: `radial-gradient(circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(24, 60, 81), transparent)`,
26-
}}
27-
/>
28-
<div className="relative z-10 flex flex-col items-center justify-center w-full h-full space-y-4 text-center">
29-
<h1 className="text-5xl font-extrabold text-white">
30-
Welcome to {APP_NAME}
31-
</h1>
32-
<p className="text-lg text-gray-300">
33-
More than just a Test Management tool
16+
<div className="fixed inset-0 flex overflow-hidden">
17+
{/* Left Side - Checkmate Branding */}
18+
<div className="hidden lg:flex lg:w-1/2 bg-slate-900 border-r border-slate-800 flex-col justify-center items-center">
19+
<div className="max-w-2xl px-12 w-full">
20+
<div className="mb-8 flex items-center gap-4">
21+
<img
22+
src="/logo.svg"
23+
alt={APP_NAME}
24+
className="h-16 w-auto"
25+
/>
26+
<h1 className="text-5xl font-bold text-white tracking-tight">
27+
{APP_NAME}
28+
</h1>
29+
</div>
30+
31+
<h2 className="text-2xl font-semibold text-slate-300 mb-4">
32+
Modern Test Case Management
33+
</h2>
34+
35+
<p className="text-slate-400 text-lg leading-relaxed max-w-xl">
36+
Streamline your testing workflow with powerful features and seamless integrations. Organize, execute, and track your test cases with ease.
3437
</p>
35-
<div className="pt-4">
38+
</div>
39+
</div>
40+
41+
{/* Right Side - Login Form */}
42+
<div className="flex-1 flex items-center justify-center bg-[#f2f5f9]">
43+
<div className="w-full max-w-md px-6 sm:px-8">
44+
{/* Mobile Logo */}
45+
<div className="lg:hidden mb-8 text-center flex flex-col items-center gap-3">
46+
<img
47+
src="/logo.svg"
48+
alt={APP_NAME}
49+
className="h-12 w-auto"
50+
/>
51+
<h1 className="text-3xl font-bold text-slate-900">{APP_NAME}</h1>
52+
</div>
53+
54+
<div className="bg-white border border-slate-200 rounded-lg shadow-sm p-8 sm:p-10">
55+
<div className="mb-8">
56+
<h2 className="text-2xl font-semibold text-slate-900 mb-2">
57+
Welcome Back
58+
</h2>
59+
<p className="text-slate-600 text-sm">
60+
Sign in to continue to {APP_NAME}
61+
</p>
62+
</div>
63+
3664
<GoogleAuthButton onClick={login} />
65+
66+
<div className="mt-6 pt-6 border-t border-slate-200">
67+
<p className="text-xs text-slate-500 text-center">
68+
By signing in, you agree to our terms of service
69+
</p>
70+
</div>
71+
</div>
72+
73+
{/* Footer Links */}
74+
<div className="mt-6 text-center space-x-4 text-sm">
75+
<a
76+
href="https://checkmate.dreamsportslabs.com"
77+
className="text-slate-600 hover:text-slate-900 transition-colors"
78+
target="_blank"
79+
rel="noopener noreferrer"
80+
>
81+
Documentation
82+
</a>
83+
<span className="text-slate-400">•</span>
84+
<a
85+
href="https://discord.gg/wBQXeYAKNc"
86+
className="text-slate-600 hover:text-slate-900 transition-colors"
87+
target="_blank"
88+
rel="noopener noreferrer"
89+
>
90+
Discord
91+
</a>
3792
</div>
3893
</div>
39-
{dots.map((dot) => (
40-
<div
41-
key={dot.id}
42-
className={cn(`absolute h-0.5 bg-gray-700 rounded-full`)}
43-
style={{
44-
top: `${dot.y}px`,
45-
left: `${dot.x}px`,
46-
transform: `rotate(${dot.angle}deg)`,
47-
width: `${dot.dotWidth}px`,
48-
}}
49-
/>
50-
))}
5194
</div>
5295
</div>
5396
)

0 commit comments

Comments
 (0)