diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index 31c8ee3..1a4df36 100755
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -141,6 +141,7 @@ $tao-navbar-height: 67px;
.tao-grid-main-components {
+ overflow-y: hidden;
display: grid;
padding-top: $tao-navbar-height;
width: 100vw;
diff --git a/src/app/webide/webide.component.html b/src/app/webide/webide.component.html
index b497b66..9f7a03c 100644
--- a/src/app/webide/webide.component.html
+++ b/src/app/webide/webide.component.html
@@ -1,13 +1,34 @@
-
-
+
+
+
+
+
+
+
+
-
-
-
-
diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss
index d6fcca3..749bf34 100644
--- a/src/app/webide/webide.component.scss
+++ b/src/app/webide/webide.component.scss
@@ -1,3 +1,21 @@
+//
+// Spaces
+//
+
+$space: 24px;
+
+$sxlarge: 9 * $space;
+$xxxlarge: 6 * $space;
+$xxlarge: 4 * $space;
+$xlarge: 2 * $space;
+$large: 1.5 * $space;
+$medium: $space;
+$small: 0.75 * $space;
+$tiny: 0.5 * $space;
+$hair: 0.25 * $space;
+$nano: 0.125 * $space;
+
+
// Tao blue palette
$tao-blue-50: #F2F7FE;
$tao-blue-100: #C9DFFA;
@@ -118,54 +136,85 @@ $tao-gray-700: #232323;
$tao-gray-800: #0C0C0C;
$tao-gray-900: #000000;
+.tao-grid-container {
+ display: grid;
+ grid-template-columns: 8fr 1fr;
+}
+
.tfw-ace-editor {
- min-height: 85vh;
- height: 80%;
+ height: 100%;
width: 100%;
- overflow: auto;
}
.btn-group {
padding-left: 34px;
- margin: 6px auto;
}
.tao-tab-btn {
- border-radius: 100px;
- padding: 6px 19px;
- z-index: 200;
-}
-
-.tao-tab-btn-saved {
+ background-color: white;
border: 1px solid $tao-plum-900;
- background: white !important;
+ border-left: 0;
+ border-right: 0;
+ border-radius: 100px;
+ padding: 5px 19px;
+ z-index: 200;
+
+ .tao-tab-btn-saved,
+ .active,
+ .disabled,
+ &:disabled {
+ background-color: $tao-bright-green-100;
+ color: black;
+ }
}
-.active {
- background-color: white !important;
- color: $tao-gray-900;
+.tao-deploy-btn-group {
+ margin: $small;
+
+ .tao-deploy-btn {
+ background: $tao-bright-green-200;
+ border-radius: 100px;
+ padding: 6px 19px;
+
+ img {
+ position: relative;
+ bottom: 1px;
+ height: $small;
+ }
+
+ &.failed {
+ background-color: $tao-red-500;
+ color:white;
+ }
+
+ &:disabled,
+ .disabled,
+ .deployed,
+ .deploying
+ {
+ background-color: $tao-bright-green-100;
+ color: black;
+ }
+
+
+ .loader {
+ border: 2px solid #ffffff;
+ border-radius: 50%;
+ border-top: 2px solid $tao-bright-green-100;
+ width: 15px;
+ height: 15px;
+ animation: spin 2s linear infinite;
+ display: inline-block;
+ margin-right: 5px;
+ position: relative;
+ top: 2px;
+ }
+
+ @keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+
+ }
}
-.disabled {
- background: white !important;
- color: $tao-gray-900;
-
-}
-
-.loader {
- border: 2px solid #ffffff;
- border-radius: 50%;
- border-top: 2px solid #212529;
- width: 15px;
- height: 15px;
- animation: spin 2s linear infinite;
- display: inline-block;
- margin-right: 5px;
- position: relative;
- top: 2px;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
diff --git a/src/assets/images/greentick_icon.svg b/src/assets/images/greentick_icon.svg
new file mode 100644
index 0000000..535eb85
--- /dev/null
+++ b/src/assets/images/greentick_icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file