Add login page UI (#367)

* Create login UI
* Update routing and auth providers
* Update design tokens
---------

Co-authored-by: Daniel R Farrell <[email protected]>

app/common/tokens.js

@@ -115,7 +115,7 @@ export const fontSize = {
  title1: [
  '2.25rem',
  {
- lineHeight: 'normal',
+ lineHeight: 'auto',
  fontWeight: 'normal',
  },
  ],

app/src/App.tsx

@@ -1,23 +1,24 @@
 import { TooltipProvider } from '@/components/ui/tooltip';
-import { createContext, useContext } from 'react';
 import Announcement from './components/Announcement';
 import AppBar from './components/AppBar';
-import { ThemeProvider } from './components/theme-provider';
+import AuthProvider from './components/AuthProvider';
+import RouteProvider from './components/RouteProvider';
+import { ThemeProvider } from './components/ThemeProvider';
 import { Toaster } from './components/ui/toaster';
-import { AuthManager } from './lib/auth';
 import Routes from './routes';
 
-const AuthContext = createContext(new AuthManager());
-export const useAuthManager = () => useContext(AuthContext);
-
 function App() {
  return (
  <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
  <TooltipProvider>
- <AppBar />
- <Routes />
- <Announcement />
- <Toaster />
+ <AuthProvider>
+ <RouteProvider>
+ <AppBar />
+ <Routes />
+ <Announcement />
+ <Toaster />
+ </RouteProvider>
+ </AuthProvider>
  </TooltipProvider>
  </ThemeProvider>
  );

app/src/components/Announcement/auth.tsx

@@ -1,6 +1,6 @@
-import { useAuthManager } from '@/App';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
+import { useAuthManager } from '../AuthProvider';
 import { Button } from '../ui/button';
 
 const Auth = observer(() => {

app/src/components/AppBar/index.tsx

@@ -1,10 +1,16 @@
+import { useRouteManager } from '@/components/RouteProvider';
+import { Route } from '@/lib/routes';
 import { DiscordLogoIcon, GitHubLogoIcon } from '@radix-ui/react-icons';
+import { observer } from 'mobx-react-lite';
 import { Button } from '../ui/button';
 import { Links } from '/common/constants';
 
-function AppBar() {
+const AppBar = observer(() => {
+ const routeManager = useRouteManager();
  return (
- <div className={`flex flex-row items-center pl-20 border-b h-10 bg-bg-active`}>
+ <div
+ className={`flex flex-row items-center pl-20 h-10 ${routeManager.route === Route.LOGIN ? 'bg-transparent' : 'bg-bg-active border-b'}`}
+ >
  <div className="appbar w-full h-full"></div>
  <Button
  size="sm"
@@ -38,6 +44,6 @@ function AppBar() {
  </div>
  </div>
  );
-}
+});
 
 export default AppBar;

app/src/components/AuthProvider.tsx

@@ -0,0 +1,11 @@
+import { AuthManager } from '@/lib/auth';
+import { createContext, ReactNode, useContext } from 'react';
+
+const AuthContext = createContext(new AuthManager());
+export const useAuthManager = () => useContext(AuthContext);
+
+const AuthProvider = ({ children }: { children: ReactNode }) => {
+ return <AuthContext.Provider value={useAuthManager()}>{children}</AuthContext.Provider>;
+};
+
+export default AuthProvider;

app/src/routes/index.tsx

@@ -1,23 +1,20 @@
 import { Route } from '@/lib/routes';
 import { observer } from 'mobx-react-lite';
+import { useRouteManager } from '../components/RouteProvider';
+import Login from './login';
 import ProjectEditor from './project';
-import RouteProvider, { useRouteManager } from './Provider';
 
 const Routes = observer(() => {
  const routeManager = useRouteManager();
 
- function renderRoutes() {
- switch (routeManager.route) {
- case Route.EDITOR:
- return <ProjectEditor />;
- case Route.LOGIN:
- return <div>Login</div>;
- default:
- return <div>404: Unknown route</div>;
- }
+ switch (routeManager.route) {
+ case Route.EDITOR:
+ return <ProjectEditor />;
+ case Route.LOGIN:
+ return <Login />;
+ default:
+ return <div>404: Unknown route</div>;
  }
-
- return <RouteProvider>{renderRoutes()}</RouteProvider>;
 });
 
 export default Routes;

app/src/routes/login/index.tsx

@@ -1,5 +1,97 @@
+import dunes from '@/assets/dunes-login.png';
+import google_logo from '@/assets/google_logo.svg';
+import wordLogo from '@/assets/word-logo.svg';
+import { Button } from '@/components/ui/button';
+import { GitHubLogoIcon } from '@radix-ui/react-icons';
+import { useEffect, useState } from 'react';
+
 const Login = () => {
- return <>Login</>;
+ const [lastLoginMethod, setLastLoginMethod] = useState<string | null>(null);
+
+ useEffect(() => {
+ // Retrieve the last login method from localStorage
+ }, []);
+
+ const handleLogin = (method: string) => {
+ // Save the login method to localStorage
+ // Implement actual login logic here
+ };
+
+ return (
+ <div className="flex h-[calc(100vh-2.5rem)]">
+ <div className="flex flex-col justify-between w-full h-full max-w-xl p-16 space-y-8 overflow-auto">
+ <div className="flex items-center space-x-2">
+ <img className="w-1/4" src={wordLogo} alt="Onlook logo" />
+ </div>
+ <div className="space-y-8">
+ <div className="space-y-2 uppercase border-border rounded-full p-1 px-2 w-auto inline-block text-micro border-[0.5px] text-blue-500">
+ <p>Alpha</p>
+ </div>
+ <div className="space-y-4">
+ <h1 className="text-title1">
+ {lastLoginMethod ? 'Welcome back to Onlook' : 'Welcome to Onlook'}
+ </h1>
+ <p className="text-text text-large">
+ Onlook is an open-source visual editor for React apps. Design directly
+ in your live product.
+ </p>
+ </div>
+ <div className="space-x-2 flex flex-row">
+ <div className="flex flex-col items-center w-full">
+ <Button
+ variant="outline"
+ className={`w-full text-active text-small ${lastLoginMethod === 'github' ? 'bg-teal-1000 border-teal-700 text-teal-100 text-small hover:bg-teal-800 hover:border-teal-500' : 'bg-bg'}`}
+ onClick={() => handleLogin('github')}
+ >
+ <GitHubLogoIcon className="w-4 h-4 mr-2" /> Login with GitHub
+ </Button>
+ {lastLoginMethod === 'github' && (
+ <p className="text-teal-500 text-small mt-1">
+ You used this last time
+ </p>
+ )}
+ </div>
+ <div className="flex flex-col items-center w-full">
+ <Button
+ variant="outline"
+ className={`w-full text-active text-small ${lastLoginMethod === 'google' ? 'bg-teal-1000 border-teal-700 text-teal-100 text-small hover:bg-teal-800 hover:border-teal-500' : 'bg-bg'}`}
+ onClick={() => handleLogin('google')}
+ >
+ <img src={google_logo} className="w-4 h-4 mr-2" alt="Google logo" />{' '}
+ Login with Google
+ </Button>
+ {lastLoginMethod === 'google' && (
+ <p className="text-teal-500 text-small mt-1">
+ You used this last time
+ </p>
+ )}
+ </div>
+ </div>
+ <p className="text-small text-text">
+ By signing up, you agree to our{' '}
+ <a href="#" className="underline">
+ Terms and Conditions
+ </a>{' '}
+ and{' '}
+ <a href="#" className="underline">
+ Privacy Policy
+ </a>
+ </p>
+ </div>
+ <div className="flex flex-row space-x-1 text-small text-gray-400">
+ <p>Version {window.env.APP_VERSION}</p>
+ <p>• Last updated 2 weeks ago</p>
+ </div>
+ </div>
+ <div className="hidden w-full lg:block md:block m-6">
+ <img
+ className="w-full h-full object-cover rounded-xl"
+ src={dunes}
+ alt="Onlook dunes"
+ />
+ </div>
+ </div>
+ );
 };
 
 export default Login;

app/src/routes/project/TopBar/OpenCode/index.tsx

@@ -67,7 +67,7 @@ const OpenCode = observer(() => {
  disabled={!instance}
  >
  <button
- className="flex items-center justify-center disabled:text-text-disabled h-full w-full min-w-[7.5rem] my-2 hover:text-text-active/90"
+ className="flex items-center justify-center disabled:text-text h-full w-full min-w-[7.5rem] my-2 hover:text-text-active/90"
  disabled={!instance && !root}
  onClick={() => viewSource(instance || root)}
  >

app/tailwind.config.mjs

@@ -75,7 +75,7 @@ export const theme = {
  hover: colors.gray[700],
  brand: colors.red,
  DEFAULT: colors.gray[900],
- disabled: colors.gray[900],
+ disabled: colors.gray[200],
  'new-active': colors.blue[1000],
  'new-default': colors.blue[700],
  positive: colors.green[700],