Shared: SocialButtons: Fixed styles.

packages/shared/components/social-button/SocialButton.styled.tsx

@@ -46,7 +46,7 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
   isConnect: props.isConnect,
 }))`
   font-family: ${(props) => props.theme.fontFamily};
-  border: none;
+
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -54,14 +54,19 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
   font-weight: ${(props) => props.theme.socialButton.fontWeight};
   text-decoration: ${(props) => props.theme.socialButton.textDecoration};
   padding: ${(props) => props.theme.socialButton.padding};
-  border-radius: ${(props) => props.theme.socialButton.borderRadius};
+
   width: ${(props) => props.theme.socialButton.width};
   height: ${(props) =>
     props.size === "base"
       ? props.theme.socialButton.height
       : props.theme.socialButton.heightSmall};
   text-align: ${(props) => props.theme.socialButton.textAlign};
-  border: ${(props) => props.theme.socialButton.border};
+  border: ${(props) =>
+    props.isConnect
+      ? props.theme.socialButton.borderConnect
+      : props.theme.socialButton.border};
+  border-radius: ${(props) => props.theme.socialButton.borderRadius};
+
   touch-callout: none;
   -o-touch-callout: none;
   -moz-touch-callout: none;
@@ -89,7 +94,6 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
             props.isConnect
               ? theme.socialButton.connectBackground
               : theme.socialButton.background};
-          box-shadow: ${(Cssprops) => Cssprops.theme.socialButton.boxShadow};
 
           ${() =>
             !props.noHover &&
@@ -97,8 +101,6 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
               :hover,
               :active {
                 cursor: pointer;
-                box-shadow: ${(cssProps) =>
-                  cssProps.theme.socialButton.boxShadow};
 
                 .social_button_text {
                   color: ${({ theme }) =>
@@ -111,17 +113,25 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
                   props.isConnect
                     ? theme.socialButton.hoverConnectBackground
                     : theme.socialButton.hoverBackground};
+
+                border: ${props.isConnect
+                  ? props.theme.socialButton.hoverConnectBorder
+                  : props.theme.socialButton.hoverBorder};
               }
 
               :active {
                 background: ${({ theme }) =>
-                  theme.socialButton.activeBackground};
-                border: none;
+                  props.isConnect
+                    ? theme.socialButton.activeConnectBackground
+                    : theme.socialButton.activeBackground};
+                border: ${props.isConnect
+                  ? props.theme.socialButton.activeConnectBorder
+                  : props.theme.socialButton.activeBorder};
               }
             `}
         `
       : css`
-          box-shadow: none;
+     
           background: ${({ theme }) =>
             theme.socialButton.disableBackgroundColor};
           color: ${({ theme }) => theme.socialButton.disableColor};

packages/shared/components/social-buttons-group/SocialButtonsGroup.styled.tsx

@@ -35,11 +35,6 @@ const StyledSocialButtonsGroup = styled.div`
     margin-bottom: 8px;
   }
 
-  .social-button {
-    box-shadow: none;
-    border: ${(props) => props.theme.socialButtonsGroup.border};
-    border-radius: ${(props) => props.theme.socialButton.borderRadius};
-  }
   .social-buttons-group {
     display: flex;
     flex-direction: row;
@@ -53,15 +48,9 @@ const StyledSocialButtonsGroup = styled.div`
 
     .show-more-button {
       padding: 10px 16px;
-      border-radius: ${(props) => props.theme.socialButton.borderRadius};
-      border: ${(props) => props.theme.socialButtonsGroup.border};
-
       width: 52px;
-      height: 40px;
-      box-sizing: border-box;
-      cursor: pointer;
 
-      .icon-button_svg {
+      svg {
         transform: rotate(90deg);
       }
     }

packages/shared/components/social-buttons-group/SocialButtonsGroup.tsx

@@ -105,15 +105,11 @@ export const SocialButtonsGroup = memo(
           <div className="social-buttons-group">
             {elements}
             {length > 2 && (
-              <div className="show-more-button" onClick={moreAuthOpen}>
-                <IconButton
-                  size={20}
-                  onClick={moreAuthOpen}
-                  iconName={VerticalDotsReactSvgUrl}
-                  isFill
-                  isClickable={false}
-                />
-              </div>
+              <SocialButton
+                iconName={VerticalDotsReactSvgUrl}
+                onClick={moreAuthOpen}
+                className="show-more-button"
+              />
             )}
 
             <MoreLoginModal

packages/shared/themes/base.ts

@@ -339,22 +339,28 @@ export const getBaseTheme = () => {
       outline: "none",
       width: "100%",
 
+      border: "1px solid #D0D5DA",
       background: white,
-      disableBackgroundColor: "#F8F9F9",
-      connectBackground: "#3B72A7",
-      hoverBackground: white,
-      hoverConnectBackground: "#265A8F",
-      activeBackground: "grayMaxLight",
-      hoverBorder: "#1877f2",
 
-      boxShadow:
-        "0px 1px 1px rgba(0, 0, 0, 0.24),0px 0px 1px rgba(0, 0, 0, 0.12)",
-      hoverBoxShadow: "none",
+      borderConnect: "none",
+      connectBackground: "#3B72A7",
+
+      disableBackgroundColor: "#F8F9F9",
+
+      hoverBackground: white,
+      hoverBorder: "1px solid #5299E0",
+      hoverConnectBackground: "#316DAA",
+      hoverConnectBorder: "none",
+
+      activeBorder: "1px solid #D0D5DA",
+      activeBackground: "#ECEEF1",
+      activeConnectBorder: "none",
+      activeConnectBackground: "#265A8F",
 
       color: "rgba(0, 0, 0, 0.54)",
       disableColor: "#333333",
       disabledSvgColor: "none",
-      border: "none",
+
       text: {
         width: "100%",
         height: "18px",
@@ -381,10 +387,6 @@ export const getBaseTheme = () => {
       },
     },
 
-    socialButtonsGroup: {
-      border: "1px solid #D0D5DA",
-    },
-
     groupButton: {
       fontSize: "14px",
       lineHeight: "19px",

packages/shared/themes/dark.ts

@@ -312,23 +312,29 @@ const Dark: TTheme = {
     outline: "none",
     width: "100%",
 
+    border: "1px solid #474747",
     background: black,
-    disableBackgroundColor: "rgba(0, 0, 0, 0.08)",
+
+    borderConnect: "none",
     connectBackground:
       "linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #333333",
-    hoverBackground: "#292929",
-    hoverConnectBackground: "#FFFFFF",
-    activeBackground: "#292929",
-    hoverBorder: "#858585",
 
-    boxShadow: "none",
-    hoverBoxShadow: "none",
+    disableBackgroundColor: "rgba(0, 0, 0, 0.08)",
+
+    hoverBackground: black,
+    hoverBorder: "1px solid #858585",
+    hoverConnectBackground: "#FFFFFF",
+    hoverConnectBorder: "none",
+
+    activeBackground: "#282828",
+    activeBorder: "1px solid #CCCCCC",
+    activeConnectBackground: "rgba(255, 255, 255, 0.64)",
+    activeConnectBorder: "none",
 
     color: "rgba(0, 0, 0, 0.54)",
     disableColor: "rgba(0, 0, 0, 0.4)",
     disabledSvgColor: "#474747",
 
-    border: "1px solid #474747",
     text: {
       width: "100%",
       height: "18px",
@@ -355,10 +361,6 @@ const Dark: TTheme = {
     },
   },
 
-  socialButtonsGroup: {
-    border: "1px solid #474747",
-  },
-
   groupButton: {
     fontSize: "14px",
     lineHeight: "19px",