adjustments: moving away from the blue briefly

This commit is contained in:
jimmylee 2020-09-05 20:59:45 -07:00
parent 3be8b261a6
commit f512647dfa
6 changed files with 30 additions and 15 deletions

View File

@ -20,7 +20,8 @@ export const system = {
darkGray: "#b2b2b2",
black: "#1b1f23",
pitchBlack: "#0c0c0c",
brand: "#0061BB",
brand: "#807d78",
blue: "#0061BB",
link: "#2935ff",
green: "#28a745",
yellow: " #FFC940",

View File

@ -46,16 +46,16 @@ const STYLES_BUTTON_PRIMARY = css`
${STYLES_BUTTON}
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
background-color: ${Constants.system.brand};
background-color: ${Constants.system.slate};
color: ${Constants.system.white};
:hover {
background-color: #204a8a;
background-color: #313540;
}
:focus {
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.3);
background-color: ${Constants.system.brand};
background-color: #313540;
outline: 0;
border: 0;
}
@ -65,16 +65,16 @@ const STYLES_BUTTON_PRIMARY_FULL = css`
${STYLES_BUTTON_FULL}
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
background-color: ${Constants.system.brand};
background-color: ${Constants.system.slate};
color: ${Constants.system.white};
:hover {
background-color: #204a8a;
background-color: #313540;
}
:focus {
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.3);
background-color: ${Constants.system.brand};
background-color: #313540;
outline: 0;
border: 0;
}

View File

@ -51,9 +51,8 @@ export class Toggle extends React.Component {
css={STYLES_TOGGLE}
onClick={this._handleChange}
style={{
backgroundColor: this.props.active ? Constants.system.brand : null,
}}
>
backgroundColor: this.props.active ? Constants.system.yellow : null,
}}>
<figure
css={STYLES_DIAL}
style={{ transform: this.props.active ? `translateX(40px)` : null }}

View File

@ -8,17 +8,16 @@ import { css } from "@emotion/react";
const LINK_STYLES = `
font-family: ${Constants.font.text};
font-weight: 400;
text-decoration: none;
color: #6a737d;
color: ${Constants.system.moonstone};
cursor: pointer;
transition: 200ms ease color;
:visited {
color: #959da5;
color: ${Constants.system.moonstone};
}
:hover {
color: #959da5;
color: ${Constants.system.slate};
}
`;

View File

@ -28,6 +28,22 @@ const STYLES_DESCRIPTION_GROUP_DESCRIPTION = css`
width: 100%;
white-space: pre-wrap;
overflow-wrap: break-word;
a {
font-family: ${Constants.font.text};
font-weight: 400;
color: ${Constants.system.moonstone};
cursor: pointer;
transition: 200ms ease color;
:visited {
color: ${Constants.system.moonstone};
}
:hover {
color: ${Constants.system.slate};
}
}
`;
export const DescriptionGroup = (props) => {

View File

@ -177,7 +177,7 @@ export default class IndexPage extends React.Component {
{this.state.available ? (
<div css={STYLES_CARD_ACTIONS}>
<System.ButtonPrimaryFull onClick={() => window.open("/_")}>
Sign in to Slate Alpha
Use Slate (Alpha)
</System.ButtonPrimaryFull>
</div>
) : (