Astronomerize the UI (#18)

* Astronomer-izes the airflow theme * Removes `+ Astronomer` * Revert "Removes `+ Astronomer`" This reverts commit e097b3e. * Revert "Astronomer-izes the airflow theme" This reverts commit 4e0b107. * Revert "Merge branch 'astronomer-fixes-182' into astronomerize-ui-gbrunk" This reverts commit 60e2a95, reversing changes made to e097b3e. * Revert trailing whitespace stripper changing license
astronomer · Oct 4, 2017 · 12e9dcf · 12e9dcf
1 parent 55eb493
commit 12e9dcf
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 30 deletions.
diff --git a/airflow/www/static/bootstrap-theme.css b/airflow/www/static/bootstrap-theme.css
@@ -9,8 +9,60 @@
  * BootSwatchr built and provided by @DrewStrickland
  */
 /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+@font-face{
+  font-family:"Sofia Light";
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/0eaf6264-15ee-4251-826e-9c0a59e8395f.eot");
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/0eaf6264-15ee-4251-826e-9c0a59e8395f.eot?#iefix") format("eot"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/8d11b8a0-868c-4a53-8b26-9f0ccbd58247.woff2") format("woff2"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/9b976f15-23b7-45cd-ad4b-59c95b2889f9.woff") format("woff"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/864da3de-5a97-4ce6-a22b-22932ed4dfe0.ttf") format("truetype"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/d5898683-1b2a-4b1b-8058-0c8db30e40cf.svg#d5898683-1b2a-4b1b-8058-0c8db30e40cf") format("svg");
+}
+@font-face{
+  font-family:"Sofia Light Italic";
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/9b4837d6-e74a-44ef-a6c4-6b35a90a3702.eot");
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/9b4837d6-e74a-44ef-a6c4-6b35a90a3702.eot?#iefix") format("eot"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/9be1eedf-69e4-4b70-ba74-3b23121fde9c.woff2") format("woff2"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/461e0a9e-689d-4609-bd34-f2316740e199.woff") format("woff"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/ab9ca33b-f66e-4aaf-8370-a2cd16af4072.ttf") format("truetype"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/d7142d94-d827-4eb5-b479-359ac2ebc205.svg#d7142d94-d827-4eb5-b479-359ac2ebc205") format("svg");
+}
+@font-face{
+  font-family:"Sofia Regular";
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/941243bb-e692-46f8-91b9-6e621e5c1ff8.eot");
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/941243bb-e692-46f8-91b9-6e621e5c1ff8.eot?#iefix") format("eot"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/8b31e0d7-5f53-45c2-b318-064f0b532543.woff2") format("woff2"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/476fe015-ab32-40a2-8fed-0a5af9a3bba4.woff") format("woff"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/d8bcfa37-4f93-49cf-8dea-c29e894af58e.ttf") format("truetype"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/28fc42bb-8761-4e6a-8c62-65d4a41c9e33.svg#28fc42bb-8761-4e6a-8c62-65d4a41c9e33") format("svg");
+}
+@font-face{
+  font-family:"Sofia Regular Italic";
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/addba733-2fd3-4151-adf4-d0b563dc6517.eot");
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/addba733-2fd3-4151-adf4-d0b563dc6517.eot?#iefix") format("eot"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/87cd0dd6-3e8b-46f1-b677-ab7644ea015e.woff2") format("woff2"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/90682d0e-e5df-4a2e-a2ff-6899b8ae8e4b.woff") format("woff"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/d1a6f359-b96c-43fd-87af-85f9762a4ecf.ttf") format("truetype"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/6cc18d90-baae-43d6-9b7e-e778cb8c630f.svg#6cc18d90-baae-43d6-9b7e-e778cb8c630f") format("svg");
+}
+@font-face{
+  font-family:"Sofia Medium";
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/27070da8-f8ed-4002-8324-4f0dd80f8fa4.eot");
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/27070da8-f8ed-4002-8324-4f0dd80f8fa4.eot?#iefix") format("eot"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/fe0b48dd-7bb4-4787-913d-eaf613373f35.woff2") format("woff2"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/d493595c-97d2-4edc-bc9a-c09ad13b4913.woff") format("woff"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/449bb77f-1bc7-4956-a8f1-3d4ae9243a59.ttf") format("truetype"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/1332b505-18f0-4aa5-ba55-9be49eba8fb5.svg#1332b505-18f0-4aa5-ba55-9be49eba8fb5") format("svg");
+}
+@font-face{
+  font-family:"Sofia Medium Italic";
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/877f3b67-be6a-461d-a5a6-809160a59cd8.eot");
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/877f3b67-be6a-461d-a5a6-809160a59cd8.eot?#iefix") format("eot"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/9da6ce88-4609-46ec-b6a3-9e8a69f8d053.woff2") format("woff2"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/44cb396c-a0d9-43f0-a13f-bad6bd335656.woff") format("woff"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/aeb7ae09-586c-4808-bada-216d01ed5ec7.ttf") format("truetype"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/f6759ecb-5f45-4a67-a026-db1db3e2c8d0.svg#f6759ecb-5f45-4a67-a026-db1db3e2c8d0") format("svg");
+}
+@font-face{
+  font-family:"Sofia Semi Bold";
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/e488d96e-1d10-41aa-a2a0-8cb7cc0a54a8.eot");
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/e488d96e-1d10-41aa-a2a0-8cb7cc0a54a8.eot?#iefix") format("eot"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/20755c49-19b5-4792-aaf3-27f6b048149a.woff2") format("woff2"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/7cdc9309-dc21-43e2-a348-c6e3853fe8a9.woff") format("woff"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/fe0fe0a1-32b6-4795-80da-fb446ac9d5ea.ttf") format("truetype"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/d7a947d1-755b-4774-a917-036acd235435.svg#d7a947d1-755b-4774-a917-036acd235435") format("svg");
+}
+@font-face{
+  font-family:"Sofia Semi Bold Italic";
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/6158ec61-bf1b-4bd7-9dda-df9045c9c986.eot");
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/6158ec61-bf1b-4bd7-9dda-df9045c9c986.eot?#iefix") format("eot"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/e03d67b8-21d1-471a-a052-5450498e2851.woff2") format("woff2"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/7e254ac6-68c1-4462-b775-f4064eea9be4.woff") format("woff"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/3e17b546-0789-4b1e-b570-6590b98e9700.ttf") format("truetype"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/002ad5e0-12e8-474c-95bd-1e7ae9cea0d4.svg#002ad5e0-12e8-474c-95bd-1e7ae9cea0d4") format("svg");
+}
+@font-face{
+  font-family:"Sofia Bold";
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/c2440dd8-b25c-49ba-bc04-8a638a943324.eot");
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/c2440dd8-b25c-49ba-bc04-8a638a943324.eot?#iefix") format("eot"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/80042803-0630-405f-b2d2-af97b4e50b46.woff2") format("woff2"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/ec41d681-0313-4b04-88c0-820aebb51f4e.woff") format("woff"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/81434fc3-e426-4a4c-987d-f25c098198c4.ttf") format("truetype"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/59fd3475-fba9-4c77-94f9-959fd3925e06.svg#59fd3475-fba9-4c77-94f9-959fd3925e06") format("svg");
+}
+@font-face{
+  font-family:"Sofia Bold Italic";
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/0b2112bc-4fb7-4a37-8c55-1e5848431681.eot");
+  src:url("https://cdn.astronomer.io/app/fonts/sofia-pro/0b2112bc-4fb7-4a37-8c55-1e5848431681.eot?#iefix") format("eot"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/27f146af-7709-44d9-8b45-d09866bec59f.woff2") format("woff2"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/5f085bad-f484-4825-8686-d347df989cf2.woff") format("woff"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/a1133ba8-2dbc-4877-b3bc-b9a3a44652ba.ttf") format("truetype"),url("https://cdn.astronomer.io/app/fonts/sofia-pro/e37199b8-7efe-4da4-bb3c-9a415c519b57.svg#e37199b8-7efe-4da4-bb3c-9a415c519b57") format("svg");
+}
+
 html {
-  font-family: sans-serif;
+  font-family: "Sofia Regular";
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
@@ -294,7 +346,7 @@ textarea {
   line-height: inherit;
 }
 a {
-  color: #0091a1;
+  color: #342f54;
   text-decoration: none;
 }
 a:hover,
@@ -532,10 +584,10 @@ mark,
   color: #777777;
 }
 .text-primary {
-  color: #005c66;
+  color: #302c43;
 }
 a.text-primary:hover {
-  color: #002e33;
+  color: #342f54;
 }
 .text-success {
   color: #3c763d;
@@ -1501,7 +1553,7 @@ th {
   border-bottom-width: 2px;
 }
 .table-striped > tbody > tr:nth-child(odd) {
-  background-color: #f9f9f9;
+  background-color: #f4f2ec;
 }
 .table-hover > tbody > tr:hover {
   background-color: #f5f5f5;
@@ -2247,7 +2299,7 @@ fieldset[disabled] .btn-default.active {
 }
 .btn-primary {
   color: #ffffff;
-  background-color: #005c66;
+  background-color: #302c43;
   border-color: #00454c;
 }
 .btn-primary:hover,
@@ -3430,7 +3482,7 @@ tbody.collapse.in {
   color: #ffffff;
   text-decoration: none;
   outline: 0;
-  background-color: #005c66;
+  background-color: #342f54;
 }
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
@@ -4137,6 +4189,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar-brand > img {
   display: block;
+  margin-right: 10px;
 }
 @media (min-width: 768px) {
   .navbar > .container .navbar-brand,
@@ -4440,8 +4493,8 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   color: #cccccc;
 }
 .navbar-inverse {
-  background-color: #007a87;
-  border-color: #004c54;
+  background-color: #302c43;
+  border-color: #302c43;
   background-image: none;
 }
 .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.open>a {
@@ -4451,29 +4504,29 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   background-image: none;
 }
 .navbar-inverse .navbar-brand {
-  color: #dddddd;
+  color: #f4f2ec;
 }
 .navbar-inverse .navbar-brand:hover,
 .navbar-inverse .navbar-brand:focus {
   color: #ffffff;
   background-color: transparent;
 }
 .navbar-inverse .navbar-text {
-  color: #ffb400;
+  color: #f4f2ec;
 }
 .navbar-inverse .navbar-nav > li > a {
   color: #dddddd;
 }
 .navbar-inverse .navbar-nav > li > a:hover,
 .navbar-inverse .navbar-nav > li > a:focus {
-  color: #ffffff;
+  color: #fefcf9;
   background-color: transparent;
 }
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > a:hover,
 .navbar-inverse .navbar-nav > .active > a:focus {
-  color: #ffffff;
-  background-color: #004c54;
+  color: #f4f2ec;
+  background-color: #24232A;
 }
 .navbar-inverse .navbar-nav > .disabled > a,
 .navbar-inverse .navbar-nav > .disabled > a:hover,
@@ -4489,7 +4542,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   background-color: #333333;
 }
 .navbar-inverse .navbar-toggle .icon-bar {
-  background-color: #ffffff;
+  background-color: #342f54;
 }
 .navbar-inverse .navbar-collapse,
 .navbar-inverse .navbar-form {
@@ -4498,15 +4551,15 @@ fieldset[disabled] .navbar-default .btn-link:focus {
 .navbar-inverse .navbar-nav > .open > a,
 .navbar-inverse .navbar-nav > .open > a:hover,
 .navbar-inverse .navbar-nav > .open > a:focus {
-  background-color: #004c54;
+  background-color: #24232A;
   color: #ffffff;
 }
 @media (max-width: 767px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
-    border-color: #004c54;
+    border-color: #24232A;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
-    background-color: #004c54;
+    background-color: #24232A;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
     color: #dddddd;
@@ -4520,7 +4573,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
-    background-color: #004c54;
+    background-color: #24232A;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -4614,8 +4667,8 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #005c66;
-  border-color: #005c66;
+  background-color: #302c43;
+  border-color: #302c43;
   cursor: default;
 }
 .pagination > .disabled > span,

diff --git a/airflow/www/static/jquery.dataTables.css b/airflow/www/static/jquery.dataTables.css
@@ -103,10 +103,10 @@ table.dataTable.cell-border tbody tr:first-child td {
   border-top: none;
 }
 table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
-  background-color: #f9f9f9;
+  background-color: #f4f2ec;
 }
 table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
-  background-color: #abb9d3;
+  background-color: #f4f2ec;
 }
 table.dataTable.hover tbody tr:hover,
 table.dataTable.hover tbody tr.odd:hover,
@@ -127,7 +127,7 @@ table.dataTable.order-column tbody tr > .sorting_2,
 table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
 table.dataTable.display tbody tr > .sorting_2,
 table.dataTable.display tbody tr > .sorting_3 {
-  background-color: #f9f9f9;
+  background-color: #f4f2ec;
 }
 table.dataTable.order-column tbody tr.selected > .sorting_1,
 table.dataTable.order-column tbody tr.selected > .sorting_2,

diff --git a/airflow/www/static/main.css b/airflow/www/static/main.css
@@ -17,9 +17,16 @@
 * under the License.
 */
 
-body { padding-top: 70px; }
+body {
+  padding-top: 70px;
+  background-color: #fefcf9;
+  font-family: "Sofia Regular";
+}
+.column-header {
+  font-family: "Sofia Semi Bold";
+}
 a.navbar-brand span {
-    color: white;
+    color: #f4f2ec;
 }
 .modal-backdrop{
     z-index: 0;

diff --git a/airflow/www/templates/admin/master.html b/airflow/www/templates/admin/master.html
@@ -99,4 +99,3 @@
 
 </div>
 {% endblock %}
-
diff --git a/airflow/www/templates/airflow/dags.html b/airflow/www/templates/airflow/dags.html
@@ -26,11 +26,11 @@
 {% endblock %}
 
 {% block body %}
-  <h2>DAGs</h2>
+  <h2 style="color: #302c43;">DAGs</h2>
 
   <div id="main_content" style="display:none;">
     <table id="dags" class="table table-striped table-bordered">
-        <thead>
+        <thead style="font-family: 'Sofia Semi Bold'">
             <tr>
                 <th></th>
                 <th width="12"><span id="pause_header"class="glyphicon glyphicon-info-sign" title="Use this toggle to pause a DAG. The scheduler won't schedule new tasks instances for a paused DAG. Tasks already running at pause time won't be affected."></span></th>
@@ -41,7 +41,8 @@ <h2>DAGs</h2>
                   <span id="statuses_info" class="glyphicon glyphicon-info-sign" aria-hidden="true" title="Status of tasks from all active DAG runs or, if not currently active, from most recent run."></span>
                   <img id="loading" width="15" src="{{ url_for("static", filename="loading.gif") }}">
                 </th>
-                <th style="padding-left: 5px;">Last Run <span id="statuses_info" class="glyphicon glyphicon-info-sign" aria-hidden="true" title="Execution Date/Time of Highest Dag Run."></span>
+                <th style="padding-left: 5px; width: 200px;">Last Run
+                  <span id="statuses_info" class="glyphicon glyphicon-info-sign" aria-hidden="true" title="Execution Date/Time of Highest Dag Run."></span>
                 </th>
                 <th style="padding-left: 5px;">DAG Runs
                   <span id="statuses_info" class="glyphicon glyphicon-info-sign" aria-hidden="true" title="Status of all previous DAG runs."></span>