Merge pull request #229 from bcgov/icons

add material design icons

Author: TimCsaky

frontend/package-lock.json

@@ -34,6 +34,7 @@
     "axios": "^1.6.8",
     "date-fns": "^3.6.0",
     "filesize": "^10.1.0",
+    "material-icons": "^1.13.14",
     "oidc-client-ts": "^3.0.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",

frontend/package.json

@@ -107,7 +107,7 @@ div:focus-visible {
   max-width: 1px;
   white-space: nowrap;
 
-  > div {
+  > div, > span {
     overflow: hidden;
     text-overflow: ellipsis;
   }
@@ -128,6 +128,7 @@ div:focus-visible {
 /* layout */
 .layout-main {
   margin: 1rem;
+  min-height: 600px; // ensure adequte space below main content on short screens
   @media screen and (min-width: 992px) {
     margin: 1rem 5rem 1rem 5rem;
   }
@@ -164,9 +165,20 @@ div:focus-visible {
   }
 }
 
-/* buttons */
+/* icons and buttons */
+
+.material-icons-round,
+.material-icons-outlined {
+  color: $bcbox-icon-default;
+  &:hover {
+    color: $bcbox-primary;
+    text-decoration: none;
+  }
+  &.icon-medium { font-size: 200%; }
+  &.icon-large { font-size: 250%; }
+}
+
 .p-button:hover {
-  text-decoration: underline;
   opacity: 0.8;
 }
 .p-button .p-button-icon:before {
@@ -178,17 +190,40 @@ div:focus-visible {
   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-text) span[class^="material-icons-"] {
+      color: $bcbox-primary;
+    }
+
     &:not(.p-button-outlined, .p-button-text) {
       background-color: $bcbox-primary;
       border-color: $bcbox-primary;
       color: $bcbox-outline-on-primary;
+
+      span[class^="material-icons-"] {
+        color: white;
+      }
     }
   }
 }
 
 .p-button-outlined {
   border-width: 2px;
+  &.p-disabled, &.p-disabled span {
+    color: var(--text-color) !important;
+  }
+}
+
+// 'permanently delete' button
+.deleted-object-list {
+  .btn-delete {
+    &, & span { color: red  !important; }
+    &.p-disabled, &.p-disabled span {
+      color: var(--text-color) !important;
+    }
+  }
 }
+
 .p-confirm-dialog-reject {
   border: 2px solid $bcbox-primary;
 }
@@ -271,7 +306,7 @@ div:focus-visible {
 
   .action-buttons .p-button {
     padding: 0;
-    margin-left: 1rem;
+    margin-left: .8rem;
     font-size: 1.25rem;
   }
 }
@@ -294,8 +329,8 @@ div:focus-visible {
   .p-dialog-header {
     padding-bottom: 0;
 
-    .svg-inline--fa {
-      color: $bcbox-primary;
+    .svg-inline--fa,
+    span[class^="material-icons-"] {
       font-size: 1.8rem;
       padding-right: 0.75rem;
       border: 0;
@@ -310,7 +345,7 @@ div:focus-visible {
   .bcbox-info-dialog-subhead {
     font-weight: normal;
     margin-bottom: 1.5rem;
-    padding-left: 3.1rem;
+    padding-left: 2.6rem;
     @extend .wrap-block;
   }
 }

frontend/src/assets/main.scss

@@ -14,6 +14,7 @@ $bcbox-outline-on-primary: #fff;
 $bcbox-success: #2e8540;
 $bcbox-error: #d8292f;
 $bcbox-noaction: #606060;
+$bcbox-icon-default: #5f6368;
 
 // highlighted sections, table rows
 $bcbox-highlight-background: #d9e1e8;

frontend/src/assets/variables.scss

@@ -70,7 +70,7 @@ const onCancel = () => {
     aria-label="Add subfolder"
     @click="showDialog(true)"
   >
-    <font-awesome-icon icon="fa-solid fa-folder-plus" />
+    <span class="material-icons-outlined">create_new_folder</span>
   </Button>
 
   <Dialog
@@ -84,10 +84,7 @@ const onCancel = () => {
     @after-hide="onDialogHide"
   >
     <template #header>
-      <font-awesome-icon
-        icon="fas fa-cog"
-        fixed-width
-      />
+      <span class="material-icons-outlined">create_new_folder</span>
       <span
         id="subfolder_label"
         class="p-dialog-title"

frontend/src/components/bucket/BucketChildConfig.vue

@@ -69,14 +69,17 @@ onMounted(async () => {
     <div class="flex-none align-items-right">
       <Button
         v-if="usePermissionStore().isUserElevatedRights()"
-        label="Add a new storage location source"
-        class="p-button-outlined my-4"
-        data-test="connect-bucket"
+        v-tooltip.bottom="'Add a new storage location source'"
+        label="Connect Storage"
+        class="my-4 p-button-primary"
+        data-test="connect-storage"
         aria-label="Add a new storage location source"
-        icon="pi pi-plus"
         @click="showBucketConfig()"
         @keyup.enter="showBucketConfig()"
-      />
+      >
+        <span class="material-icons-outlined mr-2 primary">create_new_folder</span>
+        Connect Storage
+      </Button>
 
       <!-- Bucket config dialog -->
       <Dialog
@@ -90,10 +93,7 @@ onMounted(async () => {
         @update:visible="closeBucketConfig"
       >
         <template #header>
-          <font-awesome-icon
-            icon="fas fa-cog"
-            fixed-width
-          />
+          <span class="material-icons-outlined">settings</span>
           <span
             id="config_dialog_label"
             class="p-dialog-title"

frontend/src/components/bucket/BucketList.vue

@@ -82,7 +82,7 @@ watch(props, () => {
     aria-describedby="side-panel_desc"
   >
     <div class="flex panel-header align-items-start">
-      <font-awesome-icon icon="fa-solid fa-circle-info" />
+      <span class="material-icons-outlined">info</span>
       <h1 class="mt-0 ml-3 flex-grow-1">Folder details</h1>
       <Button
         aria-label="Close"

frontend/src/components/bucket/BucketSidebar.vue

@@ -296,8 +296,8 @@ watch(getBuckets, () => {
       header="Actions"
       header-class="text-right"
       body-class="action-buttons"
-      style="width: 300px"
-    >
+      header-style="width: 320px"
+      >
       <template #body="{ node }">
         <span v-if="!node.data.dummy">
           <ShareButton
@@ -315,7 +315,7 @@ watch(getBuckets, () => {
             aria-label="Configure folder"
             @click="showBucketConfig(node.data)"
           >
-            <font-awesome-icon icon="fas fa-cog" />
+            <span class="material-icons-outlined">settings</span>
           </Button>
           <Button
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.MANAGE)"
@@ -325,7 +325,7 @@ watch(getBuckets, () => {
             aria-label="Folder permissions"
             @click="showPermissions(node.data.bucketId, node.data.bucketName)"
           >
-            <font-awesome-icon icon="fa-solid fa-users" />
+            <span class="material-icons-outlined">supervisor_account</span>
           </Button>
           <SyncButton
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.READ)"
@@ -339,17 +339,17 @@ watch(getBuckets, () => {
             aria-label="Folder details"
             @click="showSidebarInfo(node.data.bucketId)"
           >
-            <font-awesome-icon icon="fa-solid fa-circle-info" />
-          </Button>
+          <span class="material-icons-outlined">info</span>
+        </Button>
           <Button
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.DELETE)"
             v-tooltip.bottom="'Delete folder'"
             class="p-button-lg p-button-text p-button-danger"
             aria-label="Delete folder"
             @click="confirmDeleteBucket(node.data.bucketId)"
           >
-            <font-awesome-icon icon="fa-solid fa-trash" />
-          </Button>
+          <span class="material-icons-outlined">delete</span>
+        </Button>
         </span>
       </template>
     </Column>
@@ -368,10 +368,7 @@ watch(getBuckets, () => {
   >
     <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>
-      <font-awesome-icon
-        icon="fas fa-users"
-        fixed-width
-      />
+      <span class="material-icons-outlined">supervisor_account</span>
       <span
         id="permissions_label"
         class="p-dialog-title"

frontend/src/components/bucket/BucketTable.vue

@@ -47,7 +47,7 @@ const exportCSV = () => {
           class="p-button p-button-text"
           @click="exportCSV()"
         >
-          <font-awesome-icon icon="fas fa-download" />
+        <span class="material-icons-outlined">file_download</span>  
         </Button>
       </div>
       <Column

frontend/src/components/common/BulkPermissionResults.vue

@@ -2,7 +2,6 @@
 import { storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Invite, Share } from '@/components/common';
 import { Button, Dialog, TabView, TabPanel } from '@/lib/primevue';
 
@@ -79,10 +78,7 @@ const showDialog = (x: boolean) => {
     @after-hide="onDialogHide"
   >
     <template #header>
-      <font-awesome-icon
-        icon="fa-solid fa-share-alt"
-        fixed-width
-      />
+      <span class="material-icons-outlined">ios_share</span>
       <span
         id="share_dialog_label"
         class="p-dialog-title"
@@ -151,8 +147,8 @@ const showDialog = (x: boolean) => {
     :aria-label="`Share ${props.labelText.toLocaleLowerCase()}`"
     @click="showDialog(true)"
   >
-    <font-awesome-icon icon="fa-solid fa-share-alt" />
-  </Button>
+  <span class="material-icons-outlined">ios_share</span>
+</Button>
 </template>
 
 <style scoped lang="scss">