From cbde76d46264d4314e33194f5caa2f393437d89b Mon Sep 17 00:00:00 2001
From: praveen kumar a x <xav.axp@gmail.com>
Date: Sat, 14 Mar 2026 02:52:38 +0530
Subject: [PATCH 1/2] Polish UI: theming, layout, accessibility

---
 create.html | 112 +++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 94 insertions(+), 18 deletions(-)

diff --git a/create.html b/create.html
index 9b2d064..9ba79b9 100644
--- a/create.html
+++ b/create.html
@@ -18,6 +18,9 @@
 
   <title>WoofJS</title>
   <link rel="shortcut icon" type="image/png" href="./favicon.png"/>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
 
 
   <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@@ -77,11 +80,27 @@
   <script src="https://rawcdn.githack.com/beautify-web/js-beautify/1b52eb1f90daaefa6ff0fa7736f97fbfc58093c1/js/lib/beautify.js"></script>
   <style>
 
+    :root {
+      --bg-0: #f4f8ff;
+      --bg-1: #e8f1ff;
+      --ink: #16314a;
+      --nav-start: #1f6fb2;
+      --nav-end: #2ea9a1;
+      --panel: #ffffff;
+      --line: #c6d8ee;
+      --preview: #3f6ecf;
+      --docs: #6a58c0;
+      --tutorials: #9648b3;
+      --code: #1f87ba;
+      --shadow: 0 10px 26px rgba(21, 57, 95, 0.16);
+    }
+
     html, body {
       margin: 0;
       padding: 0;
       height: 100%;
       width: 100%;
+      background: radial-gradient(circle at 0% 0%, var(--bg-1) 0%, var(--bg-0) 45%, #f9fcff 100%);
     }
 
     #page {
@@ -91,11 +110,12 @@
       align-items: stretch;
       align-content: stretch;
       height: 100%;
+      overflow: hidden;
     }
 
     body {
-      background-color: #fff;
-      font-family: sans-serif;
+      font-family: "Space Grotesk", "Trebuchet MS", "Segoe UI", sans-serif;
+      color: var(--ink);
     }
 
     h1 {
@@ -130,7 +150,7 @@
     }
 
     #navbar {
-      background-color: #6DC0F2;
+      background: linear-gradient(110deg, var(--nav-start), var(--nav-end));
       position: absolute;
       width: 100%;
       z-index: 1;
@@ -139,6 +159,8 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+      box-shadow: var(--shadow);
     }
 
     #clean-up {
@@ -153,11 +175,31 @@
       color: white;
     }
 
+    #navbar .btn,
+    #code-status {
+      border-radius: 8px;
+      letter-spacing: 0.15px;
+      transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
+    }
+
+    #navbar .btn:hover,
+    #code-status:hover {
+      transform: translateY(-1px);
+      filter: brightness(1.02);
+      box-shadow: 0 4px 12px rgba(15, 35, 58, 0.22);
+    }
+
+    #navbar img {
+      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
+    }
+
     #container {
       width: 100%;
       display: flex;
       flex-direction: row;
       margin-top: 55px;
+      height: calc(100% - 55px);
+      min-height: 0;
     }
 
     #previewbar, #docsbar, #projectbar, #codebar {
@@ -173,11 +215,16 @@
       flex-flow: column wrap;
       resize: none;
       flex: 10 1 25%;
+      min-width: 0;
+      min-height: 0;
+      background-color: var(--panel);
+      border-right: 1px solid var(--line);
     }
 
     #code {
       word-wrap: break-word;
       width: 25%;
+      border-right: none;
     }
 
     #PreviewNav, #DocsNav, #ProjectsNav, #CodeNav {
@@ -187,22 +234,26 @@
       font-size: 1.1em;
       display: flex;
       justify-content: space-between;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: 0.25px;
     }
 
     #previewbar, #PreviewNav {
