From 7c394e06e49f91cb952e127d3a2e091fcbeb3537 Mon Sep 17 00:00:00 2001
From: Kasper Nilsson <kaspern@google.com>
Date: Tue, 17 Apr 2018 16:23:08 +0200
Subject: [PATCH] Use variables in dialog and comment styling

Also cleans up some inconsistent styling in the various subcomponents of
the settings view.

Change-Id: I7b4487f84717cadd82c790785c3a83cf68eb8ce8
---
 .../change/gr-download-dialog/gr-download-dialog.html    | 1 +
 .../gr-diff-comment-thread/gr-diff-comment-thread.html   | 9 +++++----
 .../elements/diff/gr-diff-comment/gr-diff-comment.html   | 8 ++++----
 .../diff/gr-diff-preferences/gr-diff-preferences.html    | 5 +++++
 .../settings/gr-http-password/gr-http-password.html      | 1 +
 .../elements/settings/gr-ssh-editor/gr-ssh-editor.html   | 3 +++
 .../shared/gr-confirm-dialog/gr-confirm-dialog.html      | 1 +
 .../app/elements/shared/gr-overlay/gr-overlay.html       | 2 +-
 polygerrit-ui/app/styles/app-theme.html                  | 4 ++++
 polygerrit-ui/app/styles/shared-styles.html              | 2 ++
 10 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.html b/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.html
index e9419e205b..9085971aa5 100644
--- a/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.html
@@ -26,6 +26,7 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       :host {
+        background-color: var(--dialog-background-color);
         display: block;
         padding: 1em;
       }
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.html b/polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.html
index de12ea4f2c..0da1f0012a 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.html
@@ -34,17 +34,18 @@ limitations under the License.
         padding: .5em .7em;
       }
       #container {
-        background-color: #fcfad6;
-        border: 1px solid #bbb;
+        background-color: var(--comment-background-color);
+        border: 1px solid var(--border-color);
+        color: var(--comment-text-color);
         display: block;
         margin-bottom: 1px;
         white-space: normal;
       }
       #container.unresolved {
-        background-color: #fcfaa6;
+        background-color: var(--unresolved-comment-background-color);
       }
       #commentInfoContainer {
-        border-top: 1px dotted #bbb;
+        border-top: 1px dotted var(--border-color);
         display: flex;
       }
       #unresolvedLabel {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
index 75a67bf7d6..f2cb91f6f4 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
@@ -76,7 +76,7 @@ limitations under the License.
       }
       .draftLabel,
       .draftTooltip {
-        color: #999;
+        color: var(--deemphasized-text-color);
         display: none;
       }
       .date {
@@ -151,7 +151,7 @@ limitations under the License.
         margin-left: .4em;
       }
       .robotId {
-        color: #808080;
+        color: var(--deemphasized-text-color);
         margin-bottom: .8em;
         margin-top: -.4em;
       }
@@ -168,7 +168,7 @@ limitations under the License.
         display: none;
       }
       label.show-hide {
-        color: var(--primary-text-color);
+        color: var(--comment-text-color);
         cursor: pointer;
         display: block;
         font-size: .8rem;
@@ -201,7 +201,7 @@ limitations under the License.
         margin: 0;
       }
       .resolve label {
-        color: #333;
+        color: var(--comment-text-color);
         font-size: var(--font-size-small);
       }
       gr-confirm-dialog .main {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html b/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
index cf5ffedfff..375e598815 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
@@ -44,6 +44,11 @@ limitations under the License.
       .actions {
         padding: 1em 1.5em;
       }
+      .header,
+      .mainContainer,
+      .actions {
+        background-color: var(--dialog-background-color);
+      }
       .header {
         border-bottom: 1px solid var(--border-color);
         font-family: var(--font-family-bold);
diff --git a/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.html b/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.html
index 1164375e32..2fe07ca397 100644
--- a/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.html
+++ b/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.html
@@ -79,6 +79,7 @@ limitations under the License.
           If you lose it, you will need to generate a new one.
         </section>
         <gr-button
+            link
             class="closeButton"
             on-tap="_closeOverlay">Close</gr-button>
       </div>
diff --git a/polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.html b/polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.html
index b1b91cc125..ab12403e92 100644
--- a/polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.html
@@ -74,12 +74,14 @@ limitations under the License.
                 <td>[[_getStatusLabel(key.valid)]]</td>
                 <td>
                   <gr-button
+                      link
                       on-tap="_showKey"
                       data-index$="[[index]]"
                       link>Click to View</gr-button>
                 </td>
                 <td>
                   <gr-button
+                      link
                       data-index$="[[index]]"
                       on-tap="_handleDeleteKey">Delete</gr-button>
                 </td>
@@ -123,6 +125,7 @@ limitations under the License.
         </section>
         <gr-button
             id="addButton"
+            link
             disabled$="[[_computeAddButtonDisabled(_newKey)]]"
             on-tap="_handleAddKey">Add new SSH key</gr-button>
       </fieldset>
diff --git a/polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html b/polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html
index 1656c8ea6d..534415ecd8 100644
--- a/polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html
+++ b/polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html
@@ -23,6 +23,7 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       :host {
+        color: var(--primary-text-color);
         display: block;
         max-height: 90vh;
       }
diff --git a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
index ea940869bf..e94b655f9e 100644
--- a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
+++ b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
@@ -23,7 +23,7 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       :host {
-        background: var(--view-background-color);
+        background: var(--dialog-background-color);
         box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       }
 
diff --git a/polygerrit-ui/app/styles/app-theme.html b/polygerrit-ui/app/styles/app-theme.html
index a4677707df..24858eed11 100644
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/polygerrit-ui/app/styles/app-theme.html
@@ -81,6 +81,10 @@ limitations under the License.
   --diff-highlight-range-color: rgba(255, 213, 0, 0.5);
   --diff-highlight-range-hover-color: rgba(255, 255, 0, 0.5);
 
+  --comment-text-color: #000;
+  --comment-background-color: #fcfad6;
+  --unresolved-comment-background-color: #fcfaa6;
+
   --edit-mode-background-color: #ebf5fb;
 
   --syntax-default-color: var(--primary-text-color);
diff --git a/polygerrit-ui/app/styles/shared-styles.html b/polygerrit-ui/app/styles/shared-styles.html
index f97408db84..99c442376a 100644
--- a/polygerrit-ui/app/styles/shared-styles.html
+++ b/polygerrit-ui/app/styles/shared-styles.html
@@ -36,7 +36,9 @@ limitations under the License.
       input,
       iron-autogrow-textarea {
         background-color: inherit;
+        border: 1px solid var(--border-color);
         box-sizing: border-box;
+        color: var(--primary-text-color);
         margin: 0;
         padding: 0;
       }