chore: reduce button gap and padding (#194)

* chore: reduce button gap and padding

* chore: update color and margins

Author: sinapah

workload/ui/index.html

@@ -66,14 +66,14 @@ <h3>Applications</h3>
                   </div>
                   <div class="p-matrix__content">
                     <h3 class="p-matrix__title">{{name}}</h3>
-                    <div class="" style="display: flex; gap: 0;">
-        <button class="p-tooltip--btm-center openLinkBtn" id="ui-button" data-link="{{url}}" {{#unless url}}disabled{{/unless}}>
+                    <div style="display: flex;">
+        <button class="p-tooltip--btm-center openLinkBtn customBtn" id="ui-button" data-link="{{url}}" {{#unless url}}disabled{{/unless}}>
                             <span class="iconify custom-icon" data-icon="mdi-web"></span>
                             <span class="p-tooltip__message" role="tooltip" id="default-tooltip">Visit UI</span>
                       </button>
 
                       {{#with this}}
-                        <button class="p-tooltip--btm-center" aria-controls="modal-{{@index}}" {{#unless (hasKeys api_endpoints)}}disabled{{/unless}}>
+                        <button class="p-tooltip--btm-center customBtn" aria-controls="modal-{{@index}}" {{#unless (hasKeys api_endpoints)}}disabled{{/unless}}>
                           <span class="iconify custom-icon" data-icon="mdi-api"></span>
                           <span class="p-tooltip__message" role="tooltip">View endpoints</span>
                         </button>
@@ -95,7 +95,7 @@ <h2 class="p-modal__title" id="modal-title-{{@index}}">API Endpoints for {{name}
                         {{/getKeys}}
                       {{/with}}
 
-        <button class="p-tooltip--btm-center openLinkBtn" id="docs-button" data-link="{{api_docs}}" {{#unless api_docs}}disabled{{/unless}}>
+        <button class="p-tooltip--btm-center openLinkBtn customBtn" id="docs-button" data-link="{{api_docs}}" {{#unless api_docs}}disabled{{/unless}}>
                           <span class="iconify custom-icon" data-icon="mdi-file-document"></span>
                           <span class="p-tooltip__message" role="tooltip" id="default-tooltip">Read docs</span>
                       </button>

workload/ui/ui.css

@@ -17,5 +17,11 @@
 }
 
 .custom-icon {
-  color: #008494;
+  color: #333;
+  font-size: 16px;
+}
+
+.customBtn {
+  margin: 8px 0.5em 16px 0px;
+  padding: 2.7px 12px;
 }