style: updated the UI of the instance admin setup and the sign in wor…

…kflow (#2962) * style: updated the UI of the signin and instance setups * fix: form validations and mutations * fix: updated Link tags in accordance to next v14 * chore: latest features image, reset password redirection
makeplane · Dec 7, 2023 · 1296b6a · 1296b6a
1 parent a515c59
commit 1296b6a
Show file tree

Hide file tree

Showing 39 changed files with 715 additions and 573 deletions.
diff --git a/web/components/account/sign-in-forms/create-password.tsx b/web/components/account/sign-in-forms/create-password.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 // services
 import { AuthService } from "services/auth.service";
@@ -74,7 +75,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
         Let{"'"}s get a new password
       </h1>
 
@@ -117,16 +118,23 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
                 hasError={Boolean(errors.password)}
                 placeholder="Create password"
                 className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
+                minLength={8}
               />
             )}
           />
-          <p className="text-xs text-onboarding-text-200 mt-3">
+          <p className="text-xs text-onboarding-text-200 mt-3 pb-2">
             Whatever you choose now will be your account{"'"}s password until you change it.
           </p>
         </div>
         <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
           {isSubmitting ? "Submitting..." : "Go to workspace"}
         </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click the button above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
       </form>
     </>
   );

diff --git a/web/components/account/sign-in-forms/email-form.tsx b/web/components/account/sign-in-forms/email-form.tsx
@@ -83,10 +83,10 @@ export const EmailForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
         Get on your flight deck!
       </h1>
-      <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
+      <p className="text-center text-sm text-onboarding-text-200 mt-3">
         Sign in with the email you used to sign up for Plane
       </p>
 

diff --git a/web/components/account/sign-in-forms/optional-set-password.tsx b/web/components/account/sign-in-forms/optional-set-password.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, Input } from "@plane/ui";
@@ -37,12 +38,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">Set a password</h1>
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Set a password</h1>
       <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
-        If you{"'"}d to do away with codes, set a password here.
+        If you{"'"}d to do away with codes, set a password here
       </p>
 
-      <form className="mt-5 sm:w-96 mx-auto">
+      <form className="mt-5 sm:w-96 mx-auto space-y-4">
         <Controller
           control={control}
           name="email"
@@ -65,7 +66,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
             />
           )}
         />
-        <div className="grid grid-cols-2 gap-2.5 mt-4">
+        <div className="grid grid-cols-2 gap-2.5">
           <Button
             type="button"
             variant="primary"
@@ -88,6 +89,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
             {isGoingToWorkspace ? "Going to app..." : "Go to workspace"}
           </Button>
         </div>
+        <p className="text-xs text-onboarding-text-200">
+          When you click <span className="text-custom-primary-100">Go to workspace</span> above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
       </form>
     </>
   );

diff --git a/web/components/account/sign-in-forms/password.tsx b/web/components/account/sign-in-forms/password.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
@@ -184,17 +185,25 @@ export const PasswordForm: React.FC<Props> = (props) => {
               />
             )}
           />
-          <button
-            type="button"
-            onClick={handleForgotPassword}
-            className="text-xs font-medium text-right w-full text-custom-primary-100"
-          >
-            Forgot your password?
-          </button>
+          <div className="w-full text-right">
+            <button
+              type="button"
+              onClick={handleForgotPassword}
+              className="text-xs font-medium text-custom-primary-100"
+            >
+              Forgot your password?
+            </button>
+          </div>
         </div>
         <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
           {isSubmitting ? "Signing in..." : "Go to workspace"}
         </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click the button above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
       </form>
     </>
   );

diff --git a/web/components/account/sign-in-forms/root.tsx b/web/components/account/sign-in-forms/root.tsx
@@ -23,6 +23,8 @@ type Props = {
   handleSignInRedirection: () => Promise<void>;
 };
 
+const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
+
 export const SignInRoot: React.FC<Props> = (props) => {
   const { handleSignInRedirection } = props;
   // states
@@ -72,7 +74,7 @@ export const SignInRoot: React.FC<Props> = (props) => {
           />
         )}
       </div>
