Improve app bar appearance (#635)

Author: janfaracik

src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss

@@ -373,11 +373,6 @@ a {
   cursor: pointer !important;
 }
 
-.app-details__prev_next {
-  color: inherit !important;
-  text-decoration: none !important;
-}
-
 .split-pane--stage-view {
   margin: 0;
   padding: 0;

src/main/frontend/pipeline-graph-view/app.scss

@@ -40,11 +40,6 @@
   }
 }
 
-.app-details__prev_next {
-  color: inherit !important;
-  text-decoration: none !important;
-}
-
 .pgw-graph-container {
   width: 100%;
   overflow: auto;

src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/index.jelly

@@ -5,7 +5,7 @@
          xmlns:t="/lib/hudson">
   <l:layout title="${%Graph} [${it.fullBuildDisplayName}]" type="one-column">
     <l:main-panel>
-      <p:symbols />
+      <link rel="stylesheet" href="${resURL}/plugin/pipeline-graph-view/js/style.css" type="text/css" />
 
       <j:set var="controls">
         <j:if test="${it.buildable}">
@@ -33,14 +33,14 @@
 
       <t:buildCaption controls="${controls}">
         <j:if test="${it.previousBuildNumber!=null}">
-          <a href="../../${it.previousBuildNumber}/pipeline-graph" class="app-details__prev_next">
-            <l:icon class="symbol-chevron-back-outline plugin-ionicons-api icon-md" tooltip="${%Previous Build}" />
+          <a href="../../${it.previousBuildNumber}/pipeline-graph" class="jenkins-button jenkins-button--tertiary app-details__prev_next" tooltip="${%Previous Build}">
+            <l:icon class="symbol-chevron-back-outline plugin-ionicons-api icon-md" />
           </a>
         </j:if>
-        ${%Build} ${it.buildDisplayName}
+        ${it.buildDisplayName}
         <j:if test="${it.nextBuildNumber!=null}">
-          <a href="../../${it.nextBuildNumber}/pipeline-graph" class="app-details__prev_next">
-            <l:icon class="symbol-chevron-forward-outline plugin-ionicons-api icon-md" tooltip="${%Next Build}"/>
+          <a href="../../${it.nextBuildNumber}/pipeline-graph" class="jenkins-button jenkins-button--tertiary app-details__prev_next" tooltip="${%Next Build}">
+            <l:icon class="symbol-chevron-forward-outline plugin-ionicons-api icon-md" />
           </a>
         </j:if>
       </t:buildCaption>

src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/summary.jelly

@@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:p="/lib/pipeline-graph-view">
+<j:jelly xmlns:j="jelly:core">
   <j:if test="${it.showGraphOnBuildPage}">
-    <p:symbols />
     <div class="pgw-graph-container">
       <div id="graph"
            data-current-run-path="${rootURL + '/' + it.buildUrl}"

src/main/resources/io/jenkins/plugins/pipelinegraphview/consoleview/PipelineConsoleViewAction/index.jelly

@@ -1,12 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:dd="/lib/layout/dropdowns"
-         xmlns:p="/lib/pipeline-graph-view" xmlns:t="/lib/hudson">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:dd="/lib/layout/dropdowns" xmlns:t="/lib/hudson">
     <l:layout title="${%Build log} [${it.buildDisplayName}]" type="one-column">
         <l:main-panel>
-            <p:symbols />
-
+            <link rel="stylesheet" href="${resURL}/plugin/pipeline-graph-view/js/style.css" type="text/css" />
             <j:out value="${h.generateConsoleAnnotationScriptAndStylesheet()}"/>
 
             <j:set var="controls">
@@ -43,14 +41,14 @@
 
             <t:buildCaption controls="${controls}">
                 <j:if test="${it.previousBuildNumber!=null}">
-                    <a href="../../${it.previousBuildNumber}/pipeline-console" class="app-details__prev_next">
-                        <l:icon class="symbol-chevron-back-outline plugin-ionicons-api icon-md" tooltip="${%Previous Build}"/>
+                    <a href="../../${it.previousBuildNumber}/pipeline-console" class="jenkins-button jenkins-button--tertiary app-details__prev_next" tooltip="${%Previous Build}">
+                        <l:icon class="symbol-chevron-back-outline plugin-ionicons-api icon-md" />
                     </a>
                 </j:if>
-                ${%Build} ${it.buildDisplayName}
+                ${it.buildDisplayName}
                 <j:if test="${it.nextBuildNumber!=null}">
-                    <a href="../../${it.nextBuildNumber}/pipeline-console" class="app-details__prev_next">
-                        <l:icon class="symbol-chevron-forward-outline plugin-ionicons-api icon-md" tooltip="${%Next Build}"/>
+                    <a href="../../${it.nextBuildNumber}/pipeline-console" class="jenkins-button jenkins-button--tertiary app-details__prev_next" tooltip="${%Next Build}">
+                        <l:icon class="symbol-chevron-forward-outline plugin-ionicons-api icon-md" />
                     </a>
                 </j:if>
             </t:buildCaption>

src/main/resources/io/jenkins/plugins/pipelinegraphview/multipipelinegraphview/MultiPipelineGraphViewAction/index.jelly

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:p="/lib/pipeline-graph-view">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
   <l:layout title="Stages [${it.jobDisplayName}]" type="one-column">
     <l:main-panel>
       <l:app-bar title="${%Build} ${it.jobDisplayName}">
@@ -23,7 +23,6 @@
           </a>
         </l:hasPermission>
       </l:app-bar>
-      <p:symbols />
       <div id="multiple-pipeline-root"
            data-current-job-path="${rootURL + '/' + it.jobUrl}" />
       <script src="${rootURL}/plugin/pipeline-graph-view/js/bundles/multi-pipeline-graph-view-bundle.js"/>

src/main/resources/io/jenkins/plugins/pipelinegraphview/multipipelinegraphview/MultiPipelineGraphViewAction/jobMain.jelly

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form"  xmlns:p="/lib/pipeline-graph-view">
-  <p:symbols />
   <j:if test="${it.showGraphOnJobPage}">
     <div id="multiple-pipeline-root"
          data-current-job-path="${rootURL + '/' + it.jobUrl}" />

src/main/resources/lib/pipeline-graph-view/symbols.jelly

@@ -0,0 +1,23 @@
+h1 {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.app-details__prev_next {
+  padding: 0.5rem;
+  min-width: 2.375rem;
+  border-radius: 100px;
+  margin-inline: -0.75rem;
+  color: var(--text-color-secondary) !important;
+
+  &::before,
+  &::after {
+    inset: 0.375rem;
+  }
+
+  svg {
+    width: 1.175rem !important;
+    height: 1.175rem !important;
+  }
+}