diff --git a/index.html b/index.html index 7483827dd2..9e28a69324 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,20 @@ + + + + + + + + Board | Storyteller.AI + - - - - - - - - Board | Storyteller.AI - - - -
- - - - \ No newline at end of file + +
+ + + diff --git a/package-lock.json b/package-lock.json index b2e681900c..abaed8c393 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "react-colorful": "^5.6.1", "react-dom": "^18.3.1", "react-drag-drop-files": "^2.3.10", - "react-image-crop": "^11.0.7", + "react-easy-crop": "^5.1.0", "react-router-dom": "^6.26.1", "tailwind-merge": "^2.5.2", "uuid": "^10.0.0", @@ -4102,6 +4102,11 @@ "node": ">=0.10.0" } }, + "node_modules/normalize-wheel": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz", + "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==" + }, "node_modules/npm": { "version": "10.8.3", "resolved": "https://registry.npmjs.org/npm/-/npm-10.8.3.tgz", @@ -7732,12 +7737,17 @@ "react-dom": "^18.0.0" } }, - "node_modules/react-image-crop": { - "version": "11.0.7", - "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-11.0.7.tgz", - "integrity": "sha512-ZciKWHDYzmm366JDL18CbrVyjnjH0ojufGDmScfS4ZUqLHg4nm6ATY+K62C75W4ZRNt4Ii+tX0bSjNk9LQ2xzQ==", + "node_modules/react-easy-crop": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.1.0.tgz", + "integrity": "sha512-UsYeF/N7zoqtfOSD+2xSt1nRaoBYCI2YLkzmq+hi+aVepS4/bAMhbrLwJtDAP60jsVzWRiQCX7JG+ZtfWcHsiw==", + "dependencies": { + "normalize-wheel": "^1.0.1", + "tslib": "^2.0.1" + }, "peerDependencies": { - "react": ">=16.13.1" + "react": ">=16.4.0", + "react-dom": ">=16.4.0" } }, "node_modules/react-is": { diff --git a/public/brand/Storyteller-Logo-Black.png b/public/brand/Storyteller-Logo-Black.png new file mode 100644 index 0000000000..42267b8f22 Binary files /dev/null and b/public/brand/Storyteller-Logo-Black.png differ diff --git a/public/svg/bg-dots.svg b/public/svg/bg-dots.svg new file mode 100644 index 0000000000..c597449487 --- /dev/null +++ b/public/svg/bg-dots.svg @@ -0,0 +1,104 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/global.css b/src/app/global.css index 97d0e3bd79..a38c1fc398 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -4,7 +4,7 @@ @layer base { :root { - @apply bg-ui-background font-sans text-black; + @apply bg-ui-background font-sans text-[#222222]; } .pegboard { background-image: radial-gradient(#3f3f46 1px, transparent 0); @@ -31,10 +31,10 @@ @apply text-sm; } p { - @apply text-sm font-light; + @apply text-sm font-normal; } a { - @apply font-light text-primary-400 hover:text-primary-200; + @apply font-medium text-primary-400 hover:text-primary-300; } a:visited { @apply text-primary-600 hover:text-primary-400; diff --git a/src/app/pages/login.tsx b/src/app/pages/login.tsx index 3b81ef0623..0760787971 100644 --- a/src/app/pages/login.tsx +++ b/src/app/pages/login.tsx @@ -62,61 +62,70 @@ export const Login = () => { }); return ( -
-
- Storyteller Logo +
+
+ Storyteller Logo
-
-
+
- - -
- - Forgot your password? - -
-

Don't have an account?

- Sign Up -
-
+

+ Log in to Board +

+ + + - - - {shouldShowLoader && ( -
- + + + {shouldShowLoader && ( +
+ +
+ )} +
+
+ + Forgot your password? + +
+

Don't have an account?

+ Sign Up
- )} +
); diff --git a/src/components/styles.ts b/src/components/styles.ts index 937c991d06..f0f1a8e559 100644 --- a/src/components/styles.ts +++ b/src/components/styles.ts @@ -1,7 +1,7 @@ import { twMerge } from "tailwind-merge"; export const paperWrapperStyles = - "rounded-2xl border border-ui-border bg-ui-panel p-2 shadow-xl"; + "rounded-xl border border-ui-border bg-ui-panel p-2 shadow-lg"; export const transitionTimingStyles = "transition duration-150 ease-in-out"; diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 6a9ef1ae81..c7d7a9da87 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -48,7 +48,7 @@ export const Button = ({ ); const className = twMerge( - "text-sm font-medium rounded-lg px-3 py-2 shadow-sm", + "text-[15px] font-semibold rounded-lg px-3 py-2 shadow-sm", "flex gap-2 items-center justify-center", "transition-all duration-150", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2", diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx index 6eb168ee97..88efddb17f 100644 --- a/src/components/ui/Input.tsx +++ b/src/components/ui/Input.tsx @@ -33,7 +33,10 @@ export const Input = React.forwardRef( return (
{label && ( -