From 1cbb1993614ae90542ff8d2970f20b2a837b63d2 Mon Sep 17 00:00:00 2001 From: Bitian Zhang <86077274+bzzz-coding@users.noreply.github.com> Date: Tue, 31 Oct 2023 10:29:15 -0700 Subject: [PATCH] Added background and illustrations to login page (#473) * Added background and illustrations for login page * Edited tailwind config * Formatted tailwind config --- frontend/src/assets/images/images.tsx | 4 + frontend/src/assets/images/svgs/dots.svg | 27 ++ .../assets/images/svgs/login-illustration.svg | 279 ++++++++++++++++++ .../src/assets/images/svgs/login-tan-bg.svg | 3 + frontend/src/pages/Authentication/page.tsx | 27 +- frontend/tailwind.config.js | 4 + 6 files changed, 341 insertions(+), 3 deletions(-) create mode 100644 frontend/src/assets/images/svgs/dots.svg create mode 100644 frontend/src/assets/images/svgs/login-illustration.svg create mode 100644 frontend/src/assets/images/svgs/login-tan-bg.svg diff --git a/frontend/src/assets/images/images.tsx b/frontend/src/assets/images/images.tsx index 5ff9c083..74c295a8 100644 --- a/frontend/src/assets/images/images.tsx +++ b/frontend/src/assets/images/images.tsx @@ -236,3 +236,7 @@ export { illustrationCreativeTeam, illustrationHighFive, }; + +export { default as loginTanBg } from "./svgs/login-tan-bg.svg?url"; +export { default as dotsSvg } from "./svgs/dots.svg?url"; +export { default as loginIllustration } from "./svgs/login-illustration.svg?url"; diff --git a/frontend/src/assets/images/svgs/dots.svg b/frontend/src/assets/images/svgs/dots.svg new file mode 100644 index 00000000..33642642 --- /dev/null +++ b/frontend/src/assets/images/svgs/dots.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/svgs/login-illustration.svg b/frontend/src/assets/images/svgs/login-illustration.svg new file mode 100644 index 00000000..97a0d466 --- /dev/null +++ b/frontend/src/assets/images/svgs/login-illustration.svg @@ -0,0 +1,279 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/svgs/login-tan-bg.svg b/frontend/src/assets/images/svgs/login-tan-bg.svg new file mode 100644 index 00000000..8087337c --- /dev/null +++ b/frontend/src/assets/images/svgs/login-tan-bg.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/pages/Authentication/page.tsx b/frontend/src/pages/Authentication/page.tsx index a56fae79..a328ed77 100644 --- a/frontend/src/pages/Authentication/page.tsx +++ b/frontend/src/pages/Authentication/page.tsx @@ -5,6 +5,8 @@ import { AuthNav } from "tw-components"; import LoginForm from "./LoginForm"; import SignupForm from "./SignupForm"; +import { loginTanBg, dotsSvg, loginIllustration } from "assets/images/images"; + /** AuthenticationPage * @dev handles both "/login" and "/signup" paths */ @@ -14,9 +16,28 @@ export default function AuthenticationPage() { return ( <> -
-
- {/* figma art here */} +
+
+ Team work Pana Illustration + Tan background for login/register page + Corner dots pattern + Corner dots pattern
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index b6bbf8ad..0285dbf3 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -58,6 +58,10 @@ module.exports = { large: "60px", "x-large": "100px", }, + rotate: { + 290: "290deg", + 345: "345deg", + }, }, }, plugins: [],