UI details

IBM · Sep 27, 2024 · c57de19 · c57de19
1 parent 4eb4a30
commit c57de19
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/frontend/src/components/home/SearchOrUploadView.vue b/frontend/src/components/home/SearchOrUploadView.vue
@@ -92,8 +92,8 @@ export default {
   padding-left: 8px;
 }
 .large-title {
-  font-size: x-large;
-  font-weight: 400;
+  font-size: large;
+  font-weight: 500;
   padding-left: 8px;
 }
 .small-header {

diff --git a/frontend/src/components/results/modal/DependenciesView.vue b/frontend/src/components/results/modal/DependenciesView.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <div style="padding-bottom: 12px;">
-      <h4 class="title" v-if="dependsOn.length > 0">
+    <div v-if="dependsOn.length > 0" style="padding-bottom: 12px;">
+      <h4 class="title">
         Depends on
       </h4>
       <div v-for="([asset, path], index) in dependsOn" :key="index">
         <div style="display: flex; align-items: center; padding: 4px 10px;">
           <Downstream24 style="margin-right:13px; scale: 1.1; fill: #05BE8D"/>
           <div>
             <div style="font-size: large;">
-              {{ getName(asset) + "   —   " + getAssetType(asset) }}
+              {{ getName(asset).toUpperCase() + "   —   " + getAssetType(asset) }}
             </div>
             <div style="font-size: small" v-if="getBomRef(asset)">
               BOM Reference: <span class="compact-code">{{ getBomRef(asset) }}</span>
@@ -30,16 +30,16 @@
       </div>
     </div>
 
-    <div style="padding-bottom: 12px;">
-      <h4 class="title" v-if="provides.length > 0">
+    <div v-if="provides.length > 0" style="padding-bottom: 12px;">
+      <h4 class="title">
         Provides to
       </h4>
       <div v-for="([asset, path], index) in provides" :key="index">
         <div style="display: flex; align-items: center; padding: 4px 10px;">
           <Upstream24 style="margin-right:13px; scale: 1.1; fill: #188A99"/>
           <div>
             <div style="font-size: large;">
-              {{ getName(asset) + "   —   " + getAssetType(asset) }}
+              {{ getName(asset).toUpperCase() + "   —   " + getAssetType(asset) }}
             </div>
             <div style="font-size: small" v-if="getBomRef(asset)">
               BOM Reference: <span class="compact-code">{{ getBomRef(asset) }}</span>
@@ -60,16 +60,16 @@
       </div>
     </div>
 
-    <div style="padding-bottom: 12px;">
-      <h4 class="title" v-if="isDependedOn.length > 0">
+    <div v-if="isDependedOn.length > 0" style="padding-bottom: 12px;">
+      <h4 class="title">
         Is used by
       </h4>
       <div v-for="([asset, path], index) in isDependedOn" :key="index">
         <div style="display: flex; align-items: center; padding: 4px 10px;">
           <Upstream24 style="margin-right:13px; scale: 1.1; fill: #FFBA1A"/>
           <div>
             <div style="font-size: large;">
-              {{ getName(asset) + "   —   " + getAssetType(asset) }}
+              {{ getName(asset).toUpperCase() + "   —   " + getAssetType(asset) }}
             </div>
             <div style="font-size: small" v-if="getBomRef(asset)">
               BOM Reference: <span class="compact-code">{{ getBomRef(asset) }}</span>
@@ -90,16 +90,16 @@
       </div>
     </div>
 
-    <div style="padding-bottom: 12px;">
-      <h4 class="title" v-if="isProvidedBy.length > 0">
+    <div v-if="isProvidedBy.length > 0" style="padding-bottom: 12px;">
+      <h4 class="title">
         Is provided by
       </h4>
       <div v-for="([asset, path], index) in isProvidedBy" :key="index">
         <div style="display: flex; align-items: center; padding: 4px 10px;">
           <Downstream24 style="margin-right:13px; scale: 1.1; fill: #FF488E"/>
           <div>
             <div style="font-size: large;">
-              {{ getName(asset) + "   —   " + getAssetType(asset) }}
+              {{ getName(asset).toUpperCase() + "   —   " + getAssetType(asset) }}
             </div>
             <div style="font-size: small" v-if="getBomRef(asset)">
               BOM Reference: <span class="compact-code">{{ getBomRef(asset) }}</span>