feat(auth): prettier login screen (#4332)

* prettier login screen * feat: prettier login * cleanup
Arize-ai · Aug 23, 2024 · 18f8240 · 18f8240
1 parent 6b0ea52
commit 18f8240
Show file tree

Hide file tree

Showing 2 changed files with 349 additions and 5 deletions.
diff --git a/app/src/pages/login/LoginPage.tsx b/app/src/pages/login/LoginPage.tsx
@@ -3,18 +3,29 @@ import { css } from "@emotion/react";
 
 import { Button, Flex, Form, TextField, View } from "@arizeai/components";
 
-import { Logo } from "@phoenix/components/nav/Logo";
+import { PhoenixLogo } from "./PhoenixLogo";
 
 export function LoginPage() {
   return (
     <main
       css={css`
-        padding-top: var(--ac-global-dimension-size-2000);
+        padding-top: 200px;
         width: 100%;
+        height: 100vh;
+        overflow: hidden;
+        background: radial-gradient(
+          90% 60% at 50% 30%,
+          rgba(5, 145, 193, 0.4) 0%,
+          transparent 100%
+        );
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        box-sizing: border-box;
       `}
     >
       <View
-        borderColor="dark"
+        borderColor="light"
         borderWidth="thin"
         width="size-5000"
         padding="size-400"
@@ -24,8 +35,8 @@ export function LoginPage() {
         borderRadius="medium"
       >
         <Flex direction="column" gap="size-200" alignItems="center">
-          <View paddingBottom="size-400">
-            <Logo size={120} />
+          <View paddingBottom="size-200">
+            <PhoenixLogo />
           </View>
         </Flex>
         <Form action="/login" method="post">
@@ -58,6 +69,31 @@ export function LoginPage() {
           </div>
         </Form>
       </View>
+      <footer
+        css={css`
+          display: flex;
+          justify-content: center;
+          padding: var(--ac-global-dimension-size-400);
+          gap: var(--ac-global-dimension-size-200);
+          a {
+            color: var(--ac-global-text-color-700);
+            transition: color 0.2s ease-in-out;
+            text-decoration: none;
+            &:hover {
+              color: var(--ac-global-text-color-900);
+              text-decoration: underline;
+            }
+          }
+        `}
+      >
+        <a href="https://docs.arize.com/phoenix">Documentation</a>|
+        <a href="https://join.slack.com/t/arize-ai/shared_invite/zt-1px8dcmlf-fmThhDFD_V_48oU7ALan4Q">
+          Community
+        </a>
+        |<a href="https://twitter.com/ArizePhoenix">Social</a>|
+        <a href="https://github.com/Arize-ai/phoenix">GitHub</a>|
+        <a href="https://github.com/Arize-ai/phoenix/releases">{`arize-phoenix v${window.Config.platformVersion}`}</a>
+      </footer>
     </main>
   );
 }