Update content blocks

janfaracik · Aug 12, 2023 · ae8736a · ae8736a
1 parent f4ff508
commit ae8736a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 72 deletions.
diff --git a/core/src/main/resources/hudson/model/AllView/noJob.groovy b/core/src/main/resources/hudson/model/AllView/noJob.groovy
@@ -31,9 +31,7 @@ div {
                             a(href: "newJob", class: "content-block__link") {
                                 span(_("createJob"))
                                 span(class: "trailing-icon") {
-                                    l.icon(
-                                            class: "icon-md",
-                                            src: "symbol-arrow-right")
+                                    l.icon(src: "symbol-add")
                                 }
                             }
                         }
@@ -48,9 +46,7 @@ div {
                                 a(href: "computer/new", class: "content-block__link") {
                                     span(_("setUpAgent"))
                                     span(class: "trailing-icon") {
-                                        l.icon(
-                                                class: "icon-md",
-                                                src: "symbol-arrow-right")
+                                        l.icon(src: "symbol-computer")
                                     }
                                 }
                             }
@@ -60,9 +56,7 @@ div {
                                     a(href: "cloud/", class: "content-block__link") {
                                         span(_("setUpCloud"))
                                         span(class: "trailing-icon") {
-                                            l.icon(
-                                                    class: "icon-md",
-                                                    src: "symbol-arrow-right")
+                                            l.icon(src: "symbol-cloud")
                                         }
                                     }
                                 }
@@ -71,12 +65,10 @@ div {
                             li(class: "content-block") {
                                 a(href: "https://www.jenkins.io/redirect/distributed-builds",
                                         target: "_blank",
-                                        class: "content-block__link content-block__help-link") {
+                                        class: "content-block__link") {
                                     span(_("learnMoreDistributedBuilds"))
                                     span(class: "trailing-icon") {
-                                        l.icon(
-                                                class: "icon-md",
-                                                src: "symbol-link")
+                                        l.icon(src: "symbol-help-circle")
                                     }
                                 }
                             }

diff --git a/core/src/main/resources/hudson/model/View/main.groovy b/core/src/main/resources/hudson/model/View/main.groovy
@@ -22,4 +22,4 @@ if (items == null) {
             include(my.owner.viewsTabBar,"viewTabs")
         }
     }
-}
+}
diff --git a/core/src/main/resources/jenkins/agents/CloudSet/index.jelly b/core/src/main/resources/jenkins/agents/CloudSet/index.jelly
@@ -90,7 +90,7 @@ THE SOFTWARE.
                        class="content-block__link">
                       <span>${%newCloud}</span>
                       <span class="trailing-icon">
-                        <l:icon class="icon-md" src="symbol-arrow-right"/>
+                        <l:icon src="symbol-arrow-right"/>
                       </span>
                     </a>
                   </li>
@@ -100,17 +100,17 @@ THE SOFTWARE.
                      class="content-block__link">
                     <span>${%installCloudPlugin}</span>
                     <span class="trailing-icon">
-                      <l:icon class="icon-md" src="symbol-arrow-right"/>
+                      <l:icon src="symbol-plugins" />
                     </span>
                   </a>
                 </li>
                 <li class="content-block">
                   <a href="https://www.jenkins.io/redirect/distributed-builds"
-                     class="content-block__link content-block__help-link"
+                     class="content-block__link"
                      target="_blank" rel="noopener noreferrer">
                     <span>${%learnMoreDistributedBuilds}</span>
                     <span class="trailing-icon">
-                      <l:icon class="icon-md" src="symbol-link"/>
+                      <l:icon src="symbol-help-circle" />
                     </span>
                   </a>
                 </li>

diff --git a/war/src/main/scss/modules/content-blocks.scss b/war/src/main/scss/modules/content-blocks.scss
@@ -1,81 +1,50 @@
 @use "../abstracts/mixins";
 
-.content-block {
-  border-radius: 4px;
-  border: 2px solid var(--light-grey);
-}
-
-.content-block__body {
-  padding: 1.5rem;
-}
-
-.content-block__body > *:first-child {
-  margin-top: 0;
-}
-
-.content-block__body > *:last-child {
-  margin-bottom: 0;
-}
-
-.content-block__footer {
-  background-color: var(--light-grey);
-  padding: 0.5rem 1.5rem;
-}
-
-.content-block__link-list {
-  padding: 0;
-}
-
-.content-block__link-list li {
-  list-style: none;
-  width: 100%;
-
-  &:not(:last-child) {
-    margin-bottom: 0.75rem;
-  }
-}
-
 .content-block__link {
-  padding: 0.5rem 1rem;
+  @include mixins.item;
+
   display: flex;
   justify-content: space-between;
-  background-color: var(--light-grey);
-
-  @include mixins.link-dark;
-
-  &:focus {
-    outline-color: var(--focus);
+  align-items: center;
+  padding: 0.75rem 1.1rem;
+  color: var(--text-color) !important;
+  font-weight: 500;
+  text-decoration: none !important;
+
+  &::before {
+    background: var(--button-background);
   }
 
-  .trailing-icon .svg-icon {
-    &.icon-sm {
-      height: 1.25rem;
+  .trailing-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1.25rem;
+    height: 1.25rem;
+
+    svg {
       width: 1.25rem;
+      height: 1.25rem;
     }
   }
 }
 
-.content-block__help-link {
-  background-color: var(--white);
-}
-
-// Empty state specific blocks
-
 .empty-state-block {
   max-width: 600px;
   margin: 0 auto;
-  margin-top: 1.5rem;
 }
 
 .empty-state-section {
-  margin-top: 2rem;
+  margin-top: var(--section-padding);
 }
 
 .empty-state-section-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
   padding: 0;
 
   li {
     list-style: none;
-    margin-bottom: 1rem;
   }
 }