-      background-color:#4875D1;
+      background-color: var(--preview);
     }
 
     #docsbar, #DocsNav {
-      background-color: #7F68D5;
+      background-color: var(--docs);
     }
 
     #projectbar, #ProjectsNav {
-      background-color: #AD5FC2;
+      background-color: var(--tutorials);
     }
 
     #codebar, #CodeNav {
-      background-color: #49A6DF;
+      background-color: var(--code);
     }
 
     @media all and (max-width: 600px) {
@@ -211,6 +262,27 @@
       }
     }
 
+    @media all and (max-width: 1024px) {
+      #container {
+        flex-direction: column;
+      }
+
+      #output, #docs, #projects, #code {
+        width: 100%;
+        flex: 1 1 auto;
+        border-right: none;
+        border-bottom: 1px solid var(--line);
+      }
+
+      #code {
+        border-bottom: none;
+      }
+
+      #previewbar, #docsbar, #projectbar, #codebar {
+        display: none !important;
+      }
+    }
+
     #pop {
       cursor: pointer;
     }
@@ -237,7 +309,10 @@
     }
 
     kbd{
-      background-color: #ababab;
+      background-color: rgba(255, 255, 255, 0.2);
+      border: 1px solid rgba(255, 255, 255, 0.5);
+      color: #fff;
+      font-size: 11px;
     }
 
     .caret-right {
@@ -247,12 +322,13 @@
     }
     
     #code-status {
-      background-color: #4390bf;
+      background-color: rgba(20, 47, 70, 0.35);
       padding: 0px 4px;
       margin-top: 1px;
       margin-bottom: 4px;
       font-size: 12px;
       border-radius: 3px;
+      color: #fff;
     }
 
     #error-block {
@@ -362,7 +438,7 @@
         </ul>
       </div>
 
-      <img  style= "width:160px; height: 40px;" src="./images/logowhite.png">
+      <img style="width:160px; height: 40px;" src="./images/logowhite.png" alt="WoofJS logo">
       <span style="margin:8px" id="save">
 	<span id="saveDescription" v-bind:class="{ redText: ((status == 'DIRTY') && !getID()), whiteText: ((status != 'DIRTY') || getID())}">{{saveMessage}}</span>
         <div class="dropdown" style="display:inline;">
@@ -386,8 +462,8 @@
             <li class='disabled'><a @click="cleanCode()"  :style="{display: canClean ? 'none' : 'block'}" data-toggle="popover" data-trigger="hover" data-content="You can't clean when there's an error." data-placement="top"><span class="glyphicon glyphicon-align-left"></span> Clean Code <span><kbd>{{shortcut}}</kbd>+<kbd>B</kbd></span></a></li>
             <li><a @click="comment()"><span class="fa fa-code"></span> Comment Code <span><kbd>{{shortcut}}</kbd>+<kbd>/</kbd></span></a></li>
             <li role="separator" class="divider"></li>
-            <li><a><input onclick="autoRunClicked()" type="checkbox" id="checkbox" v-model="autoRunChecked"></span> Auto Run</a></li>
-            <li><a><input type="checkbox" id="checkbox" v-model="autoSaveChecked"></span> Auto Save</a></li>
+            <li><a><input onclick="autoRunClicked()" type="checkbox" id="autoRunCheckbox" v-model="autoRunChecked"></span> Auto Run</a></li>
+            <li><a><input type="checkbox" id="autoSaveCheckbox" v-model="autoSaveChecked"></span> Auto Save</a></li>
             <li><a @click="share()"><span class="glyphicon glyphicon-share-alt"></span> Share</a></li>
           </ul>
         </div>
@@ -573,9 +649,9 @@ <h5>If there is an account associated with that email address, we have sent it a
           <span style="margin-right:8px">
             <span style="display: none; font-family: monospace; font-size: 11px" :style="{display: status ? 'inline-block' : 'none'}">mouseX: {{mouseX}}</span>
             <span style="display: none; font-family: monospace; font-size: 11px" :style="{display: status ? 'inline-block' : 'none'}">mouseY: {{mouseY}}</span>
