Web: Components/People: Fixed social-button styles

packages/asc-web-components/social-button/index.js

@@ -13,10 +13,10 @@ class SocialButton extends React.Component {
   }
 
   render() {
-    const { label, iconName, iconOptions } = this.props;
+    const { label, iconName, ...otherProps } = this.props;
     return (
-      <StyledSocialButton {...this.props}>
-        <ReactSVG src={iconName} />
+      <StyledSocialButton {...otherProps}>
+        <ReactSVG className="iconWrapper" src={iconName} />
         {label && (
           <Text as="span" className="social_button_text">
             {label}

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

@@ -44,6 +44,15 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
     outline: ${(props) => props.theme.socialButton.outline};
   }
 
+  ${(props) =>
+    props.iconOptions &&
+    props.iconOptions.color &&
+    css`
+      svg path {
+        fill: ${props.iconOptions.color};
+      }
+    `}
+
   ${(props) =>
     !props.isDisabled
       ? css`
@@ -77,6 +86,10 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
           }
         `};
 
+  .iconWrapper {
+    display: flex;
+  }
+
   .social_button_text {
     position: relative;
 

packages/asc-web-components/themes/base.js

@@ -234,12 +234,12 @@ const Base = {
     disableColor: "rgba(0, 0, 0, 0.4)",
 
     text: {
-      width: "142px",
+      width: "100%",
       height: "16px",
       margin: "0 11px",
       fontWeight: "600",
       fontSize: "14px",
-      lineHeight: "16px",
+      lineHeight: "14px",
       letterSpacing: "0.21875px",
       overflow: "hidden",
       textOverflow: "ellipsis",

products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js

@@ -54,8 +54,8 @@ import config from "../../../../../package.json";
 import { combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
 
-const facebookIconOptions = { isfill: true, color: "#4469B0" };
-const twitterIconOptions = { isfill: true, color: "#2AA3EF" };
+const facebookIconOptions = { color: "#4469B0" };
+const twitterIconOptions = { color: "#2AA3EF" };
 
 const dialogsDataset = {
   changeEmail: "changeEmail",
@@ -90,10 +90,12 @@ const providersData = Object.freeze({
   Facebook: {
     label: "SignInWithFacebook",
     icon: "images/share.facebook.react.svg",
+    iconOptions: facebookIconOptions,
   },
   Twitter: {
     label: "SignInWithTwitter",
     icon: "images/share.twitter.react.svg",
+    iconOptions: twitterIconOptions,
   },
   LinkedIn: {
     label: "SignInWithLinkedIn",
@@ -628,7 +630,7 @@ class UpdateUserForm extends React.Component {
     const providerButtons =
       providers &&
       providers.map((item) => {
-        const { icon, label } = providersData[item.provider];
+        const { icon, label, iconOptions } = providersData[item.provider];
 
         if (!icon || !label) return <></>;
         return (
@@ -638,6 +640,7 @@ class UpdateUserForm extends React.Component {
                 iconName={icon}
                 label={t(label)}
                 className="socialButton"
+                iconOptions={iconOptions}
               />
             </div>
             {item.linked ? (