Fix Bug 62136: applied social buttons disabled style

packages/components/social-button/styled-social-button.js

@@ -109,9 +109,22 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
             props.theme.socialButton.disableBackgroundColor};
           color: ${(props) => props.theme.socialButton.disableColor};
 
-          svg path {
-            fill: ${(props) => props.theme.socialButton.disableColor};
+          ${
+            props.theme.isBase &&
+            css`
+              svg path {
+                opacity: 60%;
+              }
+            `
           }
+          ${
+            !props.theme.isBase &&
+            css`
+              svg path {
+                fill: ${props.theme.socialButton.disabledSvgColor};
+              }
+            `
+          }}
         `};
 
   .iconWrapper {

packages/components/themes/base.js

@@ -293,7 +293,7 @@ const Base = {
     width: "100%",
 
     background: white,
-    disableBackgroundColor: "rgba(0, 0, 0, 0.08)",
+    disableBackgroundColor: "#F8F9F9",
     connectBackground: "#3B72A7",
     hoverBackground: white,
     hoverConnectBackground: "#265A8F",
@@ -305,7 +305,8 @@ const Base = {
     hoverBoxShadow: "none",
 
     color: "rgba(0, 0, 0, 0.54)",
-    disableColor: "rgba(0, 0, 0, 0.4)",
+    disableColor: "#333333",
+    disabledSvgColor: "none",
     border: "none",
     text: {
       width: "100%",

packages/components/themes/dark.js

@@ -303,6 +303,7 @@ const Dark = {
 
     color: "rgba(0, 0, 0, 0.54)",
     disableColor: "rgba(0, 0, 0, 0.4)",
+    disabledSvgColor: "#474747",
 
     border: "1px solid #474747",
     text: {

public/images/share.facebook.react.svg

@@ -1,4 +1,10 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 0C6.61305 0 4.32387 0.948211 2.63604 2.63604C0.948211 4.32387 0 6.61305 0 9C0 11.3869 0.948211 13.6761 2.63604 15.364C4.32387 17.0518 6.61305 18 9 18C11.3869 18 13.6761 17.0518 15.364 15.364C17.0518 13.6761 18 11.3869 18 9C18 6.61305 17.0518 4.32387 15.364 2.63604C13.6761 0.948211 11.3869 0 9 0Z" fill="#1877F2"/>
-<path d="M10.1047 11.5264H12.5862L12.9758 9.21077H10.1042V7.94516C10.1042 6.98321 10.4464 6.1302 11.4259 6.1302H13V4.10941C12.7234 4.0751 12.1385 4 11.0333 4C8.72546 4 7.37245 5.11957 7.37245 7.67025V9.21077H5V11.5264H7.37245V17.8911C7.84229 17.956 8.31819 18 8.80671 18C9.2483 18 9.67928 17.9629 10.1047 17.9101V11.5264Z" fill="white"/>
+<g clip-path="url(#clip0_505_4235)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.63604 2.63604C4.32387 0.948211 6.61305 0 9 0C11.3869 0 13.6761 0.948211 15.364 2.63604C17.0518 4.32387 18 6.61305 18 9C18 11.3869 17.0518 13.6761 15.364 15.364C13.6761 17.0518 11.3869 18 9 18C8.96536 18 8.93075 17.9998 8.89615 17.9994C9.30659 17.9948 9.70812 17.9592 10.1048 17.91V11.5263H12.5863L12.9759 9.21067H10.1043V7.94507C10.1043 6.98311 10.4465 6.13011 11.426 6.13011H13.0001V4.10931L12.9852 4.10746C12.7028 4.07239 12.1192 3.9999 11.0334 3.9999C8.72556 3.9999 7.37254 5.11948 7.37254 7.67016V9.21067H5.0001V11.5263H7.37254V17.8517C5.59053 17.524 3.93515 16.6631 2.63604 15.364C0.948211 13.6761 0 11.3869 0 9C0 6.61305 0.948211 4.32387 2.63604 2.63604Z" fill="#1877F2"/>
+</g>
+<defs>
+<clipPath id="clip0_505_4235">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
 </svg>