-            <img onclick="createRunCode(); focusPreview()" id="pop" style="margin: 2px; width: 17px; height:17px" src="./images/refresh.png" title="Reload">
-            <img  onclick="popout()" id="pop" style="margin: 2px; width: 17px; height:17px" src="./images/pop.png" title="Open in new tab">
-            <img  @click="previewbar = !previewbar"  style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize">
+            <img onclick="createRunCode(); focusPreview()" id="pop" style="margin: 2px; width: 17px; height:17px" src="./images/refresh.png" title="Reload" alt="Reload preview">
+            <img onclick="popout()" id="pop" style="margin: 2px; width: 17px; height:17px" src="./images/pop.png" title="Open in new tab" alt="Open preview in a new tab">
+            <img @click="previewbar = !previewbar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize" alt="Minimize preview pane">
           </span>
         </div>
         <iframe scrolling="no" id="preview"></iframe>
@@ -616,7 +692,7 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
         <div id="DocsNav">
           <span style="margin-left:8px;  margin-top:4px">Documentation</span>
           <span style="margin-right:8px">
-            <img   @click="docsbar = !docsbar"  style="margin-left:5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png"  title="Minimize">
+            <img @click="docsbar = !docsbar" style="margin-left:5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize" alt="Minimize documentation pane">
           </span>
         </div>
         <iframe src="./docs/index.html" id="scratch"></iframe>
@@ -630,7 +706,7 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
         <div id="ProjectsNav">
           <span style="margin-left:8px; margin-top:4px">Tutorials</span>
           <span style="margin-right:8px">
-            <img @click="projectbar = !projectbar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize">
+            <img @click="projectbar = !projectbar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize" alt="Minimize tutorials pane">
           </span>
         </div>
         <iframe id="projectsIframe" src="//coding.space/woof/index.html"></iframe>
@@ -664,7 +740,7 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
 	      <button id="code-status" class="btn" :style="{animation: error ? 'glowing 1200ms infinite' : 'none'}" @click="errorReport = !errorReport">{{error ? "Error " : "Running "}}<span class="caret" v-if="errorReport"></span><span class="caret caret-right" v-else></span></button>
 	    </span>
             <span style="margin-right:8px">
-              <img @click="codebar = !codebar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize">
+              <img @click="codebar = !codebar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize" alt="Minimize code pane">
             </span>
           </div>
         </div>

From 7f3fabed798bd7db8551997c9da01234e852dd7e Mon Sep 17 00:00:00 2001
From: praveen kumar a x <xav.axp@gmail.com>
Date: Sat, 14 Mar 2026 02:58:51 +0530
Subject: [PATCH 2/2] Refactor workflow.html styles and UI classes

---
 workflow.html | 200 ++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 152 insertions(+), 48 deletions(-)

diff --git a/workflow.html b/workflow.html
index 1599291..fabdb2e 100644
--- a/workflow.html
+++ b/workflow.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html style="height:100%">
+<html>
 <head>
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:url" content="http://woofjs.com/create">
@@ -301,6 +301,110 @@
     .workflowTaskChildren {
       margin-left: 20px;
     }
