Initial Astronomer theming

astronomer · Dec 21, 2017 · f90ca3d · f90ca3d
1 parent a592e73
commit f90ca3d
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 119 deletions.
diff --git a/airflow/utils/state.py b/airflow/utils/state.py
@@ -57,14 +57,14 @@ class State(object):
     )
 
     state_color = {
-        QUEUED: 'gray',
-        RUNNING: 'lime',
-        SUCCESS: 'green',
-        SHUTDOWN: 'blue',
-        FAILED: 'red',
-        UP_FOR_RETRY: 'gold',
-        UPSTREAM_FAILED: 'orange',
-        SKIPPED: 'pink',
+        QUEUED: '#8f8d86',
+        RUNNING: '#07d65b',
+        SUCCESS: '#02a562',
+        SHUTDOWN: '#0784aa',
+        FAILED: '#fb5b3c',
+        UP_FOR_RETRY: '#FFC847',
+        UPSTREAM_FAILED: '#ff9a09',
+        SKIPPED: '#F4788F',
         REMOVED: 'lightgrey',
         SCHEDULED: 'white',
     }

diff --git a/airflow/www/static/bootstrap-theme.css b/airflow/www/static/bootstrap-theme.css
diff --git a/airflow/www/static/graph.css b/airflow/www/static/graph.css
@@ -26,30 +26,30 @@ g.node text {
     cursor: pointer;
 }
 g.node.success rect {
-    stroke: green;
+    stroke: #02a562;
 }
 g.node.up_for_retry rect {
-    stroke: gold;
+    stroke: #FFC847;
 }
 
 g.node.queued rect {
-    stroke: grey;
+    stroke: #8f8d86;
 }
 
 g.node.running rect{
-    stroke: lime;
+    stroke: #07d65b;
 }
 g.node.failed rect {
-    stroke: red;
+    stroke: #fb5b3c;
 }
 g.node.shutdown rect{
-    stroke: blue;
+    stroke: #0784aa;
 }
 g.node.upstream_failed rect{
-    stroke: orange;
+    stroke: #ff9a09;
 }
 g.node.skipped rect{
-    stroke: pink;
+    stroke: #F4788F;
 }
 div#svg_container {
  border: 1px solid black;

diff --git a/airflow/www/static/main.css b/airflow/www/static/main.css
@@ -17,7 +17,11 @@
 * under the License.
 */
 
-body { padding-top: 70px; }
+body {
+    padding-top: 70px;
+    background-color: #fefcf9;
+    font-family: "Sofia Regular";
+}
 .container {
     width: 100%;
 }
@@ -31,9 +35,9 @@ a.navbar-brand span {
     z-index: 5;
 }
 nav{
-    -webkit-box-shadow: 0px 3px 3px #AAA;
+    /* -webkit-box-shadow: 0px 3px 3px #AAA;
     -moz-box-shadow:    0px 3px 3px #AAA;
-    box-shadow:         0px 3px 3px #AAA;
+    box-shadow:         0px 3px 3px #AAA; */
     z-index:999;
 }
 a.navbar-brand {
@@ -69,25 +73,25 @@ div.squares{
 div.task_row{
 }
 span.success{
-    background-color: green;
+    background-color: #02a562;
 }
 span.up_for_retry{
-    background-color: gold;
+    background-color: #FFC847;
 }
 span.started{
-    background-color: lime;
+    background-color: #07d65b;
 }
 span.error{
-    background-color: red;
+    background-color: #fb5b3c;
 }
 span.queued{
-    background-color: gray;
+    background-color: #8f8d86;
 }
 span.upstream_failed{
-    background-color: orange;
+    background-color: #ff9a09
 }
 span.skipped{
-    background-color: pink;
+    background-color: #F4788F;
 }
 .tooltip-inner {
     max-width: 500px;
@@ -208,7 +212,7 @@ div.square {
     border:1px solid black;
 }
 .btn:active, .btn.active {
-  box-shadow: inset 0 6px 6px rgba(0, 0, 0, 0.4);
+  /* box-shadow: inset 0 6px 6px rgba(0, 0, 0, 0.4); */
 }
 
 .hll { background-color: #ffffcc }

diff --git a/airflow/www/static/tree.css b/airflow/www/static/tree.css
@@ -42,28 +42,28 @@ rect.null, rect.scheduled, rect.undefined {
     fill: white;
 }
 rect.success {
-    fill: green;
+    fill: #02a562;
 }
 rect.running {
-    fill: lime;
+    fill: #07d65b;
 }
 rect.failed {
-    fill: red;
+    fill: #fb5b3c;
 }
 rect.queued {
-    fill: gray;
+    fill: #8f8d86;
 }
 rect.shutdown {
-    fill: blue;
+    fill: #0784aa;
 }
 rect.upstream_failed {
-    fill: orange;
+    fill: #ff9a09;
 }
 rect.up_for_retry {
-    fill: gold;
+    fill: #FFC847;
 }
 rect.skipped {
-    fill: pink;
+    fill: #F4788F;
 }
 .tooltip.in {
     opacity: 1;

diff --git a/airflow/www/templates/airflow/graph.html b/airflow/www/templates/airflow/graph.html
@@ -62,12 +62,12 @@
 
     <div style"background-color: blue;">
     <div class="legend_item state" style="border-color:white;">no status</div>
-    <div class="legend_item state" style="border-color:grey;">queued</div>
-    <div class="legend_item state" style="border-color:gold;">retry</div>
-    <div class="legend_item state" style="border-color:pink;">skipped</div>
-    <div class="legend_item state" style="border-color:red;">failed</div>
-    <div class="legend_item state" style="border-color:lime;">running</div>
-    <div class="legend_item state" style="border-color:green;">success</div>
+    <div class="legend_item state" style="border-color:#8f8d86;">queued</div>
+    <div class="legend_item state" style="border-color:#FFC847;">retry</div>
+    <div class="legend_item state" style="border-color:#F4788F;">skipped</div>
+    <div class="legend_item state" style="border-color:#fb5b3c;">failed</div>
+    <div class="legend_item state" style="border-color:#07d65b;">running</div>
+    <div class="legend_item state" style="border-color:#02a562;">success</div>
     </div>
     <div style="clear:both;"></div>
 </div>

diff --git a/airflow/www/templates/airflow/tree.html b/airflow/www/templates/airflow/tree.html
@@ -44,17 +44,17 @@
     <div class="legend_item" style="border: none;">no status</div>
     <div class="square" style="background: white;"></div>
     <div class="legend_item" style="border: none;">queued</div>
-    <div class="square" style="background: grey;"></div>
+    <div class="square" style="background: #8f8d86;"></div>
     <div class="legend_item" style="border: none;">retry</div>
-    <div class="square" style="background: gold;"></div>
+    <div class="square" style="background: #FFC847;"></div>
     <div class="legend_item" style="border: none;">skipped</div>
-    <div class="square" style="background: pink;"></div>
+    <div class="square" style="background: #F4788F;"></div>
     <div class="legend_item" style="border: none;">failed</div>
-    <div class="square" style="background: red;"></div>
+    <div class="square" style="background: #fb5b3c;"></div>
     <div class="legend_item" style="border: none;">running</div>
-    <div class="square" style="background: lime;"></div>
+    <div class="square" style="background: #07d65b;"></div>
     <div class="legend_item" style="border: none;">success</div>
-    <div class="square" style="background: green;"></div>
+    <div class="square" style="background: #02a562;"></div>
     {% for op in operators %}
         <div class="legend_circle" style="background:{{ op.ui_color }};">
         </div>