From f4d49f49a5b6523fa6113d9ceee4b3f6018d20b1 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Sat, 30 Jul 2016 22:46:48 -0400
Subject: [PATCH 1/4] add aria-label tag

---
 client/modules/IDE/components/Console.js     | 10 ++++----
 client/modules/IDE/components/NewFileForm.js |  2 +-
 client/modules/IDE/components/Preferences.js | 25 ++++++--------------
 client/modules/IDE/components/Sidebar.js     | 15 +++++++-----
 client/modules/IDE/components/Toolbar.js     | 16 ++++---------
 client/styles/abstracts/_placeholders.scss   |  9 -------
 client/styles/components/_preferences.scss   |  4 ----
 client/styles/components/_toolbar.scss       |  3 ---
 8 files changed, 26 insertions(+), 58 deletions(-)

diff --git a/client/modules/IDE/components/Console.js b/client/modules/IDE/components/Console.js
index 5455f9d3..d5603a48 100644
--- a/client/modules/IDE/components/Console.js
+++ b/client/modules/IDE/components/Console.js
@@ -55,15 +55,15 @@ class Console extends React.Component {
     });
 
     return (
-      <div ref="console" className={consoleClass}>
+      <div ref="console" className={consoleClass} role="region" tabIndex="0">
         <div className="preview-console__header">
           <h2 className="preview-console__header-title">console</h2>
-          <a className="preview-console__collapse" onClick={this.props.collapseConsole} >
+          <button className="preview-console__collapse" onClick={this.props.collapseConsole} aria-label="collapse console">
             <InlineSVG src={downArrowUrl} />
-          </a>
-          <a className="preview-console__expand" onClick={this.props.expandConsole} >
+          </button>
+          <button className="preview-console__expand" onClick={this.props.expandConsole} aria-label="expand console">
             <InlineSVG src={upArrowUrl} />
-          </a>
+          </button>
         </div>
         <div ref="console_messages" className="preview-console__messages">
           {childrenToDisplay}
diff --git a/client/modules/IDE/components/NewFileForm.js b/client/modules/IDE/components/NewFileForm.js
index c46ca9e5..782c13a4 100644
--- a/client/modules/IDE/components/NewFileForm.js
+++ b/client/modules/IDE/components/NewFileForm.js
@@ -12,7 +12,7 @@ function NewFileForm(props) {
         placeholder="Name"
         {...name}
       />
-      <input type="submit" value="Add File" />
+      <input type="submit" value="Add File" aria-label="add file" />
     </form>
   );
 }
diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index a7ed6627..0827c0c7 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -27,6 +27,7 @@ function Preferences(props) {
           className="preferences__exit-button"
           onClick={props.closePreferences}
           title="exit"
+          aria-label="exit preferences"
         >
           <Isvg src={exitUrl} alt="Exit Preferences" />
         </button>
@@ -37,14 +38,11 @@ function Preferences(props) {
         <button
           className="preference__plus-button"
           onClick={props.decreaseFont}
-          id="preference-decrease-font-size"
+          aria-label="decrease font size"
         >
           <Isvg src={minusUrl} alt="Decrease Font Size" />
           <h6 className="preference__label">Decrease</h6>
         </button>
-        <label htmlFor="preference-decrease-font-size" className="preference__button-label">
-          Decrease Font Size
-        </label>
         <input
           className="preference__value"
           aria-live="status"
@@ -57,14 +55,11 @@ function Preferences(props) {
         <button
           className="preference__minus-button"
           onClick={props.increaseFont}
-          id="preference-increase-font-size"
+          aria-label="increase font size"
         >
           <Isvg src={plusUrl} alt="Increase Font Size" />
           <h6 className="preference__label">Increase</h6>
         </button>
-        <label htmlFor="preference-increase-font-size" className="preference__button-label">
-          Increase Font Size
-        </label>
       </div>
 
       <div className="preference">
@@ -72,14 +67,11 @@ function Preferences(props) {
         <button
           className="preference__plus-button"
           onClick={props.decreaseIndentation}
-          id="preference-decrease-indentation"
+          aria-label="decrease indentation amount"
         >
           <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
           <h6 className="preference__label">Decrease</h6>
         </button>
-        <label htmlFor="preference-decrease-indentation" className="preference__button-label">
-          Decrease Indentation Amount
-        </label>
         <input
           className="preference__value"
           aria-live="status"
@@ -92,17 +84,14 @@ function Preferences(props) {
         <button
           className="preference__minus-button"
           onClick={props.increaseIndentation}
-          id="preference-increase-indentation"
+          aria-label="increase indentation amount"
         >
           <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
           <h6 className="preference__label">Increase</h6>
         </button>
-        <label htmlFor="preference-increase-indentation" className="preference__button-label">
-          Increase Indentation Amount
-        </label>
         <div className="preference__vertical-list">
-          <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button>
-          <button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>
+          <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace} aria-label="indentation with space">Spaces</button>
+          <button className={preferencesTabOptionClass} onClick={props.indentWithTab} aria-label="indentation with tab">Tabs</button>
         </div>
       </div>
     </section>
diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index 78119fc5..b680364a 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -15,24 +15,27 @@ function Sidebar(props) {
       <div className="sidebar__header">
         <h3 className="sidebar__title">Sketch Files</h3>
         <div className="sidebar__icons">
-          <a
+          <button
+            aria-label="add file"
             className="sidebar__add"
             onClick={props.newFile}
           >
             +
-          </a>
-          <a
+          </button>
+          <button
+            aria-label="collapse file navigation"
             className="sidebar__contract"
             onClick={props.collapseSidebar}
           >
             <InlineSVG src={leftArrowUrl} />
-          </a>
-          <a
+          </button>
+          <button
+            aria-label="expand file navigation"
             className="sidebar__expand"
             onClick={props.expandSidebar}
           >
             <InlineSVG src={rightArrowUrl} />
-          </a>
+          </button>
         </div>
       </div>
       <ul className="sidebar__file-list">
diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js
index da289b1b..660cc82a 100644
--- a/client/modules/IDE/components/Toolbar.js
+++ b/client/modules/IDE/components/Toolbar.js
@@ -23,18 +23,13 @@ function Toolbar(props) {
   return (
     <div className="toolbar">
       <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
-      <button className={playButtonClass} onClick={props.startSketch} id="play-button">
+      <button className={playButtonClass} onClick={props.startSketch} aria-label="play sketch">
         <InlineSVG src={playUrl} alt="Play Sketch" />
       </button>
-      <label htmlFor="play-button" className="toolbar__button-label">
-        play
-      </label>
-      <button className={stopButtonClass} onClick={props.stopSketch} id="stop-button">
+
+      <button className={stopButtonClass} onClick={props.stopSketch} aria-label="stop sketch">
         <InlineSVG src={stopUrl} alt="Stop Sketch" />
       </button>
-      <label htmlFor="stop-button" className="toolbar__button-label">
-        stop
-      </label>
       <div className="toolbar__project-name-container">
         <span
           className="toolbar__project-name"
@@ -56,13 +51,10 @@ function Toolbar(props) {
       <button
         className={preferencesButtonClass}
         onClick={props.openPreferences}
-        id="preferences-button"
+        aria-label="open preferences"
       >
         <InlineSVG src={preferencesUrl} alt="Show Preferences" />
       </button>
-      <label htmlFor="preferences-button" className="toolbar__button-label">
-        preferences
-      </label>
     </div>
   );
 }
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 785640a6..9675bb59 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -108,15 +108,6 @@
   }
 }
 
-%hidden-label {
-	position:absolute;
-	left:-10000px;
-	top:auto;
-	width:1px;
-	height:1px;
-	overflow:hidden;
-}
-
 %modal {
 	background-color: $light-modal-background-color;
 	border: 1px solid $light-modal-border-color;
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 4ceb2a9b..fd6a3cf6 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -79,7 +79,3 @@
 		@extend %preference-option--selected;
 	}
 }
-
-.preference__button-label {
-	@extend %hidden-label
-}
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index cd62e28f..3716c907 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -55,9 +55,6 @@
 	}
 }
 
-.toolbar__button-label {
-	@extend %hidden-label
-}
 .toolbar__project-owner {
 	margin-left: #{5 / $base-font-size}rem;
 }

From ca9afab2467c9c40038b2d6155888d87e8a21671 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Sun, 31 Jul 2016 21:38:46 -0400
Subject: [PATCH 2/4] add aria-labels

---
 client/modules/User/components/LoginForm.js  |  8 +++-----
 client/modules/User/components/SignupForm.js | 19 +++++--------------
 client/styles/components/_console.scss       |  4 +++-
 client/styles/components/_login.scss         |  7 +------
 client/styles/components/_sidebar.scss       |  1 +
 client/styles/components/_signup.scss        |  7 -------
 6 files changed, 13 insertions(+), 33 deletions(-)

diff --git a/client/modules/User/components/LoginForm.js b/client/modules/User/components/LoginForm.js
index c7ae778b..8ba3193b 100644
--- a/client/modules/User/components/LoginForm.js
+++ b/client/modules/User/components/LoginForm.js
@@ -5,26 +5,24 @@ function LoginForm(props) {
   return (
     <form className="login-form" onSubmit={handleSubmit(props.loginUser.bind(this))}>
       <p className="login-form__field">
-        <label className="login-form__email-label" htmlFor="email">Email:</label>
         <input
           className="login-form__email-input"
-          id="email"
+          aria-label="email"
           type="text"
           placeholder="Email"
           {...email}
         />
       </p>
       <p className="login-form__field">
-        <label className="signup-form__password-label" htmlFor="password">Password:</label>
         <input
           className="signup-form__password-input"
-          id="password"
+          aria-label="password"
           type="password"
           placeholder="Password"
           {...password}
         />
       </p>
-      <input type="submit" value="Login" />
+      <input type="submit" value="Login" aria-label="login" />
     </form>
   );
 }
diff --git a/client/modules/User/components/SignupForm.js b/client/modules/User/components/SignupForm.js
index abd6e3a5..c9872754 100644
--- a/client/modules/User/components/SignupForm.js
+++ b/client/modules/User/components/SignupForm.js
@@ -5,51 +5,42 @@ function SignupForm(props) {
   return (
     <form className="signup-form" onSubmit={handleSubmit(props.signUpUser.bind(this))}>
       <p className="signup-form__field">
-        <label className="signup-form__username-label" htmlFor="username">Username:</label>
         <input
           className="signup-form__username-input"
-          id="username"
+          aria-label="username"
           type="text"
           placeholder="Username"
           {...username}
         />
       </p>
       <p className="signup-form__field">
-        <label className="signup-form__email-label" htmlFor="email">Email:</label>
         <input
           className="signup-form__email-input"
-          id="email"
+          aria-label="email"
           type="text"
           placeholder="Email"
           {...email}
         />
       </p>
       <p className="signup-form__field">
-        <label className="signup-form__password-label" htmlFor="password">Password:</label>
         <input
           className="signup-form__password-input"
-          id="password"
+          aria-label="password"
           type="password"
           placeholder="Password"
           {...password}
         />
       </p>
       <p className="signup-form__field">
-        <label
-          className="signup-form__confirm-password-label"
-          htmlFor="confirm-password"
-        >
-          Confirm Password:
-        </label>
         <input
           className="signup-form__confirm-password-input"
-          id="confirm-password"
           type="password"
           placeholder="Confirm Password"
+          aria-label="confirm password"
           {...confirmPassword}
         />
       </p>
-      <input type="submit" value="Sign Up" />
+      <input type="submit" value="Sign Up" aria-label="sign up" />
     </form>
   );
 }
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index 6ca9b1fc..2b7b2151 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -54,14 +54,16 @@
 }
 
 .preview-console__collapse {
+	@extend %icon;
 	.preview-console--collapsed & {
 		display: none;
 	}
 }
 
 .preview-console__expand {
+	@extend %icon;
 	display: none;
 	.preview-console--collapsed & {
 		display: inline-block;
 	}
-}
\ No newline at end of file
+}
diff --git a/client/styles/components/_login.scss b/client/styles/components/_login.scss
index 35ffef8b..44871382 100644
--- a/client/styles/components/_login.scss
+++ b/client/styles/components/_login.scss
@@ -6,12 +6,7 @@
 	justify-content: center;
 }
 
