💄 update: rebrand the application

README.md

@@ -7,10 +7,7 @@
   <a href="https://codecov.io/gh/datacamp/datacamp-light"><img src="https://codecov.io/gh/datacamp/datacamp-light/branch/beta/graph/badge.svg" /></a>
 </p>
 
-*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)
 
 <details>
 <summary><strong>Table of Contents</strong></summary>
@@ -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

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);
 }

src/components/Alert.tsx

@@ -56,7 +56,12 @@ export class Alert extends React.Component<IAlertProps, IAlertState> {
 
     if (closable) {
       closeButton = (
-        <button type="button" className={styles.close} onClick={this.close}>
+        <button
+          type="button"
+          aria-label="Close mesage"
+          className={styles.close}
+          onClick={this.close}
+        >
           ×
         </button>
       );

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;
   }
 }

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;
   }
 }
 

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<Button> {
-  type?:
-    | "primary"
-    | "secondary"
-    | "secondary-light"
-    | "tertiary"
-    | "danger"
-    | "facebook"
-    | "twitter"
-    | "linkedin"
-    | "google-plus";
+  appearance?: "primary" | "inverted";
   size?: "small" | "extra-small" | "large";
   disabled?: boolean;
   className?: string;
@@ -24,7 +15,7 @@ interface IButtonProps extends React.Props<Button> {
 export class Button extends React.Component<IButtonProps> {
   public static defaultProps: Partial<IButtonProps> = {
     disabled: false,
-    type: "secondary-light",
+    appearance: "inverted",
   };
 
   button: HTMLElement;
@@ -38,7 +29,7 @@ export class Button extends React.Component<IButtonProps> {
     const classNames = outdent(`
           ${this.props.className || ""}
           ${styles.button}
-          ${styles[(this.props.type || "secondary-light") as StyleKey]}
+          ${styles[this.props.appearance as StyleKey]}
           ${this.props.size ? styles[this.props.size as StyleKey] : ""}
           ${this.props.disabled ? styles.disabled : ""}`);