From a7c7022b53798d5e6c569d2b15bb72415609d8ac Mon Sep 17 00:00:00 2001 From: Jeroen Hermans Date: Wed, 14 Oct 2020 13:28:24 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20update:=20rebrand=20the=20applic?= =?UTF-8?q?ation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 +- src/components/Alert.module.scss | 27 ++-- src/components/Alert.tsx | 7 +- src/components/App/index.module.scss | 20 +-- src/components/Button.module.scss | 121 +++++++----------- src/components/Button.tsx | 15 +-- src/components/Footer.module.scss | 8 +- src/components/Footer.tsx | 10 +- src/components/Placeholder.module.scss | 9 +- src/components/Placeholder.tsx | 7 +- src/components/RestartSessionButton.tsx | 6 +- .../__snapshots__/Button.spec.tsx.snap | 2 +- .../__snapshots__/Footer.spec.tsx.snap | 2 +- .../__snapshots__/Placeholder.spec.tsx.snap | 4 +- .../RestartSessionButton.spec.tsx.snap | 2 +- src/containers/BackendStatus.tsx | 4 - src/images/datacamp-logo.svg | 20 ++- src/images/github-icon.svg | 9 +- src/styles/golden-layout/light.css | 16 +-- src/styles/variables.scss | 64 +++------ .../@datacamp/ui-backend-status/lib/style.css | 6 +- 21 files changed, 156 insertions(+), 213 deletions(-) diff --git a/README.md b/README.md index 252e9e2..f75f35a 100644 --- a/README.md +++ b/README.md @@ -7,10 +7,7 @@