+
+    .ml-5 {
+      margin-left: 5px;
+    }
+
+    .workflow-title {
+      display: inline-block;
+    }
+
+    .save-controls {
+      margin: 8px;
+    }
+
+    .inline-dropdown {
+      display: inline;
+    }
+
+    .tools-dropdown-toggle {
+      border: none;
+    }
+
+    .tools-dropdown-menu {
+      margin-top: 12px;
+    }
+
+    .form-group-center {
+      text-align: center;
+    }
+
+    .btn-full {
+      width: 100%;
+    }
+
+    .spinner-center {
+      margin: 0 auto;
+    }
+
+    .muted-note {
+      color: grey;
+    }
+
+    .action-link {
+      cursor: pointer;
+      text-decoration: none;
+    }
+
+    .muted-link {
+      color: grey;
+    }
+
+    .helper-inline {
+      display: inline-block;
+    }
+
+    .pane-title {
+      margin-left: 8px;
+      margin-top: 4px;
+    }
+
+    .pane-controls {
+      margin-right: 8px;
+    }
+
+    .mouse-readout {
+      display: none;
+      font-family: monospace;
+      font-size: 11px;
+    }
+
+    .pane-icon {
+      width: 16px;
+      height: 18px;
+      cursor: pointer;
+    }
+
+    .pane-icon-tight {
+      margin: 5px;
+    }
+
+    .pane-icon-left {
+      margin-left: 5px;
+    }
+
+    .preview-tool-icon {
+      margin: 2px;
+      width: 17px;
+      height: 17px;
+    }
+
+    .pane-rotate-label {
+      font-size: 1.65em;
+    }
+
+    .merge-header {
+      width: 100%;
+    }
+
+    .merge-columns {
+      display: flex;
+    }
+
+    .merge-column {
+      width: 50%;
+    }
   </style>
 </head>
 <body>
@@ -308,11 +412,11 @@
     <div id="navbar">
 
     <div class="btn-group" role="group" aria-label="..." id='loginSingupGroup' :class='{show: loginState == "LOGGEDOUT", hide: loginState == "LOGGEDIN"}'>
-      <button style="margin-left: 5px;" class="btn btn-medium btn-primary" type="button" id="login" :class='{show: loginState == "LOGGEDOUT", hide: loginState == "LOGGEDIN"}' onclick="$('#loginModal').modal('show');" @click="switchToLogin()">Login</button>
+      <button class="btn btn-medium btn-primary ml-5" type="button" id="login" :class='{show: loginState == "LOGGEDOUT", hide: loginState == "LOGGEDIN"}' onclick="$('#loginModal').modal('show');" @click="switchToLogin()">Login</button>
       <button class="btn btn-medium btn-success" type="button" id="signup" :class='{show: loginState == "LOGGEDOUT", hide: loginState == "LOGGEDIN"}' onclick="$('#loginModal').modal('show');" @click="switchToSignUp()">Sign Up</button>
     </div>
 
-      <div style="margin-left: 5px" id="logggedin" class="hide dropdown" :class='{hide: loginState == "LOGGEDOUT", show: loginState == "LOGGEDIN"}'>
+      <div id="logggedin" class="hide dropdown ml-5" :class='{hide: loginState == "LOGGEDOUT", show: loginState == "LOGGEDIN"}'>
         <button class="btn btn-medium btn-info dropdown-toggle" type="button" id="loggedin-name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">{{userNameForMenu}} <span class="caret"></span></button>
         <ul class="dropdown-menu" aria-labelledby="loggedin-name">
           <li><a href="./workflow.html">New Project</a></li>
@@ -333,8 +437,8 @@
        
         <div id="topworkfLowtaskContainer">
           <div>
