commit 2a155d19f97622052ad6b54e93178739a26cc99d
author Joe Gregorio <jcgregorio@google.com> Sat Jul 11 07:51:25 2020 -0400
committer Joe Gregorio <jcgregorio@google.com> Mon Jul 13 11:55:50 2020 +0000
tree 6bbfda182b63a313d13d51aaf6d0eb50e2e930c1
parent d2cf0ee78159f379d506c12ecb13179b767205fa

[perf] Style fixes for inputs and buttons.

Change-Id: I0a1bf47b671caa385c4e8948c6b9b8821e949e52
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/301818
Reviewed-by: Joe Gregorio <jcgregorio@google.com>

perf/modules/cluster-page-sk/cluster-page-sk.scss

diff --git a/perf/modules/cluster-page-sk/cluster-page-sk.scss b/perf/modules/cluster-page-sk/cluster-page-sk.scss
index 89febef..f358f45 100644
--- a/perf/modules/cluster-page-sk/cluster-page-sk.scss
+++ b/perf/modules/cluster-page-sk/cluster-page-sk.scss
@@ -16,6 +16,9 @@
   }
   div#inputs > label > input {
     display: block;
+    background: var(--surface);
+    color: var(--on-surface);
+    border: solid 1px var(--on-surface);
   }
 
   .query-action {

perf/modules/cluster-page-sk/cluster-page-sk.ts

diff --git a/perf/modules/cluster-page-sk/cluster-page-sk.ts b/perf/modules/cluster-page-sk/cluster-page-sk.ts
index da2bec3..6ac004a 100644
--- a/perf/modules/cluster-page-sk/cluster-page-sk.ts
+++ b/perf/modules/cluster-page-sk/cluster-page-sk.ts
@@ -154,30 +154,15 @@
       <div id="inputs">
         <label>
           K (A value of 0 means the server chooses).
-          <input
-            type="number"
-            min="0"
-            max="100"
-            .value=${ele.state.k}
-            @input=${ele.kChange}
-          />
+          <input .value=${ele.state.k} @input=${ele.kChange} />
         </label>
         <label>
           Number of commits to include on either side.
-          <input
-            type="number"
-            min="1"
-            max="25"
-            .value=${ele.state.radius}
-            @input=${ele.radiusChange}
-          />
+          <input .value=${ele.state.radius} @input=${ele.radiusChange} />
         </label>
         <label>
           Clusters are interesting if regression score &gt;= this.
           <input
-            type="number"
-            min="0"
-            max="500"
             .value=${ele.state.interesting}
             @input=${ele.interestingChange}
           />

perf/modules/explore-sk/explore-sk.scss

diff --git a/perf/modules/explore-sk/explore-sk.scss b/perf/modules/explore-sk/explore-sk.scss
index af68efb..c39b0f8 100644
--- a/perf/modules/explore-sk/explore-sk.scss
+++ b/perf/modules/explore-sk/explore-sk.scss
@@ -197,4 +197,10 @@
   #query-dialog paramset-sk div {
     display: block;
   }
+
+  textarea {
+    background: var(--surface);
+    color: var(--on-surface);
+    border: solid 1px var(--on-surface);
+  }
 }

perf/modules/themes/themes.scss

diff --git a/perf/modules/themes/themes.scss b/perf/modules/themes/themes.scss
index 92fad11..33787be 100644
--- a/perf/modules/themes/themes.scss
+++ b/perf/modules/themes/themes.scss
@@ -14,6 +14,16 @@
   --secondary: var(--green-500);
   --primary-variant: var(--light-blue-600);
 
+  button {
+    min-width: auto;
+    text-align: center;
+    text-transform: none;
+    outline: none;
+    padding: 4px;
+    margin: 8px;
+    height: auto;
+  }
+
   multi-select-sk {
     border: solid 1px var(--on-surface);
     background-color: var(--surface);