config_service: make UI responsive and change colors.

appengine/config_service/ui/src/config-ui/config-set-card.html

Index: appengine/config_service/ui/src/config-ui/config-set-card.html
diff --git a/appengine/config_service/ui/src/config-ui/config-set-card.html b/appengine/config_service/ui/src/config-ui/config-set-card.html
index 320433dce523c1034fb82aea448aefa303e692d4..459b4298508d4da4e101842845c3322e7ec53017 100644
--- a/appengine/config_service/ui/src/config-ui/config-set-card.html
+++ b/appengine/config_service/ui/src/config-ui/config-set-card.html
@@ -17,13 +17,18 @@
       a { text-decoration: none; }
       
       paper-card {
-        max-width: 500px;
         width: 100%;
       }
 
-      .config-title { @apply --paper-font-headline; }
+      p {
+        color: var(--paper-grey-600); 
+        word-wrap: break-word;
+      }
 
-      .light { color: var(--paper-grey-600); }
+      .config-title { 
+        @apply --paper-font-headline; 
+        word-wrap: break-word;
+      }
 
       .validation {
         float: right;
@@ -37,21 +42,21 @@
     <paper-card elevation="2">
       <div class="card-content">
         <div class="config-title">[[_formatName(name)]]
-          <div class="validation light">
+          <div class="validation">
             <template is="dom-if" if="[[lastImportAttempt]]" restamp="true">
               <template is="dom-if" if="[[lastImportAttempt.success]]" restamp="true">
-                <iron-icon icon="icons:check-circle"></iron-icon>
+                <iron-icon icon="icons:check-circle" style="color: var(--paper-green-600);"></iron-icon>

[Ryan Tseng, 2017/07/13 22:16:53]

should give these class names and add them to the <style> block instead.

               </template>
               <template is="dom-if" if="[[_not(lastImportAttempt.success)]]" restamp="true">
-                <iron-icon icon="icons:warning"></iron-icon>
+                <iron-icon icon="icons:warning" style="color: var(--paper-red-600);"></iron-icon>
               </template>
             </template>
             <template is="dom-if" if="[[_not(lastImportAttempt)]]" restamp="true">
-              <iron-icon icon="icons:help"></iron-icon>
+              <iron-icon icon="icons:help" style="color: var(--paper-grey-600);"></iron-icon>
             </template>
           </div>
         </div>
-        <p class="light">Path: [[name]]</p>
+        <p>Path: [[name]]</p>
       </div>
       <div class="card-actions">
         <div class="horizontal justified">