Polish changes: (kubeflow#2733)

* Polish changes: - List box text was not visible in blue toolbar mode - Colors adjusted for clearer viewing of namespace selector - Made the message uch easier to read and made it an empty state message * Addressed prodonjs' comments * Updated image
StatCan · Mar 20, 2019 · eb1c5b2 · eb1c5b2
1 parent cc6ea36
commit eb1c5b2
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 22 deletions.
diff --git a/components/centraldashboard/package-lock.json b/components/centraldashboard/package-lock.json
diff --git a/components/centraldashboard/public/components/activity-view.js b/components/centraldashboard/public/components/activity-view.js
@@ -14,27 +14,30 @@ export class ActivityView extends PolymerElement {
             </style>
             <style>
                 :host {
-                    @apply --layout-vertical;
-                    --accent-color: #007dfc;
-                    --primary-background-color: #003c75;
-                    --sidebar-default-color: #ffffff4f;
-                    --border-color: #f4f4f6;
                     background: #f1f3f4;
                     padding: 1em;
                     overflow: auto;
+                    --accent-color: #007dfc;
+                    --border-color: #f4f4f6;
+                    --sidebar-default-color: #ffffff4f;
+                    --primary-background-color: #003c75;
+                    @apply --layout-vertical;
                 }
                 paper-progress {
                     width: 100%;
                     --paper-progress-active-color: var(--accent-color)
                 }
-                p.message {
-                    background: #fff;
-                    box-shadow: 0 3px 3px rgba(0,0,0,.12);
-                    transition: margin .2s cubic-bezier(0.4, 0, 0.2, 1);
-                    font-size: 13px;
-                    margin: 0px;
-                    padding: 5px;
-                    align-items: center;
+                .message {
+                    color: var(--google-grey-500);
+                    font-style: italic;
+                    font-size: 2em;
+                    font-family: Google Sans;
+                    padding: 1em;
+                    text-align: center;
+                    align-self: center;
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
                 }
                 [hidden] {
                     display: none;
@@ -48,7 +51,9 @@ export class ActivityView extends PolymerElement {
             </iron-ajax>
             <paper-progress indeterminate class="slow"
                 hidden$="[[!loading]]"></paper-progress>
-            <p class="message" hidden$="[[!message]]">[[message]]</p>
+            <aside class="message" hidden$="[[!message]]">
+                [[message]]
+            </aside>
             <activities-list activities="[[activities]]"></activities-list>
             `;
     }

diff --git a/components/centraldashboard/public/components/main-page.css b/components/centraldashboard/public/components/main-page.css
@@ -94,6 +94,8 @@ app-toolbar {
 app-toolbar[blue] {
     color: white;
     background: var(--primary-background-color);
+    --primary-text-color: white;
+    --secondary-text-color: #ffffff69;
     --primary-color: white;
     --accent-color: white;
     --logo-color: white;

diff --git a/components/centraldashboard/public/components/main-page.js b/components/centraldashboard/public/components/main-page.js
@@ -41,7 +41,7 @@ export class MainPage extends PolymerElement {
         return html([`
         <style is="custom-style"
             include="iron-flex iron-flex-alignment iron-positioning">
-        <style>${css.toString()}</style> ${template()}
+        <style>${css.toString()}</style>${template()}
         `]);
     }
 

diff --git a/components/centraldashboard/public/components/namespace-selector.js b/components/centraldashboard/public/components/namespace-selector.js
@@ -18,6 +18,7 @@ export class NamespaceSelector extends PolymerElement {
                 }
                 paper-listbox {
                     --paper-listbox-background-color: white;
+                    --paper-listbox-color: black;
                 }
             </style>
             <iron-ajax auto url="/api/namespaces" handle-as="json"

diff --git a/kubeflow/common/prototypes/centraldashboard.jsonnet b/kubeflow/common/prototypes/centraldashboard.jsonnet
@@ -3,7 +3,7 @@
 // @description centraldashboard Component
 // @shortDescription centraldashboard
 // @param name string Name
-// @optionalParam image string gcr.io/kubeflow-images-public/centraldashboard:v20190315-v0.4.0-rc.1-222-gb42734af Image for the central dashboard
+// @optionalParam image string gcr.io/kubeflow-images-public/centraldashboard:v20190318-v0.4.0-rc.1-237-gb0f6b6a0 Image for the central dashboard
 
 local centraldashboard = import "kubeflow/common/centraldashboard.libsonnet";
 local instance = centraldashboard.new(env, params);