feat: login popup dialog style

Author: riccardoperra

apps/codeimage/src/components/Toolbar/LoginDialog.tsx

@@ -0,0 +1,40 @@
+import {themeTokens, themeVars} from '@codeui/kit';
+import {globalStyle, keyframes, style} from '@vanilla-extract/css';
+
+export const titleLogin = style({
+  fontSize: '2rem',
+  textAlign: 'center',
+  fontWeight: themeTokens.fontWeight.bold,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: themeTokens.spacing['4'],
+  alignItems: 'center',
+  marginTop: themeTokens.spacing['8'],
+});
+
+export const loginBox = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: themeTokens.spacing['2'],
+  marginTop: themeTokens.spacing['12'],
+  marginBottom: themeTokens.spacing['12'],
+});
+
+export const closeIcon = style({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'flex-end',
+});
+
+const backdropFilter = keyframes({
+  '0%': {
+    backdropFilter: 'blur(0px) saturate(180%)',
+  },
+  '100%': {
+    backdropFilter: 'blur(20px) saturate(180%)',
+  },
+});
+
+globalStyle('div[data-panel-size]:has(div[id=loginDialog-content])', {
+  animation: `${backdropFilter} 150ms normal forwards ease-in-out`,
+});

apps/codeimage/src/components/Toolbar/LoginDialog/LoginDialog.css.ts

@@ -0,0 +1,67 @@
+import {AuthState} from '@codeimage/store/auth/auth';
+import {provideAppState} from '@codeimage/store/index';
+import {Box, VStack} from '@codeimage/ui';
+import {
+  Button,
+  Dialog,
+  DialogPanelContent,
+  IconButton,
+  SvgIcon,
+} from '@codeui/kit';
+import {ControlledDialogProps} from '@core/hooks/createControlledDialog';
+import {GithubLoginButton} from '@ui/GithubLoginButton/GithubLoginButton';
+import {CloseIcon} from '../../Icons/CloseIcon';
+import {CodeImageLogoV2} from '../../Icons/CodeImageLogoV2';
+import {closeIcon, loginBox, titleLogin} from './LoginDialog.css';
+
+export function LoginDialog(props: ControlledDialogProps) {
+  const authState = provideAppState(AuthState);
+  return (
+    <Dialog
+      open={props.isOpen}
+      onOpenChange={props.onOpenChange}
+      size={'xs'}
+      id={'loginDialog'}
+    >
+      <DialogPanelContent>
+        <div class={closeIcon}>
+          <IconButton aria-label={'close'} theme={'secondary'} pill size={'xs'}>
+            <CloseIcon />
+          </IconButton>
+        </div>
+        <div class={titleLogin}>
+          <CodeImageLogoV2 width={180} />
+        </div>
+
+        <div class={loginBox}>
+          <GithubLoginButton />
+
+          <Button
+            size={'lg'}
+            theme={'secondary'}
+            leftIcon={
+              <SvgIcon
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                size={'1.15rem'}
+              >
+                <path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z" />
+                <circle cx="16.5" cy="7.5" r=".5" />
+              </SvgIcon>
+            }
+            onClick={() => authState.providers.hanko.login()}
+          >
+            Login with Passkey
+          </Button>
+        </div>
+      </DialogPanelContent>
+    </Dialog>
+  );
+}

apps/codeimage/src/components/Toolbar/LoginDialog/LoginDialog.tsx

@@ -10,18 +10,14 @@ import {
   DropdownMenuPortal,
   DropdownMenuTrigger,
 } from '@codeui/kit';
-import {createControlledDialog} from '@core/hooks/createControlledDialog';
 import {Show} from 'solid-js';
-import {LoginDialog} from '../Toolbar/LoginDialog';
 import * as styles from './UserBadge.css';
 
 export function UserBadge() {
   const authState = provideAppState(AuthState);
   const user = () => authState().user;
   const profileImage = () => user()?.picture;
 
-  const openDialog = createControlledDialog();
-
   const initials = () => {
     const userValue = user();
     if (!userValue) return;
@@ -35,7 +31,7 @@ export function UserBadge() {
   return (
     <Show
       fallback={
-        <Button theme={'secondary'} onClick={() => openDialog(LoginDialog, {})}>
+        <Button theme={'secondary'} onClick={() => authState.openLoginPopup()}>
           Login
         </Button>
       }

apps/codeimage/src/components/UserBadge/UserBadge.tsx

@@ -1,9 +1,9 @@
 import {Auth0Provider} from '@codeimage/store/auth/providers/auth0.provider';
 import {HankoPasskeyAuthProvider} from '@codeimage/store/auth/providers/hanko-passkey.provider';
-import {auth0, createAuth0Client} from '@core/constants/auth0';
+import {createAuth0Client} from '@core/constants/auth0';
 import {createControlledDialog} from '@core/hooks/createControlledDialog';
 import {defineSignal} from 'statebuilder';
-import {LoginDialog} from '../../components/Toolbar/LoginDialog';
+import {LoginDialog} from '../../components/Toolbar/LoginDialog/LoginDialog';
 import {UserInfoResponse} from '../../data-access/user';
 
 export interface AuthState {
@@ -63,6 +63,8 @@ export const AuthState = defineSignal<AuthState>(() => ({
     }
   };
 
+  const openDialog = createControlledDialog();
+
   return {
     init,
     getToken: () => currentProvider().getJwt(),
@@ -72,7 +74,6 @@ export const AuthState = defineSignal<AuthState>(() => ({
       localStorage.removeItem('auth_strategy');
     },
     openLoginPopup() {
-      const openDialog = createControlledDialog();
       return openDialog(LoginDialog, {});
     },
     providers: {

apps/codeimage/src/state/auth/auth.ts

@@ -19,16 +19,14 @@ export function GithubLoginButton() {
   const modality = useModality();
   return (
     <Button
-      size={'sm'}
+      size={'lg'}
       class={styles.button}
+      leftIcon={<GithubIcon size={'md'} />}
       onClick={() => appState.providers.auth0.loginWithGithub()}
     >
-      <GithubIcon size={'md'} />
-      <Box as={'span'} marginLeft={2}>
-        <Show fallback={'Sign in'} when={modality === 'full'} keyed={true}>
-          Sign in with GitHub
-        </Show>
-      </Box>
+      <Show fallback={'Sign in'} when={modality === 'full'} keyed={true}>
+        Login with GitHub
+      </Show>
     </Button>
   );
 }