From fb42e5259c7aadac9a7eeb05b6741fb3a9ecd315 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 20 Jun 2018 14:54:13 -0700
Subject: [PATCH] Polish severity color config UI

---
 ui/src/logs/components/OptionsOverlay.tsx     | 29 +++++++++++++------
 .../style/components/logs-viewer-options.scss | 16 ++++++++++
 2 files changed, 36 insertions(+), 9 deletions(-)
diff --git a/ui/src/logs/components/OptionsOverlay.tsx b/ui/src/logs/components/OptionsOverlay.tsx
index 85a7c82761..ca1dafa6d9 100644
--- a/ui/src/logs/components/OptionsOverlay.tsx
+++ b/ui/src/logs/components/OptionsOverlay.tsx
@@ -38,14 +38,23 @@ class OptionsOverlay extends Component<Props, State> {
       <Container maxWidth={700}>
         <Heading title="Configure Log Viewer" onDismiss={onDismissOverlay} />
         <Body>
-          <button
-            className="btn btn-sm btn-default"
-            onClick={this.handleResetSeverity}
-          >
-            <span className="icon refresh" />
-            Reset to Defaults
-          </button>
-          {this.severityConfigs}
+          <div className="row">
+            <div className="col-sm-6">
+              <label className="form-label">Customize Severity Colors</label>
+              {this.severityConfigs}
+              <button
+                className="btn btn-sm btn-default btn-block"
+                onClick={this.handleResetSeverity}
+              >
+                <span className="icon refresh" />
+                Reset to Defaults
+              </button>
+            </div>
+            <div className="col-sm-6">
+              <label className="form-label">Order Table Columns</label>
+              <p>Column re-ordering goes here</p>
+            </div>
+          </div>
         </Body>
       </Container>
     )
@@ -58,7 +67,9 @@ class OptionsOverlay extends Component<Props, State> {
       <div className="logs-options--color-list">
         {workingSeverityConfigs.map(config => (
           <div key={uuid.v4()} className="logs-options--color-row">
-            <div className="logs-options--color-column">{config.severity}</div>
+            <div className="logs-options--color-column">
+              <div className="logs-options--label">{config.severity}</div>
+            </div>
             <div className="logs-options--color-column">
               <ColorDropdown
                 selected={config.override || config.default}
diff --git a/ui/src/style/components/logs-viewer-options.scss b/ui/src/style/components/logs-viewer-options.scss
index a0470a2d02..7b80d60ebc 100644
--- a/ui/src/style/components/logs-viewer-options.scss
+++ b/ui/src/style/components/logs-viewer-options.scss
@@ -18,4 +18,20 @@
 
 .logs-options--color-column {
   width: 50%;
+}
+
+.logs-options--label {
+  height: 30px;
+  border-radius: $radius;
+  background-color: $g3-castle;
+  padding: 0 11px;
+  line-height: 30px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: $g13-mist;
+  font-weight: 500;
+  font-size: 13px;
+  margin-right: 4px;
+  @include no-user-select();
 }
\ No newline at end of file
