improve design

lunary-ai · Oct 4, 2024 · 87a75dc · 87a75dc
1 parent ec6cf64
commit 87a75dc
Show file tree

Hide file tree

Showing 9 changed files with 487 additions and 478 deletions.
diff --git a/packages/backend/src/jobs/resetUsage.ts b/packages/backend/src/jobs/resetUsage.ts
@@ -68,7 +68,7 @@ RETURNING *;`;
 
 // reset playground allowance
 async function resetPlaygroundAllowance() {
-  await sql`UPDATE "public"."org" o SET play_allowance = 3 WHERE o.plan = 'free';`;
+  await sql`UPDATE "public"."org" o SET play_allowance = 10 WHERE o.plan = 'free';`;
   await sql`UPDATE "public"."org" o SET play_allowance = 1000 WHERE o.plan = 'pro' OR o.plan = 'team';`;
   await sql`UPDATE "public"."org" o SET play_allowance = 1000 WHERE o.plan = 'unlimited' OR o.plan = 'custom';`;
 }

diff --git a/packages/frontend/components/blocks/SocialProof.tsx b/packages/frontend/components/blocks/SocialProof.tsx
@@ -22,9 +22,9 @@ export default function SocialProof() {
             span
             fw="bolder"
           >
-            2500+
+            4500+
           </Text>{" "}
-          AI devs build better apps
+          GenAI devs build better apps
         </Text>
       </Stack>
     </Group>

diff --git a/packages/frontend/components/layout/index.tsx b/packages/frontend/components/layout/index.tsx
@@ -30,6 +30,8 @@ export default function Layout({ children }: { children: ReactNode }) {
     "/reset-password",
   ].find((path) => router.pathname.startsWith(path));
 
+  const isSignupPage = router.pathname.startsWith("/signup");
+
   const isSignupLastStep =
     router.pathname === "/signup" && router.query.step === "3";
 
@@ -74,7 +76,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 
   const isPromptPage = router.pathname.startsWith("/prompt");
   const isTracePage = router.pathname.startsWith("/traces");
-  const disablePagePadding = isPromptPage || isTracePage;
+  const disablePagePadding = isPromptPage || isTracePage || isAuthPage;
 
   useEffect(() => {
     if (user) {

diff --git a/packages/frontend/pages/login.tsx b/packages/frontend/pages/login.tsx
@@ -1,5 +1,6 @@
 import {
   Anchor,
+  Box,
   Button,
   Container,
   Paper,
@@ -143,102 +144,100 @@ function LoginPage() {
     const email = router.query.email
       ? decodeURIComponent(router.query.email as string)
       : "";
-    console.log(form.values.password);
     if (email && !form.values.email) {
-      console.log("here");
       form.setFieldValue("email", email);
       determineAuthMethod(email);
-      console.log(step);
     }
   }, [router.query.email]);
 
   return (
-    <Container pt="60" size="600">
-      <NextSeo title="Login" />
-      <Stack align="center" gap="50">
-        <Stack align="center">
-          <IconAnalyze color="#206dce" size="60" />
-          <Title order={2} fw="700" size="40" ta="center">
-            Welcome back
-          </Title>
-        </Stack>
-        <Paper radius="md" p="xl" withBorder miw="350">
-          <Text size="lg" mb="xl" fw="700">
-            Sign In
-          </Text>
-
-          {step !== "saml" && (
-            <form
-              onSubmit={
-                step === "email"
-                  ? (e) => {
-                      determineAuthMethod(form.values.email);
-                      e.preventDefault();
+    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
+      <Container size="600" pt="60">
+        <NextSeo title="Login" />
+        <Stack align="center" gap="50">
+          <Stack align="center">
+            <IconAnalyze color="#4f87ff" size="60" />
+          </Stack>
+          <Paper radius="md" p="xl" miw="350" shadow="md">
+            <Text size="xl" mb="lg" fw="700" ta="center">
+              Welcome back!
+            </Text>
+
+            {step !== "saml" && (
+              <form
+                onSubmit={
+                  step === "email"
+                    ? (e) => {
+                        determineAuthMethod(form.values.email);
+                        e.preventDefault();
+                      }
+                    : form.onSubmit(handleLoginWithPassword)
+                }
+              >
+                <Stack>
+                  <TextInput
+                    leftSection={<IconAt size="16" />}
+                    label="Email"
+                    type="email"
+                    autoComplete="email"
+                    value={form.values.email}
+                    onChange={(event) =>
+                      form.setFieldValue("email", event.currentTarget.value)
+                    }
+                    error={form.errors.email}
+                    placeholder="Your email"
+                  />
+                  <TextInput
+                    type="password"
+                    opacity={step === "email" ? 0 : 1}
+                    h={step === "email" ? 0 : "auto"}
+                    autoComplete="current-password"
+                    label="Password"
+                    value={form.values.password}
+                    onChange={(event) =>
+                      form.setFieldValue("password", event.currentTarget.value)
                     }
-                  : form.onSubmit(handleLoginWithPassword)
-              }
-            >
-              <Stack>
-                <TextInput
-                  leftSection={<IconAt size="16" />}
-                  label="Email"
-                  type="email"
-                  autoComplete="email"
-                  value={form.values.email}
-                  onChange={(event) =>
-                    form.setFieldValue("email", event.currentTarget.value)
-                  }
-                  error={form.errors.email}
-                  placeholder="Your email"
-                />
-                <TextInput
-                  type="password"
-                  opacity={step === "email" ? 0 : 1}
-                  h={step === "email" ? 0 : "auto"}
-                  autoComplete="current-password"
-                  label="Password"
-                  value={form.values.password}
-                  onChange={(event) =>
-                    form.setFieldValue("password", event.currentTarget.value)
-                  }
-                  error={form.errors.password}
-                  placeholder="Your password"
-                />
-                <Button
-                  mt={step === "email" ? 0 : "md"}
-                  type="submit"
-                  fullWidth
-                  loading={loading}
-                  data-testid="continue-button"
-                >
-                  {step === "email" ? "Continue" : "Login"}
-                </Button>
-              </Stack>
-            </form>
-          )}
-
-          {step === "saml" && (
-            <p>
-              Redirecting to your SSO login.
-              <br />
-              If you are not redirected in 5s,{" "}
-              <Anchor href={ssoURI || ""}>click here</Anchor>.
-            </p>
-          )}
-
-          <Text size="sm" mt="sm" style={{ textAlign: "center" }}>
-            {`Don't have an account? `}
-            <Anchor href="/signup">Sign Up</Anchor>
-          </Text>
-
-          {step === "password" && (
+                    error={form.errors.password}
+                    placeholder="Your password"
+                  />
+                  <Button
+                    mt={step === "email" ? 0 : "md"}
+                    type="submit"
+                    fullWidth
+                    className="CtaBtn"
+                    size="md"
+                    loading={loading}
+                    data-testid="continue-button"
+                  >
+                    {step === "email" ? "Continue" : "Login"}
+                  </Button>
+                </Stack>
+              </form>
+            )}
+
+            {step === "saml" && (
+              <p>
+                Redirecting to your SSO login.
+                <br />
+                If you are not redirected in 5s,{" "}
+                <Anchor href={ssoURI || ""}>click here</Anchor>.
+              </p>
+            )}
+
             <Text size="sm" mt="sm" style={{ textAlign: "center" }}>
