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

Merge branch 'feature/public-api' of https://github.com/processing/p5.js-web-editor into feature/public-api

Browse source
This commit is contained in:
Andrew Nicolaou 2019-06-12 11:30:20 +02:00
commit a7b465d446
29 changed files with 409 additions and 286 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
client/components/Nav.jsx
View file

@ -530,12 +530,16 @@ class Nav extends React.PureComponent {
</ul>
{ __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
<ul className="nav__items-right" title="user-menu">
<li className="nav__item">
<p>
<Link to="/login">Log in</Link>
<span className="nav__item-spacer">or</span>
<Link to="/signup">Sign up</Link>
</p>
<li>
<Link to="/login">
<span className="nav__item-header">Log in</span>
</Link>
</li>
<span className="nav__item-spacer">or</span>
<li>
<Link to="/signup">
<span className="nav__item-header">Sign up</span>
</Link>
</li>
</ul>}
{ __process.env.LOGIN_ENABLED && this.props.user.authenticated &&

40
client/components/NavBasic.jsx Normal file
View file

@ -0,0 +1,40 @@
import PropTypes from 'prop-types';
import React from 'react';
import InlineSVG from 'react-inlinesvg';
const logoUrl = require('../images/p5js-logo-small.svg');
const arrowUrl = require('../images/triangle-arrow-left.svg');
class NavBasic extends React.PureComponent {
static defaultProps = {
onBack: null
}
render() {
return (
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
<ul className="nav__items-left" title="project-menu">
<li className="nav__item-logo">
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
</li>
{ this.props.onBack && (
<li className="nav__item">
<button onClick={this.props.onBack}>
<span className="nav__item-header">
<InlineSVG src={arrowUrl} alt="Left arrow" />
</span>
Back to the editor
</button>
</li>)
}
</ul>
</nav>
);
}
}
NavBasic.propTypes = {
onBack: PropTypes.func,
};
export default NavBasic;

14
client/images/triangle-arrow-left.svg Normal file
View file

@ -0,0 +1,14 @@
<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Left Arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
<g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(270.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 665 B

26
client/modules/IDE/actions/project.js
View file

@ -215,32 +215,6 @@ export function autosaveProject() {
};
}
export function createProject() {
return (dispatch, getState) => {
const state = getState();
if (state.project.isSaving) {
Promise.resolve();
return;
}
dispatch(startSavingProject());
axios.post(`${ROOT_URL}/projects`, {}, { withCredentials: true })
.then((response) => {
dispatch(endSavingProject());
dispatch(setUnsavedChanges(false));
browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`);
const { hasChanges, synchedProject } = getSynchedProject(getState(), response.data);
if (hasChanges) {
dispatch(setUnsavedChanges(true));
}
dispatch(setNewProject(synchedProject));
})
.catch((response) => {
dispatch(endSavingProject());
dispatch(projectSaveFail(response.data));
});
};
}
export function exportProjectAsZip(projectId) {
const win = window.open(`${ROOT_URL}/projects/${projectId}/zip`, '_blank');
win.focus();

6
client/modules/IDE/components/Preferences.jsx
View file

@ -59,9 +59,9 @@ class Preferences extends React.Component {
</Helmet>
<Tabs>
<TabList>
<div className="preference__subheadings">
<Tab><h4 className="preference__subheading">General Settings</h4></Tab>
<Tab><h4 className="preference__subheading">Accessibility</h4></Tab>
<div className="tabs__titles">
<Tab><h4 className="tabs__title">General Settings</h4></Tab>
<Tab><h4 className="tabs__title">Accessibility</h4></Tab>
</div>
</TabList>
<TabPanel>

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

@ -12,9 +12,9 @@ import AccountForm from '../components/AccountForm';
import { validateSettings } from '../../../utils/reduxFormUtils';
import GithubButton from '../components/GithubButton';
import APIKeyForm from '../components/APIKeyForm';
import NavBasic from '../../../components/NavBasic';
const exitUrl = require('../../../images/exit.svg');
const logoUrl = require('../../../images/p5js-logo.svg');
class AccountView extends React.Component {
constructor(props) {
@ -24,7 +24,7 @@ class AccountView extends React.Component {
}
componentDidMount() {
document.body.className = 'light';
document.body.className = this.props.theme;
}
closeAccountPage() {
@ -37,43 +37,40 @@ class AccountView extends React.Component {
render() {
return (
<section className="form-container form-container--align-top form-container--align-left account-container">
<div className="user">
<Helmet>
<title>p5.js Web Editor | Account</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.closeAccountPage}>
<InlineSVG src={exitUrl} alt="Close Account Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">My Account</h2>
<Tabs className="account__tabs">
<TabList>
<div className="preference__subheadings">
<Tab><h4 className="preference__subheading">Account</h4></Tab>
<Tab><h4 className="preference__subheading">Access Tokens</h4></Tab>
</div>
</TabList>
<TabPanel>
<AccountForm {...this.props} />
<div className="account__social">
<NavBasic onBack={this.closeAccountPage} />
<section className="modal">
<div className="modal-content">
<div className="modal__header">
<h2 className="modal__title">My Account</h2>
</div>
<Tabs className="account__tabs">
<TabList>
<div className="tabs__titles">
<Tab><h4 className="tabs__title">Account</h4></Tab>
<Tab><h4 className="tabs__title">Access Tokens</h4></Tab>
</div>
</TabList>
<TabPanel>
<AccountForm {...this.props} />
<h2 className="form-container__divider">Social Login</h2>
<p className="account__social__context">
<p className="account__social-text">
Link this account with your GitHub account to allow login from both.
</p>
<GithubButton buttonText="Login with GitHub" />
</div>
</TabPanel>
<TabPanel>
<APIKeyForm {...this.props} />
</TabPanel>
</Tabs>
</div>
</section>
</TabPanel>
<TabPanel>
<APIKeyForm {...this.props} />
</TabPanel>
</Tabs>
</div>
</section>
</div>
);
}
}

32
client/modules/User/pages/EmailVerificationView.jsx
View file

@ -65,21 +65,23 @@ class EmailVerificationView extends React.Component {
}
return (
<div className="form-container">
<Helmet>
<title>p5.js Web Editor | Email Verification</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
<InlineSVG src={exitUrl} alt="Close Login Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Verify your email</h2>
{status}
<div className="user">
<div className="form-container">
<Helmet>
<title>p5.js Web Editor | Email Verification</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
<InlineSVG src={exitUrl} alt="Close Login Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Verify your email</h2>
{status}
</div>
</div>
</div>
);

54
client/modules/User/pages/LoginView.jsx
View file

@ -34,32 +34,34 @@ class LoginView extends React.Component {
return null;
}
return (
<div className="form-container">
<Helmet>
<title>p5.js Web Editor | Login</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
<InlineSVG src={exitUrl} alt="Close Login Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Log In</h2>
<LoginForm {...this.props} />
<h2 className="form-container__divider">Or</h2>
<GithubButton buttonText="Login with Github" />
<GoogleButton buttonText="Login with Google" />
<p className="form__navigation-options">
Don&apos;t have an account?&nbsp;
<Link className="form__signup-button" to="/signup">Sign Up</Link>
</p>
<p className="form__navigation-options">
Forgot your password?&nbsp;
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
</p>
<div className="user">
<div className="form-container">
<Helmet>
<title>p5.js Web Editor | Login</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
<InlineSVG src={exitUrl} alt="Close Login Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Log In</h2>
<LoginForm {...this.props} />
<h2 className="form-container__divider">Or</h2>
<GithubButton buttonText="Login with Github" />
<GoogleButton buttonText="Login with Google" />
<p className="form__navigation-options">
Don&apos;t have an account?&nbsp;
<Link className="form__signup-button" to="/signup">Sign Up</Link>
</p>
<p className="form__navigation-options">
Forgot your password?&nbsp;
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
</p>
</div>
</div>
</div>
);

41
client/modules/User/pages/NewPasswordView.jsx
View file

@ -31,27 +31,30 @@ class NewPasswordView extends React.Component {
const newPasswordClass = classNames({
'new-password': true,
'new-password--invalid': this.props.user.resetPasswordInvalid,
'form-container': true
'form-container': true,
'user': true
});
return (
<div className={newPasswordClass}>
<Helmet>
<title>p5.js Web Editor | New Password</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
<InlineSVG src={exitUrl} alt="Close NewPassword Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Set a New Password</h2>
<NewPasswordForm {...this.props} />
<p className="new-password__invalid">
The password reset token is invalid or has expired.
</p>
<div className="user">
<div className={newPasswordClass}>
<Helmet>
<title>p5.js Web Editor | New Password</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
<InlineSVG src={exitUrl} alt="Close NewPassword Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Set a New Password</h2>
<NewPasswordForm {...this.props} />
<p className="new-password__invalid">
The password reset token is invalid or has expired.
</p>
</div>
</div>
</div>
);

53
client/modules/User/pages/ResetPasswordView.jsx
View file

@ -30,33 +30,36 @@ class ResetPasswordView extends React.Component {
const resetPasswordClass = classNames({
'reset-password': true,
'reset-password--submitted': this.props.user.resetPasswordInitiate,
'form-container': true
'form-container': true,
'user': true
});
return (
<div className={resetPasswordClass}>
<Helmet>
<title>p5.js Web Editor | Reset Password</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
<InlineSVG src={exitUrl} alt="Close ResetPassword Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Reset Your Password</h2>
<ResetPasswordForm {...this.props} />
<p className="reset-password__submitted">
Your password reset email should arrive shortly. If you don&apos;t see it, check
in your spam folder as sometimes it can end up there.
</p>
<p className="form__navigation-options">
<Link className="form__login-button" to="/login">Log In</Link>
&nbsp;or&nbsp;
<Link className="form__signup-button" to="/signup">Sign Up</Link>
</p>
<div className="user">
<div className={resetPasswordClass}>
<Helmet>
<title>p5.js Web Editor | Reset Password</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
<InlineSVG src={exitUrl} alt="Close ResetPassword Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Reset Your Password</h2>
<ResetPasswordForm {...this.props} />
<p className="reset-password__submitted">
Your password reset email should arrive shortly. If you don&apos;t see it, check
in your spam folder as sometimes it can end up there.
</p>
<p className="form__navigation-options">
<Link className="form__login-button" to="/login">Log In</Link>
&nbsp;or&nbsp;
<Link className="form__signup-button" to="/signup">Sign Up</Link>
</p>
</div>
</div>
</div>
);

40
client/modules/User/pages/SignupView.jsx
View file

@ -34,25 +34,27 @@ class SignupView extends React.Component {
return null;
}
return (
<div className="form-container">
<Helmet>
<title>p5.js Web Editor | Signup</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.closeSignupPage}>
<InlineSVG src={exitUrl} alt="Close Signup Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Sign Up</h2>
<SignupForm {...this.props} />
<p className="form__navigation-options">
Already have an account?&nbsp;
<Link className="form__login-button" to="/login">Log In</Link>
</p>
<div className="user">
<div className="form-container">
<Helmet>
<title>p5.js Web Editor | Signup</title>
</Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.closeSignupPage}>
<InlineSVG src={exitUrl} alt="Close Signup Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Sign Up</h2>
<SignupForm {...this.props} />
<p className="form__navigation-options">
Already have an account?&nbsp;
<Link className="form__login-button" to="/login">Log In</Link>
</p>
</div>
</div>
</div>
);

21
client/styles/abstracts/_placeholders.scss
View file

@ -102,27 +102,6 @@
}
}
%forms-button {
background-color: $form-button-background-color;
color: $form-button-color;
cursor: pointer;
border: 2px solid $form-button-color;
border-radius: 2px;
padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
line-height: 1;
margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
&:enabled:hover {
border-color: $form-button-background-hover-color;
background-color: $form-button-background-hover-color;
color: $form-button-hover-color;
}
&:enabled:active {
border-color: $form-button-background-active-color;
background-color: $form-button-background-active-color;
color: $form-button-active-color;
}
}
%preferences-button {
@extend %toolbar-button;
@include themify() {

65
client/styles/abstracts/_variables.scss
View file

@ -9,15 +9,22 @@ $orange: #ffa500;
$red: #ff0000;
$lightsteelblue: #B0C4DE;
$dodgerblue: #1E90FF;
$primary-text-color: #333;
$icon-color: #8b8b8b;
$icon-hover-color: #333;
$p5-contrast-pink: #FFA9D9;
// Grays
$dark: #333;
$middleGray: #7d7d7d;
$middleLight: #a6a6a6;
// Abstracts
$primary-text-color: $dark;
$themes: (
light: (
logo-color: $p5js-pink,
primary-text-color: #333,
primary-text-color: $primary-text-color,
dropzone-text-color: #333,
modal-button-color: #333,
heading-text-color: #333,
@ -62,8 +69,22 @@ $themes: (
keyboard-shortcut-color: #757575,
nav-hover-color: $p5js-pink,
error-color: $p5js-pink,
table-row-stripe-color: #d6d6d6,
codefold-icon-open: url(../images/down-arrow.svg),
codefold-icon-closed: url(../images/right-arrow.svg)
codefold-icon-closed: url(../images/right-arrow.svg),
form-title-color: rgba(51, 51, 51, 0.87),
form-secondary-title-color: $middleGray,
form-input-text-color: $dark,
form-input-placeholder-text-color: $middleLight,
form-border-color: #b5b5b5,
form-button-background-color: $white,
form-button-color: #f10046,
form-button-background-hover-color: $p5js-pink,
form-button-background-active-color: #f10046,
form-button-hover-color: $white,
form-button-active-color: $white,
form-navigation-options-color: #999999
),
dark: (
logo-color: $p5js-pink,
@ -111,8 +132,20 @@ $themes: (
keyboard-shortcut-color: #B5B5B5,
nav-hover-color: $p5js-pink,
error-color: $p5js-pink,
table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/down-arrow-white.svg),
codefold-icon-closed: url(../images/right-arrow-white.svg)
codefold-icon-closed: url(../images/right-arrow-white.svg),
form-title-color: $white,
form-secondary-title-color: #b5b5b5,
form-border-color: #b5b5b5,
form-button-background-color: $black,
form-button-color: #f10046,
form-button-background-hover-color: $p5js-pink,
form-button-background-active-color: #f10046,
form-button-hover-color: $white,
form-button-active-color: $white,
form-navigation-options-color: #999999
),
contrast: (
logo-color: $yellow,
@ -159,8 +192,20 @@ $themes: (
keyboard-shortcut-color: #e1e1e1,
nav-hover-color: $yellow,
error-color: $p5-contrast-pink,
table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/down-arrow-white.svg),
codefold-icon-closed: url(../images/right-arrow-white.svg)
codefold-icon-closed: url(../images/right-arrow-white.svg),
form-title-color: $white,
form-secondary-title-color: #b5b5b5,
form-border-color: #b5b5b5,
form-button-background-color: $black,
form-button-color: #f10046,
form-button-background-hover-color: $p5-contrast-pink,
form-button-background-active-color: #f10046,
form-button-hover-color: $white,
form-button-active-color: $white,
form-navigation-options-color: #999999
)
);
@ -170,15 +215,5 @@ $console-error-color: #ff5f52;
$toast-background-color: #4A4A4A;
$toast-text-color: $white;
$form-title-color: rgba(51, 51, 51, 0.87);
$secondary-form-title-color: #b5b5b5;
$form-button-background-color: $white;
$form-button-color: #f10046;
$form-button-background-hover-color: $p5js-pink;
$form-button-background-active-color: #f10046;
$form-button-hover-color: $white;
$form-button-active-color: $white;
$form-navigation-options-color: #999999;
$about-play-background-color: rgba(255, 255, 255, 0.7);
$about-button-border-color: rgba(151, 151, 151, 0.7);

6
client/styles/base/_base.scss
View file

@ -42,12 +42,18 @@ input {
}
}
button[type="submit"],
input[type="submit"] {
@include themify() {
@extend %button;
}
}
button[type="submit"]:disabled,
input[type="submit"]:disabled {
cursor: not-allowed;
}
button {
@include themify() {
@extend %link;

4
client/styles/components/_about.scss
View file

@ -46,7 +46,9 @@
padding-left: #{20 / $base-font-size}rem;
width: #{720 / $base-font-size}rem;
& a {
color: $form-navigation-options-color;
@include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
}
}

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

@ -1,8 +1,7 @@
.account__tabs {
width: 500px;
padding-top: #{20 / $base-font-size}rem;
}
.account__social__context {
.account__social-text {
padding-bottom: #{15 / $base-font-size}rem;
}

4
client/styles/components/_api-key.scss
View file

@ -50,7 +50,9 @@
}
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
@include themify() {
background: getThemifyVariable('table-row-stripe-color');
}
}
}

2
client/styles/components/_asset-list.scss
View file

@ -35,7 +35,7 @@
&:nth-child(odd) {
@include themify() {
background: getThemifyVariable('console-header-background-color');
background: getThemifyVariable('table-row-stripe-color');
}
}

8
client/styles/components/_form-container.scss
View file

@ -35,7 +35,9 @@
.form-container__title {
font-weight: normal;
color: $form-title-color;
@include themify() {
color: getThemifyVariable('form-title-color')
}
}
.form-container__context {
@ -49,9 +51,9 @@
}
.form-container__logo-button {
@extend %none-themify-icon;
@include icon();
}
.form-container__exit-button {
@extend %none-themify-icon-with-hover;
@include icon();
}

39
client/styles/components/_forms.scss
View file

@ -5,7 +5,7 @@
font-size: #{9 / $base-font-size}rem;
text-align: left;
@include themify() {
color: getThemifyVariable('error-color')
color: getThemifyVariable('error-color');
}
}
@ -22,7 +22,9 @@
.form__navigation-options {
margin-top: #{16 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem;
color: $form-navigation-options-color;
@include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
}
.form__legend{
@ -31,11 +33,13 @@
}
.form__label {
color: $secondary-form-title-color;
font-size: #{12 / $base-font-size}rem;
margin-top: #{25 / $base-font-size}rem;
margin-bottom: #{7 / $base-font-size}rem;
display: block;
@include themify() {
color: getThemifyVariable('form-secondary-title-color');
}
}
.form__label--hidden {
@ -43,10 +47,19 @@
}
.form__input {
width: #{360 / $base-font-size}rem;
width: 100%;
min-width: #{360 / $base-font-size}rem;
height: #{40 / $base-font-size}rem;
color: $icon-hover-color;
border-color: $secondary-form-title-color;
font-size: #{16 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('form-input-text-color');
}
}
.form__input::placeholder {
@include themify() {
color: getThemifyVariable('form-input-placeholder-text-color');
}
}
.form__context {
@ -55,13 +68,17 @@
}
.form__status {
color: $form-navigation-options-color;
@include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
}
.form input[type="submit"] {
@extend %forms-button;
.form [type="submit"] {
@extend %button;
padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
}
.form input[type="submit"]:disabled {
cursor: not-allowed;
.form--inline [type="submit"] {
margin: 0 0 0 #{24 / $base-font-size}rem;
}

2
client/styles/components/_modal.scss
View file

@ -10,7 +10,7 @@
.modal-content {
@extend %modal;
min-height: #{150 / $base-font-size}rem;
width: #{400 / $base-font-size}rem;
width: #{700 / $base-font-size}rem;
padding: #{20 / $base-font-size}rem;
.modal--reduced & {
//min-height: #{150 / $base-font-size}rem;

14
client/styles/components/_nav.scss
View file

@ -51,10 +51,6 @@
padding-right: #{15 / $base-font-size}rem;
}
.nav__item-header {
margin-right: #{5 / $base-font-size}rem;
}
.nav__item:hover {
.nav__item-header {
@include themify() {
@ -69,6 +65,16 @@
}
}
.nav__item-header:hover {
@include themify() {
color: getThemifyVariable('nav-hover-color');
}
}
.nav__item-header-triangle {
margin-left: #{5 / $base-font-size}rem;
}
.nav__dropdown {
@include themify() {
background-color: map-get($theme-map, 'modal-background-color');

4
client/styles/components/_new-password.scss
View file

@ -10,6 +10,8 @@
display: block;
margin-top: #{40 / $base-font-size}rem;
margin-bottom: #{80 / $base-font-size}rem;
color: $form-navigation-options-color;
@include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
}
}

51
client/styles/components/_preferences.scss
View file

@ -60,15 +60,6 @@
text-align: left;
}
.preference__subheadings {
display: flex;
flex-wrap: wrap;
padding-bottom: #{0.1 / $base-font-size}rem;
@include themify() {
border-bottom: 1px solid getThemifyVariable('button-border-color');
}
}
.preference {
display: flex;
flex-wrap: wrap;
@ -129,48 +120,6 @@
width: #{44 / $base-font-size}rem;
}
.react-tabs__tab--selected {
@include themify() {
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
}
}
.react-tabs__tab--selected .preference__subheading {
@include themify() {
color: getThemifyVariable('primary-text-color');
}
}
.react-tabs__tab {
text-align: center;
color: black;
display: flex;
align-items: center;
border-bottom: #{4 / $base-font-size}rem solid transparent;
& + & {
margin-left: #{45 / $base-font-size}rem;
}
}
.preference__subheading {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover, &:focus{
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
&:focus {
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
}
font-size: #{12 / $base-font-size}rem;
height: #{20 / $base-font-size}rem;
width: 100%;
margin: 0;
padding: 0 #{5 /$base-font-size}rem;
}
.preference__vertical-list {
display: flex;
flex-direction: column;

4
client/styles/components/_reset-password.scss
View file

@ -4,7 +4,9 @@
text-align: left;
font-size: #{12 / $base-font-size}rem;
margin-top: #{10 / $base-font-size}rem;
color: $form-navigation-options-color;
@include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
padding-right: #{30 / $base-font-size}rem;
padding-left: #{39 / $base-font-size}rem;
.reset-password--submitted & {

2
client/styles/components/_sketch-list.scss
View file

@ -53,7 +53,7 @@
.sketches-table__row:nth-child(odd) {
@include themify() {
background: getThemifyVariable('console-header-background-color');
background: getThemifyVariable('table-row-stripe-color');
}
}

69
client/styles/components/_tabs.scss Normal file
View file

@ -0,0 +1,69 @@
.tabs__titles {
display: flex;
flex-wrap: wrap;
padding-bottom: #{0.1 / $base-font-size}rem;
@include themify() {
border-bottom: 1px solid getThemifyVariable('button-border-color');
}
}
.tabs__title {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover, &:focus{
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
&:focus {
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
}
font-size: #{12 / $base-font-size}rem;
height: #{20 / $base-font-size}rem;
width: 100%;
margin: 0;
padding: 0 #{5 /$base-font-size}rem;
}
.react-tabs__tab--selected {
@include themify() {
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
}
}
.react-tabs__tab--selected .tabs__title {
@include themify() {
color: getThemifyVariable('primary-text-color');
}
}
.react-tabs__tab {
text-align: center;
color: black;
display: flex;
align-items: center;
border-bottom: #{4 / $base-font-size}rem solid transparent;
& + & {
margin-left: #{45 / $base-font-size}rem;
}
}
.tabs__title {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover, &:focus{
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
&:focus {
color: getThemifyVariable('primary-text-color');
cursor: pointer;
}
}
font-size: #{12 / $base-font-size}rem;
height: #{20 / $base-font-size}rem;
width: 100%;
margin: 0;
padding: 0 #{5 /$base-font-size}rem;
}

10
client/styles/layout/_user.scss Normal file
View file

@ -0,0 +1,10 @@
.user {
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: wrap;
@include themify() {
color: getThemifyVariable('primary-text-color');
background-color: getThemifyVariable('background-color');
}
}

2
client/styles/main.scss
View file

@ -45,6 +45,8 @@
@import 'components/feedback';
@import 'components/loader';
@import 'components/uploader';
@import 'components/tabs';
@import 'layout/ide';
@import 'layout/fullscreen';
@import 'layout/user';