From 0e0b37960f0e818da389138cdbc74af21d76f2b3 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 19 Dec 2023 19:46:56 +0000
Subject: [PATCH] Update widget appearance (#279)

---
 .../settingsForm.jelly                        | 42 ++++++++++++-------
 .../usersettings.jelly                        | 39 +++++++++++------
 2 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/src/main/resources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/settingsForm.jelly b/src/main/resources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/settingsForm.jelly
index 6b8004f9..e7f04d49 100644
--- a/src/main/resources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/settingsForm.jelly
+++ b/src/main/resources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/settingsForm.jelly
@@ -1,17 +1,29 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core">
-<form>
-    <label>
-        <input type="radio" name="timestamps" id="timestamper-systemTime">${%System clock time}</input>
-    </label>
-    <label>
-        <input type="checkbox" id="timestamper-localTime" style="margin-left: 15px;">${%Use browser timezone}</input>
-    </label>
-    <label>
-        <input type="radio" name="timestamps" id="timestamper-elapsedTime">${%Elapsed time}</input>
-    </label>
-    <label>
-        <input type="radio" name="timestamps" id="timestamper-none">${%None}</input>
-    </label>
-</form>
-</j:jelly>
\ No newline at end of file
+    <form>
+        <div class="jenkins-radio">
+            <input type="radio" name="timestamps" id="timestamper-systemTime" class="jenkins-radio__input" />
+            <label for="timestamper-systemTime" class="jenkins-radio__label">
+                ${%System clock time}
+            </label>
+        </div>
+        <div class="jenkins-checkbox jenkins-!-margin-left-2">
+            <input type="checkbox" id="timestamper-localTime" />
+            <label for="timestamper-localTime">
+                ${%Use browser timezone}
+            </label>
+        </div>
+        <div class="jenkins-radio">
+            <input type="radio" name="timestamps" id="timestamper-elapsedTime" class="jenkins-radio__input" />
+            <label for="timestamper-elapsedTime" class="jenkins-radio__label">
+                ${%Elapsed time}
+            </label>
+        </div>
+        <div class="jenkins-radio">
+            <input type="radio" name="timestamps" id="timestamper-none" class="jenkins-radio__input" />
+            <label for="timestamper-none" class="jenkins-radio__label">
+                ${%None}
+            </label>
+        </div>
+    </form>
+</j:jelly>
diff --git a/src/main/resources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/usersettings.jelly b/src/main/resources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/usersettings.jelly
index e48ce9f5..ef3e445a 100644
--- a/src/main/resources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/usersettings.jelly
+++ b/src/main/resources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/usersettings.jelly
@@ -29,23 +29,36 @@ THE SOFTWARE.
   
   <l:ajax>
     <style>
-      .timestamper-form-pane {
-        padding: .5rem 1rem;
-        clear: both
+      #timestamper-pane .pane-header-title {
+        display: flex;
+        justify-content: space-between;
       }
-      .timestamper-form-pane label {
-        line-height: 2rem;
-        display: block;
+      .timestamper-form-pane {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        form {
+          display: contents;
+        }
+
+        * {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+          top: 0 !important;
+        }
       }
     </style>
-    <div>
-      <div class="pane-header col-xs-24">
-        <span class="pane-header-title">${%Timestamps}</span>
-        <span><a class="timestamper-plain-text" href="${it.plainTextUrl}">${%View as plain text}</a></span>
-      </div>
-      <div class="timestamper-form-pane">
+
+    <j:set var="title">
+      <span class="pane-header-title">${%Timestamps}</span>
+      <a class="timestamper-plain-text" href="${it.plainTextUrl}">${%View as plain text}</a>
+    </j:set>
+
+    <l:pane width="3" title="${title}" id="timestamper-pane">
+      <div class="timestamper-form-pane jenkins-!-padding-2">
         <st:include page="settingsForm.jelly"/>
       </div>
-    </div>
+    </l:pane>
   </l:ajax>
 </j:jelly>