From 14de4b27673870c0f4a577834fe90abab6a3f843 Mon Sep 17 00:00:00 2001
From: Csaky <Tim.Csaky@gov.bc.ca>
Date: Tue, 21 Nov 2023 17:23:44 -0800
Subject: [PATCH] visual css adjustments after review

---
 app/app.ts                                    |   2 +-
 frontend/src/assets/main.scss                 |  24 ++-
 frontend/src/assets/primevue.scss             | 170 ------------------
 .../src/components/bucket/BucketTable.vue     |   8 +-
 .../components/object/ObjectFileDetails.vue   |   2 +-
 .../src/components/object/ObjectMetadata.vue  |   2 +-
 .../object/ObjectMetadataTagForm.vue          |   4 +-
 .../src/components/object/ObjectTable.vue     |  11 +-
 frontend/src/components/object/ObjectTag.vue  |   2 +-
 .../components/object/ObjectUploadBasic.vue   |   7 +-
 .../components/object/ObjectUploadFile.vue    |   2 +-
 .../src/components/object/ObjectVersion.vue   |  11 +-
 .../object/share/ShareLinkContent.vue         |   2 +-
 .../object/share/ShareObjectButton.vue        |   2 +-
 frontend/src/views/HomeView.vue               |  12 +-
 .../unit/components/layout/Footer.spec.ts     |   1 -
 16 files changed, 56 insertions(+), 206 deletions(-)
 delete mode 100644 frontend/src/assets/primevue.scss

