Web: Components/People: Fixed social-button styles
This commit is contained in:
parent
482530b2f8
commit
6fadc94b71
@ -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}
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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",
|
||||
|
@ -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 ? (
|
||||
|
Loading…
Reference in New Issue
Block a user