-.login-form__email-label, 
-.login-form__password-label {
-	display: none;
-}
-
-.login-form__email-input, 
+.login-form__email-input,
 .login-form__password-input {
 	width: #{300 / $base-font-size}rem;
 }
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 7919678f..5dcd5725 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -16,6 +16,7 @@
 }
 
 .sidebar__add {
+  @extend %icon;
   cursor: pointer;
   height: #{26 / $base-font-size}rem;
   margin-right: #{16 / $base-font-size}rem;
diff --git a/client/styles/components/_signup.scss b/client/styles/components/_signup.scss
index 203bc729..6aee6e75 100644
--- a/client/styles/components/_signup.scss
+++ b/client/styles/components/_signup.scss
@@ -6,13 +6,6 @@
 	justify-content: center;
 }
 
-.signup-form__username-label,
-.signup-form__email-label,
-.signup-form__password-label,
-.signup-form__confirm-password-label {
-	display: none;
-}
-
 .signup-form__username-input,
 .signup-form__email-input,
 .signup-form__password-input,

From 0bc2956e58d7dc4de7d9d4805600321ab107cb13 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Sun, 31 Jul 2016 21:41:28 -0400
Subject: [PATCH 3/4] add title to console

---
 client/modules/IDE/components/Console.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/Console.js b/client/modules/IDE/components/Console.js
