From 84f60a21f99a7bcca16acffbb62dcea8dc3b59b4 Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Thu, 12 Oct 2023 12:20:04 -0700
Subject: [PATCH] work on statediff styles

---
 src/app/line/linecomps.tsx |  4 +++-
 src/app/line/lines.less    | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/line/linecomps.tsx b/src/app/line/linecomps.tsx
index 228103e3..648855c3 100644
--- a/src/app/line/linecomps.tsx
+++ b/src/app/line/linecomps.tsx
@@ -704,9 +704,11 @@ class LineCmd extends React.Component<
                         >
                             <If condition={rsdiff == null || rsdiff == ""}>
                                 <div className="cmd-rtnstate-label">state unchanged</div>
+                                <div className="cmd-rtnstate-sep"></div>
                             </If>
                             <If condition={rsdiff != null && rsdiff != ""}>
-                                <div className="cmd-rtnstate-label" style={{fontSize: rtnStateDiffSize-1}}>new state</div>
+                                <div className="cmd-rtnstate-label">new state</div>
+                                <div className="cmd-rtnstate-sep"></div>
                                 <div className="cmd-rtnstate-diff" style={{fontSize: rtnStateDiffSize}}>{this.rtnStateDiff.get()}</div>
                             </If>
                         </div>
diff --git a/src/app/line/lines.less b/src/app/line/lines.less
index 3d0c69dc..8d70b4b6 100644
--- a/src/app/line/lines.less
+++ b/src/app/line/lines.less
@@ -132,22 +132,33 @@
         .cmd-rtnstate-label {
             font-family: @terminal-font;
             position: relative;
+            font-size: 10px;
             z-index: 2;
-            margin: 6px 0 -2px 10px;
-            padding: 2px 5px 2px 0px;
+            margin: 6px 0 2px 10px;
+            padding: 2px 5px 0px 5px;
             display: inline-block;
             font-size: 0.8em;
-            opacity: 0.5;
+            color: @term-white;
+            background-color: #151715;
         }
 
         .cmd-rtnstate-diff {
             font-family: @terminal-font;
             color: @term-white;
             white-space: pre;
-            margin-left: 15px;
+            margin-left: 20px;
             font-size: 11px;
             line-height: 1.2;
         }
+
+        .cmd-rtnstate-sep {
+            height: 1px;
+            border-bottom: 1px solid #333;
+            position: relative;
+            top: -10px;
+            width: min(300px, 50%);
+            margin-bottom: -4px;
+        }
     }
 }