diff --git a/public/kittycad-logomark-light.svg b/public/kittycad-logomark-light.svg new file mode 100644 index 000000000..5c5a02c41 --- /dev/null +++ b/public/kittycad-logomark-light.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Auth.tsx b/src/Auth.tsx index dc1d6ef5e..aeb34e8ff 100644 --- a/src/Auth.tsx +++ b/src/Auth.tsx @@ -5,6 +5,7 @@ import { User, useStore } from './useStore' import { useNavigate } from 'react-router-dom' import { useEffect } from 'react' import { isTauri } from './lib/isTauri' +import Loading from './components/Loading' // Wrapper around protected routes, used in src/Router.tsx export const Auth = ({ children }: React.PropsWithChildren) => { @@ -30,5 +31,5 @@ export const Auth = ({ children }: React.PropsWithChildren) => { } }, [user, token, navigate, isLoading]) - return isLoading ? <>Loading... : <>{children} + return isLoading ? : <>{children} } diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx index 44708bf10..6828b944f 100644 --- a/src/components/ActionButton.tsx +++ b/src/components/ActionButton.tsx @@ -22,7 +22,7 @@ export const ActionButton = ({ children, ...props }: ActionButtonProps) => { - const classNames = `group mono text-base flex items-center gap-2 rounded-sm border border-chalkboard-40 dark:border-chalkboard-60 hover:border-liquid-40 dark:hover:bg-chalkboard-90 p-[3px] ${ + const classNames = `group mono text-base flex items-center gap-2 rounded-sm border border-chalkboard-40 dark:border-chalkboard-60 hover:border-liquid-40 dark:hover:bg-chalkboard-90 p-[3px] text-chalkboard-110 dark:text-chalkboard-10 hover:text-chalkboard-110 hover:dark:text-chalkboard-10 ${ icon ? 'pr-2' : 'px-2' } ${className}` diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx new file mode 100644 index 000000000..23ee5c268 --- /dev/null +++ b/src/components/Loading.tsx @@ -0,0 +1,41 @@ +import { useEffect, useState } from 'react' + +const Loading = () => { + const [hasLongLoadTime, setHasLongLoadTime] = useState(false) + useEffect(() => { + const timer = setTimeout(() => { + setHasLongLoadTime(true) + }, 4000) + + return () => clearTimeout(timer) + }, [setHasLongLoadTime]) + return ( +
+ + + + +

+ Loading KittyCAD Modeling App... +

+

+ Loading is taking longer than expected. +

+
+ ) +} + +export default Loading diff --git a/src/index.css b/src/index.css index 6dcf59b25..db9ea24c0 100644 --- a/src/index.css +++ b/src/index.css @@ -55,6 +55,14 @@ button:disabled { @apply bg-chalkboard-90 text-chalkboard-40 border-chalkboard-70; } +a { + @apply text-liquid-80 hover:text-liquid-70; +} + +.dark a { + @apply text-liquid-20 hover:text-liquid-10; +} + .mono { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; diff --git a/src/routes/SignIn.tsx b/src/routes/SignIn.tsx index 514ca4230..4aa31acfd 100644 --- a/src/routes/SignIn.tsx +++ b/src/routes/SignIn.tsx @@ -1,16 +1,19 @@ import { faSignInAlt } from '@fortawesome/free-solid-svg-icons' import { ActionButton } from '../components/ActionButton' import { isTauri } from '../lib/isTauri' -import { useStore } from '../useStore' +import { Themes, useStore } from '../useStore' import { invoke } from '@tauri-apps/api/tauri' import { useNavigate } from 'react-router-dom' import { VITE_KC_SITE_BASE_URL, VITE_KC_API_BASE_URL } from '../env' +import { getSystemTheme } from '../lib/getSystemTheme' const SignIn = () => { const navigate = useNavigate() - const { setToken } = useStore((s) => ({ + const { setToken, theme } = useStore((s) => ({ setToken: s.setToken, + theme: s.theme, })) + const appliedTheme = theme === Themes.System ? getSystemTheme() : theme const signInTauri = async () => { // We want to invoke our command to login via device auth. try { @@ -25,11 +28,13 @@ const SignIn = () => { } return ( -
+
KittyCAD @@ -37,7 +42,7 @@ const SignIn = () => { Modeling App
-

+

Sign in to get started with the KittyCAD Modeling App

@@ -51,14 +56,7 @@ const SignIn = () => {

KCMA is currently in development. If you would like to be notified when KCMA is ready for production, please sign up for our mailing list - at{' '} - - kittycad.io - - . + at kittycad.io.

{isTauri() ? ( { window.location.href.replace('signin', '') )}`} icon={{ icon: faSignInAlt }} - className="w-fit mt-4 dark:hover:bg-chalkboard-30" + className="w-fit mt-4" > Sign in