index d5603a48..d201f557 100644
--- a/client/modules/IDE/components/Console.js
+++ b/client/modules/IDE/components/Console.js
@@ -55,7 +55,7 @@ class Console extends React.Component {
     });
 
     return (
-      <div ref="console" className={consoleClass} role="region" tabIndex="0">
+      <div ref="console" className={consoleClass} role="region" tabIndex="0" title="console">
         <div className="preview-console__header">
           <h2 className="preview-console__header-title">console</h2>
           <button className="preview-console__collapse" onClick={this.props.collapseConsole} aria-label="collapse console">

From d69c4c8ad407142031a2f1fbca25f97833670d77 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Sun, 31 Jul 2016 21:57:55 -0400
Subject: [PATCH 4/4] remove svg desc

---
 client/images/down-arrow.svg  | 4 ++--
 client/images/exit.svg        | 2 +-
 client/images/left-arrow.svg  | 2 +-
 client/images/minus.svg       | 2 +-
 client/images/p5js-logo.svg   | 2 +-
 client/images/play.svg        | 2 +-
 client/images/plus-icon.svg   | 2 +-
 client/images/plus.svg        | 2 +-
 client/images/preferences.svg | 2 +-
 client/images/right-arrow.svg | 2 +-
 client/images/stop.svg        | 2 +-
 client/images/up-arrow.svg    | 2 +-
 12 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/client/images/down-arrow.svg b/client/images/down-arrow.svg
index 03019675..8ea28980 100644
--- a/client/images/down-arrow.svg
+++ b/client/images/down-arrow.svg
@@ -2,7 +2,7 @@
 <svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
     <title>arrow shape copy 2</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
         <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#333333">
@@ -11,4 +11,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/client/images/exit.svg b/client/images/exit.svg
index c4b6bc27..dd19e998 100644
--- a/client/images/exit.svg
+++ b/client/images/exit.svg
@@ -2,7 +2,7 @@
 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>Exit</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="exit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Artboard-1" fill="#D8D8D8">
diff --git a/client/images/left-arrow.svg b/client/images/left-arrow.svg
index 22f17dcb..ea692ff9 100644
--- a/client/images/left-arrow.svg
+++ b/client/images/left-arrow.svg
@@ -2,7 +2,7 @@
 <svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>arrow shape copy</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
         <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-529.000000, -1165.000000)" fill="#333333">
diff --git a/client/images/minus.svg b/client/images/minus.svg
index 95f8494b..c6a4b1ba 100644
--- a/client/images/minus.svg
+++ b/client/images/minus.svg
@@ -2,7 +2,7 @@
 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>Decrease Value</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="Decrease value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="16" transform="translate(0.000000, -6.000000)" fill="#D8D8D8">
diff --git a/client/images/p5js-logo.svg b/client/images/p5js-logo.svg
index 654bdc09..e35b924c 100644
--- a/client/images/p5js-logo.svg
+++ b/client/images/p5js-logo.svg
@@ -2,7 +2,7 @@
 <svg width="76px" height="35px" viewBox="0 0 76 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
     <title>p5js-rect</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Desktop-IDE-light" transform="translate(-92.000000, -60.000000)" fill="#EC245E">
diff --git a/client/images/play.svg b/client/images/play.svg
index 2c7648e8..98d2ae1d 100644
--- a/client/images/play.svg
+++ b/client/images/play.svg
@@ -2,7 +2,7 @@
 <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
     <title>play</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Desktop-IDE-light" transform="translate(-218.000000, -69.000000)" fill="#ED225D">
diff --git a/client/images/plus-icon.svg b/client/images/plus-icon.svg
index 0b9347f2..502e2858 100644
--- a/client/images/plus-icon.svg
+++ b/client/images/plus-icon.svg
@@ -2,7 +2,7 @@
 <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>close shape</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
         <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-558.000000, -1166.000000)" fill="#333333">
