Client: Profile: init social networks
This commit is contained in:
parent
90457c3d76
commit
5b20178dcd
@ -11,6 +11,7 @@ import MainProfile from "./sub-components/main-profile";
|
||||
import LoginSettings from "./sub-components/login-settings";
|
||||
import Subscription from "./sub-components/subscription";
|
||||
import InterfaceTheme from "./sub-components/interface-theme";
|
||||
import SocialNetworks from "./sub-components/social-networks";
|
||||
|
||||
import { tablet } from "@docspace/components/utils/device";
|
||||
|
||||
@ -80,6 +81,7 @@ const SectionBodyContent = (props) => {
|
||||
setBackupCodes={setBackupCodes}
|
||||
/>
|
||||
)}
|
||||
<SocialNetworks />
|
||||
<Subscription
|
||||
changeEmailSubscription={changeEmailSubscription}
|
||||
tipsSubscription={tipsSubscription}
|
||||
|
@ -0,0 +1,65 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import SocialButton from "@docspace/components/social-button";
|
||||
|
||||
import { hugeMobile } from "@docspace/components/utils/device";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.buttons-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
@media ${hugeMobile} {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const SocialNetworks = () => {
|
||||
const { t } = useTranslation(["Profile", "Common"]);
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<Text fontSize="16px" fontWeight={700}>
|
||||
{t("ConnectSocialNetworks")}
|
||||
</Text>
|
||||
<div className="buttons">
|
||||
<div className="buttons-row">
|
||||
<SocialButton
|
||||
iconName="static/images/share.linkedin.react.svg"
|
||||
label={t("Common:SignInWithLinkedIn")}
|
||||
/>
|
||||
<SocialButton
|
||||
iconName="static/images/share.google.react.svg"
|
||||
label={t("Common:SignInWithGoogle")}
|
||||
/>
|
||||
</div>
|
||||
<div className="buttons-row">
|
||||
<SocialButton
|
||||
iconName="static/images/share.twitter.react.svg"
|
||||
label={t("Common:SignInWithTwitter")}
|
||||
/>
|
||||
<SocialButton
|
||||
iconName="static/images/share.facebook.react.svg"
|
||||
label={t("Common:SignInWithFacebook")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default SocialNetworks;
|
Loading…
Reference in New Issue
Block a user