fix: fix Lark icon button style (#1279)

web/default/src/components/LoginForm.js

@@ -128,6 +128,7 @@ const LoginForm = () => {
         {status.github_oauth || status.wechat_login || status.lark_client_id ? (
           <>
             <Divider horizontal>Or</Divider>
+            <div style={{ display: "flex", justifyContent: "center" }}>
               {status.github_oauth ? (
                 <Button
                   circular
@@ -138,18 +139,6 @@ const LoginForm = () => {
               ) : (
                 <></>
               )}
-            {status.lark_client_id ? (
-              <Button
-                // circular
-                color=''
-                onClick={() => onLarkOAuthClicked(status.lark_client_id)}
-                style={{ padding: 0, width: 36, height: 36 }}
-              >
-                <img src={larkIcon} width={36} height={36} />
-              </Button>
-            ) : (
-              <></>
-            )}
               {status.wechat_login ? (
                 <Button
                   circular
@@ -160,6 +149,26 @@ const LoginForm = () => {
               ) : (
                 <></>
               )}
+              {status.lark_client_id ? (
+                <div style={{
+                  background: "radial-gradient(circle, #FFFFFF, #FFFFFF, #00D6B9, #2F73FF, #0a3A9C)",
+                  width: "36px",
+                  height: "36px",
+                  borderRadius: "10em",
+                  display: "flex",
+                  cursor: "pointer"
+                }}>
+                  <Image
+                    src={larkIcon}
+                    avatar
+                    style={{ width: "16px", height: "16px", cursor: "pointer", margin: "auto" }}
+                    onClick={() => onLarkOAuthClicked(status.lark_client_id)}
+                  />
+                </div>
+              ) : (
+                <></>
+              )}
+            </div>
           </>
         ) : (
           <></>