r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Update styling of Github and Google Buttons, updating styling of Account Settings

Browse source
This commit is contained in:
Cassie Tarakajian 2020-02-11 16:58:08 -05:00
parent 6931741813
commit 7ae02beb2d
3 changed files with 31 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
client/modules/User/pages/AccountView.jsx
View file

@ -9,12 +9,27 @@ import { updateSettings, initiateVerification, createApiKey, removeApiKey } from
import AccountForm from '../components/AccountForm';
import { validateSettings } from '../../../utils/reduxFormUtils';
import GithubButton from '../components/GithubButton';
import GoogleButton from '../components/GoogleButton';
import APIKeyForm from '../components/APIKeyForm';
import Nav from '../../../components/Nav';
const __process = (typeof global !== 'undefined' ? global : window).process;
const ROOT_URL = __process.env.API_URL;
function SocialLoginPanel(props) {
return (
<React.Fragment>
<AccountForm {...props} />
<h2 className="form-container__divider">Social Login</h2>
<p className="account__social-text">
Use your GitHub or Google account to log into the p5.js Web Editor.
</p>
<GithubButton buttonText="Login with GitHub" />
<GoogleButton buttonText="Login with Google" />
</React.Fragment>
);
}
class AccountView extends React.Component {
componentDidMount() {
document.body.className = this.props.theme;
@ -44,28 +59,14 @@ class AccountView extends React.Component {
</div>
</TabList>
<TabPanel>
<AccountForm {...this.props} />
<h2 className="form-container__divider">Social Login</h2>
<p className="account__social-text">
Link this account with your GitHub account to allow login from both.
</p>
<GithubButton buttonText="Login with GitHub" />
<SocialLoginPanel {...this.props} />
</TabPanel>
<TabPanel>
<APIKeyForm {...this.props} />
</TabPanel>
</Tabs>
}
{!accessTokensUIEnabled &&
<div>
<AccountForm {...this.props} />
<h2 className="form-container__divider">Social Login</h2>
<p className="account__social-text">
Link this account with your GitHub account to allow login from both.
</p>
<GithubButton buttonText="Login with GitHub" />
</div>
}
{ !accessTokensUIEnabled && <SocialLoginPanel {...this.props} /> }
</section>
</div>
);

1
client/styles/components/_account.scss
View file

@ -3,6 +3,7 @@
color: getThemifyVariable('primary-text-color');
background-color: getThemifyVariable('background-color');
}
height: 100%;
}
.account-settings {

43
client/styles/components/_github-button.scss
View file

@ -1,28 +1,4 @@
.github-button {
@include themify() {
@extend %button;
& path {
color: getThemifyVariable('primary-text-color');
}
&:hover path, &:active path {
fill: $white;
}
&:hover, &:active {
background-color: getThemifyVariable('secondary-text-color');
border-color: getThemifyVariable('secondary-text-color');
}
}
width: #{300 / $base-font-size}rem;
display: flex;
justify-content: center;
align-items: center;
}
.github-icon {
margin-right: #{10 / $base-font-size}rem;
}
.github-button,
.google-button {
@include themify() {
@extend %button;
@ -33,16 +9,23 @@
fill: $white;
}
&:hover, &:active {
background-color: getThemifyVariable('secondary-text-color');
border-color: getThemifyVariable('secondary-text-color');
color: getThemifyVariable('button-hover-color');
background-color: getThemifyVariable('button-background-hover-color');
border-color: getThemifyVariable('button-background-hover-color');
}
}
margin-top: #{4 / $base-font-size}rem;
width: #{300 / $base-font-size}rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: #{300 / $base-font-size}rem;
& + & {
margin-top: #{10 / $base-font-size}rem;
}
}
.github-icon {
margin-right: #{10 / $base-font-size}rem;
}
.google-icon {