From 88fbe850878243111dfd83ee4d2b6baf5590ca9e Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 18 Jul 2023 15:00:06 +0530
Subject: [PATCH] fix: button and input heights (#1548)

---
 apps/app/components/account/email-code-form.tsx        |  8 ++++----
 apps/app/components/account/email-password-form.tsx    |  6 +++---
 .../components/account/email-reset-password-form.tsx   |  6 +++---
 apps/app/components/account/github-login-button.tsx    |  4 ++--
 apps/app/components/account/google-login.tsx           |  1 +
 apps/app/pages/reset-password.tsx                      | 10 +++++++---
 6 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index 29891f624..236159fe5 100644
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@@ -136,7 +136,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
             }}
             error={errors.email}
             placeholder="Enter your email address..."
-            className="border-custom-border-300"
+            className="border-custom-border-300 h-[46px]"
           />
         </div>
 
@@ -152,7 +152,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
               }}
               error={errors.token}
               placeholder="Enter code..."
-              className="border-custom-border-300"
+              className="border-custom-border-300 h-[46px]"
             />
             <button
               type="button"
@@ -186,7 +186,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
         {codeSent ? (
           <PrimaryButton
             type="submit"
-            className="w-full text-center"
+            className="w-full text-center h-[46px]"
             size="md"
             onClick={handleSubmit(handleSignin)}
             disabled={!isValid && isDirty}
@@ -196,7 +196,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
           </PrimaryButton>
         ) : (
           <PrimaryButton
-            className="w-full text-center"
+            className="w-full text-center h-[46px]"
             size="md"
             onClick={() => {
               handleSubmit(onSubmit)().then(() => {
diff --git a/apps/app/components/account/email-password-form.tsx b/apps/app/components/account/email-password-form.tsx
index c21b629e7..bb341b371 100644
--- a/apps/app/components/account/email-password-form.tsx
+++ b/apps/app/components/account/email-password-form.tsx
@@ -71,7 +71,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
               }}
               error={errors.email}
               placeholder="Enter your email address..."
-              className="border-custom-border-300"
+              className="border-custom-border-300 h-[46px]"
             />
           </div>
           <div className="space-y-1">
@@ -85,7 +85,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
               }}
               error={errors.password}
               placeholder="Enter your password..."
-              className="border-custom-border-300"
+              className="border-custom-border-300 h-[46px]"
             />
           </div>
           <div className="text-right text-xs">
@@ -108,7 +108,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
           <div>
             <PrimaryButton
               type="submit"
-              className="w-full text-center"
+              className="w-full text-center h-[46px]"
               disabled={!isValid && isDirty}
               loading={isSubmitting}
             >
diff --git a/apps/app/components/account/email-reset-password-form.tsx b/apps/app/components/account/email-reset-password-form.tsx
index 3fe46815a..3717e8801 100644
--- a/apps/app/components/account/email-reset-password-form.tsx
+++ b/apps/app/components/account/email-reset-password-form.tsx
@@ -78,17 +78,17 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
           }}
           error={errors.email}
           placeholder="Enter registered email address.."
-          className="border-custom-border-300"
+          className="border-custom-border-300 h-[46px]"
         />
       </div>
       <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
         <SecondaryButton
-          className="w-full text-center"
+          className="w-full text-center h-[46px]"
           onClick={() => setIsResettingPassword(false)}
         >
           Go Back
         </SecondaryButton>
-        <PrimaryButton type="submit" className="w-full text-center" loading={isSubmitting}>
+        <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
           {isSubmitting ? "Sending link..." : "Send reset link"}
         </PrimaryButton>
       </div>
diff --git a/apps/app/components/account/github-login-button.tsx b/apps/app/components/account/github-login-button.tsx
index 844f32355..2f4fcbc4d 100644
--- a/apps/app/components/account/github-login-button.tsx
+++ b/apps/app/components/account/github-login-button.tsx
@@ -44,9 +44,9 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn })
       <Link
         href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
-        <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80">
+        <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
           <Image
-            src={theme === "light" ? githubBlackImage : githubWhiteImage}
+            src={theme === "dark" ? githubWhiteImage : githubBlackImage}
             height={20}
             width={20}
             alt="GitHub Logo"
diff --git a/apps/app/components/account/google-login.tsx b/apps/app/components/account/google-login.tsx
index a2cdb7750..c81e6af48 100644
--- a/apps/app/components/account/google-login.tsx
+++ b/apps/app/components/account/google-login.tsx
@@ -27,6 +27,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
         theme: "outline",
         size: "large",
         logo_alignment: "center",
+        height: "46",
         width: "360",
         text: "continue_with",
       } as GsiButtonConfiguration // customization attributes
diff --git a/apps/app/pages/reset-password.tsx b/apps/app/pages/reset-password.tsx
index e4de8f630..99d988bc1 100644
--- a/apps/app/pages/reset-password.tsx
+++ b/apps/app/pages/reset-password.tsx
@@ -121,7 +121,7 @@ const ResetPasswordPage: NextPage = () => {
                 }}
                 error={errors.password}
                 placeholder="Enter new password..."
-                className="border-custom-border-300"
+                className="border-custom-border-300 h-[46px]"
               />
             </div>
             <div className="space-y-1">
@@ -135,10 +135,14 @@ const ResetPasswordPage: NextPage = () => {
                 }}
                 error={errors.confirmPassword}
                 placeholder="Confirm new password..."
-                className="border-custom-border-300"
+                className="border-custom-border-300 h-[46px]"
               />
             </div>
-            <PrimaryButton type="submit" className="w-full text-center" loading={isSubmitting}>
+            <PrimaryButton
+              type="submit"
+              className="w-full text-center h-[46px]"
+              loading={isSubmitting}
+            >
               {isSubmitting ? "Resetting..." : "Reset"}
             </PrimaryButton>
           </form>