Final style changes to login/signup

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>

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

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"
+              autoComplete="email"
-              id="current-password"
+              id="email"
               className="h-12"
             />
           </div>

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}
         />
       );
     }

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}