-            <h4 style="display: inline-block" :style="{textDecoration: workflowPathTasks[workflowPathTasks.length - 1].done ? 'line-through' : 'none'}">{{ workflowPathTasks[workflowPathTasks.length - 1].name }}</h4>
-            <button class="btn btn-xs btn-success" v-show="(workflowPathTasks[workflowPathTasks.length - 1].parentPath || []).length !== 0 && !workflowMerging" @click="workflowTaskMerge()">Merge <img src="https://cdn4.iconfinder.com/data/icons/mini-arrows-3/16/122-512.png" width="10px"></img></button>
+            <h4 class="workflow-title" :style="{textDecoration: workflowPathTasks[workflowPathTasks.length - 1].done ? 'line-through' : 'none'}">{{ workflowPathTasks[workflowPathTasks.length - 1].name }}</h4>
+            <button class="btn btn-xs btn-success" v-show="(workflowPathTasks[workflowPathTasks.length - 1].parentPath || []).length !== 0 && !workflowMerging" @click="workflowTaskMerge()">Merge <img src="https://cdn4.iconfinder.com/data/icons/mini-arrows-3/16/122-512.png" width="10px" alt=""></img></button>
           </div>
           <div v-if="!workflowPathTasks[workflowPathTasks.length - 1].subtasks.length" @click="addFirstTask()">+</div>
           <workflow-task v-for="subtask in (workflowPathTasks[workflowPathTasks.length - 1]).subtasks" :task="subtask" :key="subtask.id"></workflow-task>
@@ -345,16 +449,16 @@ <h4 style="display: inline-block" :style="{textDecoration: workflowPathTasks[wor
         </div>
      </div>
     
-      <span style="margin:8px" id="save">
+      <span class="save-controls" id="save">
 
       
         <button id="error" class="btn btn-danger" @click="showError()" :style="{display: error ? 'inline-block' : 'none', animation: seenError ? 'none' : 'glowing 1200ms infinite'}"><span class="glyphicon glyphicon-exclamation-sign"></span> Error</button>
-        <div class="dropdown" style="display:inline;">
-          <button class="btn btn-primary btn-medium dropdown-toggle" type="button" id="toolsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style='border:none;'>
+        <div class="dropdown inline-dropdown">
+          <button class="btn btn-primary btn-medium dropdown-toggle tools-dropdown-toggle" type="button" id="toolsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
             Tools
             <span class="caret"></span>
           </button>
-          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="toolsDropdown" style="margin-top:12px;">
+          <ul class="dropdown-menu dropdown-menu-right tools-dropdown-menu" aria-labelledby="toolsDropdown">
             <li><a @click="undo()"><span class="fa fa-undo"></span> Undo <span><kbd>{{shortcut}}</kbd>+<kbd>Z</kbd></span></a></li>
             <li><a @click="redo()"><span class="fa fa-repeat"></span> Redo <span><kbd>{{shortcut}}</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></span></a></li>
             <li><a @click="selectAll()"><span class="fa fa-bars"></span> Select All <span><kbd>{{shortcut}}</kbd>+<kbd>A</kbd></span></a></li>
@@ -382,7 +486,7 @@ <h4 class="modal-title" id="saveModalLabel">Choose a name for your project</h4>
               <input type="text" class="form-control" id="projectName" placeholder="my-project" :value="projectNameInputValue" @input="validate($event)" @keyDown.enter="saveName(projectNameInputValue)">
               <span id="nameTaken" :style="{opacity: projectNameRequest == 'NAME TAKEN' ? '1' : '0'}" class="text-danger">That project name has already been taken. Try another one.</span>
             </div>
-            <span id="illegalCharacter" class="text-danger" :class="{animated: projectNameLastKeyIllegal, shake: projectNameLastKeyIllegal}" style="display: inline-block" :style="{opacity: projectNameLastKeyIllegal ? '1' : '0'}">You cannot include {{ projectNameLastKeyIllegal }} in project names.</span>
+            <span id="illegalCharacter" class="text-danger helper-inline" :class="{animated: projectNameLastKeyIllegal, shake: projectNameLastKeyIllegal}" :style="{opacity: projectNameLastKeyIllegal ? '1' : '0'}">You cannot include {{ projectNameLastKeyIllegal }} in project names.</span>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
@@ -412,18 +516,18 @@ <h1 class="modal-title" id="loginModalLabel">Log In</h1>
               <input onkeydown="if (event.keyCode == 13){login()}"  type="password" v-model="loginPassword" class="form-control" id="password" placeholder="Password" aria-describedby="passwordHelp">
               <span id="passwordHelp" class="help-block" :style="{display: loginError == 'WRONGPASSWORD' ? 'block' : 'none'}">Invalid password. Please try again.</span>
             </div>