diff --git a/client/images/plus.svg b/client/images/plus.svg
index 449abd95..5629954a 100644
--- a/client/images/plus.svg
+++ b/client/images/plus.svg
@@ -2,7 +2,7 @@
 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>Increase Value</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="Increase Value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="16" fill="#D8D8D8">
diff --git a/client/images/preferences.svg b/client/images/preferences.svg
index 86a7a614..7d0393da 100644
--- a/client/images/preferences.svg
+++ b/client/images/preferences.svg
@@ -2,7 +2,7 @@
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>preferences</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs>
         <path d="M14.6822397,16.2117311 L15.1198278,19.0213068 C14.3844186,19.4395702 13.5928664,19.770504 12.7592794,20 L11.0818617,17.703677 C10.7282919,17.7528772 10.367116,17.7783101 10,17.7783101 C9.63288395,17.7783101 9.2717081,17.7528772 8.91813825,17.703677 L7.24072063,20 C6.40713364,19.770504 5.6155814,19.4395702 4.88017224,19.0213068 L5.31776031,16.2117311 C4.73977887,15.7753775 4.22462249,15.2602211 3.78826886,14.6822397 L0.978693166,15.1198278 C0.560429839,14.3844186 0.22949601,13.5928664 -2.84217094e-14,12.7592794 L2.29632299,11.0818617 C2.24712285,10.7282919 2.22168987,10.367116 2.22168987,10 C2.22168987,9.63288395 2.24712285,9.2717081 2.29632299,8.91813825 L-8.12791077e-15,7.24072063 C0.22949601,6.40713364 0.560429839,5.6155814 0.978693166,4.88017224 L3.78826886,5.31776031 C4.22462249,4.73977887 4.73977887,4.22462249 5.31776031,3.78826886 L4.88017224,0.978693166 C5.6155814,0.560429839 6.40713364,0.22949601 7.24072063,0 L8.91813825,2.29632299 C9.2717081,2.24712285 9.63288395,2.22168987 10,2.22168987 C10.367116,2.22168987 10.7282919,2.24712285 11.0818617,2.29632299 L12.7592794,1.98620157e-14 C13.5928664,0.22949601 14.3844186,0.560429839 15.1198278,0.978693166 L14.6822397,3.78826886 C15.2602211,4.22462249 15.7753775,4.73977887 16.2117311,5.31776031 L19.0213068,4.88017224 C19.4395702,5.6155814 19.770504,6.40713364 20,7.24072063 L17.703677,8.91813825 C17.7528772,9.2717081 17.7783101,9.63288395 17.7783101,10 C17.7783101,10.367116 17.7528772,10.7282919 17.703677,11.0818617 L20,12.7592794 C19.770504,13.5928664 19.4395702,14.3844186 19.0213068,15.1198278 L16.2117311,14.6822397 C15.7753775,15.2602211 15.2602211,15.7753775 14.6822397,16.2117311 L14.6822397,16.2117311 Z M10,13.8891551 C12.147921,13.8891551 13.8891551,12.147921 13.8891551,10 C13.8891551,7.85207897 12.147921,6.11084493 10,6.11084493 C7.85207897,6.11084493 6.11084493,7.85207897 6.11084493,10 C6.11084493,12.147921 7.85207897,13.8891551 10,13.8891551 Z" id="path-1"></path>
     </defs>
diff --git a/client/images/right-arrow.svg b/client/images/right-arrow.svg
index 6d62c369..ba720dde 100644
--- a/client/images/right-arrow.svg
+++ b/client/images/right-arrow.svg
@@ -2,7 +2,7 @@
 <svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>arrow shape copy</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
         <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-496.000000, -1165.000000)" fill="#333333">
diff --git a/client/images/stop.svg b/client/images/stop.svg
index 4ca0b398..c97f4b8a 100644
--- a/client/images/stop.svg
+++ b/client/images/stop.svg
@@ -2,7 +2,7 @@
 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
     <title>stop</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Desktop-IDE-light" transform="translate(-280.000000, -69.000000)" fill="#ED225D">
diff --git a/client/images/up-arrow.svg b/client/images/up-arrow.svg
index 7d78ff1f..1545520a 100644
--- a/client/images/up-arrow.svg
+++ b/client/images/up-arrow.svg
@@ -2,7 +2,7 @@
 <svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
     <title>arrow shape copy</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
         <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#333333">