-              <Anchor href="/request-password-reset">Forgot password?</Anchor>
+              {`Don't have an account? `}
+              <Anchor href="/signup">Sign Up</Anchor>
             </Text>
-          )}
-        </Paper>
-      </Stack>
-    </Container>
+
+            {step === "password" && (
+              <Text size="sm" mt="sm" style={{ textAlign: "center" }}>
+                <Anchor href="/request-password-reset">Forgot password?</Anchor>
+              </Text>
+            )}
+          </Paper>
+        </Stack>
+      </Container>
+    </Box>
   );
 }
 export default LoginPage;
diff --git a/packages/frontend/pages/request-password-reset.tsx b/packages/frontend/pages/request-password-reset.tsx
@@ -1,11 +1,11 @@
 import {
+  Box,
   Button,
   Container,
   Paper,
   Stack,
   Text,
   TextInput,
-  Title,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { notifications } from "@mantine/notifications";
@@ -53,42 +53,52 @@ export default function PasswordReset() {
   }
 
   return (
-    <Container py={100} size={600}>
-      <NextSeo title="Login" />
-      <Stack align="center" gap={50}>
-        <Stack align="center">
-          <IconAnalyze color={"#206dce"} size={60} />
-          <Title order={2} fw={700} size={40} ta="center">
-            Forgot password
-          </Title>
-        </Stack>
+    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
+      <Container py={100} size={600}>
+        <NextSeo title="Login" />
+        <Stack align="center" gap={50}>
+          <Stack align="center">
+            <IconAnalyze color={"#4f87ff"} size={60} />
+          </Stack>
+
+          <Paper radius="md" p="xl" maw={400} miw={350} shadow="md">
+            <Text size="lg" mb="lg" fw={500} ta="center">
+              Password Recovery
+            </Text>
 
-        <Paper radius="md" p="xl" withBorder miw={350}>
-          <Text size="lg" mb="xl" fw={500}>
-            Request reset link
-          </Text>
+            <Text size="sm" mb="lg" c="gray.8">
+              Enter your email address and if it is registered, we will send you
+              a link to reset your password.
+            </Text>
 
-          <form onSubmit={form.onSubmit(handlePasswordReset)}>
-            <Stack>
-              <TextInput
-                leftSection={<IconAt size="16" />}
-                label="Email"
-                type="email"
-                value={form.values.email}
-                onChange={(event) =>
-                  form.setFieldValue("email", event.currentTarget.value)
-                }
-                error={form.errors.email && "Invalid email"}
-                placeholder="Your email"
-              />
+            <form onSubmit={form.onSubmit(handlePasswordReset)}>
+              <Stack gap="lg">
+                <TextInput
+                  leftSection={<IconAt size="16" />}
+                  label="Email"
+                  type="email"
+                  value={form.values.email}
+                  onChange={(event) =>
+                    form.setFieldValue("email", event.currentTarget.value)
+                  }
+                  error={form.errors.email && "Invalid email"}
+                  placeholder="Your email"
+                />
 
-              <Button mt="md" type="submit" fullWidth loading={loading}>
-                Submit
-              </Button>
-            </Stack>
-          </form>
-        </Paper>
-      </Stack>
-    </Container>
+                <Button
+                  className="CtaBtn"
+                  type="submit"
+                  fullWidth
+                  size="md"
+                  loading={loading}
+                >
+                  Request reset link
+                </Button>
+              </Stack>
+            </form>
+          </Paper>
+        </Stack>
+      </Container>
+    </Box>
   );
 }