-            <div class="form-group" style="text-align:center;">
+            <div class="form-group form-group-center">
               <div>
-                <button type="submit" class="btn btn-primary" style="width:100%;" :class="{disabled: loginButtonState == 'LOADING'}" onclick="login()">
-                  <i class="fa fa-spinner fa-pulse fa-fw" style="margin:0 auto;" :style="{display: loginButtonState == 'LOADING' ? 'block' : 'none'}"></i>
+                <button type="submit" class="btn btn-primary btn-full" :class="{disabled: loginButtonState == 'LOADING'}" onclick="login()">
+                  <i class="fa fa-spinner fa-pulse fa-fw spinner-center" :style="{display: loginButtonState == 'LOADING' ? 'block' : 'none'}"></i>
                   <span :style="{display: loginButtonState == 'NORMAL' ? 'block' : 'none'}">Log In</span>
                 </button>
                 <br>
                 <br>
-                <small style="color:grey;">Don't have an account? <a @click="switchToSignUp()" style="cursor: pointer;text-decoration:none;">Sign Up</a></small>
+                <small class="muted-note">Don't have an account? <a @click="switchToSignUp()" class="action-link">Sign Up</a></small>
                 <br>
                 <br>
-                <small style="color:grey;"><a @click="switchToPasswordReset()" style="cursor: pointer;color:grey;">Forgot your password?</a></small>
+                <small class="muted-note"><a @click="switchToPasswordReset()" class="action-link muted-link">Forgot your password?</a></small>
               </div>
             </div>
           </div>
@@ -439,7 +543,7 @@ <h1 class="modal-title" id="loginModalLabel">Sign Up</h1>
               <label for='username'>Username</label>
               <input v-model='signUpUsername' onfocus="$('#usernameCreate').tooltip('toggle')" data-placement="top" title="Don't use your real name" type="text" class="form-control" id="usernameCreate" placeholder="Username" aria-describedby="usernameCreateHelp" @input="usernameValidate($event)">
               <span id="usernameCreateHelp" class="help-block" :style="{display: usernameValid == 'TAKEN' ? 'block' : 'none'}">This username is already taken. Please try another username.</span>
-              <span id="usernameCreateHelp" class="help-block" style='color:#BD362F;' :style="{display: usernameLastKeyIllegal ? 'block' : 'none'}">You cannot include {{ usernameLastKeyIllegal }} in usernames.</span>
+              <span id="usernameCreateHelp" class="help-block text-danger" :style="{display: usernameLastKeyIllegal ? 'block' : 'none'}">You cannot include {{ usernameLastKeyIllegal }} in usernames.</span>
             </div>
             <div class="form-group" :class="{'has-success': emailValid == 'VALID', 'has-error': emailValid == 'TAKEN' || emailValid == 'NOTEMAIL',  animated: emailValid == 'TAKEN' || emailValid == 'NOTEMAIL',  shake: emailValid == 'TAKEN' || emailValid == 'NOTEMAIL'}">
               <label for='username'>Email</label>
@@ -457,15 +561,15 @@ <h1 class="modal-title" id="loginModalLabel">Sign Up</h1>
                 <input type="checkbox" v-model='signUpChecked'> I want to recieve updates about WoofJS
               </label>
             </div>
-            <div class="form-group" style="text-align:center;">
+            <div class="form-group form-group-center">
               <div>
