visual css adjustments after review

bcgov · Nov 22, 2023 · 6b2a062 · 6b2a062
1 parent 33c32f9
commit 6b2a062
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 26 deletions.
diff --git 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;
 }
 
@@ -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;
 

diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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-class="header-right"
+        body-class="action-buttons"
+        style="width: 270px"
       >
         <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
@@ -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
@@ -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
@@ -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
@@ -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="

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
@@ -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