Change login page layout

uug-ai · May 22, 2024 · 4bc114a · 4bc114a
1 parent f5e1665
commit 4bc114a
Show file tree

Hide file tree

Showing 3 changed files with 11,087 additions and 15,019 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -11,7 +11,7 @@
     "tailwind": "npx tailwindcss -c ./tailwind.config.js -i ./src/index.css -o ./styles/tailwind.css --watch"
   },
   "dependencies": {
-    "@uug-ai/ui": "^1.0.20",
+    "@uug-ai/ui": "^1.0.28",
     "autoprefixer": "^10.4.19",
     "next": "14",
     "react": "^18",

diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
@@ -1,25 +1,68 @@
-import { Button, Input, Gradient, Socials, Box, Stack, Password, Row } from "../components/ui";
+import {
+  Button,
+  Input,
+  Gradient,
+  Text,
+  Socials,
+  Box,
+  Stack,
+  Password,
+  Row,
+} from "../components/ui";
 import React from "react";
 
 export default function App() {
   return (
     <Box className="shadow-inner min-h-screen min-w-fit max-w-96 w-4/12 flex flex-col items-start bg-primary-50/15">
-    <Gradient />
-    <Stack className="p-8">
-      <Input
-        type="text"
-        id="username"
-        placeholder="username"
-        className="mb-4"
-      />
-      <Row className="mb-1"></Row>
-      <Password placeholder="password" id="username" className="mb-4" />
-      <Button type="submit" variant="solid" width="third">
-        Sign in
-      </Button>
-    </Stack>
-    <Socials className="mt-auto self-center justify-self-end p-8" />
-  </Box>
+      <Gradient />
+      <Stack className="p-8">
+        <Text as="h2" size="5xl" weight="semibold" className="pb-8">
+          Sign in
+        </Text>
+        <Text as="label" weight="semibold" className="mb-1">
+          username
+        </Text>
+        <Input
+          type="text"
+          id="username"
+          placeholder="username"
+          className="mb-4"
+        />
+        <Row className="mb-1">
+          <Text as="label" weight="semibold">
+            password
+          </Text>
+          <Text as="a" variant="link" color="light">
+            forgot password?
+          </Text>
+        </Row>
+        <Password placeholder="password" id="username" className="mb-4" />
+        <Button type="submit" variant="solid" width="third">
+          Sign in
+        </Button>
+      </Stack>
+      <Socials className="mt-auto self-center justify-self-end p-8" />
+    </Box>
+
+    // <Box className="shadow-inner min-h-screen min-w-fit max-w-96 w-4/12 flex flex-col items-start bg-primary-50/15">
+    //   <Gradient />
+    //   <Stack className="p-8">
+    //     <Text as="h2" size="5xl" weight="semibold">
+    //       Sign in
+    //     </Text>
+    //     <Input
+    //       type="text"
+    //       id="username"
+    //       placeholder="username"
+    //       className="mb-4"
+    //     />
+    //     <Row className="mb-1"></Row>
+    //     <Password placeholder="password" id="username" className="mb-4" />
+    //     <Button type="submit" variant="solid" width="third">
+    //       Sign in
+    //     </Button>
+    //   </Stack>
+    //   <Socials className="mt-auto self-center justify-self-end p-8" />
+    // </Box>
   );
 }
-