Update CSS and Spinner component naming

frontend/src/assets/main.scss

@@ -1,22 +1,38 @@
-@import './base.css';
-@import './primevue.scss';
-@import './variables.scss';
+@import "./base.css";
+@import "./primevue.scss";
+@import "./variables.scss";
 
 #app {
   margin: 0 auto;
   font-weight: normal;
 }
 
+// ----- links and buttons:
 a,
 a:visited {
   color: $bcbox-link-text;
   text-decoration: underline;
   &:hover {
     color: $bcbox-link-text-hover;
-    text-decoration: none;
   }
 }
 
+.p-button,
+.p-inputswitch-slider {
+  &:hover {
+    opacity: 0.8;
+  }
+}
+// underline button text
+.p-button:hover {
+  text-decoration: underline;
+}
+// don't underline button icons
+.p-button .p-button-icon:before {
+  text-decoration: none;
+  display: inline-block;
+}
+
 .truncate {
   max-width: 1px;
   white-space: nowrap;
@@ -27,6 +43,8 @@ a:visited {
   }
 }
 
+// -------- layout
+
 .content-center {
   text-align: center !important;
 }
@@ -39,31 +57,45 @@ a:visited {
   width: 800px;
 }
 
-// -------- layout
-
 // details page / sidebar
 .details-grid {
-  h2 { margin-bottom: 1rem; }
-  .col-fixed { width: 150px; }  // label column
+  h2 {
+    margin-bottom: 1rem;
+  }
+  .col-fixed {
+    width: 150px; // label column
+  }
   // make datatable look like grid
   .p-datatable {
-    thead th{ padding-top: 0; }
-    td { padding: 0.5rem; }
+    thead th {
+      padding-top: 0;
+    }
+    td {
+      padding: 0.5rem;
+    }
     th:first-child,
-    td:first-child { padding-left: 0; }
+    td:first-child {
+      padding-left: 0;
+    }
   }
 }
-.details-value-column { width: 40rem; }
-.sidebar .details-value-column { width: 20rem; }
+.details-value-column {
+  width: 40rem;
+}
+.sidebar .details-value-column {
+  width: 20rem;
+}
 // eof details page / sidebar
 
 // wrap text
-.wrap-block{
+.wrap-block {
   display: inline-block;
   overflow-wrap: break-word;
   width: 100%;
 }
-td .wrap-block{ width: inherit; }
+td .wrap-block {
+  width: inherit;
+}
 
 // --------- Info/settings dialog modals
 .bcbox-info-dialog {
@@ -74,8 +106,8 @@ td .wrap-block{ width: inherit; }
       .svg-inline--fa {
         color: $bcbox-primary;
         font-size: 1.8rem;
-        padding-right: .75rem;
-        padding-top: .15rem;
+        padding-right: 0.75rem;
+        padding-top: 0.15rem;
       }
 
       .p-dialog-title {
@@ -125,16 +157,9 @@ td .wrap-block{ width: inherit; }
   }
 }
 
-.p-button, .p-inputswitch-slider {
-  &:hover {
-    opacity: 0.8;
-    text-decoration: underline;
-  }
-}
-
 .p-datatable {
   .p-datatable-loading-overlay {
     background: white;
-    opacity: .3;
+    opacity: 0.8;
   }
 }

frontend/src/components/bucket/BucketTable.vue

@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia';
 import { ref } from 'vue';
 
 import BucketPermission from '@/components/bucket/BucketPermission.vue';
-import { Loader } from '@/components/layout';
+import { Spinner } from '@/components/layout';
 import { Button, Column, DataTable, Dialog } from '@/lib/primevue';
 import { useAppStore, useAuthStore, useBucketStore, usePermissionStore } from '@/store';
 import { Permissions, RouteNames } from '@/utils/constants';
@@ -66,7 +66,7 @@ const showPermissions = async (bucketId: string, bucketName: string) => {
         </div>
       </template>
       <template #loading>
-        <Loader />
+        <Spinner />
       </template>
       <Column header-style="width: 1%">
         <template #body>

frontend/src/components/layout/index.ts

@@ -2,6 +2,6 @@ export { default as AppLayout } from './AppLayout.vue';
 export { default as Footer } from './Footer.vue';
 export { default as Header } from './Header.vue';
 export { default as LoginButton } from './LoginButton.vue';
-export { default as Loader } from './Loader.vue';
+export { default as Spinner } from './Spinner.vue';
 export { default as Navbar } from './Navbar.vue';
 export { default as ProgressLoader } from './ProgressLoader.vue';

frontend/src/components/object/ObjectTable.vue

@@ -2,7 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { ref, watch } from 'vue';
 
-import { Loader } from '@/components/layout';
+import { Spinner } from '@/components/layout';
 import {
   DeleteObjectButton,
   DownloadObjectButton,
@@ -165,7 +165,7 @@ const filters = ref({
         </div>
       </template>
       <template #loading>
-        <Loader />
+        <Spinner />
       </template>
       <Column
         selection-mode="multiple"

frontend/src/views/oidc/OidcCallbackView.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import ProgressSpinner from 'primevue/progressspinner';
 import { onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { Spinner } from '@/components/layout';
 import { useAuthStore } from '@/store';
 import { StorageKey } from '@/utils/constants';
 
@@ -21,7 +21,7 @@ onMounted(async () => {
 
 <template>
   <h2>Authorizing...</h2>
-  <ProgressSpinner />
+  <Spinner />
 </template>
 
 <style lang="scss" scoped>

frontend/src/views/oidc/OidcLoginView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 
-import { Loader } from '@/components/layout';
+import { Spinner } from '@/components/layout';
 import { useAuthStore } from '@/store';
 
 const authStore = useAuthStore();
@@ -13,7 +13,7 @@ onMounted(() => {
 
 <template>
   <h2>Logging in...</h2>
-  <Loader />
+  <Spinner />
 </template>
 
 <style lang="scss" scoped>

frontend/src/views/oidc/OidcLogoutView.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import ProgressSpinner from 'primevue/progressspinner';
 import { onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { Spinner } from '@/components/layout';
 import { useAuthStore } from '@/store';
 
 const authStore = useAuthStore();
@@ -18,7 +18,7 @@ onMounted(async () => {
 
 <template>
   <h2>Logging out...</h2>
-  <ProgressSpinner />
+  <Spinner />
 </template>
 
 <style lang="scss" scoped>