Restyle widget panes (#8761)

* Init * Update _style.scss * Remove more bold weights * Lower weight * Tweak widths * Fix spacing --------- Co-authored-by: Alexander Brandes <[email protected]> Co-authored-by: Tim Jacomb <[email protected]>
jenkinsci · Dec 19, 2023 · cf81b9c · cf81b9c
1 parent 7258cad
commit cf81b9c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 35 deletions.
diff --git a/war/src/main/scss/abstracts/_theme.scss b/war/src/main/scss/abstracts/_theme.scss
@@ -200,7 +200,7 @@ $semantics: (
   --link-dark-text-decoration: none;
   --link-dark-text-decoration--hover: underline;
   --link-dark-text-decoration--active: underline;
-  --link-dark-font-weight: 600;
+  --link-dark-font-weight: 500;
 
   // Pane
   --pane-border-width: 1px;

diff --git a/war/src/main/scss/base/_style.scss b/war/src/main/scss/base/_style.scss
@@ -498,7 +498,7 @@ div.listview-jobs {
     }
 
     td {
-      padding: 8px;
+      padding: 0 8px 8px;
     }
   }
 
@@ -593,7 +593,7 @@ div.listview-jobs {
 
 .build-row-cell .pane.build-name {
   width: 25%;
-  font-weight: bold;
+  font-weight: 500;
   vertical-align: top;
 }
 

diff --git a/war/src/main/scss/components/_panes-and-bigtable.scss b/war/src/main/scss/components/_panes-and-bigtable.scss
@@ -10,9 +10,6 @@
   padding: 8px 0;
   color: var(--pane-header-text-color);
   background: var(--pane-header-bg);
-  border: var(--pane-border-width) solid var(--pane-header-border-color);
-  border-left: none;
-  border-right: none;
 }
 
 .pane {

diff --git a/war/src/main/scss/components/_side-panel-widgets.scss b/war/src/main/scss/components/_side-panel-widgets.scss
@@ -1,11 +1,12 @@
 @use "../abstracts/mixins";
 
 #side-panel .pane-frame {
-  border-radius: 0;
-  border-left: none;
-  border-right: none;
-  border-color: var(--panel-border-color);
-  border-width: 1px;
+  border-radius: 1rem;
+  background: var(--card-background);
+  border: var(--card-border-width) solid var(--card-border-color);
+  margin-left: 10px;
+  margin-bottom: calc(var(--section-padding) / 2);
+  overflow: hidden;
 }
 
 #side-panel .pane-header {
@@ -20,16 +21,14 @@
 #side-panel .pane-header,
 #side-panel .pane-footer {
   color: var(--link-dark-color);
-  background-color: var(--panel-header-bg-color);
-  border-radius: 0;
-  border-width: 1px;
-  padding: 0.5rem 1.25rem;
+  background: transparent;
+  padding: 0.65rem 1rem;
 }
 
 #side-panel .pane-header-title {
   display: inline-block;
   flex: 1;
-  font-weight: bold;
+  font-weight: 500;
 
   & > div {
     font-weight: normal;
@@ -85,21 +84,6 @@
   text-decoration: underline;
 }
 
-#side-panel .pane-header a {
-  font-weight: bold;
-}
-
-#side-panel .pane-content a {
-  font-weight: 600;
-}
-
-/**
- * Build Queue
- */
-#buildQueue {
-  margin-bottom: var(--section-padding);
-}
-
 /**
  * Executors
  */
@@ -123,8 +107,8 @@
 }
 
 .build-row-cell .pane.build-name {
-  width: 30%;
-  font-weight: bold;
+  width: 32%;
+  font-weight: 500;
   vertical-align: top;
 }
 
@@ -133,7 +117,7 @@
 }
 
 .build-row-cell .pane.build-controls {
-  width: 20%;
+  width: 18%;
   text-align: right;
 }
 
@@ -257,7 +241,7 @@
 .jenkins-pane__header--build-history {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  font-weight: bold !important;
+  font-weight: 500 !important;
 
   .jenkins-table__cell--tight {
     width: auto;