Improve performance bar design

app/assets/javascripts/performance_bar/components/add_request.vue

@@ -27,7 +27,7 @@ export default {
   <div id="peek-view-add-request" class="view">
     <form class="form-inline" @submit.prevent>
       <button
-        class="btn-blank btn-link bold"
+        class="btn-blank btn-link bold gl-text-blue-300"
         type="button"
         :title="__(`Add request manually`)"
         @click="toggleInput"

app/assets/javascripts/performance_bar/components/detailed_metric.vue

@@ -94,9 +94,9 @@ export default {
     data-qa-selector="detailed_metric_content"
   >
     <gl-button v-gl-modal="modalId" class="gl-mr-2" type="button" variant="link">
-      {{ metricDetailsLabel }}
+      <span class="gl-text-blue-300">{{ metricDetailsLabel }}</span>
     </gl-button>
-    <gl-modal :modal-id="modalId" :title="header" size="lg" modal-class="gl-mt-7" scrollable>
+    <gl-modal :modal-id="modalId" :title="header" size="lg" footer-class="d-none" scrollable>
       <table class="table">
         <template v-if="detailsList.length">
           <tr v-for="(item, index) in detailsList" :key="index">
@@ -116,7 +116,7 @@ export default {
                   {{ item[key] }}
                   <gl-button
                     v-if="keyIndex == 0 && item.backtrace"
-                    class="gl-ml-3"
+                    class="btn-sm gl-ml-3"
                     data-testid="backtrace-expand-btn"
                     type="button"
                     :aria-label="__('Toggle backtrace')"

app/assets/javascripts/performance_bar/components/performance_bar_app.vue

@@ -120,7 +120,7 @@ export default {
   <div id="js-peek" :class="env">
     <div
       v-if="currentRequest"
-      class="d-flex container-fluid container-limited"
+      class="d-flex container-fluid container-limited justify-content-center"
       data-qa-selector="performance_bar"
     >
       <div id="peek-view-host" class="view">
@@ -147,11 +147,15 @@ export default {
         id="peek-view-trace"
         class="view"
       >
-        <a :href="currentRequest.details.tracing.tracing_url">{{ s__('PerformanceBar|trace') }}</a>
+        <a class="gl-text-blue-300" :href="currentRequest.details.tracing.tracing_url">{{
+          s__('PerformanceBar|trace')
+        }}</a>
       </div>
       <add-request v-on="$listeners" />
       <div v-if="currentRequest.details" id="peek-download" class="view">
-        <a :download="downloadName" :href="downloadPath">{{ s__('PerformanceBar|Download') }}</a>
+        <a class="gl-text-blue-300" :download="downloadName" :href="downloadPath">{{
+          s__('PerformanceBar|Download')
+        }}</a>
       </div>
       <request-selector
         v-if="currentRequest"

changelogs/unreleased/yo-pb-improve.yml

+---
+title: Improve Performance bar design
+merge_request: 51788
+author: Yogi (@yo)
+type: other