updated toolbar, side menu, components list and add component form to…

… use .ds styling

www/api/data/base-components/home/routes/home.js

@@ -2,6 +2,6 @@ function() {
     simplyApp.actions.listComponents()
     .then(function(components) {
         editor.pageData.components = components;
-        editor.pageData.page = "List components";
+        editor.pageData.page = "List-components";
     });
 }

www/api/data/components/1-styling/componentCss/extra.css

@@ -1,28 +1,38 @@
 @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i');
-
+:root {
+    --ds-primary: var(--ds-simplyedit);
+    --ds-primary-dark: var(--ds-simplyedit-dark);
+    --ds-primary-contrast: var(--ds-white);
+    --ds-primary-light: var(--ds-simplyedit-light);
+    --ds-primary-gradient: var(--ds-simplyedit-gradient);
+    --ds-primary-gradient-bump: var(--ds-simplyedit-gradient-bump);
+    --ds-support: #06CC06;
+    --ds-support-dark: #05BB05;
+    --ds-support-light: #07DE07;
+    --ds-support-contrast: #FFF;
+    --ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) );
+}
 html, body {
-	margin: 0;
-	padding: 0;
-	width: 100%;
+  height: 100%;
 }
-main {
-	padding: 0px 15px;
+body {
+  display: grid;
+  grid-template-columns: 210px 2fr 2fr; 
+  grid-template-rows: 60px 2fr 2fr; 
+  gap: 0px 0px; 
+  grid-template-areas: 
+    "header header header"
+    "nav pane pane"
+    "nav pane pane"
 }
-[data-simply-command] {
-	cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */
+body > header {
+  grid-area: header;
 }
-textarea {
-	width: 100%;
-	height: 120px;
-	color: #e0e0e0;
-	background-color: #151515;
-	border: 0;
-	padding: 10px;
+body > nav {
+    grid-area: nav;
+    overflow: auto;
 }
-input:not([type]),
-input[type=text] {
-	color: #e0e0e0;
-	background-color: #151515;
-	border: 0;
-	padding: 5px;
+body > div.main {
+    grid-area: pane;
+    overflow: auto;
 }

www/api/data/components/1-styling/componentCss/simplycode-manual.css

@@ -0,0 +1,72 @@
+.simplycode-part {
+    margin-top: 1em;
+}
+.simplycode-part-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+.simplycode-part-header .simplycode-options {
+    text-align: right;
+}
+.simplycode-part .simplycode-tab {
+    padding: 10px 5px;
+    margin: 0;
+    background-color: #151515;
+    color: #ddd;
+    border: 0;
+    text-align: center;
+    margin-right: 5px;
+}
+.simplycode-part .simplycode-tab input[type=radio] {
+    display: none;
+}
+.simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
+    font-weight: bold;
+    border-bottom: 2px solid var(--support-background);
+}
+.simplycode-part .simplycode-editor-code {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+.simplycode-part .simplycode-dual {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+.simplycode-part .simplycode-dual-preview {
+    display: grid;
+    grid-template-columns: auto 480px;
+}
+.simplycode-test-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+.simplycode-test-header .simplycode-options {
+    text-align: right;
+}
+.simplycode-component summary {
+    font-size: 1.2em;
+}
+.simplycode-component {
+    margin: 10px 0px;
+}
+.simplycode-header {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    vertical-align: middle;
+}
+.simplycode-header .simplycode-controls {
+    text-align: right;
+}
+.simplycode-header h1 span {
+    white-space: nowrap;
+}
+.simplycode-component summary .simplycode-controls {
+    display: none;
+    margin-left: 1em;
+}
+.simplycode-component[open] summary .simplycode-controls {
+    display: inline-block;
+}
+.simplycode-editor-code textarea {
+    margin-top: -1px;
+}