From be80b5124f3f77042e610eccae6766f9ba0cf43b Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Wed, 31 May 2023 11:25:37 -0700
Subject: [PATCH] Final style changes to login/signup

---
 frontend/src/components/signup/CodeInputStep.tsx            | 5 ++++-
 frontend/src/components/v2/Button/Button.tsx                | 4 ++--
 frontend/src/pages/saml-sso.tsx                             | 6 +++---
 frontend/src/pages/signup.tsx                               | 4 ++++
 .../ProjectNameChangeSection/ProjectNameChangeSection.tsx   | 3 ++-
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/signup/CodeInputStep.tsx b/frontend/src/components/signup/CodeInputStep.tsx
index be44d0313..a13a34f11 100644
--- a/frontend/src/components/signup/CodeInputStep.tsx
+++ b/frontend/src/components/signup/CodeInputStep.tsx
@@ -51,6 +51,7 @@ interface CodeInputStepProps {
   incrementStep: () => void;
   setCode: (value: string) => void;
   codeError: boolean;
+  isCodeInputCheckLoading: boolean;
 }
 
 /**
@@ -66,7 +67,8 @@ export default function CodeInputStep({
   email,
   incrementStep,
   setCode,
-  codeError
+  codeError,
+  isCodeInputCheckLoading
 }: CodeInputStepProps): JSX.Element {
   const [isLoading, setIsLoading] = useState(false);
   const [isResendingVerificationEmail, setIsResendingVerificationEmail] = useState(false);
@@ -118,6 +120,7 @@ export default function CodeInputStep({
             className='h-14'
             colorSchema="primary"
             variant="outline_bg"
+            isLoading={isCodeInputCheckLoading}
           > {String(t('signup.verify'))} </Button>
         </div>
       </div>
diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index 7688f235f..d4ebd3028 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -177,10 +177,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {isLoading && (
           <img
-            src="/images/loading/loadingblack.gif"
+            src="/images/loading/loading.gif"
             width={36}
             alt="loading animation"
-            className="absolute rounded-xl"
+            className="absolute rounded-xl opacity-80"
           />
         )}
         <div
diff --git a/frontend/src/pages/saml-sso.tsx b/frontend/src/pages/saml-sso.tsx
index 1c2fc4e46..31408778e 100644
--- a/frontend/src/pages/saml-sso.tsx
+++ b/frontend/src/pages/saml-sso.tsx
@@ -56,10 +56,10 @@ export default function Login() {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               type="password"
-              placeholder="Enter your password..."
+              placeholder="Enter your email..."
               isRequired
-              autoComplete="current-password"
-              id="current-password"
+              autoComplete="email"
+              id="email"
               className="h-12"
             />
           </div>
diff --git a/frontend/src/pages/signup.tsx b/frontend/src/pages/signup.tsx
index 04415df29..e87ae9c46 100644
--- a/frontend/src/pages/signup.tsx
+++ b/frontend/src/pages/signup.tsx
@@ -33,6 +33,7 @@ export default function SignUp() {
   const router = useRouter();
   const { data: serverDetails } = useFetchServerStatus();
   const [isSignupWithEmail, setIsSignupWithEmail] = useState(false);
+  const [isCodeInputCheckLoading, setIsCodeInputCheckLoading] = useState(false);
   const { t } = useTranslation();
   const { email: providerEmail, providerAuthToken, isProviderUserCompleted } = useProviderAuth();
 
@@ -68,6 +69,7 @@ export default function SignUp() {
     if (step === 1 || step === 3 || step === 4) {
       setStep(step + 1);
     } else if (step === 2) {
+      setIsCodeInputCheckLoading(true);
       // Checking if the code matches the email.
       const response = await checkEmailVerificationCode({ email, code });
       if (response.status === 200) {
@@ -77,6 +79,7 @@ export default function SignUp() {
       } else {
         setCodeError(true);
       }
+      setIsCodeInputCheckLoading(false);
     }
   };
 
@@ -109,6 +112,7 @@ export default function SignUp() {
           incrementStep={incrementStep}
           setCode={setCode}
           codeError={codeError}
+          isCodeInputCheckLoading={isCodeInputCheckLoading}
         />
       );
     }
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
index f2f79a31f..ae13d2487 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
@@ -57,7 +57,8 @@ export const ProjectNameChangeSection = ({
         </div>
         <Button
           isLoading={isSubmitting}
-          color="mineshaft"
+          color="primary"
+          variant="outline_bg"
           size="sm"
           type="submit"
           isDisabled={!isDirty || isSubmitting}