feat: fix multiple oauth buttons spacing

raheeliftikhar5 · raheeliftikhar5 · commit e8ca478d3beb · 2023-09-21T23:05:08.000+05:00
diff --git a/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx b/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx
@@ -158,6 +158,7 @@ export const ConfirmButton = (props: {
 const TermsAndPrivacyContent = styled.div`
   display: flex;
   align-items: center;
+  margin-top: 16px;
 
   font-size: 13px;
   color: #333333;
diff --git a/client/packages/lowcoder/src/pages/userAuth/register.tsx b/client/packages/lowcoder/src/pages/userAuth/register.tsx
@@ -33,10 +33,6 @@ const RegisterContent = styled(FormWrapperMobile)`
   display: flex;
   flex-direction: column;
   margin-bottom: 106px;
-
-  button {
-    margin-bottom: 16px;
-  }
 `;
 
 function UserRegister() {
diff --git a/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx b/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx
@@ -12,10 +12,20 @@ import { useSelector } from "react-redux";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
 import React from "react";
 import { messageInstance } from "lowcoder-design";
-
+import styled from "styled-components";
 import { trans } from "i18n";
 import { geneAuthStateAndSaveParam, getAuthUrl, getRedirectUrl } from "pages/userAuth/authUtils";
 
+const ThirdPartyLoginButtonWrapper = styled.div`
+  button{
+    width: 100%;
+
+    &:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  }
+`;
+
 function ThirdPartyLoginButton(props: {
   config: ThirdPartyConfigType;
   invitationId?: string;
@@ -116,5 +126,9 @@ export function ThirdPartyAuth(props: {
       />
     );
   });
-  return <>{socialLoginButtons}</>;
+  return (
+    <ThirdPartyLoginButtonWrapper>
+      {socialLoginButtons}
+    </ThirdPartyLoginButtonWrapper>
+  );
 }