-*This is the all-new DataCamp Light. To access the old -version, click [here](https://github.com/datacamp/datacamp-light/tree/d0c7ae4afc50b590bbf34bfffaba8fb1a0d929f5)* - -[![DataCamp Light banner](https://assets.datacamp.com/img/github/datacamp-light/bannerv3.1.png "Banner")](https://cdn.datacamp.com/dcl-react-prod/example.html) +[![DataCamp Light banner](https://assets.datacamp.com/img/github/datacamp-light/banner-new.png "Banner")](https://cdn.datacamp.com/dcl-react-prod/example.html)
Table of Contents @@ -21,7 +18,7 @@ version, click [here](https://github.com/datacamp/datacamp-light/tree/d0c7ae4afc - [Features](#features) - [How to run the app](#how-to-run-the-app) - * [Writing the HTML block](#writing-the-html-block) +- [Writing the HTML block](#writing-the-html-block) * [Pre-Exercise Code](#pre-exercise-code) * [Sample Code](#sample-code) * [Solution](#solution) @@ -95,7 +92,7 @@ including the exercise and script tag as a snippet.** -### Writing the HTML block +## Writing the HTML block After including the JavaScript library, you can start writing HTML blocks in the format below. These will be dynamically converted to exercises. @@ -141,7 +138,6 @@ height is `300px`) or set the size according to the amount of sample code lines: `data-height="auto"`. - ### Pre-Exercise Code Pre-exercise code is executed when the R/Python session is initialized. You can diff --git a/src/components/Alert.module.scss b/src/components/Alert.module.scss index 95a80d0..192d293 100644 --- a/src/components/Alert.module.scss +++ b/src/components/Alert.module.scss @@ -36,6 +36,7 @@ code { @include preventive-overrides; + background-color: rgba($white, 0.4); } } @@ -46,7 +47,7 @@ border: 0; -webkit-appearance: none; opacity: 1; - top: -4px; + margin-top: -4px; float: right; font-size: 24px; font-weight: bold; @@ -61,12 +62,12 @@ } } -@mixin color-alert ($bg) { +@mixin color-alert($bg, $textColor) { background-color: $bg; - color: rgba(0, 0, 0, 0.65); + color: $textColor; .close { - color: rgba(0, 0, 0, 0.2); + color: $textColor; } p, @@ -78,25 +79,13 @@ } .alert.danger { - @include color-alert($error-light); - - code { - background-color: rgba(255, 255, 255, 0.4); - } + @include color-alert($red-light, $white); } .alert.success { - @include color-alert($success-light); - - code { - background-color: $success-light; - } + @include color-alert($green-light, $navy); } .alert.info { - @include color-alert($primary-lighter); - - code { - background-color: $primary-extra-light; - } + @include color-alert($purple-light, $white); } diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx index d026321..316d3ce 100644 --- a/src/components/Alert.tsx +++ b/src/components/Alert.tsx @@ -56,7 +56,12 @@ export class Alert extends React.Component { if (closable) { closeButton = ( - ); diff --git a/src/components/App/index.module.scss b/src/components/App/index.module.scss index 786abe3..f101922 100644 --- a/src/components/App/index.module.scss +++ b/src/components/App/index.module.scss @@ -1,5 +1,10 @@ @import "global.scss"; -@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700'); + +@font-face { + src: url("https://waffles.datacamp.com/fonts/StudioFeixenSans-Regular.ttf") + format("truetype"); + font-family: "Studio-Feixen-Sans-Variable"; +} .app { /* stylelint-disable declaration-block-no-duplicate-properties */ @@ -45,7 +50,7 @@ mark { /* stylelint-disable declaration-block-no-duplicate-properties */ @include preventive-overrides; - background-color: $primary-extra-light; + background-color: $beige400; /* stylelint-enable */ border-radius: $code-border-radius; } @@ -108,7 +113,7 @@ box-shadow: none; display: flex; flex-direction: column; - outline: 1px solid #d5eaef !important; + outline: 1px solid darken($beige400, 5%) !important; :global .lm_maximise { display: none; @@ -140,7 +145,6 @@ left: 0; width: 100%; z-index: 200; - opacity: 0.9; } :global .datacamp-exercise { @@ -151,9 +155,8 @@ :global div[data-datacamp-exercise] { /* stylelint-disable declaration-block-no-duplicate-properties, declaration-block-no-shorthand-property-overrides */ @include preventive-overrides; - outline: 1px solid #d5eaef !important; - background: #fff url(https://cdn.datacamp.com/spinner.gif) no-repeat center - center !important; + outline: 1px solid darken($beige400, 5%) !important; + background: #fff !important; color: transparent; /* stylelint-enable */ margin: 0; @@ -172,7 +175,7 @@ a.githubLink { @include preventive-overrides; position: absolute; - right: 3px; + right: 16px; top: 0; z-index: 200; border: none; @@ -187,7 +190,6 @@ a.githubLink { display: block; height: 1em; line-height: 100%; - opacity: 0.4; margin: 0.35em 3px 0.3em 0; } } diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss index 3f0fb5d..ba0ac55 100644 --- a/src/components/Button.module.scss +++ b/src/components/Button.module.scss @@ -18,12 +18,28 @@ $btn-large-scale: 1.35; color $default-duration ease; text-align: center; cursor: pointer; + position: relative; &:hover, &:focus, &:active:focus { outline: none; - border: none; + } + + &:active { + transform: perspective(1px) scale(0.975); + } + + // waffles outline + &:focus:after { + content: ' '; + position: absolute; + top: 2px; + bottom: 2px; + left: 2px; + right: 2px; + border: 1px dashed $navy; + border-radius: 2px; } :global .fa { @@ -33,95 +49,54 @@ $btn-large-scale: 1.35; .button.disabled, .button:disabled { - background-color: $primary-lighter; - color: $text-invert; + background-color: rgba($green, 0.15); + color: $navy; &:hover { - background-color: $primary-lighter; - color: $text-invert; + background-color: rgba($green-light, 0.15); } } -@mixin color-button ($bg, $color, $hover) { +@mixin color-button($bg, $color, $hover) { background-color: $bg; color: $color; + border-style: solid; + border-width: 2px; + border-color: $bg; - &:hover, - &:focus { + &:hover { + border-style: solid; + border-width: 2px; + border-color: $hover; background-color: $hover; color: $color; } -} - -.primary { - @include color-button($accent, $accent-dark, $accent-light); -} - -.secondary { - @include color-button($primary, $text-invert, $primary-light); -} - -.secondary-light { - @include color-button(($primary-light), - $text-invert, - $primary-lighter); - &:hover { - color: $primary-dark; - } -} - -.tertiary { - @include color-button($text, $text-invert, $text-secondary); - - padding: 0.3125em 1.25em; - font-size: $default-font-size; -} - -.danger { - @include color-button($danger, $text-invert, $danger-light); -} - -.facebook { - @include color-button(rgba(57, 87, 154, 1), - $text-invert, - rgba(57, 87, 154, 0.8)); -} - -.twitter { - @include color-button(rgb(0, 172, 237), - $text-invert, - rgba(0, 172, 237, 0.8)); -} - -.linkedin { - @include color-button(rgba(0, 118, 183, 1), - $text-invert, - rgba(0, 118, 183, 0.8)); -} -.google-plus { - @include color-button(rgba(223, 74, 50, 1), - $text-invert, - rgba(223, 74, 50, 0.8)); -} - -.execute-code { - width: 137px; - &.attempts-counter { - width: 157px; + &:disabled, + &:disabled { + background-color: rgba($bg, 0.15); + color: rgba($color, 0.15); + border-color: rgba($bg, 0.15); + + &:hover { + background-color: rgba($bg, 0.15); + color: rgba($color, 0.15); + border-color: rgba($bg, 0.15); + } } } -.try-code.small { - margin-right: 0; - width: 100px; +.primary { + @include color-button($green, $navy, $green-light); } -.execute-code.disabled { - background-color: #d1d3d8; - - &:hover { - background-color: #d1d3d8; +.inverted { + @include color-button(transparent, $navy, rgba($navy-light, 0.15)); + border-color: $navy; + &:hover, + &:focus, + &:active:focus { + border-color: $navy; } } diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 91daa98..b9f395c 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -5,16 +5,7 @@ import * as styles from "./Button.module.scss"; type StyleKey = keyof typeof styles; interface IButtonProps extends React.Props )} {this.props.language !== "shell" && this.props.sct ? ( diff --git a/src/components/__snapshots__/Button.spec.tsx.snap b/src/components/__snapshots__/Button.spec.tsx.snap index bc0ebda..6e958d2 100644 --- a/src/components/__snapshots__/Button.spec.tsx.snap +++ b/src/components/__snapshots__/Button.spec.tsx.snap @@ -5,7 +5,7 @@ exports[`Button should match snapshot 1`] = ` className=" button -secondary-light +inverted " disabled={false} diff --git a/src/components/__snapshots__/Footer.spec.tsx.snap b/src/components/__snapshots__/Footer.spec.tsx.snap index e0051db..7d1e1e1 100644 --- a/src/components/__snapshots__/Footer.spec.tsx.snap +++ b/src/components/__snapshots__/Footer.spec.tsx.snap @@ -5,10 +5,10 @@ exports[`Footer should match snapshot 1`] = ` className="footer" > diff --git a/src/components/__snapshots__/Placeholder.spec.tsx.snap b/src/components/__snapshots__/Placeholder.spec.tsx.snap index 9f5d427..c4c539d 100644 --- a/src/components/__snapshots__/Placeholder.spec.tsx.snap +++ b/src/components/__snapshots__/Placeholder.spec.tsx.snap @@ -3,5 +3,7 @@ exports[`Placeholder should match snapshot 1`] = `
+> + +
`; diff --git a/src/components/__snapshots__/RestartSessionButton.spec.tsx.snap b/src/components/__snapshots__/RestartSessionButton.spec.tsx.snap index 3450bf5..88bf03d 100644 --- a/src/components/__snapshots__/RestartSessionButton.spec.tsx.snap +++ b/src/components/__snapshots__/RestartSessionButton.spec.tsx.snap @@ -3,10 +3,10 @@ exports[`RestartSessionButton should match snapshot 1`] = `