-      {signInStep !== ESignInSteps.OPTIONAL_SET_PASSWORD && (
+      {!OAUTH_HIDDEN_STEPS.includes(signInStep) && (
         <OAuthOptions
           updateEmail={(newEmail) => setEmail(newEmail)}
           handleStepChange={(step: ESignInSteps) => setSignInStep(step)}

diff --git a/web/components/account/sign-in-forms/set-password-link.tsx b/web/components/account/sign-in-forms/set-password-link.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
@@ -48,6 +49,13 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
 
     await authService
       .emailCheck(payload)
+      .then(() =>
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "We have sent a new link to your email.",
+        })
+      )
       .catch((err) =>
         setToastAlert({
           type: "error",
@@ -60,15 +68,15 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
-        Get on your flight deck!
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
+        Get on your flight deck
       </h1>
       <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
-        We have sent a link to <span className="font-medium text-custom-primary-100">{email},</span> so you can set a
+        We have sent a link to <span className="font-semibold text-custom-primary-100">{email},</span> so you can set a
         password
       </p>
 
-      <form className="mt-5 sm:w-96 mx-auto">
+      <form className="mt-5 sm:w-96 mx-auto space-y-4">
         <div className="space-y-1">
           <Controller
             control={control}
@@ -103,19 +111,23 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
             )}
           />
         </div>
-        <div className="mt-4">
-          <Button
-            type="button"
-            variant="primary"
-            className="w-full"
-            size="xl"
-            onClick={handleSendNewLink}
-            disabled={!isValid}
-            loading={isSendingNewLink}
-          >
-            {isSendingNewLink ? "Sending new link..." : "Get link again"}
-          </Button>
-        </div>
+        <Button
+          type="button"
+          variant="primary"
+          className="w-full"
+          size="xl"
+          onClick={handleSendNewLink}
+          disabled={!isValid}
+          loading={isSendingNewLink}
+        >
+          {isSendingNewLink ? "Sending new link..." : "Get link again"}
+        </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click the button above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
       </form>
     </>
   );

diff --git a/web/components/account/sign-in-forms/unique-code.tsx b/web/components/account/sign-in-forms/unique-code.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { CornerDownLeft, XCircle } from "lucide-react";
 // services
@@ -44,7 +45,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
   // toast alert
   const { setToastAlert } = useToast();
   // timer
-  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer();
+  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
   // form info
   const {
     control,
@@ -131,11 +132,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
-        Moving to the runway
-      </h1>
-      <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
-        Paste the code you got at <span className="font-medium text-custom-primary-100">{email}</span> below.
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Moving to the runway</h1>
+      <p className="text-center text-sm text-onboarding-text-200 mt-3">
+        Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below
       </p>
 
       <form onSubmit={handleSubmit(handleFormSubmit)} className="mt-5 sm:w-96 mx-auto space-y-4">
@@ -201,20 +200,24 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
               />
             )}
           />
-          <button
-            type="button"
-            onClick={handleRequestNewCode}
-            className={`text-xs text-right w-full text-onboarding-text-200 ${
-              isRequestNewCodeDisabled ? "" : "hover:text-custom-primary-100"
-            }`}
-            disabled={isRequestNewCodeDisabled}
-          >
-            {resendTimerCode > 0
-              ? `Request new code in ${resendTimerCode}s`
-              : isRequestingNewCode
-              ? "Requesting new code..."
-              : "Request new code"}
-          </button>
+          <div className="w-full text-right">
+            <button
+              type="button"
+              onClick={handleRequestNewCode}
+              className={`text-xs ${
+                isRequestNewCodeDisabled
+                  ? "text-onboarding-text-300"
+                  : "text-onboarding-text-200 hover:text-custom-primary-100"
+              }`}
+              disabled={isRequestNewCodeDisabled}
+            >
+              {resendTimerCode > 0
+                ? `Request new code in ${resendTimerCode}s`
+                : isRequestingNewCode
+                ? "Requesting new code..."
+                : "Request new code"}
+            </button>
+          </div>
         </div>
         <Button
           type="submit"
@@ -226,6 +229,12 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
         >
           {isSubmitting ? "Signing in..." : "Confirm"}
         </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click Confirm above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
       </form>
     </>
   );

diff --git a/web/components/common/latest-feature-block.tsx b/web/components/common/latest-feature-block.tsx
@@ -1,34 +1,35 @@
 import Image from "next/image";
+import Link from "next/link";
 import { useTheme } from "next-themes";
 // icons
 import { Lightbulb } from "lucide-react";
 // images
-import signInIssues from "public/onboarding/onboarding-issues.svg";
+import latestFeatures from "public/onboarding/onboarding-pages.svg";
 
 export const LatestFeatureBlock = () => {
   const { resolvedTheme } = useTheme();
 
   return (
     <>
-      <div
-        className={`flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16`}
-      >
+      <div className="flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16">
         <Lightbulb className="h-7 w-7 mr-2 mx-3" />
-        <p className={`text-sm text-left text-onboarding-text-100`}>
-          Try the latest features, like Tiptap editor, to write compelling responses.{" "}
-          <span className="font-medium text-sm underline hover:cursor-pointer" onClick={() => {}}>
-            See new features
-          </span>
+        <p className="text-sm text-left text-onboarding-text-100">
+          Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
+          <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
+            <span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
+          </Link>
         </p>
       </div>
-      <div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 ">
-        <Image
-          src={signInIssues}
-          alt="Plane Issues"
-          className={`flex object-cover rounded-md ${
-            resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
-          } `}
-        />
+      <div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
+        <div className="h-[90%]">
+          <Image
+            src={latestFeatures}
+            alt="Plane Issues"
+            className={`rounded-md h-full ml-8 -mt-2 ${
+              resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
+            } `}
+          />
+        </div>
       </div>
     </>
   );

diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
@@ -33,7 +33,10 @@ export interface ICyclesBoardCard {
 export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   const { cycle, workspaceSlug, projectId } = props;
   // store
-  const { cycle: cycleStore, trackEvent: { setTrackElement } } = useMobxStore();
+  const {
+    cycle: cycleStore,
+    trackEvent: { setTrackElement },
+  } = useMobxStore();
   // toast
   const { setToastAlert } = useToast();
   // states
@@ -152,7 +155,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
       />
 
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-        <span className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
+        <div className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-3 truncate">
               <span className="flex-shrink-0">
@@ -268,7 +271,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
               </div>
             </div>
           </div>
-        </span>
+        </div>
       </Link>
     </div>
   );