diff --git a/app/app.ts b/app/app.ts
index d3ea43d6..830e8db3 100644
--- a/app/app.ts
+++ b/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);
diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index b93fc89e..3f32eeb0 100644
--- a/frontend/src/assets/main.scss
+++ b/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 {
diff --git a/frontend/src/assets/primevue.scss b/frontend/src/assets/primevue.scss
deleted file mode 100644
index af598ab2..00000000
--- a/frontend/src/assets/primevue.scss
+++ /dev/null
@@ -1,170 +0,0 @@
-.header-center .p-column-header-content {
-  justify-content: center;
-}
-
-// For datatables
-.header-right .p-column-header-content {
-  justify-content: right;
-}
-
-// For treetables
-.header-right .p-column-title {
-  display: flex;
-  justify-content: right;
-}
-
-.p-dialog-footer {
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.p-datatable {
-  .p-datatable-thead > tr > th {
-    background-color: transparent !important;
-  }
-
-  &.p-datatable-striped .p-datatable-tbody > tr {
-    &:nth-child(even) {
-      background-color: $bcbox-table-stripe-background;
-    }
-  }
-
-  tbody {
-    tr {
-      &.p-highlight {
-        background: $bcbox-highlight-background !important;
-      }
-
-      &:focus {
-        outline: none !important;
-      }
-    }
-  }
-
-  .p-checkbox {
-    .p-checkbox-box.p-highlight {
-      background-color: $bcbox-primary;
-      border-color: $bcbox-primary !important;
-
-      &:hover {
-        background-color: darken($bcbox-primary, 20%) !important;
-      }
-    }
-  }
-
-  .p-column-title {
-    font-weight: bold;
-  }
-
-  .p-paginator {
-    justify-content: right;
-  }
-
-  .action-buttons .p-button.p-button-lg {
-    padding: 0;
-    margin-left: 1rem;
-  }
-}
-
-.p-treetable {
-  .p-treetable-thead > tr > th {
-    background-color: transparent !important;
-  }
-
-  tbody {
-    tr {
-      &.p-highlight {
-        background: $bcbox-highlight-background !important;
-      }
-
-      &:focus {
-        outline: none !important;
-      }
-    }
-  }
-
-  .p-checkbox {
-    .p-checkbox-box.p-highlight {
-      background-color: $bcbox-primary;
-      border-color: $bcbox-primary !important;
-
-      &:hover {
-        background-color: darken($bcbox-primary, 20%) !important;
-      }
-    }
-  }
-
-  .p-column-title {
-    font-weight: bold;
-  }
-
-  .p-paginator {
-    justify-content: right;
-  }
-
-  .action-buttons .p-button.p-button-lg {
-    padding: 0;
-    margin-left: 1rem;
-  }
-}
-
-// Primary color overrides for buttons and action items (checkboxes etc)
-// Note this could be eventually replaced by a custom themeing (which has JUST been introduced in Primevue)
-// once it is more settled implementation-wise
-.p-button {
-  &:not(.p-button-secondary, .p-button-success, .p-button-info, .p-button-warning, .p-button-help, .p-button-danger) {
-    color: $bcbox-primary !important;
-
-    &:not(.p-button-outlined, .p-button-text) {
-      background-color: $bcbox-primary;
-      border-color: $bcbox-primary;
-      color: $bcbox-outline-on-primary !important;
-    }
-  }
-}
-
-.p-checkbox,
-.p-radiobutton {
-  &.p-checkbox-checked,
-  &.p-radiobutton-checked {
-    .p-checkbox-box,
-    .p-radiobutton-box {
-      background-color: $bcbox-primary;
-      border-color: $bcbox-primary !important;
-
-      &:hover {
-        background-color: darken($bcbox-primary, 20%) !important;
-      }
-    }
-  }
-}
-
-.p-inputswitch.p-inputswitch-checked {
-  .p-inputswitch-slider {
-    background-color: $bcbox-primary;
-  }
-
-  &:not(.p-disabled) {
-    &:hover {
-      .p-inputswitch-slider {
-        background-color: darken($bcbox-primary, 10%) !important;
-      }
-    }
-  }
-}
-
-.p-tag {
-  background-color: $bcbox-primary;
-  font-size: 1rem;
-  padding: 0.25rem 0.75rem;
-  font-weight: normal;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  font-weight: 600;
-  line-height: 1.2em;
-}
diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
index 26edfd5b..e42d110e 100644
--- a/frontend/src/components/bucket/BucketTable.vue
+++ b/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>
diff --git a/frontend/src/components/object/ObjectFileDetails.vue b/frontend/src/components/object/ObjectFileDetails.vue
index e362603c..ececa986 100644
--- a/frontend/src/components/object/ObjectFileDetails.vue
+++ b/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>
diff --git a/frontend/src/components/object/ObjectMetadata.vue b/frontend/src/components/object/ObjectMetadata.vue
index 1d28d8a5..3ff773b6 100644
--- a/frontend/src/components/object/ObjectMetadata.vue
+++ b/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>
diff --git a/frontend/src/components/object/ObjectMetadataTagForm.vue b/frontend/src/components/object/ObjectMetadataTagForm.vue
index b1d55b22..c4bf53fd 100644
--- a/frontend/src/components/object/ObjectMetadataTagForm.vue
+++ b/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"
diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
index 39cf690e..cab09394 100644
--- a/frontend/src/components/object/ObjectTable.vue
+++ b/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>
diff --git a/frontend/src/components/object/ObjectTag.vue b/frontend/src/components/object/ObjectTag.vue
index 7ec024d4..c9843a0e 100644
--- a/frontend/src/components/object/ObjectTag.vue
+++ b/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>
diff --git a/frontend/src/components/object/ObjectUploadBasic.vue b/frontend/src/components/object/ObjectUploadBasic.vue
index dd87dfa0..feb8d91a 100644
--- a/frontend/src/components/object/ObjectUploadBasic.vue
+++ b/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>
diff --git a/frontend/src/components/object/ObjectUploadFile.vue b/frontend/src/components/object/ObjectUploadFile.vue
index bc4ea57a..d7a6d7b8 100644
--- a/frontend/src/components/object/ObjectUploadFile.vue
+++ b/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>
diff --git a/frontend/src/components/object/ObjectVersion.vue b/frontend/src/components/object/ObjectVersion.vue
index ef11ad8e..7ce2a9bc 100644
--- a/frontend/src/components/object/ObjectVersion.vue
+++ b/frontend/src/components/object/ObjectVersion.vue
@@ -130,7 +130,6 @@ watch(getVersions, async () => {
         <Column
           field="updatedAt"
           header="Creation date"
-          header-style="width: 33%"
         >
           <template #body="{ data }">
             <div>
@@ -143,7 +142,6 @@ watch(getVersions, async () => {
         <Column
           field="createdBy"
           header="Created by"
-          header-style="width: 33%"
         >
           <template #body="{ data }">
             <div>
@@ -153,10 +151,13 @@ watch(getVersions, async () => {
         </Column>
         <Column
           header="Actions"
-          header-class="header-right flex justify-content-end"
+          header-class="header-right"
+          body-class="action-buttons"
+        >
+          <!--           header-class="header-right flex justify-content-end"
           body-class="content-right action-buttons justify-content-end"
           header-style="width: 8em"
-        >
+-->
           <template #body="{ data }">
             <DownloadObjectButton
               v-if="
@@ -186,8 +187,8 @@ watch(getVersions, async () => {
               class="action-link"
             >
               <Button
-                class="p-button-lg p-button-rounded p-button-text"
                 v-tooltip.bottom="'Version details'"
+                class="p-button-lg p-button-rounded p-button-text"
               >
                 <font-awesome-icon icon="fa-solid fa-circle-info" />
               </Button>
diff --git a/frontend/src/components/object/share/ShareLinkContent.vue b/frontend/src/components/object/share/ShareLinkContent.vue
index 229ff2fe..9c5b4ace 100644
--- a/frontend/src/components/object/share/ShareLinkContent.vue
+++ b/frontend/src/components/object/share/ShareLinkContent.vue
@@ -30,7 +30,7 @@ const copyLinkToClipboard = () => {
       :value="props.shareLink"
     />
     <Button
-      class="p-button-outlined p-button-secondary"
+      class="p-button-outlined p-button-primary"
       @click="copyLinkToClipboard"
     >
       <font-awesome-icon
diff --git a/frontend/src/components/object/share/ShareObjectButton.vue b/frontend/src/components/object/share/ShareObjectButton.vue
index 69412085..6beba50e 100644
--- a/frontend/src/components/object/share/ShareObjectButton.vue
+++ b/frontend/src/components/object/share/ShareObjectButton.vue
@@ -90,7 +90,7 @@ onMounted(() => {
 
   <Button
     v-tooltip.bottom="'Share object'"
-    class="p-button-lg p-button-text"
+    class="p-button-lg p-button-text primary"
     aria-label="Share object"
     @click="displayShareDialog = true"
   >
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index c6afa52c..c02f1bde 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -13,7 +13,7 @@ const { getConfig } = storeToRefs(useConfigStore());
 
 <template>
   <div class="grid">
-    <div class="text-center col-12 lg:col-10 lg:col-offset-1">
+    <div class="text-center">
       <Message
         v-if="getConfig?.notificationBanner"
         severity="warn"
@@ -57,7 +57,7 @@ const { getConfig } = storeToRefs(useConfigStore());
 
         <img
           src="@/assets/images/home_1.png"
-          class="border-1 drop-shadow w-6 sm:col-10 my-6 flex align-items-center"
+          class="border-1 drop-shadow w-8 sm:col-10 mt-5 mb-8 flex align-items-center"
           alt="Screenshot of BCBox's file list interface:
             a list of example files and possible actions including Upload, Download and Delete."
         />
@@ -87,7 +87,7 @@ const { getConfig } = storeToRefs(useConfigStore());
       </div>
 
       <div class="grid mb-4 text-left">
-        <div class="col-6">
+        <div class="col-6 pr-5">
           <h3 class="mb-3">Manage access and share</h3>
           <p class="text-xl">
             You can assign custom permissions to other users through IDIR or BCeID authentication.
@@ -98,7 +98,7 @@ const { getConfig } = storeToRefs(useConfigStore());
             information without the consent of your Ministry Privacy Officer.
           </p>
         </div>
-        <div class="col-6 pl-5">
+        <div class="col-6">
           <img
             src="@/assets/images/home_3.png"
             class="border-1 drop-shadow"
@@ -124,12 +124,12 @@ const { getConfig } = storeToRefs(useConfigStore());
 
         <router-link :to="{ name: RouteNames.LIST_BUCKETS }">
           <Button>
-            {{ getIsAuthenticated ? 'Go to My Buckets' : 'Log in to BCBox' }}
+            {{ getIsAuthenticated ? 'Go to My Buckets' : 'Log in to get started' }}
           </Button>
         </router-link>
 
         <h2 class="mt-8 mb-4">Terms of Use</h2>
-        <div class="text-left">
+        <div class="text-left text-xl">
           <ul>
             <li>
               It is your responsibility to comply with the
diff --git a/frontend/tests/unit/components/layout/Footer.spec.ts b/frontend/tests/unit/components/layout/Footer.spec.ts
index 93e24514..140755e7 100644
--- a/frontend/tests/unit/components/layout/Footer.spec.ts
+++ b/frontend/tests/unit/components/layout/Footer.spec.ts
@@ -47,7 +47,6 @@ describe('Footer.vue', () => {
       }
     });
 
-    console.log('a', wrapper);
     const links = wrapper.findAll('a');
     expect(links).toHaveLength(7);
   });