-                <button type="submit" class="btn btn-primary" style="width:100%;" :class="{disabled: signUpButtonState == 'LOADING'}" onclick="signUp()">
-                  <i class="fa fa-spinner fa-pulse fa-fw" style="margin:0 auto;" :style="{display: signUpButtonState == 'LOADING' ? 'block' : 'none'}"></i>
+                <button type="submit" class="btn btn-primary btn-full" :class="{disabled: signUpButtonState == 'LOADING'}" onclick="signUp()">
+                  <i class="fa fa-spinner fa-pulse fa-fw spinner-center" :style="{display: signUpButtonState == 'LOADING' ? 'block' : 'none'}"></i>
                   <span :style="{display: signUpButtonState == 'LOADING' ? 'none' : 'block'}">Sign Up</span>
                 </button>
                 <br>
                 <br>
-                <small style="color:grey;">Already have an account? <a @click="switchToLogin()" style="cursor: pointer;text-decoration:none;">Log In</a></small>
+                <small class="muted-note">Already have an account? <a @click="switchToLogin()" class="action-link">Log In</a></small>
               </div>
             </div>
           </div>
@@ -484,14 +588,14 @@ <h5>Get instructions sent to this email that explain how to reset your password.
               <label for='emailReset'>Email</label>
               <input onkeydown="if (event.keyCode == 13){resetPassword()}" type="email" v-model="resetEmail" class="form-control" id="emailReset" placeholder="Email">
             </div>
-            <div class="form-group" style="text-align:center;">
+            <div class="form-group form-group-center">
               <div>
-                <button type="submit" class="btn btn-primary" style="width:100%;" onclick="resetPassword()" >
+                <button type="submit" class="btn btn-primary btn-full" onclick="resetPassword()" >
                   Send
                 </button>
                 <br>
                 <br>
-                <small style="color:grey;">Remember your password? <a @click="switchToLogin()" style="cursor: pointer;text-decoration:none;">Log In</a></small>
+                <small class="muted-note">Remember your password? <a @click="switchToLogin()" class="action-link">Log In</a></small>
               </div>
             </div>
           </div>
@@ -509,17 +613,17 @@ <h5>If there is an account associated with that email address, we have sent it a
     <div id="container">
 
       <div id="previewbar" v-show="previewbar" @click="previewbar= !previewbar" :style="{display: 'flex'}">
-        <span class="rotate" style="font-size: 1.65em">Preview</span>
+        <span class="rotate pane-rotate-label">Preview</span>
       </div>
       <div v-show="outputPane" :style="{display: !previewbar ? 'flex' : 'none'}" id="output">
         <div id="PreviewNav">
-          <span style="margin-left:8px; margin-top:4px">Preview</span>
-          <span style="margin-right:8px">
-            <span style="display: none; font-family: monospace; font-size: 11px" :style="{display: status ? 'inline-block' : 'none'}">mouseX: {{mouseX}}</span>
-            <span style="display: none; font-family: monospace; font-size: 11px" :style="{display: status ? 'inline-block' : 'none'}">mouseY: {{mouseY}}</span>
-            <img onclick="runCode(); focusPreview()" id="pop" style="margin: 2px; width: 17px; height:17px" src="./images/refresh.png" title="Reload">
-            <img  onclick="popout()" id="pop" style="margin: 2px; width: 17px; height:17px" src="./images/pop.png" title="Open in new tab">
-            <img  @click="previewbar = !previewbar"  style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize">
+          <span class="pane-title">Preview</span>
+          <span class="pane-controls">
+            <span class="mouse-readout" :style="{display: status ? 'inline-block' : 'none'}">mouseX: {{mouseX}}</span>
+            <span class="mouse-readout" :style="{display: status ? 'inline-block' : 'none'}">mouseY: {{mouseY}}</span>
+            <img onclick="runCode(); focusPreview()" id="pop" class="preview-tool-icon" src="./images/refresh.png" title="Reload" alt="Reload preview">
+            <img onclick="popout()" id="pop" class="preview-tool-icon" src="./images/pop.png" title="Open in new tab" alt="Open preview in new tab">
+            <img @click="previewbar = !previewbar" class="pane-icon pane-icon-tight" src="./images/minimize.png" title="Minimize" alt="Minimize preview pane">
           </span>
         </div>
         <iframe scrolling="no" id="preview"></iframe>
