New Design for About (#246)

* new design for about

* clean code

* reuse play.svg

client/images/p5-asterisk.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 28 28"><path fill="#ED225D" stroke="#ED225D" stroke-miterlimit="10" d="M16.909 10.259l8.533-2.576 1.676 5.156-8.498 2.899 5.275 7.48-4.447 3.225-5.553-7.348-5.408 7.155-4.318-3.289 5.275-7.223L.88 12.647l1.678-5.16 8.598 2.771V1.364h5.754v8.895z"/></svg>

client/images/p5js-square-logo.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="171.063px" height="171.06px" viewBox="0 0 191.063 191.06" enable-background="new 0 0 191.063 191.06"
+	 xml:space="preserve">
+<path fill="#ED225D" d="M58.197,108.205c-1.354-1.748-3.064-3.162-5.135-4.238c-2.07-1.074-4.496-1.611-7.281-1.611
+	c-2.627,0-4.977,0.557-7.045,1.672c-2.07,1.115-3.842,2.549-5.312,4.297c-1.475,1.752-2.588,3.742-3.344,5.971
+	c-0.758,2.229-1.133,4.459-1.133,6.686c0,2.229,0.375,4.438,1.133,6.625c0.756,2.191,1.869,4.16,3.344,5.912
+	c1.471,1.75,3.242,3.164,5.312,4.236c2.068,1.076,4.418,1.611,7.045,1.611c2.785,0,5.211-0.555,7.281-1.67s3.781-2.547,5.135-4.299
+	c1.352-1.75,2.367-3.74,3.045-5.969c0.676-2.229,1.014-4.457,1.014-6.686s-0.338-4.438-1.014-6.627
+	C60.564,111.927,59.549,109.957,58.197,108.205z"/>
+<path fill="#ED225D" d="M0,0v191.06h191.063V0H0z M74.852,132.621c-1.312,3.701-3.184,6.924-5.611,9.67s-5.371,4.938-8.834,6.566
+	c-3.463,1.631-7.385,2.447-11.76,2.447c-4.061,0-7.781-0.836-11.164-2.506c-3.385-1.672-5.99-3.939-7.82-6.807h-0.238v36.295H15.098
+	V92.328h13.729v7.998h0.359c0.715-1.113,1.65-2.248,2.805-3.402s2.568-2.188,4.24-3.105c1.67-0.912,3.561-1.67,5.67-2.268
+	c2.107-0.596,4.477-0.896,7.104-0.896c4.059,0,7.799,0.777,11.223,2.328c3.422,1.555,6.367,3.684,8.836,6.389
+	c2.465,2.707,4.375,5.891,5.73,9.551c1.352,3.662,2.029,7.602,2.029,11.82S76.166,128.919,74.852,132.621z M136.422,134.531
+	c-1.633,3.701-3.842,6.826-6.627,9.371c-2.787,2.549-6.051,4.5-9.791,5.852s-7.721,2.029-11.938,2.029
+	c-7.086,0-13.057-1.654-17.91-4.955c-3.34-2.271-6.043-5.133-8.139-8.553l10.367-9.715l0.16-0.059
+	c1.193,3.344,3.182,6.029,5.969,8.059c2.785,2.029,6.09,3.045,9.91,3.045c2.148,0,4.178-0.357,6.088-1.076
+	c1.912-0.715,3.582-1.748,5.016-3.104c1.432-1.352,2.566-3.045,3.402-5.072c0.836-2.029,1.254-4.318,1.254-6.865
+	c0-3.264-0.559-5.971-1.672-8.119c-1.115-2.148-2.566-3.881-4.357-5.193s-3.803-2.229-6.029-2.746
+	c-2.229-0.518-4.498-0.775-6.805-0.775c-1.594,0-3.283,0.119-5.074,0.357c-1.791,0.24-3.543,0.578-5.254,1.016
+	c-1.713,0.438-3.383,0.936-5.014,1.49c-1.633,0.559-3.086,1.156-4.357,1.791l1.432-46.201h48.113V78h-34.504l-0.834,18.268
+	c1.352-0.398,2.963-0.676,4.834-0.838c1.871-0.156,3.562-0.238,5.074-0.238c4.139,0,7.979,0.598,11.521,1.791
+	c3.541,1.193,6.627,2.926,9.252,5.193c2.629,2.27,4.676,5.057,6.148,8.357c1.473,3.305,2.209,7.104,2.209,11.402
+	C138.867,126.632,138.051,130.83,136.422,134.531z M173.81,87.076l-5.243,3.802l-5.449-7.211l-5.312,7.026l-5.107-3.89l5.171-7.08
+	l-8.392-3.027l1.981-6.095l8.419,2.714v-8.708h6.754v8.721l8.357-2.522l1.979,6.09l-8.333,2.843L173.81,87.076z"/>
+</svg>

client/modules/IDE/components/About.jsx

@@ -1,6 +1,9 @@
 import React, { PropTypes } from 'react';
 import InlineSVG from 'react-inlinesvg';
 const exitUrl = require('../../../images/exit.svg');
+const squareLogoUrl = require('../../../images/p5js-square-logo.svg');
+const playUrl = require('../../../images/play.svg');
+const asteriskUrl = require('../../../images/p5-asterisk.svg');
 import { browserHistory } from 'react-router';
 
 class About extends React.Component {
@@ -21,26 +24,90 @@ class About extends React.Component {
     return (
       <section className="about" ref="about" tabIndex="0">
         <header className="about__header">
-          <h2>About</h2>
+          <h2 className="about__header-title">Welcome</h2>
           <button className="about__exit-button" onClick={this.closeAboutModal}>
             <InlineSVG src={exitUrl} alt="Close About Overlay" />
           </button>
         </header>
-        <div className="about__copy">
+        <div className="about__content">
-          <p>
+          <div className="about__content-column">
-            The p5.js Web Editor is an open source project.
+            <InlineSVG className="about__logo" src={squareLogoUrl} alt="p5js Square Logo" />
+            <p className="about__play-video">
+              <a
+                href="http://hello.p5js.org/"
+                target="_blank"
+              >
+                <InlineSVG className="about__play-video-button" src={playUrl} alt="Play Hello Video" />
+              Play hello! video</a>
             </p>
-          <p>
+          </div>
+          <div className="about__content-column">
+            <h3 className="about__content-column-title">New to p5.js?</h3>
+            <p className="about__content-column-list">
+              <a
+                href="https://p5js.org/examples/"
+                target="_blank"
+              >
+                <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+              Examples</a>
+            </p>
+            <p className="about__content-column-list">
+              <a
+                href="https://p5js.org/tutorials/"
+                target="_blank"
+              >
+                <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+              Tutorials</a>
+            </p>
+          </div>
+          <div className="about__content-column">
+            <h3 className="about__content-column-title">Resources</h3>
+            <p className="about__content-column-list">
+              <a
+                href="https://p5js.org/libraries/"
+                target="_blank"
+              >
+                <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+              Libraries</a>
+            </p>
+            <p className="about__content-column-list">
+              <a
+                href="https://p5js.org/reference/"
+                target="_blank"
+              >
+                <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+              Reference</a>
+            </p>
+            <p className="about__content-column-list">
+              <a
+                href="https://forum.processing.org/two/"
+                target="_blank"
+              >
+                <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+              Forum</a>
+            </p>
+          </div>
+        </div>
+        <div className="about__footer">
+          <p className="about__footer-list">
             <a
               href="https://github.com/processing/p5.js-web-editor"
               target="_blank"
             >Contribute</a>
-            or
+          </p>
+          <p className="about__footer-list">
             <a
               href="https://github.com/processing/p5.js-web-editor/issues/new"
               target="_blank"
-            > report a bug.</a>
+            >Report a bug</a>
           </p>
+          <p className="about__footer-list">
+            <a
+              href="https://twitter.com/p5xjs?lang=en"
+              target="_blank"
+            >Twitter</a>
+          </p>
+          <button className="about__ok-button" onClick={this.closeAboutModal}>OK!</button>
         </div>
       </section>
     );

client/styles/abstracts/_variables.scss

@@ -39,6 +39,7 @@ $themes: (
     file-selected-color: #f4f4f4,
     input-text-color: #333,
     input-border-color: #b5b5b5,
+    about-list-text-color: #4a4a4a,
   ),
   dark: (
     logo-color: $p5js-pink,
@@ -72,6 +73,7 @@ $themes: (
     file-selected-color: #404040,
     input-text-color: #333,
     input-border-color: #b5b5b5,
+    about-list-text-color: #f4f4f4,
   ),
   contrast: (
     logo-color: $yellow,
@@ -104,6 +106,7 @@ $themes: (
     file-selected-color: #404040,
     input-text-color: #333,
     input-border-color: #b5b5b5,
+    about-list-text-color: #f4f4f4,
   )
 );
 
@@ -125,3 +128,6 @@ $form-navigation-options-color: #999999;
 
 $icon-color: #8b8b8b;
 $icon-hover-color: #333;
+
+$about-play-background-color: rgba(255, 255, 255, 0.7);
+$about-button-border-color: rgba(151, 151, 151, 0.7);

client/styles/components/_about.scss

@@ -3,12 +3,25 @@
   display: flex;
   flex-wrap: wrap;
   flex-flow: column;
+  width: #{720 / $base-font-size}rem;
+  outline: none;
+  & a {
+    color: $form-navigation-options-color;
+  }
 }
 
 .about__header {
   display: flex;
   justify-content: space-between;
-  padding: #{20 / $base-font-size}rem;
+  padding-top: #{12 / $base-font-size}rem;
+  padding-right: #{14 / $base-font-size}rem;
+  padding-bottom: #{20 / $base-font-size}rem;
+  padding-left: #{21 / $base-font-size}rem;
+}
+
+.about__header-title {
+  font-size: #{38 / $base-font-size}rem;
+  font-weight: normal;
 }
 
 .about__exit-button {
@@ -17,6 +30,98 @@
   }
 }
 
-.about__copy {
+.about__logo {
-  padding: #{20 / $base-font-size}rem;
+  @include themify() {
+    & path {
+      fill: getThemifyVariable('logo-color');
+    }
+  }
+}
+
+.about__play-video {
+  padding-top: #{9 / $base-font-size}rem;
+  padding-left: #{5 / $base-font-size}rem;
+}
+
+.about__play-video-button {
+  @include themify() {
+    @extend %toolbar-button;
+    width: #{32 / $base-font-size}rem;
+    height: #{32 / $base-font-size}rem;
+    line-height: #{34 / $base-font-size}rem;
+    border-radius: #{24 / $base-font-size}rem;
+    background-color: $about-play-background-color;
+    border: solid 0.5px $about-button-border-color;
+    &:hover {
+      border-color: getThemifyVariable('button-background-hover-color');
+    }
+  }
+  padding-left: 2px;
+  margin-right: #{9 / $base-font-size}rem;
+  svg {
+    width: #{11 / $base-font-size}rem;
+    height: #{11 / $base-font-size}rem;
+  }
+}
+
+.about__content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-top: #{17 / $base-font-size}rem;
+  padding-right: #{78 / $base-font-size}rem;
+  padding-bottom: #{20 / $base-font-size}rem;
+  padding-left: #{20 / $base-font-size}rem;
+}
+
+.about__content-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.about__content-column-title {
+  font-size: #{21 / $base-font-size}rem;
+  padding-left: #{17 / $base-font-size}rem;
+}
+
+.about__content-column-asterisk {
+  padding-right: #{5 / $base-font-size}rem;
+  @include themify() {
+    & path {
+      fill: getThemifyVariable('logo-color');
+      stroke: getThemifyVariable('logo-color');
+    }
+  }
+}
+
+.about__content-column-list {
+  @include themify() {
+    padding-top: #{10 / $base-font-size}rem;
+    font-size: #{16 / $base-font-size}rem;
+    & a {
+      color: getThemifyVariable(about-list-text-color);
+    }
+  }
+}
+
+.about__footer {
+  display: flex;
+  justify-content: space-between;
+  padding-top: #{18 / $base-font-size}rem;
+  padding-right: #{20 / $base-font-size}rem;
+  padding-bottom: #{21 / $base-font-size}rem;
+  padding-left: #{291 / $base-font-size}rem;
+}
+
+.about__footer-list {
+  padding-top: #{12 / $base-font-size}rem;
+}
+
+.about__ok-button {
+  @include themify() {
+    @extend %button;
+    padding: #{7 / $base-font-size}rem #{13 / $base-font-size}rem;
+    font-size: #{16 / $base-font-size}rem;
+    border: #{0.5 / $base-font-size}rem solid $toast-background-color;
+  }
 }