config_service: make UI responsive and change colors.

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

 <!--
   Copyright 2017 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 -->
 
 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-card/paper-card.html">
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
 
 <dom-module id="config-set-card">
   <template>
     <style>
       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;
         font-size: 15px;
         vertical-align: middle;
       }
 
       .config-open { color: var(--google-blue-500); }
     </style>
 
     <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">
           <a href="#/[[name]]">
             <paper-button class="config-open">Open</paper-button>
           </a>
         </div>
       </div>
     </paper-card>
   </template>
@@ skipping 18 matching lines @@
       _formatName: function(name) {
         var tempName = name.substring(name.indexOf("/") + 1);
         return tempName.includes("/") ?
             tempName.substring(0, tempName.indexOf("/")) : tempName;
       },
 
     });
   </script>
 </dom-module>