visual css adjustments after review

app/app.ts

@@ -50,7 +50,7 @@ appRouter.get('/config', (_req: Request, res: Response, next: (err: unknown) =>
       ...config.get('frontend'),
       gitRev: state.gitRev,
       idpList: state.idpList,
-      version: process.env.npm_package_version
+      version: appVersion
     });
   } catch (err) {
     next(err);

frontend/src/assets/main.scss

@@ -30,6 +30,7 @@ body {
     "Droid Sans",
     "Helvetica Neue",
     sans-serif;
+  line-height: 1.6;
   font-weight: normal;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -66,7 +67,6 @@ h5 {
 }
 
 p {
-  line-height: 1.5rem;
   margin-top: 0;
 }
 
@@ -114,7 +114,7 @@ a:visited {
     margin: 1rem 5rem 1rem 5rem;
   }
   @media screen and (min-width: 1600px) {
-    margin: 1rem 10% 1rem 10%;
+    margin: 1rem 15% 1rem 15%;
   }
 }
 
@@ -159,6 +159,7 @@ a:visited {
 }
 
 .p-button {
+  border-width: 2px;
   &:not(.p-button-secondary, .p-button-success, .p-button-info, .p-button-warning, .p-button-help, .p-button-danger) {
     color: $bcbox-primary;
     &:not(.p-button-outlined, .p-button-text) {
@@ -233,9 +234,20 @@ a:visited {
     justify-content: right;
   }
 
+  .header-center .p-column-header-content {
+    justify-content: center;
+  }
+  .content-center {
+    text-align: center !important;
+  }
+  .header-right .p-column-header-content {
+    justify-content: right;
+  }
   .action-buttons {
     text-align: right;
+    // width: 150px;
   }
+
   .action-buttons .p-button {
     padding: 0;
     margin-left: 1rem;
@@ -257,6 +269,7 @@ a:visited {
 
 /* modals */
 .bcbox-info-dialog {
+  width: 800px;
   .p-dialog-header {
     padding-bottom: 0;
 
@@ -291,6 +304,13 @@ a:visited {
   justify-content: left;
 }
 
+.p-tabview-header.p-disabled .p-tabview-nav-link {
+  color: gray;
+}
+.p-tabview-header:not(.p-disabled) .p-tabview-nav-link {
+  border-color: $bcbox-link-text;
+}
+
 /* side panel */
 
 .side-panel {

frontend/src/components/bucket/BucketTable.vue

@@ -262,7 +262,7 @@ watch(getBuckets, () => {
         v-if="!getIsLoading"
         class="flex justify-content-center"
       >
-        <h4>There are no buckets associated with your account.</h4>
+        <h3>There are no buckets associated with your account.</h3>
       </div>
     </template>
     <template #loadingicon>
@@ -299,9 +299,9 @@ watch(getBuckets, () => {
     </Column>
     <Column
       header="Actions"
+      header-class="text-right"
+      body-class="action-buttons"
       style="width: 250px"
-      header-class="header-right flex justify-content-end"
-      body-class="content-right action-buttons justify-content-end"
     >
       <template #body="{ node }">
         <span v-if="!node.data.dummy">
@@ -355,7 +355,7 @@ watch(getBuckets, () => {
     v-model:visible="permissionsVisible"
     :draggable="false"
     :modal="true"
-    class="bcbox-info-dialog permissions-modal"
+    class="bcbox-info-dialog"
   >
     <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>

frontend/src/components/object/ObjectFileDetails.vue

@@ -229,7 +229,7 @@ watch([props, getObjects], async () => {
     v-model:visible="permissionsVisible"
     :draggable="false"
     :modal="true"
-    class="bcbox-info-dialog permissions-modal"
+    class="bcbox-info-dialog"
   >
     <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>

frontend/src/components/object/ObjectMetadata.vue

@@ -128,7 +128,7 @@ watch([props, tsGetMetadata, vsGetMetadata], () => {
     v-model:visible="editing"
     :draggable="false"
     :modal="true"
-    class="bcbox-info-dialog permissions-modal"
+    class="bcbox-info-dialog"
   >
     <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>

frontend/src/components/object/ObjectMetadataTagForm.vue

@@ -190,13 +190,13 @@ onBeforeMount(() => {
       </span>
 
       <Button
-        class="mt-5"
+        class="mt-5 mr-2"
         label="Save"
         type="submit"
         icon="pi pi-check"
       />
       <Button
-        class="p-button-text mt-2"
+        class="p-button-outlined mt-2"
         label="Cancel"
         icon="pi pi-times"
         @click="onCancel"

frontend/src/components/object/ObjectTable.vue

@@ -157,7 +157,7 @@ const filters = ref({
           v-if="!useAppStore().getIsLoading"
           class="flex justify-content-center"
         >
-          <h4>There are no objects associated with your account in this bucket.</h4>
+          <h3>There are no objects associated with your account in this bucket.</h3>
         </div>
       </template>
       <template #loading>
@@ -171,6 +171,7 @@ const filters = ref({
         field="name"
         :sortable="true"
         header="Name"
+        header-style="min-width: 25%"
         body-class="truncate"
       >
         <template #body="{ data }">
@@ -219,9 +220,9 @@ const filters = ref({
       </Column>
       <Column
         header="Actions"
-        style="width: 250px"
-        header-class="header-right flex justify-content-end"
-        body-class="content-right action-buttons justify-content-end"
+        header-style="min-width: 270px"
+        header-class="header-right"
+        body-class="action-buttons"
       >
         <template #body="{ data }">
           <ShareObjectButton :id="data.id" />
@@ -277,7 +278,7 @@ const filters = ref({
       v-model:visible="permissionsVisible"
       :draggable="false"
       :modal="true"
-      class="bcbox-info-dialog permissions-modal"
+      class="bcbox-info-dialog"
     >
       <!-- eslint-enable vue/no-v-model-argument -->
       <template #header>

frontend/src/components/object/ObjectTag.vue

@@ -129,7 +129,7 @@ watch([props, tsGetTagging, vsGetTagging], () => {
     v-model:visible="editing"
     :draggable="false"
     :modal="true"
-    class="bcbox-info-dialog permissions-modal"
+    class="bcbox-info-dialog"
   >
     <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>

frontend/src/components/object/ObjectUploadBasic.vue

@@ -42,10 +42,9 @@ const confirm = useConfirm();
 const toast = useToast();
 
 const confirmUpdate = () => {
-  let confirmMessage =  'Please confirm that you want to upload a new version.';
+  let confirmMessage = 'Please confirm that you want to upload a new version.';
   if (versionStore.findS3VersionByObjectId(props.objectId) === null) {
-    confirmMessage = 'This is a non-versioned bucket. ' +
-      'Uploading a new version will overwrite the current version.';
+    confirmMessage = 'This is a non-versioned bucket. ' + 'Uploading a new version will overwrite the current version.';
   }
   confirm.require({
     message: confirmMessage,
@@ -139,7 +138,7 @@ const closeModal = () => {
     v-model:visible="editing"
     :draggable="false"
     :modal="true"
-    class="bcbox-info-dialog permissions-modal"
+    class="bcbox-info-dialog"
   >
     <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>

frontend/src/components/object/ObjectUploadFile.vue

@@ -108,7 +108,7 @@ const closeModal = () => {
       v-model:visible="editing"
       :draggable="false"
       :modal="true"
-      class="bcbox-info-dialog permissions-modal"
+      class="bcbox-info-dialog"
     >
       <!-- eslint-enable vue/no-v-model-argument -->
       <template #header>