From 4c538dd75d87dc689077f66c8eb54f0d7d01154f Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 14 Mar 2022 16:41:39 +0100
Subject: [PATCH 01/15] Redesign New Button to fit Figma

---
 .../src/components/AppBar/CreateAndUpload.vue             | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index d275e02ba5e..b8c645688f2 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -6,11 +6,11 @@
         key="new-file-menu-btn-enabled"
         v-oc-tooltip="newButtonTooltip"
         :aria-label="newButtonAriaLabel"
-        variation="inverse"
+        variation="raw"
         :disabled="uploadOrFileCreationBlocked"
         class="oc-background-primary-gradient"
       >
-        <oc-icon name="add" />
+        <oc-icon name="add" color="#ffffff" />
         <translate>New</translate>
       </oc-button>
       <oc-drop
@@ -530,6 +530,10 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+#new-file-menu-btn {
+  color: white;
+  border: 0;
+}
 #create-list {
   li {
     border: 1px solid transparent;

From ee6fc88162ba8944ebd8780170e835135d4ddf5e Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Fri, 11 Mar 2022 17:33:44 +0100
Subject: [PATCH 02/15] Unify appSwitcher/userMenu/contextMenu hover styling

---
 changelog/unreleased/enhancement-design-improvements   |  7 +++++++
 .../web-app-files/src/components/AppBar/AppBar.vue     |  1 +
 .../src/components/FilesList/ContextActions.vue        | 10 ++++++----
 .../src/components/Topbar/ApplicationsMenu.vue         |  2 ++
 .../web-runtime/src/components/Topbar/UserMenu.vue     |  2 ++
 5 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-design-improvements

diff --git a/changelog/unreleased/enhancement-design-improvements b/changelog/unreleased/enhancement-design-improvements
new file mode 100644
index 00000000000..66051d22532
--- /dev/null
+++ b/changelog/unreleased/enhancement-design-improvements
@@ -0,0 +1,7 @@
+Enhancement: Design improvements
+
+We've fixed various design glitches and improved the overall look-and-feel of the UI.
+
+https://github.com/owncloud/web/issues/6492
+https://github.com/owncloud/web/issues/6555
+https://github.com/owncloud/web/pulls/6584
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 2c217a7ae73..05e8b8c9e67 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -18,6 +18,7 @@
           id="files-breadcrumb"
           data-testid="files-breadcrumbs"
           class="oc-py-s"
+          context-menu-padding="small"
           :items="breadcrumbs"
         >
           <template #contextMenu>
diff --git a/packages/web-app-files/src/components/FilesList/ContextActions.vue b/packages/web-app-files/src/components/FilesList/ContextActions.vue
index cff383fefc5..bf2ae489462 100644
--- a/packages/web-app-files/src/components/FilesList/ContextActions.vue
+++ b/packages/web-app-files/src/components/FilesList/ContextActions.vue
@@ -208,14 +208,11 @@ export default {
   text-align: left;
   white-space: normal;
 
-  li {
-    padding: 6px;
+  > li {
     &:hover {
       background-color: var(--oc-color-background-hover);
     }
-  }
 
-  > li {
     a,
     button,
     span {
@@ -227,6 +224,11 @@ export default {
       vertical-align: top;
       width: 100%;
       text-align: left;
+
+      &:hover {
+        color: var(--oc-color-swatch-passive-default);
+        text-decoration: none !important;
+      }
     }
   }
 
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index 0f28bdde3b0..ed381a4608c 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -82,6 +82,8 @@ export default {
 
     &:focus,
     &:hover {
+      background-color: var(--oc-color-background-hover);
+      color: var(--oc-color-swatch-passive-default);
       text-decoration: none;
     }
 
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index d2594c16fb6..85d9f41e4c2 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -155,6 +155,8 @@ export default {
 
     &:focus,
     &:hover {
+      background-color: var(--oc-color-background-hover);
+      color: var(--oc-color-swatch-passive-default);
       text-decoration: none;
     }
 

From 49d5319216bb5160c3e7d804aae2d965cf0e32e9 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 14 Mar 2022 16:27:59 +0100
Subject: [PATCH 03/15] Reactive hover on ResourceTable, adjust default text
 color (darkmode)

---
 .../web-app-files/src/components/FilesList/ResourceTable.vue    | 2 +-
 packages/web-runtime/themes/owncloud/theme.json                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index fa0a571600a..824a2dd6f2a 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -284,7 +284,7 @@ export default {
     hover: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     /**
      * Show that the table is sorted by this column (no actual sorting takes place)
diff --git a/packages/web-runtime/themes/owncloud/theme.json b/packages/web-runtime/themes/owncloud/theme.json
index 2d26ab223cd..989bca8be17 100644
--- a/packages/web-runtime/themes/owncloud/theme.json
+++ b/packages/web-runtime/themes/owncloud/theme.json
@@ -122,7 +122,7 @@
         "swatch-warning-default": "",
         "swatch-warning-hover": "",
         "swatch-warning-muted": "",
-        "text-default": "#ffffff",
+        "text-default": "#DADCDF",
         "text-inverse": "#000000",
         "text-muted": "#696969",
         "icon-folder": "rgb(44, 101, 255)",

From 6938de09e8dada91afb397634840cabfe11350fd Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 14 Mar 2022 15:50:57 +0100
Subject: [PATCH 04/15] Add hover to usages of ResourceTable component

---
 packages/web-app-files/src/components/Search/List.vue        | 1 +
 packages/web-app-files/src/views/Favorites.vue               | 1 +
 packages/web-app-files/src/views/LocationPicker.vue          | 1 +
 packages/web-app-files/src/views/Personal.vue                | 1 +
 packages/web-app-files/src/views/PublicFiles.vue             | 1 +
 packages/web-app-files/src/views/shares/SharedViaLink.vue    | 1 +
 packages/web-app-files/src/views/shares/SharedWithMe.vue     | 2 ++
 packages/web-app-files/src/views/shares/SharedWithOthers.vue | 1 +
 packages/web-app-files/src/views/spaces/Project.vue          | 1 +
 9 files changed, 10 insertions(+)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 60534da59dd..e6784080bba 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -18,6 +18,7 @@
       :are-paths-displayed="true"
       :are-thumbnails-displayed="displayThumbnails"
       :has-actions="true"
+      :hover="true"
       :is-selectable="false"
       @fileClick="$_fileActions_triggerDefaultAction"
       @rowMounted="rowMounted"
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 8f4226517bd..8decc32c926 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -18,6 +18,7 @@
         :resources="paginatedResources"
         :target-route="resourceTargetLocation"
         :header-position="fileListHeaderY"
+        :hover="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index bd4489c3dd9..bc3f9c8dd75 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -56,6 +56,7 @@
             :disabled="disabledResources"
             :target-route="targetRoute"
             :has-actions="false"
+            :hover="true"
             :is-selectable="false"
             :header-position="fileListHeaderY"
             :sort-by="sortBy"
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 866521380d4..d05e7e6432e 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -28,6 +28,7 @@
         :resources="paginatedResources"
         :target-route="resourceTargetLocation"
         :header-position="fileListHeaderY"
+        :hover="true"
         :drag-drop="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 0a740446bb7..22bd2970ad3 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -28,6 +28,7 @@
         :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
+        :hover="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
index 5e682bb8b7f..5eca87a349e 100644
--- a/packages/web-app-files/src/views/shares/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -23,6 +23,7 @@
         :resources="paginatedResources"
         :target-route="resourceTargetLocation"
         :header-position="fileListHeaderY"
+        :hover="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/shares/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
index 826e70211ab..6079899f0f4 100644
--- a/packages/web-app-files/src/views/shares/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithMe.vue
@@ -19,6 +19,7 @@
           :resources="showMorePending ? pendingItems : pendingItems.slice(0, 3)"
           :are-resources-clickable="false"
           :header-position="fileListHeaderY"
+          :hover="true"
           :sort-by="pendingSortBy"
           :sort-dir="pendingSortDir"
           @sort="pendingHandleSort"
@@ -111,6 +112,7 @@
         :are-resources-clickable="showsAcceptedShares"
         :target-route="resourceTargetLocation"
         :header-position="fileListHeaderY"
+        :hover="true"
         :sort-by="sharesSortBy"
         :sort-dir="sharesSortDir"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
index 48d2bab36c0..74e4cbbe107 100644
--- a/packages/web-app-files/src/views/shares/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -25,6 +25,7 @@
         :resources="paginatedResources"
         :target-route="resourceTargetLocation"
         :header-position="fileListHeaderY"
+        :hover="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index ec398e04234..74c5fb9aaeb 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -113,6 +113,7 @@
         id="files-spaces-table"
         v-model="selected"
         class="files-table oc-mt-xl"
+        :hover="true"
         :resources="paginatedResources"
         :target-route="resourceTargetLocation"
         :sort-by="sortBy"

From e55b032b1d880b97e0e7e7b1fd23b0d23b6b3649 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 15 Mar 2022 10:35:18 +0100
Subject: [PATCH 05/15] Add min-width for CreateAndUpload drops

---
 .../web-app-files/src/components/AppBar/CreateAndUpload.vue   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index b8c645688f2..c6491607dcf 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -550,4 +550,8 @@ export default {
     margin: 2px 0;
   }
 }
+#upload-list,
+#new-file-menu-drop {
+  min-width: 200px;
+}
 </style>

From ab1e8f11e7429971c1dcbef8ddc0b0a22c8d470e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 15 Mar 2022 15:57:36 +0100
Subject: [PATCH 06/15] Improve AppBar / BatchActions / SizeInfo for selection

Linting & Update tests

Fixes after rebase
---
 .../src/components/ActionMenuItem.vue         | 16 +++++-
 .../src/components/AppBar/AppBar.vue          |  8 ++-
 .../AppBar/SelectedResources/SizeInfo.vue     | 30 ++++++-----
 .../web-app-files/src/components/Trashbin.vue |  1 +
 .../__snapshots__/ContextActions.spec.js.snap | 52 +++++++++----------
 .../__snapshots__/Trashbin.spec.js.snap       |  2 +-
 .../__snapshots__/PublicFiles.spec.ts.snap    |  2 +-
 .../views/__snapshots__/Trashbin.spec.js.snap |  2 +-
 .../SharedWithOthers.spec.js.snap             |  2 +-
 9 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/packages/web-app-files/src/components/ActionMenuItem.vue b/packages/web-app-files/src/components/ActionMenuItem.vue
index aebd5d6a3bc..3a792d404f8 100644
--- a/packages/web-app-files/src/components/ActionMenuItem.vue
+++ b/packages/web-app-files/src/components/ActionMenuItem.vue
@@ -3,8 +3,10 @@
     <component
       :is="action.componentType"
       v-bind="getComponentProps(action, items)"
-      :class="['oc-text-bold', action.class]"
+      :class="[action.class, 'action-menu-item']"
       data-testid="action-handler"
+      appearance="raw"
+      size="small"
       v-on="getComponentListeners(action, items)"
     >
       <oc-img
@@ -105,3 +107,15 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+.action-menu-item {
+  vertical-align: middle;
+  &:hover {
+    color: var(--oc-color-swatch-brand-hover);
+    text-decoration: underline;
+    .oc-icon > svg {
+      fill: var(--oc-color-swatch-brand-hover) !important;
+    }
+  }
+}
+</style>
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 05e8b8c9e67..bd74de70aa8 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -44,8 +44,12 @@
             @error="onFileError"
             @progress="onFileProgress"
           />
-          <size-info v-if="hasBulkActions && selectedFiles.length > 0" class="oc-mr oc-visible@l" />
-          <batch-actions v-if="hasBulkActions" />
+          <size-info
+            v-if="hasBulkActions && selectedFiles.length > 0"
+            class="oc-mr-m oc-visible@l"
+            style="padding-bottom: calc(1rem + 1px)"
+          />
+          <batch-actions v-if="hasBulkActions" style="padding-bottom: calc(1rem + 1px)" />
         </div>
       </div>
     </div>
diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
index e5c413f2191..f72afb3ca91 100644
--- a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
+++ b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
@@ -1,11 +1,21 @@
 <template>
-  <div class="oc-flex oc-flex-middle oc-text-nowrap">
+  <div class="oc-flex oc-flex-middle oc-text-nowrap size-info">
+    <oc-button
+      id="files-clear-selection"
+      v-oc-tooltip="clearSelectionLabel"
+      :aria-label="clearSelectionLabel"
+      class="oc-mr-s"
+      appearance="raw"
+      @click="RESET_SELECTION"
+    >
+      <oc-icon name="close" />
+    </oc-button>
     <translate
       v-if="selectedResourcesSize !== '?'"
       key="multiple-select-info-with-size"
       :translate-n="selectedResourcesAmount"
       :translate-params="{ amount: selectedResourcesAmount, size: selectedResourcesSize }"
-      translate-plural="%{ amount } selected items - %{ size }"
+      translate-plural="%{ amount } items - %{ size }"
       translate-comment="Number of selected resources and their size displayed above the files list"
       >%{ amount } selected item - %{ size }
     </translate>
@@ -14,19 +24,10 @@
       key="multiple-select-info"
       :translate-n="selectedResourcesAmount"
       :translate-params="{ amount: selectedResourcesAmount }"
-      translate-plural="%{ amount } selected items"
+      translate-plural="%{ amount } items"
       translate-comment="Number of selected resources displayed above the files list"
       >%{ amount } selected item
     </translate>
-    <oc-button
-      id="files-clear-selection"
-      v-oc-tooltip="clearSelectionLabel"
-      :aria-label="clearSelectionLabel"
-      class="oc-ml"
-      @click="RESET_SELECTION"
-    >
-      <oc-icon name="close" />
-    </oc-button>
   </div>
 </template>
 
@@ -66,3 +67,8 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+.size-info span {
+  color: var(--oc-color-swatch-passive-default);
+}
+</style>
diff --git a/packages/web-app-files/src/components/Trashbin.vue b/packages/web-app-files/src/components/Trashbin.vue
index 11fa15ac363..3ba8896fbcc 100644
--- a/packages/web-app-files/src/components/Trashbin.vue
+++ b/packages/web-app-files/src/components/Trashbin.vue
@@ -24,6 +24,7 @@
         :resources="paginatedResources"
         :are-resources-clickable="false"
         :header-position="fileListHeaderY"
+        :hover="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
         @sort="handleSort"
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap
index becb6f68123..ea3f14506bc 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap
@@ -3,59 +3,59 @@
 exports[`ContextActions menu items renders a list of actions for a file 1`] = `
 <div id="oc-files-context-menu">
   <oc-list-stub id="oc-files-context-actions-context" class="oc-files-context-actions oc-pb-s oc-files-context-actions-border">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-markdown-editor-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-markdown-editor-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="file-text" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in editor</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-exampleName1-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName1-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon1" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName1</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-exampleName2-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName2-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon2" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName2</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-exampleName3-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName3-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon3" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName3</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-download-file-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-download-file-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="download" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Download</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-create-public-link-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-create-public-link-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="links" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Create link</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-shares-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-shares-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Share</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-actions" class="oc-files-context-actions oc-pb-s oc-pt-s oc-files-context-actions-border">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-rename-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-rename-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="pencil" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Edit</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-move-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-move-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="folder-shared" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Move</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-copy-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-copy-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="file-copy" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Copy</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-delete-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="delete-bin-5" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Delete</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-actions-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-actions-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="slideshow" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">All actions</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-sidebar" class="oc-files-context-actions oc-pt-s">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-details-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="information" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Details</span>
         <!---->
       </button></li>
@@ -66,59 +66,59 @@ exports[`ContextActions menu items renders a list of actions for a file 1`] = `
 exports[`ContextActions menu items renders a list of actions for a folder 1`] = `
 <div id="oc-files-context-menu">
   <oc-list-stub id="oc-files-context-actions-context" class="oc-files-context-actions oc-pb-s oc-files-context-actions-border">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-markdown-editor-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-markdown-editor-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="file-text" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in editor</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-exampleName1-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName1-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon1" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName1</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-exampleName2-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName2-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon2" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName2</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-exampleName3-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName3-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon3" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName3</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-download-file-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-download-file-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="download" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Download</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-create-public-link-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-create-public-link-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="links" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Create link</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-shares-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-shares-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Share</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-actions" class="oc-files-context-actions oc-pb-s oc-pt-s oc-files-context-actions-border">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-rename-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-rename-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="pencil" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Edit</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-move-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-move-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="folder-shared" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Move</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-copy-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-copy-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="file-copy" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Copy</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-delete-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="delete-bin-5" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Delete</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-actions-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-actions-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="slideshow" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">All actions</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-sidebar" class="oc-files-context-actions oc-pt-s">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-details-trigger" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="information" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Details</span>
         <!---->
       </button></li>
diff --git a/packages/web-app-files/tests/unit/components/__snapshots__/Trashbin.spec.js.snap b/packages/web-app-files/tests/unit/components/__snapshots__/Trashbin.spec.js.snap
index 7987bf373aa..60f4ec09e9a 100644
--- a/packages/web-app-files/tests/unit/components/__snapshots__/Trashbin.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/__snapshots__/Trashbin.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Trashbin component when the view is not loading anymore when length of the paginated resources is greater than zero should load the resource table with correct props 1`] = `
-<table class="files-table oc-table oc-table-sticky files-table-squashed" id="files-trashbin-table">
+<table class="files-table oc-table oc-table-hover oc-table-sticky files-table-squashed" id="files-trashbin-table">
   <thead class="oc-thead">
     <tr tabindex="-1" class="oc-table-header-row">
       <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-m " style="top: 0px;"><span class="oc-table-thead-content"><div class="resource-table-select-all"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value=""> <label for="resource-table-select-all" class="oc-invisible-sr oc-cursor-pointer">Select all resources</label></span></div></span>
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/PublicFiles.spec.ts.snap b/packages/web-app-files/tests/unit/views/__snapshots__/PublicFiles.spec.ts.snap
index 67b6465bc88..36651884f2e 100644
--- a/packages/web-app-files/tests/unit/views/__snapshots__/PublicFiles.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/__snapshots__/PublicFiles.spec.ts.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PublicFiles view when the view is not loading anymore when length of the paginated resources is greater than zero should load the resource table with the correct props 1`] = `<resource-table-stub resources="[object Object],[object Object],[object Object]" resourcedomselector="[Function]" selection="" hasactions="true" targetroute="[object Object]" areresourcesclickable="true" headerposition="0" isselectable="true" paddingx="small" sortdir="desc" id="files-public-files-table" class="files-table files-table-squashed"></resource-table-stub>`;
+exports[`PublicFiles view when the view is not loading anymore when length of the paginated resources is greater than zero should load the resource table with the correct props 1`] = `<resource-table-stub resources="[object Object],[object Object],[object Object]" resourcedomselector="[Function]" selection="" hasactions="true" targetroute="[object Object]" areresourcesclickable="true" headerposition="0" isselectable="true" paddingx="small" hover="true" sortdir="desc" id="files-public-files-table" class="files-table files-table-squashed"></resource-table-stub>`;
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap b/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap
index 7987bf373aa..60f4ec09e9a 100644
--- a/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Trashbin component when the view is not loading anymore when length of the paginated resources is greater than zero should load the resource table with correct props 1`] = `
-<table class="files-table oc-table oc-table-sticky files-table-squashed" id="files-trashbin-table">
+<table class="files-table oc-table oc-table-hover oc-table-sticky files-table-squashed" id="files-trashbin-table">
   <thead class="oc-thead">
     <tr tabindex="-1" class="oc-table-header-row">
       <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-m " style="top: 0px;"><span class="oc-table-thead-content"><div class="resource-table-select-all"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value=""> <label for="resource-table-select-all" class="oc-invisible-sr oc-cursor-pointer">Select all resources</label></span></div></span>
diff --git a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
index 248c5880691..361053dfe19 100644
--- a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SharedWithOthers when the wrapper is not loading anymore when length of paginated resources is greater than zero should load the resource table with correct props 1`] = `
-<table class="files-table oc-table oc-table-sticky files-table-squashed" id="files-shared-with-others-table">
+<table class="files-table oc-table oc-table-hover oc-table-sticky files-table-squashed" id="files-shared-with-others-table">
   <thead class="oc-thead">
     <tr tabindex="-1" class="oc-table-header-row">
       <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-m " style="top: 0px;"><span class="oc-table-thead-content"><div class="resource-table-select-all"><oc-checkbox-stub id="resource-table-select-all" label="Select all resources" hidelabel="true" size="large"></oc-checkbox-stub></div></span>

From 3134859b3f326c7781811d24ee6118f181fd7d80 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 17 Mar 2022 11:56:21 +0100
Subject: [PATCH 07/15] Bump ODS to v13.0.0-rc.4

---
 changelog/unreleased/enhancement-update-ods   |  8 +--
 .../__snapshots__/ContextActions.spec.js.snap | 52 +++++++++----------
 .../RecipientContainer.spec.js.snap           | 12 ++---
 .../__snapshots__/Trashbin.spec.js.snap       |  8 +--
 .../views/__snapshots__/Trashbin.spec.js.snap |  8 +--
 .../__snapshots__/Projects.spec.js.snap       | 10 ++--
 packages/web-runtime/package.json             |  2 +-
 .../__snapshots__/SidebarNav.spec.js.snap     |  6 +--
 .../__snapshots__/SidebarNavItem.spec.js.snap |  4 +-
 .../__snapshots__/FeedbackLink.spec.js.snap   |  2 +-
 .../__snapshots__/ThemeSwitcher.spec.js.snap  | 12 ++---
 yarn.lock                                     | 10 ++--
 12 files changed, 68 insertions(+), 66 deletions(-)

diff --git a/changelog/unreleased/enhancement-update-ods b/changelog/unreleased/enhancement-update-ods
index 26258d7e8b5..3c54b1c75db 100644
--- a/changelog/unreleased/enhancement-update-ods
+++ b/changelog/unreleased/enhancement-update-ods
@@ -1,15 +1,17 @@
-Enhancement: Update ODS to v13.0.0-rc.3
+Enhancement: Update ODS to v13.0.0-rc.4
 
-We updated the ownCloud Design System to version 13.0.0-rc.3. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+We updated the ownCloud Design System to version 13.0.0-rc.4. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
 
 - Change - Default type of OcButton: https//github.com/owncloud/owncloud-design-system/pull/2009
 - Change - Remove OcStatusIndicators from OcResource: https://github.com/owncloud/owncloud-design-system/pull/2014
 - Enhancement - Redesign OcStatusIndicators: https://github.com/owncloud/owncloud-design-system/pull/2014
 - Enhancement - Icons for drawio, ifc and odg resource types: https//github.com/owncloud/owncloud-design-system/pull/2005
 - Enhancement - Apply size property to oc-tag: https//github.com/owncloud/owncloud-design-system/pull/2011
+- Enhancement - Underline OcResourceName: https//github.com/owncloud/owncloud-design-system/pull/2019
 - Bugfix - Disabled OcSelect background: https//github.com/owncloud/owncloud-design-system/pull/2008
 - Bugfix - Icons/Thumbnails were only visible for clickable resources: https//github.com/owncloud/owncloud-design-system/pull/2007
 
 https://github.com/owncloud/web/pull/6540
 https://github.com/owncloud/web/pull/6600
-https://github.com/owncloud/owncloud-design-system/releases/tag/v13.0.0-rc.3
+https://github.com/owncloud/web/pull/6584
+https://github.com/owncloud/owncloud-design-system/releases/tag/v13.0.0-rc.4
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap
index ea3f14506bc..9849b9e62b2 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap
@@ -3,59 +3,59 @@
 exports[`ContextActions menu items renders a list of actions for a file 1`] = `
 <div id="oc-files-context-menu">
   <oc-list-stub id="oc-files-context-actions-context" class="oc-files-context-actions oc-pb-s oc-files-context-actions-border">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-markdown-editor-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-markdown-editor-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="file-text" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in editor</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName1-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName1-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon1" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName1</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName2-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName2-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon2" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName2</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName3-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName3-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon3" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName3</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-download-file-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-download-file-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="download" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Download</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-create-public-link-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-create-public-link-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="links" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Create link</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-shares-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-shares-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Share</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-actions" class="oc-files-context-actions oc-pb-s oc-pt-s oc-files-context-actions-border">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-rename-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-rename-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="pencil" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Edit</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-move-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-move-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="folder-shared" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Move</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-copy-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-copy-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="file-copy" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Copy</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="delete-bin-5" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Delete</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-actions-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-actions-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="slideshow" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">All actions</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-sidebar" class="oc-files-context-actions oc-pt-s">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="information" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Details</span>
         <!---->
       </button></li>
@@ -66,59 +66,59 @@ exports[`ContextActions menu items renders a list of actions for a file 1`] = `
 exports[`ContextActions menu items renders a list of actions for a folder 1`] = `
 <div id="oc-files-context-menu">
   <oc-list-stub id="oc-files-context-actions-context" class="oc-files-context-actions oc-pb-s oc-files-context-actions-border">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-markdown-editor-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-markdown-editor-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="file-text" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in editor</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName1-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName1-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon1" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName1</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName2-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName2-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon2" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName2</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName3-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-exampleName3-trigger action-menu-item" data-testid="action-handler">
         <oc-img-stub src="exampleIcon3" alt="" loadingtype="eager" data-testid="action-img" class="oc-icon oc-icon-m"></oc-img-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in exampleName3</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-download-file-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-download-file-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="download" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Download</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-create-public-link-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-create-public-link-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="links" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Create link</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-shares-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-shares-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Share</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-actions" class="oc-files-context-actions oc-pb-s oc-pt-s oc-files-context-actions-border">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-rename-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-rename-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="pencil" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Edit</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-move-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-move-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="folder-shared" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Move</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-copy-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-copy-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="file-copy" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Copy</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="delete-bin-5" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Delete</span>
         <!---->
       </button></li>
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-actions-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-actions-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="slideshow" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">All actions</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-sidebar" class="oc-files-context-actions oc-pt-s">
-    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" data-testid="action-handler">
+    <li class="oc-files-context-action oc-px-s oc-rounded"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" data-testid="action-handler">
         <oc-icon-stub name="information" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Details</span>
         <!---->
       </button></li>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
index efc1218935b..6b5ee61735a 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
@@ -2,17 +2,17 @@
 
 exports[`InviteCollaborator RecipientContainer displays an avatar image if capability is present 1`] = `
 <span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><span width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" class="vue-avatar--wrapper oc-avatar oc-recipient-avatar" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: rgb(194, 28, 83); font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" data-testid="recipient-avatar"><span class="avatarInitials">AE</span></span>
-<p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
+<p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
   <ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub>
 </button></span>
 `;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 1`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 1`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 2`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-physics-lovers"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">physics-lovers</p> <button aria-label="Deselect physics-lovers" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 2`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-physics-lovers"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">physics-lovers</p> <button aria-label="Deselect physics-lovers" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 3`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-guest-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">guest-user</p> <button aria-label="Deselect guest-user" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 3`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-guest-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">guest-user</p> <button aria-label="Deselect guest-user" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 4`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-remote-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">remote-user</p> <button aria-label="Deselect remote-user" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 4`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-remote-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">remote-user</p> <button aria-label="Deselect remote-user" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 5`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 5`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
diff --git a/packages/web-app-files/tests/unit/components/__snapshots__/Trashbin.spec.js.snap b/packages/web-app-files/tests/unit/components/__snapshots__/Trashbin.spec.js.snap
index 60f4ec09e9a..4655f395437 100644
--- a/packages/web-app-files/tests/unit/components/__snapshots__/Trashbin.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/__snapshots__/Trashbin.spec.js.snap
@@ -7,7 +7,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
       <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-m " style="top: 0px;"><span class="oc-table-thead-content"><div class="resource-table-select-all"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value=""> <label for="resource-table-select-all" class="oc-invisible-sr oc-cursor-pointer">Select all resources</label></span></div></span>
         <!---->
       </th>
-      <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-nowrap oc-table-header-cell oc-table-header-cell-name" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content header-text">Name</span> <button aria-label="Sort by name" type="button" class="oc-button-sort oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></button></th>
+      <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-nowrap oc-table-header-cell oc-table-header-cell-name" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content header-text">Name</span> <button aria-label="Sort by name" type="button" class="oc-button-sort oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></button></th>
       <th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-status" style="top: 0px;"><span class="oc-table-thead-content header-text">Status</span>
         <!---->
       </th>
@@ -31,7 +31,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
-        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-1234"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-1234"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
           <div id="context-menu-drop-file-id-1234" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
         </div>
       </td>
@@ -50,7 +50,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
-        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-5896"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-5896"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
           <div id="context-menu-drop-file-id-5896" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
         </div>
       </td>
@@ -69,7 +69,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
-        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-9856"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-9856"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
           <div id="context-menu-drop-file-id-9856" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
         </div>
       </td>
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap b/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap
index 60f4ec09e9a..4655f395437 100644
--- a/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap
@@ -7,7 +7,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
       <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-m " style="top: 0px;"><span class="oc-table-thead-content"><div class="resource-table-select-all"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value=""> <label for="resource-table-select-all" class="oc-invisible-sr oc-cursor-pointer">Select all resources</label></span></div></span>
         <!---->
       </th>
-      <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-nowrap oc-table-header-cell oc-table-header-cell-name" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content header-text">Name</span> <button aria-label="Sort by name" type="button" class="oc-button-sort oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></button></th>
+      <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-nowrap oc-table-header-cell oc-table-header-cell-name" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content header-text">Name</span> <button aria-label="Sort by name" type="button" class="oc-button-sort oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></button></th>
       <th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-status" style="top: 0px;"><span class="oc-table-thead-content header-text">Status</span>
         <!---->
       </th>
@@ -31,7 +31,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
-        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-1234"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-1234"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
           <div id="context-menu-drop-file-id-1234" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
         </div>
       </td>
@@ -50,7 +50,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
-        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-5896"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-5896"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
           <div id="context-menu-drop-file-id-5896" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
         </div>
       </td>
@@ -69,7 +69,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
-        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-9856"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-9856"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
           <div id="context-menu-drop-file-id-9856" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
         </div>
       </td>
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
index 41eb8264c80..d4431526d2a 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Spaces component should list spaces 1`] = `
-<div class="oc-py-s oc-px-m"><button aria-label="Create a new space" type="button" class="oc-mb-l oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary" id="new-space-menu-btn" data-testid="spaces-list-create-space-btn"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
+<div class="oc-py-s oc-px-m"><button aria-label="Create a new space" type="button" class="oc-mb-l oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary" id="new-space-menu-btn" data-testid="spaces-list-create-space-btn"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
     <translate-stub tag="span">Create Space</translate-stub>
   </button>
   <div class="oc-pb-xl oc-border-b"><span>Store your project related files in Spaces for seamless collaboration.</span></div>
@@ -26,15 +26,15 @@ exports[`Spaces component should list spaces 1`] = `
             <div class="oc-flex oc-flex-between oc-flex-middle">
               <div class="oc-flex oc-flex-middle"><span class="oc-mr-s oc-icon oc-icon-m oc-icon-passive"><!----></span> <a href="#/" aria-current="page" class="space-name oc-text-left router-link-exact-active router-link-active"><span></span></a></div>
               <div class="oc-flex oc-flex-middle">
-                <div><button aria-label="Show members" type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button></div>
-                <div><button aria-label="Show context menu" type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="space-context-btn-1"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+                <div><button aria-label="Show members" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button></div>
+                <div><button aria-label="Show context menu" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="space-context-btn-1"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
                   <div id="space-context-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded" options="[object Object]">
                     <div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">
                       <ul class="oc-list oc-files-context-actions">
-                        <li class="oc-files-context-action oc-px-s"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
+                        <li class="oc-files-context-action oc-px-s"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
                             Deleted files
                           </button></li>
-                        <li class="oc-files-context-action oc-px-s"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
+                        <li class="oc-files-context-action oc-px-s"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
                             Details
                           </button></li>
                       </ul>
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 3849372815f..4d3c1b5d92b 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -18,7 +18,7 @@
     "luxon": "^2.3.0",
     "marked": "^4.0.12",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^13.0.0-rc.3",
+    "owncloud-design-system": "^13.0.0-rc.4",
     "owncloud-sdk": "~3.0.0-alpha.1",
     "p-queue": "^6.1.1",
     "popper-max-size-modifier": "^0.2.0",
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
index 06815ba152d..1c7d2242891 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OcSidebarNav renders navItems into a list 1`] = `
-<div id="web-nav-sidebar" class="oc-app-navigation-expanded"><button aria-label="Toggle sidebar" type="button" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-expanded oc-pr-s">
+<div id="web-nav-sidebar" class="oc-app-navigation-expanded"><button aria-label="Toggle sidebar" type="button" class="toggle-sidebar-button oc-py-s oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-expanded oc-pr-s">
     <oc-icon-stub name="arrow-drop-left" filltype="line" accessiblelabel="" type="span" size="large" variation="passive" color=""></oc-icon-stub>
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
@@ -15,7 +15,7 @@ exports[`OcSidebarNav renders navItems into a list 1`] = `
 `;
 
 exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
-<div id="web-nav-sidebar" class="oc-app-navigation-expanded"><button aria-label="Toggle sidebar" type="button" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-expanded oc-pr-s">
+<div id="web-nav-sidebar" class="oc-app-navigation-expanded"><button aria-label="Toggle sidebar" type="button" class="toggle-sidebar-button oc-py-s oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-expanded oc-pr-s">
     <oc-icon-stub name="arrow-drop-left" filltype="line" accessiblelabel="" type="span" size="large" variation="passive" color=""></oc-icon-stub>
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
@@ -29,7 +29,7 @@ exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
 `;
 
 exports[`OcSidebarNav toggles into closed state upon button click 1`] = `
-<div id="web-nav-sidebar" class="oc-app-navigation-collapsed"><button aria-label="Toggle sidebar" type="button" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-collapsed">
+<div id="web-nav-sidebar" class="oc-app-navigation-collapsed"><button aria-label="Toggle sidebar" type="button" class="toggle-sidebar-button oc-py-s oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-collapsed">
     <oc-icon-stub name="arrow-drop-right" filltype="line" accessiblelabel="" type="span" size="large" variation="passive" color=""></oc-icon-stub>
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
index b7fea644d88..3bd1ef056ae 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
-  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text text-invisible">Personal</span></span>
+  <router-link-stub to="/files/list/all" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text text-invisible">Personal</span></span>
     <!---->
     <!---->
   </router-link-stub>
@@ -11,7 +11,7 @@ exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
 
 exports[`OcSidebarNav renders navItem without toolTip if expanded 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
-  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text">Personal</span></span>
+  <router-link-stub to="/files/list/all" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text">Personal</span></span>
     <!---->
     <!---->
   </router-link-stub>
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/FeedbackLink.spec.js.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/FeedbackLink.spec.js.snap
index c820886ca7e..f78c7807d76 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/FeedbackLink.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/FeedbackLink.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FeedbackLink component has no accessibility violations 1`] = `
-<div class="oc-flex"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></a>
+<div class="oc-flex"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></a>
   <p id="oc-feedback-link-description" class="oc-invisible-sr">Provide your feedback: We'd like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team.</p>
 </div>
 `;
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap
index e9cd377b8f4..b6466c1f14c 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap
@@ -1,37 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ThemeSwitcher component restores dark theme if dark theme is saved in localstorage 1`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
   <oc-icon-stub name="moon-clear" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component restores light theme if light theme is saved in localstorage 1`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
   <oc-icon-stub name="sun" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually renders a button, initially in dark mode if user prefers dark color scheme 1`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
   <oc-icon-stub name="moon-clear" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually renders a button, initially in light mode per default 1`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
   <oc-icon-stub name="sun" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually toggles between themes upon click 1`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
   <oc-icon-stub name="moon-clear" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually toggles between themes upon click 2`] = `
-<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
   <oc-icon-stub name="sun" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
diff --git a/yarn.lock b/yarn.lock
index 2a78d3e4905..a8e3ac70251 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9547,9 +9547,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"owncloud-design-system@npm:^13.0.0-rc.3":
-  version: 13.0.0-rc.3
-  resolution: "owncloud-design-system@npm:13.0.0-rc.3"
+"owncloud-design-system@npm:^13.0.0-rc.4":
+  version: 13.0.0-rc.4
+  resolution: "owncloud-design-system@npm:13.0.0-rc.4"
   peerDependencies:
     "@popperjs/core": ^2.4.0
     "@vue/composition-api": ^1.4.3
@@ -9566,7 +9566,7 @@ __metadata:
     vue-inline-svg: ^2.0.0
     vue-select: ^3.12.0
     webfontloader: ^1.6.28
-  checksum: aadf94f8e038bbb535996175be622d4492a88efecffdc7fbf9a5f46516661734d33aac090bd787ef9251016b6fa0e3028b1b794a626c876a848abaffb8d8a6af
+  checksum: b5c6f6f880c3ba5d593aab625e04f6fda7ac26b025d71e6cb38d20c809439f3f908b016a2c23c497fe0eeee3532839183661f896c2609d002e24e09c605cdc88
   languageName: node
   linkType: hard
 
@@ -13539,7 +13539,7 @@ __metadata:
     luxon: ^2.3.0
     marked: ^4.0.12
     oidc-client: 1.11.5
-    owncloud-design-system: ^13.0.0-rc.3
+    owncloud-design-system: ^13.0.0-rc.4
     owncloud-sdk: ~3.0.0-alpha.1
     p-queue: ^6.1.1
     popper-max-size-modifier: ^0.2.0

From fa814a43ca8dbb0df87a1b1d5af4ca4cca9a0687 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 17 Mar 2022 11:56:51 +0100
Subject: [PATCH 08/15] Handle ResourceTable row hover through default prop
 value

---
 packages/web-app-files/src/components/Search/List.vue        | 1 -
 packages/web-app-files/src/components/Trashbin.vue           | 1 -
 packages/web-app-files/src/views/Favorites.vue               | 1 -
 packages/web-app-files/src/views/LocationPicker.vue          | 1 -
 packages/web-app-files/src/views/Personal.vue                | 1 -
 packages/web-app-files/src/views/PublicFiles.vue             | 1 -
 packages/web-app-files/src/views/shares/SharedViaLink.vue    | 1 -
 packages/web-app-files/src/views/shares/SharedWithMe.vue     | 2 --
 packages/web-app-files/src/views/shares/SharedWithOthers.vue | 1 -
 packages/web-app-files/src/views/spaces/Project.vue          | 1 -
 10 files changed, 11 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index e6784080bba..60534da59dd 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -18,7 +18,6 @@
       :are-paths-displayed="true"
       :are-thumbnails-displayed="displayThumbnails"
       :has-actions="true"
-      :hover="true"
       :is-selectable="false"
       @fileClick="$_fileActions_triggerDefaultAction"
       @rowMounted="rowMounted"
diff --git a/packages/web-app-files/src/components/Trashbin.vue b/packages/web-app-files/src/components/Trashbin.vue
index 3ba8896fbcc..11fa15ac363 100644
--- a/packages/web-app-files/src/components/Trashbin.vue
+++ b/packages/web-app-files/src/components/Trashbin.vue
@@ -24,7 +24,6 @@
         :resources="paginatedResources"
         :are-resources-clickable="false"
         :header-position="fileListHeaderY"
-        :hover="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
         @sort="handleSort"
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 8decc32c926..8f4226517bd 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -18,7 +18,6 @@
         :resources="paginatedResources"
         :target-route="resourceTargetLocation"
         :header-position="fileListHeaderY"
-        :hover="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index bc3f9c8dd75..bd4489c3dd9 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -56,7 +56,6 @@
             :disabled="disabledResources"
             :target-route="targetRoute"
             :has-actions="false"
-            :hover="true"
             :is-selectable="false"
             :header-position="fileListHeaderY"
             :sort-by="sortBy"
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index d05e7e6432e..866521380d4 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -28,7 +28,6 @@
         :resources="paginatedResources"
         :target-route="resourceTargetLocation"
         :header-position="fileListHeaderY"
-        :hover="true"
         :drag-drop="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 22bd2970ad3..0a740446bb7 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -28,7 +28,6 @@
         :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
-        :hover="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
index 5eca87a349e..5e682bb8b7f 100644
--- a/packages/web-app-files/src/views/shares/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -23,7 +23,6 @@
         :resources="paginatedResources"
         :target-route="resourceTargetLocation"
         :header-position="fileListHeaderY"
-        :hover="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/shares/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
index 6079899f0f4..826e70211ab 100644
--- a/packages/web-app-files/src/views/shares/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithMe.vue
@@ -19,7 +19,6 @@
           :resources="showMorePending ? pendingItems : pendingItems.slice(0, 3)"
           :are-resources-clickable="false"
           :header-position="fileListHeaderY"
-          :hover="true"
           :sort-by="pendingSortBy"
           :sort-dir="pendingSortDir"
           @sort="pendingHandleSort"
@@ -112,7 +111,6 @@
         :are-resources-clickable="showsAcceptedShares"
         :target-route="resourceTargetLocation"
         :header-position="fileListHeaderY"
-        :hover="true"
         :sort-by="sharesSortBy"
         :sort-dir="sharesSortDir"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
index 74e4cbbe107..48d2bab36c0 100644
--- a/packages/web-app-files/src/views/shares/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -25,7 +25,6 @@
         :resources="paginatedResources"
         :target-route="resourceTargetLocation"
         :header-position="fileListHeaderY"
-        :hover="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index 74c5fb9aaeb..ec398e04234 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -113,7 +113,6 @@
         id="files-spaces-table"
         v-model="selected"
         class="files-table oc-mt-xl"
-        :hover="true"
         :resources="paginatedResources"
         :target-route="resourceTargetLocation"
         :sort-by="sortBy"

From 2182329493059b5e4700a3de3e5beecc5ad02a8c Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 17 Mar 2022 13:19:31 +0100
Subject: [PATCH 09/15] Remove hardcoded colors

---
 .../src/components/AppBar/CreateAndUpload.vue            | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index c6491607dcf..ebf4d1b3eb0 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -10,7 +10,7 @@
         :disabled="uploadOrFileCreationBlocked"
         class="oc-background-primary-gradient"
       >
-        <oc-icon name="add" color="#ffffff" />
+        <oc-icon name="add" variation="inverse" />
         <translate>New</translate>
       </oc-button>
       <oc-drop
@@ -529,10 +529,13 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 #new-file-menu-btn {
-  color: white;
+  color: var(--oc-color-swatch-inverse-default);
   border: 0;
+  .oc-icon > svg {
+    fill: var(--oc-color-swatch-inverse-default) !important;
+  }
 }
 #create-list {
   li {

From 9f7e81d73b7aad69fb6cd56049e087428bb29a33 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 17 Mar 2022 13:42:04 +0100
Subject: [PATCH 10/15] Reintroduce padding in ContextActions listitems

---
 .../web-app-files/src/components/FilesList/ContextActions.vue    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-app-files/src/components/FilesList/ContextActions.vue b/packages/web-app-files/src/components/FilesList/ContextActions.vue
index bf2ae489462..fa43d33f521 100644
--- a/packages/web-app-files/src/components/FilesList/ContextActions.vue
+++ b/packages/web-app-files/src/components/FilesList/ContextActions.vue
@@ -209,6 +209,7 @@ export default {
   white-space: normal;
 
   > li {
+    padding: 6px;
     &:hover {
       background-color: var(--oc-color-background-hover);
     }

From 1462cbfba37c359e2c16fb7458c4613a36e23699 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 17 Mar 2022 13:47:52 +0100
Subject: [PATCH 11/15] Simplify create button

---
 .../src/components/AppBar/CreateAndUpload.vue | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index ebf4d1b3eb0..90c0fe1c2dc 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -6,11 +6,12 @@
         key="new-file-menu-btn-enabled"
         v-oc-tooltip="newButtonTooltip"
         :aria-label="newButtonAriaLabel"
-        variation="raw"
+        appearance="raw"
+        variation="inverse"
         :disabled="uploadOrFileCreationBlocked"
-        class="oc-background-primary-gradient"
+        class="oc-background-primary-gradient oc-px-s"
       >
-        <oc-icon name="add" variation="inverse" />
+        <oc-icon name="add" />
         <translate>New</translate>
       </oc-button>
       <oc-drop
@@ -60,10 +61,11 @@
       <oc-button
         id="new-folder-btn"
         v-oc-tooltip="newButtonAriaLabel"
+        appearance="raw"
         variation="inverse"
         :aria-label="newButtonAriaLabel"
         :disabled="uploadOrFileCreationBlocked"
-        class="oc-background-primary-gradient oc-text-nowrap"
+        class="oc-background-primary-gradient oc-px-s oc-text-nowrap"
         @click="showCreateResourceModal"
       >
         <oc-icon name="resource-type-folder" />
@@ -529,14 +531,7 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-#new-file-menu-btn {
-  color: var(--oc-color-swatch-inverse-default);
-  border: 0;
-  .oc-icon > svg {
-    fill: var(--oc-color-swatch-inverse-default) !important;
-  }
-}
+<style lang="scss" scoped>
 #create-list {
   li {
     border: 1px solid transparent;

From a81f32c2a2e5caa083631b160e1e018038fc0537 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 17 Mar 2022 13:48:10 +0100
Subject: [PATCH 12/15] Simplify jumpy appBar by setting minHeight

---
 packages/web-app-files/src/components/AppBar/AppBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index bd74de70aa8..62c9248b7b9 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -47,9 +47,8 @@
           <size-info
             v-if="hasBulkActions && selectedFiles.length > 0"
             class="oc-mr-m oc-visible@l"
-            style="padding-bottom: calc(1rem + 1px)"
           />
-          <batch-actions v-if="hasBulkActions" style="padding-bottom: calc(1rem + 1px)" />
+          <batch-actions v-if="hasBulkActions" />
         </div>
       </div>
     </div>
@@ -372,6 +371,7 @@ export default {
     display: flex;
     gap: var(--oc-space-small);
     justify-content: flex-end;
+    min-height: 3rem;
   }
 }
 </style>

From 47502602f38f92b9048c0964872baec54be0174e Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 17 Mar 2022 14:02:45 +0100
Subject: [PATCH 13/15] Add chevron to mobile SharesNavigation dropdown trigger
 & display current page name

---
 .../src/components/AppBar/SharesNavigation.vue             | 7 ++++++-
 .../tests/unit/components/AppBar/SharesNavigation.spec.js  | 4 +++-
 .../AppBar/__snapshots__/SharesNavigation.spec.js.snap     | 4 +++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
index d203c34a941..8feaf621b34 100644
--- a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
+++ b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -14,7 +14,10 @@
       </li>
     </oc-list>
     <div class="oc-hidden@s">
-      <oc-button id="shares_navigation_mobile" appearance="raw" v-text="$gettext('Shares pages')" />
+      <oc-button id="shares_navigation_mobile" appearance="raw">
+        <span v-text="currentNavItem.text" />
+        <oc-icon name="arrow-down-s" fill-type="line" size="small" />
+      </oc-button>
       <oc-drop toggle="#shares_navigation_mobile" mode="click" close-on-click padding-size="small">
         <oc-list>
           <li v-for="navItem in navItems" :key="`shares-navigation-mobile-${navItem.to}`">
@@ -90,7 +93,9 @@ export default {
         active: unref(sharesViaLinkActive)
       }
     ])
+    const currentNavItem = computed(() => unref(navItems).find((navItem) => navItem.active))
     return {
+      currentNavItem,
       navItems
     }
   }
diff --git a/packages/web-app-files/tests/unit/components/AppBar/SharesNavigation.spec.js b/packages/web-app-files/tests/unit/components/AppBar/SharesNavigation.spec.js
index 73df984a8e3..f2defe884a2 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/SharesNavigation.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/SharesNavigation.spec.js
@@ -49,8 +49,10 @@ function getWrapper() {
           active: false
         }
       ]
+      const currentNavItem = navItems[0]
       return {
-        navItems
+        navItems,
+        currentNavItem
       }
     },
     router,
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap
index 40a4a02b00c..25125c172a9 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap
@@ -20,7 +20,9 @@ exports[`SharesNavigation component renders a shares navigation for both mobile
     </li>
   </ul>
   <div class="oc-hidden@s">
-    <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="shares_navigation_mobile">Shares pages</oc-button-stub>
+    <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="shares_navigation_mobile"><span>Shared with me</span>
+      <oc-icon-stub name="arrow-down-s" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub>
+    </oc-button-stub>
     <div id="oc-drop-3" class="oc-drop oc-box-shadow-medium oc-rounded">
       <div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">
         <ul class="oc-list oc-my-rm oc-mx-rm">

From 9208b85f939bdc28b043b9542d3902c7f891330d Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 17 Mar 2022 15:26:00 +0100
Subject: [PATCH 14/15] Prevent shaky breadcrumbs on desktop

---
 packages/web-app-files/src/components/AppBar/AppBar.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 62c9248b7b9..f0412d2d4fa 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -17,7 +17,7 @@
           v-if="breadcrumbs.length"
           id="files-breadcrumb"
           data-testid="files-breadcrumbs"
-          class="oc-py-s"
+          class="oc-flex oc-flex-middle"
           context-menu-padding="small"
           :items="breadcrumbs"
         >
@@ -373,5 +373,9 @@ export default {
     justify-content: flex-end;
     min-height: 3rem;
   }
+
+  #files-breadcrumb {
+    min-height: 2rem;
+  }
 }
 </style>

From f47d00d4097db503fa54b7e4f52852778b06c8c0 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 17 Mar 2022 19:59:22 +0100
Subject: [PATCH 15/15] Bring 'unselect resources' to end of fileInfo, polish
 PR

---
 .../src/components/ActionMenuItem.vue         |  1 -
 .../src/components/AppBar/AppBar.vue          |  5 +---
 .../AppBar/SelectedResources/SizeInfo.vue     | 28 +++++++++----------
 .../AppBar/SelectedResources/SizeInfo.spec.js |  4 +--
 4 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/web-app-files/src/components/ActionMenuItem.vue b/packages/web-app-files/src/components/ActionMenuItem.vue
index 3a792d404f8..8b73acc5d92 100644
--- a/packages/web-app-files/src/components/ActionMenuItem.vue
+++ b/packages/web-app-files/src/components/ActionMenuItem.vue
@@ -5,7 +5,6 @@
       v-bind="getComponentProps(action, items)"
       :class="[action.class, 'action-menu-item']"
       data-testid="action-handler"
-      appearance="raw"
       size="small"
       v-on="getComponentListeners(action, items)"
     >
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index f0412d2d4fa..71abe73b9ef 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -44,10 +44,7 @@
             @error="onFileError"
             @progress="onFileProgress"
           />
-          <size-info
-            v-if="hasBulkActions && selectedFiles.length > 0"
-            class="oc-mr-m oc-visible@l"
-          />
+          <size-info v-if="hasBulkActions && selectedFiles.length > 0" class="oc-visible@l" />
           <batch-actions v-if="hasBulkActions" />
         </div>
       </div>
diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
index f72afb3ca91..763b5054332 100644
--- a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
+++ b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
@@ -1,33 +1,33 @@
 <template>
   <div class="oc-flex oc-flex-middle oc-text-nowrap size-info">
-    <oc-button
-      id="files-clear-selection"
-      v-oc-tooltip="clearSelectionLabel"
-      :aria-label="clearSelectionLabel"
-      class="oc-mr-s"
-      appearance="raw"
-      @click="RESET_SELECTION"
-    >
-      <oc-icon name="close" />
-    </oc-button>
     <translate
       v-if="selectedResourcesSize !== '?'"
       key="multiple-select-info-with-size"
       :translate-n="selectedResourcesAmount"
       :translate-params="{ amount: selectedResourcesAmount, size: selectedResourcesSize }"
-      translate-plural="%{ amount } items - %{ size }"
+      translate-plural="%{ amount } selected - %{ size }"
       translate-comment="Number of selected resources and their size displayed above the files list"
-      >%{ amount } selected item - %{ size }
+      >%{ amount } selected - %{ size }
     </translate>
     <translate
       v-else
       key="multiple-select-info"
       :translate-n="selectedResourcesAmount"
       :translate-params="{ amount: selectedResourcesAmount }"
-      translate-plural="%{ amount } items"
+      translate-plural="%{ amount } selected"
       translate-comment="Number of selected resources displayed above the files list"
-      >%{ amount } selected item
+      >%{ amount } selected
     </translate>
+    <oc-button
+      id="files-clear-selection"
+      v-oc-tooltip="clearSelectionLabel"
+      :aria-label="clearSelectionLabel"
+      class="oc-ml-m"
+      appearance="outline"
+      @click="RESET_SELECTION"
+    >
+      <oc-icon name="close" />
+    </oc-button>
   </div>
 </template>
 
diff --git a/packages/web-app-files/tests/unit/components/AppBar/SelectedResources/SizeInfo.spec.js b/packages/web-app-files/tests/unit/components/AppBar/SelectedResources/SizeInfo.spec.js
index 8fd0168895b..9825d29bcff 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/SelectedResources/SizeInfo.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/SelectedResources/SizeInfo.spec.js
@@ -55,7 +55,7 @@ describe('SizeInfo component', () => {
         expect(translate.props().translateN).toEqual(selectedCount)
         expect(translate.props().translateParams.amount).toEqual(selectedCount)
         expect(translate.props().translateParams.size).toEqual(totalSize + ' B')
-        expect(translate.text()).toEqual('%{ amount } selected item - %{ size }')
+        expect(translate.text()).toEqual('%{ amount } selected - %{ size }')
       }
     )
     it('should have selected number count but not size if item size is NaN', () => {
@@ -71,7 +71,7 @@ describe('SizeInfo component', () => {
       expect(translate.props().translateN).toEqual(1)
       expect(translate.props().translateParams.amount).toEqual(1)
       expect(translate.props().translateParams.size).toBeFalsy()
-      expect(translate.text()).toEqual('%{ amount } selected item')
+      expect(translate.text()).toEqual('%{ amount } selected')
     })
     it('should trigger "RESET_SELECTION" if clear button is clicked', () => {
       const spyResetSelection = jest.spyOn(SizeInfo.methods, 'RESET_SELECTION').mockImplementation()