diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index ac963db..8f432cd 100755
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -7,7 +7,7 @@
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss
index 8e4eb5c..3506892 100755
--- a/src/app/messages/messages.component.scss
+++ b/src/app/messages/messages.component.scss
@@ -151,7 +151,6 @@ $font-size-base: 14px;
.tao-messages-main {
display: block;
- overflow: auto;
h5 {
margin-bottom: $small;
@@ -182,6 +181,10 @@ $font-size-base: 14px;
width: 12px;
}
+ .originator {
+ font-weight: 500;
+ }
+
.timestamp {
font-size: $font-size-tiny;
opacity: 0.37;
diff --git a/src/app/terminal/terminal.component.scss b/src/app/terminal/terminal.component.scss
index e69de29..5a774d9 100644
--- a/src/app/terminal/terminal.component.scss
+++ b/src/app/terminal/terminal.component.scss
@@ -0,0 +1,217 @@
+// Tao blue palette
+$tao-blue-50: #F2F7FE;
+$tao-blue-100: #C9DFFA;
+$tao-blue-200: #A0C6F7;
+$tao-blue-300: #77AEF3;
+$tao-blue-400: #4E95EF;
+$tao-blue-500: #277EEC;
+$tao-blue-600: #2170B7;
+$tao-blue-700: #195684;
+$tao-blue-800: #103B5B;
+$tao-blue-900: #081A2B;
+
+// Tao sky palette
+$tao-sky-50: #F1FAFD;
+$tao-sky-100: #C5E9F5;
+$tao-sky-200: #9AD8EE;
+$tao-sky-300: #6EC7E6;
+$tao-sky-400: #42B7DF;
+$tao-sky-500: #19A7D8;
+$tao-sky-600: #0E8BA8;
+$tao-sky-700: #04647A;
+$tao-sky-800: #004251;
+$tao-sky-900: #002028;
+
+// Tao phtalo palette
+$tao-phtalo-50: #F2FBFC;
+$tao-phtalo-100: #C8EDF1;
+$tao-phtalo-200: #9FDFE6;
+$tao-phtalo-300: #75D1DB;
+$tao-phtalo-400: #4CC3D0;
+$tao-phtalo-500: #24B6C6;
+$tao-phtalo-600: #16989E;
+$tao-phtalo-700: #0C7575;
+$tao-phtalo-800: #034C4F;
+$tao-phtalo-900: #002426;
+
+// Tao turqoise palette
+$tao-turqoise-50: #F1FBFB;
+$tao-turqoise-100: #C3EFEF;
+$tao-turqoise-200: #96E3E3;
+$tao-turqoise-300: #68D7D7;
+$tao-turqoise-400: #3BCBCB;
+$tao-turqoise-500: #10BFBF;
+$tao-turqoise-600: #079995;
+$tao-turqoise-700: #00726F;
+$tao-turqoise-800: #004C4A;
+$tao-turqoise-900: #002625;
+
+// Tao bright green palette
+$tao-bright-green-50: #effbf7;
+$tao-bright-green-100: #c5f2e4;
+$tao-bright-green-200: #a0ead3;
+$tao-bright-green-300: #7ae2c2;
+$tao-bright-green-400: #55d9b0;
+$tao-bright-green-500: #2fd19f;
+$tao-bright-green-600: #2ab587;
+$tao-bright-green-700: #248e63;
+$tao-bright-green-800: #1c6844;
+$tao-bright-green-900: #114431;
+
+// Tao warm yellow palette
+$tao-warm-yellow-50: #FFF8EB;
+$tao-warm-yellow-100: #FFEDCE;
+$tao-warm-yellow-200: #FFE0A9;
+$tao-warm-yellow-300: #FFD283;
+$tao-warm-yellow-400: #FFC55E;
+$tao-warm-yellow-500: #FFB83B;
+$tao-warm-yellow-600: #E59C3C;
+$tao-warm-yellow-700: #CC8B36;
+$tao-warm-yellow-800: #B2762F;
+$tao-warm-yellow-900: #996526;
+
+// Tao plum palette
+$tao-plum-50: #F6F8FD;
+$tao-plum-100: #DADFF8;
+$tao-plum-200: #BEC7F3;
+$tao-plum-300: #A2AFED;
+$tao-plum-400: #8797E8;
+$tao-plum-500: #6C80E3;
+$tao-plum-600: #5E77BF;
+$tao-plum-700: #4B5E99;
+$tao-plum-800: #384672;
+$tao-plum-900: #272F4C;
+
+// Tao pink palette
+$tao-pink-50: #FFF0F7;
+$tao-pink-100: #FFBFDF;
+$tao-pink-200: #FF8FC6;
+$tao-pink-300: #FF5EAE;
+$tao-pink-400: #FF2E95;
+$tao-pink-500: #FF007E;
+$tao-pink-600: #D8007C;
+$tao-pink-700: #B20066;
+$tao-pink-800: #8C0050;
+$tao-pink-900: #66003A;
+
+// Tao red palette
+$tao-red-50: #FFF5F5;
+$tao-red-100: #FFD4D4;
+$tao-red-200: #FFB3B3;
+$tao-red-300: #FF9292;
+$tao-red-400: #FF7171;
+$tao-red-500: #FF5252;
+$tao-red-600: #E54848;
+$tao-red-700: #CC3636;
+$tao-red-800: #B22424;
+$tao-red-900: #991919;
+
+// Tao gray palette
+$tao-gray-50: #FAFAFA;
+$tao-gray-100: #F2F2F2;
+$tao-gray-200: #D6D6D6;
+$tao-gray-300: #A0A0A0;
+$tao-gray-400: #777777;
+$tao-gray-500: #555555;
+$tao-gray-600: #323232;
+$tao-gray-700: #232323;
+$tao-gray-800: #0C0C0C;
+$tao-gray-900: #000000;
+
+.xterm {
+ font-family: courier-new, courier, monospace;
+ font-feature-settings: "liga" 0;
+ position: relative;
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.xterm.focus,
+.xterm:focus {
+ outline: none;
+}
+
+.xterm .xterm-helpers {
+ position: absolute;
+ top: 0;
+ /**
+ * The z-index of the helpers must be higher than the canvases in order for
+ * IMEs to appear on top.
+ */
+ z-index: 10;
+}
+
+.xterm .xterm-helper-textarea {
+ /*
+ * HACK: to fix IE's blinking cursor
+ * Move textarea out of the screen to the far left, so that the cursor is not visible.
+ */
+ position: absolute;
+ opacity: 0;
+ left: -9999em;
+ top: 0;
+ width: 0;
+ height: 0;
+ z-index: -10;
+ /** Prevent wrapping so the IME appears against the textarea at the correct position */
+ white-space: nowrap;
+ overflow: hidden;
+ resize: none;
+}
+
+.xterm .composition-view {
+ /* TODO: Composition position got messed up somewhere */
+ background: $tao-blue-800;
+ color: #FFF;
+ display: none;
+ position: absolute;
+ white-space: nowrap;
+ z-index: 1;
+}
+
+.xterm .composition-view.active {
+ display: block;
+}
+
+.xterm .xterm-viewport {
+ /* On OS X this is required in order for the scroll bar to appear fully opaque */
+ background-color: $tao-blue-800;
+ overflow-y: scroll;
+ cursor: default;
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+}
+
+.xterm .xterm-screen {
+ position: relative;
+}
+
+.xterm .xterm-screen canvas {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+.xterm .xterm-scroll-area {
+ visibility: hidden;
+}
+
+.xterm .xterm-char-measure-element {
+ display: inline-block;
+ visibility: hidden;
+ position: absolute;
+ left: -9999em;
+}
+
+.xterm.enable-mouse-events {
+ /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+ cursor: default;
+}
+
+.xterm:not(.enable-mouse-events) {
+ cursor: text;
+}
diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html
index 96bcb4c..b497b66 100644
--- a/src/app/webide/webide.component.html
+++ b/src/app/webide/webide.component.html
@@ -1,11 +1,11 @@
diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss
index 6008505..d6fcca3 100644
--- a/src/app/webide/webide.component.scss
+++ b/src/app/webide/webide.component.scss
@@ -1,12 +1,155 @@
+// Tao blue palette
+$tao-blue-50: #F2F7FE;
+$tao-blue-100: #C9DFFA;
+$tao-blue-200: #A0C6F7;
+$tao-blue-300: #77AEF3;
+$tao-blue-400: #4E95EF;
+$tao-blue-500: #277EEC;
+$tao-blue-600: #2170B7;
+$tao-blue-700: #195684;
+$tao-blue-800: #103B5B;
+$tao-blue-900: #081A2B;
+
+// Tao sky palette
+$tao-sky-50: #F1FAFD;
+$tao-sky-100: #C5E9F5;
+$tao-sky-200: #9AD8EE;
+$tao-sky-300: #6EC7E6;
+$tao-sky-400: #42B7DF;
+$tao-sky-500: #19A7D8;
+$tao-sky-600: #0E8BA8;
+$tao-sky-700: #04647A;
+$tao-sky-800: #004251;
+$tao-sky-900: #002028;
+
+// Tao phtalo palette
+$tao-phtalo-50: #F2FBFC;
+$tao-phtalo-100: #C8EDF1;
+$tao-phtalo-200: #9FDFE6;
+$tao-phtalo-300: #75D1DB;
+$tao-phtalo-400: #4CC3D0;
+$tao-phtalo-500: #24B6C6;
+$tao-phtalo-600: #16989E;
+$tao-phtalo-700: #0C7575;
+$tao-phtalo-800: #034C4F;
+$tao-phtalo-900: #002426;
+
+// Tao turqoise palette
+$tao-turqoise-50: #F1FBFB;
+$tao-turqoise-100: #C3EFEF;
+$tao-turqoise-200: #96E3E3;
+$tao-turqoise-300: #68D7D7;
+$tao-turqoise-400: #3BCBCB;
+$tao-turqoise-500: #10BFBF;
+$tao-turqoise-600: #079995;
+$tao-turqoise-700: #00726F;
+$tao-turqoise-800: #004C4A;
+$tao-turqoise-900: #002625;
+
+// Tao bright green palette
+$tao-bright-green-50: #effbf7;
+$tao-bright-green-100: #c5f2e4;
+$tao-bright-green-200: #a0ead3;
+$tao-bright-green-300: #7ae2c2;
+$tao-bright-green-400: #55d9b0;
+$tao-bright-green-500: #2fd19f;
+$tao-bright-green-600: #2ab587;
+$tao-bright-green-700: #248e63;
+$tao-bright-green-800: #1c6844;
+$tao-bright-green-900: #114431;
+
+// Tao warm yellow palette
+$tao-warm-yellow-50: #FFF8EB;
+$tao-warm-yellow-100: #FFEDCE;
+$tao-warm-yellow-200: #FFE0A9;
+$tao-warm-yellow-300: #FFD283;
+$tao-warm-yellow-400: #FFC55E;
+$tao-warm-yellow-500: #FFB83B;
+$tao-warm-yellow-600: #E59C3C;
+$tao-warm-yellow-700: #CC8B36;
+$tao-warm-yellow-800: #B2762F;
+$tao-warm-yellow-900: #996526;
+
+// Tao plum palette
+$tao-plum-50: #F6F8FD;
+$tao-plum-100: #DADFF8;
+$tao-plum-200: #BEC7F3;
+$tao-plum-300: #A2AFED;
+$tao-plum-400: #8797E8;
+$tao-plum-500: #6C80E3;
+$tao-plum-600: #5E77BF;
+$tao-plum-700: #4B5E99;
+$tao-plum-800: #384672;
+$tao-plum-900: #272F4C;
+
+// Tao pink palette
+$tao-pink-50: #FFF0F7;
+$tao-pink-100: #FFBFDF;
+$tao-pink-200: #FF8FC6;
+$tao-pink-300: #FF5EAE;
+$tao-pink-400: #FF2E95;
+$tao-pink-500: #FF007E;
+$tao-pink-600: #D8007C;
+$tao-pink-700: #B20066;
+$tao-pink-800: #8C0050;
+$tao-pink-900: #66003A;
+
+// Tao red palette
+$tao-red-50: #FFF5F5;
+$tao-red-100: #FFD4D4;
+$tao-red-200: #FFB3B3;
+$tao-red-300: #FF9292;
+$tao-red-400: #FF7171;
+$tao-red-500: #FF5252;
+$tao-red-600: #E54848;
+$tao-red-700: #CC3636;
+$tao-red-800: #B22424;
+$tao-red-900: #991919;
+
+// Tao gray palette
+$tao-gray-50: #FAFAFA;
+$tao-gray-100: #F2F2F2;
+$tao-gray-200: #D6D6D6;
+$tao-gray-300: #A0A0A0;
+$tao-gray-400: #777777;
+$tao-gray-500: #555555;
+$tao-gray-600: #323232;
+$tao-gray-700: #232323;
+$tao-gray-800: #0C0C0C;
+$tao-gray-900: #000000;
+
.tfw-ace-editor {
- min-height: 100vh;
+ min-height: 85vh;
height: 80%;
width: 100%;
overflow: auto;
}
-.btn-secondary {
- border-radius: 0;
+.btn-group {
+ padding-left: 34px;
+ margin: 6px auto;
+}
+
+.tao-tab-btn {
+ border-radius: 100px;
+ padding: 6px 19px;
+ z-index: 200;
+}
+
+.tao-tab-btn-saved {
+ border: 1px solid $tao-plum-900;
+ background: white !important;
+}
+
+.active {
+ background-color: white !important;
+ color: $tao-gray-900;
+}
+
+.disabled {
+ background: white !important;
+ color: $tao-gray-900;
+
}
.loader {
diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts
index 0c41590..dcf45fd 100644
--- a/src/app/webide/webide.component.ts
+++ b/src/app/webide/webide.component.ts
@@ -11,7 +11,7 @@ import 'brace/mode/json';
import 'brace/mode/python';
import 'brace/mode/sql';
-import 'brace/theme/monokai';
+import 'brace/theme/cobalt';
import { SourceCode } from './source-code';
import { WebSocketService } from '../services/websocket.service';
import { ProcessManagerService } from '../services/processmanager.service';
@@ -31,7 +31,7 @@ export class WebideComponent implements OnInit {
filename = 'demo.js';
code: string = defaultSourceCode;
language = 'javascript';
- theme = 'monokai';
+ theme = 'cobalt';
files: string[];
codeState = 'SAVED';
deployButtonState = 'DEPLOYED';