@@ -554,13 +658,13 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
       </div>
     
       <div id="docsbar" v-show="docsbar" @click="docsbar= !docsbar" :style="{display: 'flex'}">
-        <span class="rotate" style="font-size: 1.65em">Documentation</span>
+        <span class="rotate pane-rotate-label">Documentation</span>
       </div>
       <div v-show="docsPane" :style="{display: !docsbar ? 'flex' : 'none'}" id="docs">
         <div id="DocsNav">
-          <span style="margin-left:8px;  margin-top:4px">Documentation</span>
-          <span style="margin-right:8px">
-            <img   @click="docsbar = !docsbar"  style="margin-left:5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png"  title="Minimize">
+          <span class="pane-title">Documentation</span>
+          <span class="pane-controls">
+            <img @click="docsbar = !docsbar" class="pane-icon pane-icon-left" src="./images/minimize.png" title="Minimize" alt="Minimize documentation pane">
           </span>
         </div>
         <iframe src="./docs/index.html" id="scratch"></iframe>
@@ -568,13 +672,13 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
 
 
       <div id="projectbar" v-show="projectbar" @click="projectbar= !projectbar" :style="{display: 'flex'}" @click="projectsPane = !projectsPane">
-        <span class="rotate" style="font-size:1.65em">Tutorials</span>
+        <span class="rotate pane-rotate-label">Tutorials</span>
       </div>
       <div v-show="projectsPane" :style="{display: !projectbar ? 'flex' : 'none'}"  :style="{display: 'flex'}" id="projects">
         <div id="ProjectsNav">
-          <span style="margin-left:8px; margin-top:4px">Tutorials</span>
-          <span style="margin-right:8px">
-            <img @click="projectbar = !projectbar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize">
+          <span class="pane-title">Tutorials</span>
+          <span class="pane-controls">
+            <img @click="projectbar = !projectbar" class="pane-icon pane-icon-tight" src="./images/minimize.png" title="Minimize" alt="Minimize tutorials pane">
           </span>
         </div>
         <iframe id="projectsIframe" src="//coding.space/woof/index.html"></iframe>
@@ -582,24 +686,24 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
 
 
       <div id="codebar" v-show="codebar" @click="codebar= !codebar" :style="{display: 'flex'}">
-        <span class="rotate" style="font-size:1.65em">Code</span>
+        <span class="rotate pane-rotate-label">Code</span>
       </div>
       <div v-show="codePane" :style="{display: !codebar ? 'flex' : 'none'}" id="code">
         <div id="CodeNav">
-          <span style="margin-left:8px; margin-top:4px">Code</span>
-          <span style="margin-right:8px">
-            <img @click="codebar = !codebar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize">
+          <span class="pane-title">Code</span>
+          <span class="pane-controls">
+            <img @click="codebar = !codebar" class="pane-icon pane-icon-tight" src="./images/minimize.png" title="Minimize" alt="Minimize code pane">
           </span>
         </div>
         <div v-show="!workflowMerging" id="code-editor"></div>
         <div v-show="workflowMerging" id="merge-editor">
-          <div style="width:100%">
+          <div class="merge-header">
             <div>
-              <button class="btn btn-md btn-success" style="width:100%" @click="workflowMergeDone()">Done</button>
+              <button class="btn btn-md btn-success btn-full" @click="workflowMergeDone()">Done</button>
             </div>
-            <div style="display: flex">
-              <div style="width: 50%"><code>{{workflowMergeParentName}}</code></div>
-              <div style="width: 50%"><code>{{workflowMergeChildName}}</code></div>
+            <div class="merge-columns">
+              <div class="merge-column"><code>{{workflowMergeParentName}}</code></div>
+              <div class="merge-column"><code>{{workflowMergeChildName}}</code></div>
             </div>
           </div>
         </div>