From 820f23551a83d4cecc46350923c3292a608f9fc9 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Mon, 21 Sep 2020 13:59:47 +0200
Subject: [PATCH 01/28] Small design tweaks

---
 apps/files/src/components/AllFilesList.vue    |  5 ++++-
 .../Collaborators/AutocompleteItem.vue        |  2 +-
 .../components/Collaborators/Collaborator.vue |  4 ++--
 .../Collaborators/SharedFilesList.vue         |  2 +-
 apps/files/src/components/FileDetails.vue     |  2 +-
 apps/files/src/components/FileItem.vue        |  2 +-
 apps/files/src/components/FileLinkSidebar.vue |  4 ++--
 apps/files/src/components/FileList.vue        | 21 +++++++++++++++++--
 .../PublicLinksSidebar/PublicLinkListItem.vue |  2 +-
 apps/files/src/components/Roles/RoleItem.vue  |  2 +-
 apps/files/src/components/Trashbin.vue        |  2 +-
 apps/files/src/components/UploadMenu.vue      |  2 +-
 src/components/SearchBar.vue                  |  1 +
 src/components/Top-Bar.vue                    |  2 +-
 src/components/UserMenu.vue                   | 11 ++++++----
 src/pages/account.vue                         |  2 +-
 16 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/apps/files/src/components/AllFilesList.vue b/apps/files/src/components/AllFilesList.vue
index fa9b390881a..311c48d65cd 100644
--- a/apps/files/src/components/AllFilesList.vue
+++ b/apps/files/src/components/AllFilesList.vue
@@ -52,7 +52,10 @@
       </div>
     </template>
     <template #rowColumns="{ item: rowItem, index }">
-      <div :ref="index === 0 ? 'firstRowNameColumn' : null" class="uk-width-expand">
+      <div
+        :ref="index === 0 ? 'firstRowNameColumn' : null"
+        class="uk-width-expand uk-flex uk-flex-middle"
+      >
         <file-item
           :key="rowItem.viewId"
           :item="rowItem"
diff --git a/apps/files/src/components/Collaborators/AutocompleteItem.vue b/apps/files/src/components/Collaborators/AutocompleteItem.vue
index 9e7ed7bcd77..53ebb6989c6 100644
--- a/apps/files/src/components/Collaborators/AutocompleteItem.vue
+++ b/apps/files/src/components/Collaborators/AutocompleteItem.vue
@@ -24,7 +24,7 @@
       />
     </template>
     <div class="files-collaborators-autocomplete-user-text">
-      <div class="uk-text-bold files-collaborators-autocomplete-username" v-text="item.label" />
+      <div class="oc-text-bold files-collaborators-autocomplete-username" v-text="item.label" />
       <div v-if="item.value.shareWithAdditionalInfo" v-text="item.value.shareWithAdditionalInfo" />
     </div>
   </div>
diff --git a/apps/files/src/components/Collaborators/Collaborator.vue b/apps/files/src/components/Collaborators/Collaborator.vue
index 34300f0d899..25982bc1be4 100644
--- a/apps/files/src/components/Collaborators/Collaborator.vue
+++ b/apps/files/src/components/Collaborators/Collaborator.vue
@@ -41,7 +41,7 @@
                     :user-name="resharer.displayName"
                   />
                   <div>
-                    <span class="files-collaborators-resharer-name uk-text-bold">{{
+                    <span class="files-collaborators-resharer-name oc-text-bold">{{
                       resharer.displayName
                     }}</span>
                     <span
@@ -109,7 +109,7 @@
       <oc-table-cell>
         <div class="uk-flex uk-flex-column uk-flex-center" :class="collaboratorListItemClass">
           <div class="oc-text">
-            <span class="files-collaborators-collaborator-name uk-text-bold">{{
+            <span class="files-collaborators-collaborator-name oc-text-bold">{{
               collaborator.collaborator.displayName
             }}</span>
             <translate
diff --git a/apps/files/src/components/Collaborators/SharedFilesList.vue b/apps/files/src/components/Collaborators/SharedFilesList.vue
index 34345a04484..4ee454a59b7 100644
--- a/apps/files/src/components/Collaborators/SharedFilesList.vue
+++ b/apps/files/src/components/Collaborators/SharedFilesList.vue
@@ -55,7 +55,7 @@
       <div class="oc-icon" />
     </template>
     <template #rowColumns="{ item }">
-      <div class="uk-width-expand">
+      <div class="uk-width-expand uk-flex uk-flex-middle">
         <file-item
           :key="item.path"
           :item="item"
diff --git a/apps/files/src/components/FileDetails.vue b/apps/files/src/components/FileDetails.vue
index 1e2239cae7e..ef31a62bd9a 100644
--- a/apps/files/src/components/FileDetails.vue
+++ b/apps/files/src/components/FileDetails.vue
@@ -14,7 +14,7 @@
         <div class="uk-flex uk-flex-middle">
           <span
             id="files-sidebar-item-name"
-            class="uk-margin-small-right uk-text-bold"
+            class="uk-margin-small-right oc-text-bold"
             v-text="highlightedFile.name"
           />
         </div>
diff --git a/apps/files/src/components/FileItem.vue b/apps/files/src/components/FileItem.vue
index 8e24676dc02..3becbc2f90e 100644
--- a/apps/files/src/components/FileItem.vue
+++ b/apps/files/src/components/FileItem.vue
@@ -22,7 +22,7 @@
     <div class="uk-width-expand">
       <div class="file-row-name uk-text-truncate" :filename="item.name">
         <span
-          class="uk-text-bold oc-cursor-pointer oc-file-name uk-padding-remove-left"
+          class="oc-text-bold oc-cursor-pointer oc-file-name uk-padding-remove-left"
           role="button"
           v-text="fileName"
         /><span
diff --git a/apps/files/src/components/FileLinkSidebar.vue b/apps/files/src/components/FileLinkSidebar.vue
index 8ba22f41a15..b23f069a4e1 100644
--- a/apps/files/src/components/FileLinkSidebar.vue
+++ b/apps/files/src/components/FileLinkSidebar.vue
@@ -8,7 +8,7 @@
       <oc-loader v-if="linksLoading" :aria-label="$gettext('Loading list of file links')" />
       <template v-else>
         <section v-if="$_privateLinkOfHighlightedFile">
-          <div class="uk-text-bold uk-flex">
+          <div class="oc-text-bold uk-flex">
             <span v-translate>Private Link</span>
             <oc-button
               :aria-label="$_privateLinkCopyLabel"
@@ -39,7 +39,7 @@
           <hr />
         </section>
         <section>
-          <div class="uk-text-bold">
+          <div class="oc-text-bold">
             <translate>Public Links</translate>
           </div>
           <div class="uk-text-meta">
diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index ec47b1140e2..22e6d149bed 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -68,7 +68,7 @@
             >
               <div v-if="checkboxEnabled">
                 <oc-checkbox
-                  class="uk-margin-small-left"
+                  class="uk-margin-small-left files-list-checkbox"
                   :value="selectedFiles.indexOf(rowItem) >= 0"
                   :label="labelSelectSingleItem(rowItem)"
                   :hide-label="true"
@@ -342,7 +342,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .files-list-row-disabled {
   opacity: 0.3;
   pointer-events: none;
@@ -353,4 +353,21 @@ export default {
 .oc-padding-xsmall-bottom {
   padding-bottom: 5px !important;
 }
+
+.files-list-checkbox > input {
+  width: 24px;
+  height: 24px;
+}
+
+#filelist-check-all > input {
+  width: 14px;
+  height: 14px;
+}
+
+.files-list-checkbox > input,
+#filelist-check-all > input {
+  border-radius: 3px;
+  background-color: rgba(78, 133, 200, 0.05);
+  border: 1px solid rgba(78, 133, 200, 0.25);
+}
 </style>
diff --git a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
index 0b4024e91b6..a326aa05866 100644
--- a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
+++ b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
@@ -24,7 +24,7 @@
           :href="link.url"
           target="_blank"
           :uk-tooltip="$_tooltipTextLink"
-          class="uk-text-bold uk-text-truncate oc-files-file-link-url"
+          class="oc-text-bold uk-text-truncate oc-files-file-link-url"
           >{{ $_linkNameText }}</a
         >
         <br />
diff --git a/apps/files/src/components/Roles/RoleItem.vue b/apps/files/src/components/Roles/RoleItem.vue
index c93488e8239..a4ca60138c1 100644
--- a/apps/files/src/components/Roles/RoleItem.vue
+++ b/apps/files/src/components/Roles/RoleItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="roles-select-role-item">
-    <span class="uk-text-bold" v-text="role.label" />
+    <span class="oc-text-bold" v-text="role.label" />
     <p v-if="showDescription" class="uk-text-meta uk-margin-remove" v-text="role.description" />
   </div>
 </template>
diff --git a/apps/files/src/components/Trashbin.vue b/apps/files/src/components/Trashbin.vue
index a21f68cbba2..e49f9642f47 100644
--- a/apps/files/src/components/Trashbin.vue
+++ b/apps/files/src/components/Trashbin.vue
@@ -39,7 +39,7 @@
           <div class="oc-icon" />
         </template>
         <template #rowColumns="{ item }">
-          <div class="uk-width-expand">
+          <div class="uk-width-expand uk-flex uk-flex-middle">
             <file-item
               :key="item.viewId"
               :item="item"
diff --git a/apps/files/src/components/UploadMenu.vue b/apps/files/src/components/UploadMenu.vue
index b7920bf9e64..a6de7b3424f 100644
--- a/apps/files/src/components/UploadMenu.vue
+++ b/apps/files/src/components/UploadMenu.vue
@@ -5,7 +5,7 @@
         <oc-icon name="file_copy" class="uk-margin-small-right" />
         <div class="uk-width-expand">
           <div class="uk-flex">
-            <div class="uk-text-bold uk-width-expand uk-text-truncate">{{ item.name }}</div>
+            <div class="oc-text-bold uk-width-expand uk-text-truncate">{{ item.name }}</div>
             <div class="uk-width-auto uk-text-nowrap">{{ item.size | fileSize }}</div>
           </div>
           <div class="uk-margin-remove uk-position-relative uk-width-expand">
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index ae3ad2a3bd5..f134b3aa7f3 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -4,6 +4,7 @@
       ref="globalSearchBar"
       class="uk-width-large uk-visible@m"
       :label="searchLabel"
+      :placeholder="searchLabel"
       :loading="isLoadingSearchResults"
       :button-hidden="true"
       @search="search"
diff --git a/src/components/Top-Bar.vue b/src/components/Top-Bar.vue
index 112b887dc24..758646000d3 100644
--- a/src/components/Top-Bar.vue
+++ b/src/components/Top-Bar.vue
@@ -3,7 +3,7 @@
     id="oc-topbar"
     class="uk-flex uk-flex-middle uk-flex-wrap oc-border-bottom uk-padding-small"
   >
-    <oc-grid v-if="!publicPage()" gutter="large" flex>
+    <oc-grid v-if="!publicPage()" gutter="medium" flex>
       <div class="uk-hidden@l">
         <oc-button
           variation="raw"
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index e741cad0046..c83c5533f61 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -7,14 +7,17 @@
       variation="raw"
       :aria-label="$gettext('User Menu')"
     >
-      <oc-grid gutter="small" flex>
+      <oc-grid flex>
         <avatar-image
-          class="oc-topbar-personal-avatar"
-          :width="32"
+          class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle uk-margin-xsmall-right"
+          :width="24"
           :userid="userId"
           :user-name="userDisplayName"
         />
-        <div class="oc-topbar-personal-label uk-text-primary" v-text="userDisplayName" />
+        <div
+          class="oc-topbar-personal-label uk-text-primary oc-text-bold"
+          v-text="userDisplayName"
+        />
       </oc-grid>
     </oc-button>
     <oc-drop
diff --git a/src/pages/account.vue b/src/pages/account.vue
index a9f7b1779f7..2935d324cd2 100644
--- a/src/pages/account.vue
+++ b/src/pages/account.vue
@@ -10,7 +10,7 @@
         </oc-button>
       </div>
       <hr />
-      <div class="uk-text-bold uk-margin-bottom"><translate>Account Information</translate></div>
+      <div class="oc-text-bold uk-margin-bottom"><translate>Account Information</translate></div>
       <div class="uk-flex uk-flex-wrap">
         <div class="uk-width-1-2@s uk-margin-bottom">
           <div class="uk-text-meta"><translate>Username:</translate></div>

From f83fd4c421c20fe80f1b21a8d5eb183cd5153f16 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Tue, 22 Sep 2020 18:13:42 +0200
Subject: [PATCH 02/28] WIP

---
 apps/files/src/components/FileItem.vue              | 1 +
 apps/files/src/components/FilesApp.vue              | 7 ++-----
 apps/files/src/components/FilesLists/Indicators.vue | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/files/src/components/FileItem.vue b/apps/files/src/components/FileItem.vue
index 3becbc2f90e..6405ae22bde 100644
--- a/apps/files/src/components/FileItem.vue
+++ b/apps/files/src/components/FileItem.vue
@@ -18,6 +18,7 @@
       :size="hasTwoRows ? 'medium' : 'small'"
       aria-hidden="true"
       class="uk-margin-small-right"
+      variation="file-type"
     />
     <div class="uk-width-expand">
       <div class="file-row-name uk-text-truncate" :filename="item.name">
diff --git a/apps/files/src/components/FilesApp.vue b/apps/files/src/components/FilesApp.vue
index edd856d96dd..e8c6d0e5eab 100644
--- a/apps/files/src/components/FilesApp.vue
+++ b/apps/files/src/components/FilesApp.vue
@@ -1,10 +1,5 @@
 <template>
   <div id="files" class="uk-flex uk-flex-column">
-    <files-app-bar />
-    <upload-progress
-      v-show="$_uploadProgressVisible"
-      class="uk-padding-small uk-background-muted"
-    />
     <oc-grid class="uk-height-1-1 uk-flex-1 uk-overflow-auto">
       <div
         ref="filesListWrapper"
@@ -13,6 +8,8 @@
         :class="{ 'uk-visible@m': _sidebarOpen }"
         @dragover="$_ocApp_dragOver"
       >
+        <files-app-bar />
+        <upload-progress v-show="$_uploadProgressVisible" class="oc-p-s uk-background-muted" />
         <trash-bin v-if="$route.name === 'files-trashbin'" :file-data="activeFiles" />
         <shared-files-list
           v-else-if="sharedList"
diff --git a/apps/files/src/components/FilesLists/Indicators.vue b/apps/files/src/components/FilesLists/Indicators.vue
index 354897a9ae9..ec2aec5ca90 100644
--- a/apps/files/src/components/FilesLists/Indicators.vue
+++ b/apps/files/src/components/FilesLists/Indicators.vue
@@ -16,7 +16,7 @@
           variation="raw"
           @click.stop="indicator.handler(item, indicator.id)"
         >
-          <oc-icon :name="indicator.icon" class="uk-text-middle" size="small" variation="system" />
+          <oc-icon :name="indicator.icon" class="uk-text-middle" size="small" variation="passive" />
         </oc-button>
       </template>
       <template v-else>

From 9d9fd696a1f8496c4d942a7f161c9610d0e818df Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Tue, 29 Sep 2020 19:52:38 +0200
Subject: [PATCH 03/28] Finishing

---
 .../Collaborators/SharedFilesList.vue         |  2 +-
 apps/files/src/components/FileList.vue        | 46 +++++++++----------
 .../src/components/FileSharingSidebar.vue     |  3 +-
 apps/files/src/components/FilesApp.vue        |  4 +-
 .../FilesLists/SortableColumnHeader.vue       |  2 +-
 5 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/apps/files/src/components/Collaborators/SharedFilesList.vue b/apps/files/src/components/Collaborators/SharedFilesList.vue
index 4ee454a59b7..c4f7d3f5925 100644
--- a/apps/files/src/components/Collaborators/SharedFilesList.vue
+++ b/apps/files/src/components/Collaborators/SharedFilesList.vue
@@ -23,7 +23,7 @@
         key="shared-with-header-cell"
         class="uk-visible@s uk-text-nowrap uk-text-meta uk-width-medium uk-text-right"
         translate-context="'People' table column"
-        v-text="$gettext('People')"
+        v-text="$gettext('Shared with')"
       />
       <div
         v-else
diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index 22e6d149bed..b941a8d7dd9 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -12,7 +12,7 @@
         flex
         class="uk-padding-small uk-padding-remove-top oc-padding-xsmall-bottom oc-border-bottom"
       >
-        <div v-if="checkboxEnabled">
+        <div v-if="checkboxEnabled" id="files-list-header-checkbox" class="uk-flex uk-flex-center">
           <oc-checkbox
             id="filelist-check-all"
             class="uk-margin-small-left"
@@ -66,12 +66,17 @@
               class="uk-padding-small oc-border-bottom"
               :class="_rowClasses(rowItem)"
             >
-              <div v-if="checkboxEnabled">
+              <div
+                v-if="checkboxEnabled"
+                id="files-list-row-checkbox"
+                class="uk-flex uk-flex-center"
+              >
                 <oc-checkbox
                   class="uk-margin-small-left files-list-checkbox"
                   :value="selectedFiles.indexOf(rowItem) >= 0"
                   :label="labelSelectSingleItem(rowItem)"
                   :hide-label="true"
+                  size="big"
                   @click.stop
                   @change.native="toggleFileSelect(rowItem)"
                 />
@@ -214,6 +219,9 @@ export default {
       this.$_resizeHeader()
     }
   },
+  mounted() {
+    this.$_resizeHeader()
+  },
   methods: {
     ...mapActions('Files', [
       'loadFolder',
@@ -330,12 +338,21 @@ export default {
     },
 
     $_resizeHeader() {
-      this.$nextTick(() => {
+      setTimeout(() => {
         const headerRow = this.$refs.headerRow
         const firstRow = this.$refs.firstRow
+        const headerCheckbox = document.querySelector('#files-list-header-checkbox')
+        const firstRowCheckbox = document.querySelector('#files-list-row-checkbox')
+
+        console.log(headerCheckbox)
+
         if (headerRow && firstRow) {
           headerRow.$el.style.width = getComputedStyle(firstRow.$el).width
         }
+
+        if (headerCheckbox && firstRowCheckbox) {
+          headerCheckbox.style.width = getComputedStyle(firstRowCheckbox).width
+        }
       })
     }
   }
@@ -348,26 +365,7 @@ export default {
   pointer-events: none;
 }
 
-/* TODO: Create as utility classes in ODS */
-/* Issue: https://github.com/owncloud/owncloud-design-system/issues/821 */
-.oc-padding-xsmall-bottom {
-  padding-bottom: 5px !important;
-}
-
-.files-list-checkbox > input {
-  width: 24px;
-  height: 24px;
-}
-
-#filelist-check-all > input {
-  width: 14px;
-  height: 14px;
-}
-
-.files-list-checkbox > input,
-#filelist-check-all > input {
-  border-radius: 3px;
-  background-color: rgba(78, 133, 200, 0.05);
-  border: 1px solid rgba(78, 133, 200, 0.25);
+#files-list-header-checkbox {
+  width: 34px;
 }
 </style>
diff --git a/apps/files/src/components/FileSharingSidebar.vue b/apps/files/src/components/FileSharingSidebar.vue
index 4b8902b5341..cfb9d4b9305 100644
--- a/apps/files/src/components/FileSharingSidebar.vue
+++ b/apps/files/src/components/FileSharingSidebar.vue
@@ -13,8 +13,7 @@
             class="files-collaborators-open-add-share-dialog-button"
             @click="$_ocCollaborators_addShare"
           >
-            <oc-icon name="add" aria-hidden="true" />
-            <translate>Share</translate>
+            <translate>Add people</translate>
           </oc-button>
         </div>
         <p
diff --git a/apps/files/src/components/FilesApp.vue b/apps/files/src/components/FilesApp.vue
index e8c6d0e5eab..29b1c3e68d3 100644
--- a/apps/files/src/components/FilesApp.vue
+++ b/apps/files/src/components/FilesApp.vue
@@ -1,10 +1,10 @@
 <template>
   <div id="files" class="uk-flex uk-flex-column">
-    <oc-grid class="uk-height-1-1 uk-flex-1 uk-overflow-auto">
+    <oc-grid class="uk-height-1-1 uk-flex-1">
       <div
         ref="filesListWrapper"
         tabindex="-1"
-        class="uk-width-expand uk-overflow-auto uk-height-1-1 files-list-wrapper"
+        class="uk-width-expand uk-height-1-1 files-list-wrapper"
         :class="{ 'uk-visible@m': _sidebarOpen }"
         @dragover="$_ocApp_dragOver"
       >
diff --git a/apps/files/src/components/FilesLists/SortableColumnHeader.vue b/apps/files/src/components/FilesLists/SortableColumnHeader.vue
index 80c981a052e..f82f2265b90 100644
--- a/apps/files/src/components/FilesLists/SortableColumnHeader.vue
+++ b/apps/files/src/components/FilesLists/SortableColumnHeader.vue
@@ -2,7 +2,7 @@
   <oc-button
     variation="raw"
     :aria-label="ariaLabel"
-    class="uk-flex uk-flex-middle oc-sortable-column-header"
+    class="uk-flex uk-flex-middle oc-sortable-column-header uk-text-muted"
     :class="{ 'oc-sortable-column-header-desc': isDesc, 'oc-sortable-column-header-asc': !isDesc }"
     @click="$_onClick"
   >

From 1afabb08e26e8e758a8a63fdea51291c99970ef9 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Fri, 2 Oct 2020 12:40:12 +0200
Subject: [PATCH 04/28] WIP padding, borders and file listing

---
 .../src/components/Collaborators/Collaborator.vue   |  4 ++--
 apps/files/src/components/FileDetails.vue           |  2 +-
 apps/files/src/components/FileItem.vue              |  4 ++--
 apps/files/src/components/FileList.vue              | 13 +++++++++----
 .../components/FilesLists/RowActionsDropdown.vue    |  2 +-
 .../components/FilesLists/SortableColumnHeader.vue  |  1 -
 .../components/LocationPicker/LocationPicker.vue    |  2 +-
 apps/files/src/components/PublicLinks/FilesDrop.vue |  6 +++---
 .../PublicLinksSidebar/PublicLinkListItem.vue       |  2 +-
 apps/files/src/components/UploadProgress.vue        |  2 +-
 apps/media-viewer/src/Mediaviewer.vue               |  6 +++---
 src/components/Top-Bar.vue                          |  5 +----
 src/pages/account.vue                               |  2 +-
 13 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/apps/files/src/components/Collaborators/Collaborator.vue b/apps/files/src/components/Collaborators/Collaborator.vue
index 25982bc1be4..91fae70fddd 100644
--- a/apps/files/src/components/Collaborators/Collaborator.vue
+++ b/apps/files/src/components/Collaborators/Collaborator.vue
@@ -17,7 +17,7 @@
           >
             <oc-icon name="repeat" size="xsmall" class="uk-preserve-width" />
             <span
-              class="uk-padding-remove uk-text-truncate files-collaborators-collaborator-reshare-information"
+              class="oc-p-rm uk-text-truncate files-collaborators-collaborator-reshare-information"
               >{{ $_reshareInformation }}</span
             >
           </oc-button>
@@ -173,7 +173,7 @@
               :uk-tooltip="$gettext('Navigate to parent')"
             />
             <span
-              class="oc-file-name uk-padding-remove uk-text-truncate files-collaborators-collaborator-via-label"
+              class="oc-file-name oc-p-rm uk-text-truncate files-collaborators-collaborator-via-label"
               >{{ $_viaLabel }}</span
             >
           </oc-button>
diff --git a/apps/files/src/components/FileDetails.vue b/apps/files/src/components/FileDetails.vue
index ef31a62bd9a..a11d9e0b47d 100644
--- a/apps/files/src/components/FileDetails.vue
+++ b/apps/files/src/components/FileDetails.vue
@@ -2,7 +2,7 @@
   <oc-app-side-bar
     id="files-sidebar"
     :key="highlightedFile.id"
-    class="uk-padding-small uk-overflow-auto uk-height-1-1"
+    class="oc-p-s uk-overflow-auto uk-height-1-1"
     :disable-action="false"
     @close="close()"
   >
diff --git a/apps/files/src/components/FileItem.vue b/apps/files/src/components/FileItem.vue
index 6405ae22bde..03e09891e0f 100644
--- a/apps/files/src/components/FileItem.vue
+++ b/apps/files/src/components/FileItem.vue
@@ -15,7 +15,7 @@
       v-else
       key="file-icon"
       :name="previewIcon"
-      :size="hasTwoRows ? 'medium' : 'small'"
+      :size="hasTwoRows ? 'large' : 'medium'"
       aria-hidden="true"
       class="uk-margin-small-right"
       variation="file-type"
@@ -23,7 +23,7 @@
     <div class="uk-width-expand">
       <div class="file-row-name uk-text-truncate" :filename="item.name">
         <span
-          class="oc-text-bold oc-cursor-pointer oc-file-name uk-padding-remove-left"
+          class="oc-text-bold oc-cursor-pointer oc-file-name oc-pl-rm"
           role="button"
           v-text="fileName"
         /><span
diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index b941a8d7dd9..000187806fe 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -10,7 +10,7 @@
         key="files-list-results-existence"
         gutter="small"
         flex
-        class="uk-padding-small uk-padding-remove-top oc-padding-xsmall-bottom oc-border-bottom"
+        class="oc-p-s oc-pt-rm oc-pb-xs oc-border-b"
       >
         <div v-if="checkboxEnabled" id="files-list-header-checkbox" class="uk-flex uk-flex-center">
           <oc-checkbox
@@ -63,7 +63,7 @@
               :ref="index === 0 ? 'firstRow' : null"
               gutter="small"
               flex
-              class="uk-padding-small oc-border-bottom"
+              class="file-row oc-px-s oc-py oc-border-b"
               :class="_rowClasses(rowItem)"
             >
               <div
@@ -76,7 +76,7 @@
                   :value="selectedFiles.indexOf(rowItem) >= 0"
                   :label="labelSelectSingleItem(rowItem)"
                   :hide-label="true"
-                  size="big"
+                  size="large"
                   @click.stop
                   @change.native="toggleFileSelect(rowItem)"
                 />
@@ -110,7 +110,7 @@
           <slot name="noContentMessage" />
         </div>
       </div>
-      <oc-grid v-if="!loading" gutter="large" class="uk-width-1-1 uk-padding-small uk-flex-1">
+      <oc-grid v-if="!loading" gutter="large" class="uk-width-1-1 oc-p-s uk-flex-1">
         <slot name="footer" />
       </oc-grid>
     </div>
@@ -368,4 +368,9 @@ export default {
 #files-list-header-checkbox {
   width: 34px;
 }
+
+.file-row {
+  box-sizing: border-box;
+  max-height: 77px;
+}
 </style>
diff --git a/apps/files/src/components/FilesLists/RowActionsDropdown.vue b/apps/files/src/components/FilesLists/RowActionsDropdown.vue
index ea4b58ad9d0..818c49a5e77 100644
--- a/apps/files/src/components/FilesLists/RowActionsDropdown.vue
+++ b/apps/files/src/components/FilesLists/RowActionsDropdown.vue
@@ -18,7 +18,7 @@
             actionClicked()
           "
         >
-          <oc-icon :name="action.icon" aria-hidden="true" />
+          <oc-icon :name="action.icon" aria-hidden="true" size="large" />
           {{ action.ariaLabel(item) }}
         </oc-button>
       </li>
diff --git a/apps/files/src/components/FilesLists/SortableColumnHeader.vue b/apps/files/src/components/FilesLists/SortableColumnHeader.vue
index f82f2265b90..48c57515bc6 100644
--- a/apps/files/src/components/FilesLists/SortableColumnHeader.vue
+++ b/apps/files/src/components/FilesLists/SortableColumnHeader.vue
@@ -12,7 +12,6 @@
         v-if="isActive"
         :name="$_indicatorIconName"
         class="uk-text-middle"
-        size="small"
         variation="passive"
       />
     </span>
diff --git a/apps/files/src/components/LocationPicker/LocationPicker.vue b/apps/files/src/components/LocationPicker/LocationPicker.vue
index 1dc76de2d79..f514c80bdaf 100644
--- a/apps/files/src/components/LocationPicker/LocationPicker.vue
+++ b/apps/files/src/components/LocationPicker/LocationPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="uk-height-1-1 uk-flex uk-flex-column uk-padding-small uk-overflow-hidden">
+  <div class="uk-height-1-1 uk-flex uk-flex-column oc-p-s uk-overflow-hidden">
     <h1 class="location-picker-selection-info uk-flex uk-text-lead uk-margin-bottom">
       <span class="uk-margin-small-right" v-text="title" />
       <oc-breadcrumb :items="breadcrumbs" variation="lead" class="uk-text-lead" />
diff --git a/apps/files/src/components/PublicLinks/FilesDrop.vue b/apps/files/src/components/PublicLinks/FilesDrop.vue
index ef995e7200d..331a6bd3695 100644
--- a/apps/files/src/components/PublicLinks/FilesDrop.vue
+++ b/apps/files/src/components/PublicLinks/FilesDrop.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="files-drop-container" class="uk-height-1-1 uk-flex uk-flex-column uk-flex-between">
-    <div class="uk-padding uk-height-1-1">
+    <div class="oc-p uk-height-1-1">
       <div v-if="loading" key="loading-drop" class="uk-flex uk-flex-column uk-flex-middle">
         <h3 :aria-hidden="true">{{ $_loadingPublicLinkTitle }}</h3>
         <oc-spinner size="medium" :aria-label="$_loadingPublicLinkTitle" />
@@ -26,11 +26,11 @@
           <oc-table class="uk-width-1-1 uk-width-xxlarge@m">
             <oc-table-group>
               <oc-table-row v-for="(file, key) in getUploadedFiles" :key="key">
-                <oc-table-cell class="uk-padding-remove-left" v-text="file.name" />
+                <oc-table-cell class="oc-pl-rm" v-text="file.name" />
                 <oc-table-cell shrink class="uk-text-nowrap uk-text-meta">{{
                   file.size | fileSize
                 }}</oc-table-cell>
-                <oc-table-cell shrink class="uk-padding-remove-right uk-preserve-width">
+                <oc-table-cell shrink class="oc-pr-rm uk-preserve-width">
                   <oc-icon
                     v-if="file.status === 'done'"
                     name="ready"
diff --git a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
index a326aa05866..cd7277753de 100644
--- a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
+++ b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
@@ -97,7 +97,7 @@
           >
             <oc-icon name="exit_to_app" size="small" />
             <span
-              class="oc-file-name uk-padding-remove uk-text-truncate files-file-links-link-via-label"
+              class="oc-file-name oc-p-rm uk-text-truncate files-file-links-link-via-label"
             >
               {{ $_viaLabel }}
             </span>
diff --git a/apps/files/src/components/UploadProgress.vue b/apps/files/src/components/UploadProgress.vue
index 11420fac616..bbe69f55edc 100644
--- a/apps/files/src/components/UploadProgress.vue
+++ b/apps/files/src/components/UploadProgress.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="files-upload-progress" class="uk-clearfix uk-padding-remove-vertical">
+  <div id="files-upload-progress" class="uk-clearfix oc-p-rm-vertical">
     <div class="uk-margin-remove uk-position-relative uk-width-expand">
       <oc-progress
         ref="progressbar"
diff --git a/apps/media-viewer/src/Mediaviewer.vue b/apps/media-viewer/src/Mediaviewer.vue
index 1b95c900f56..d2beb7deccd 100644
--- a/apps/media-viewer/src/Mediaviewer.vue
+++ b/apps/media-viewer/src/Mediaviewer.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="mediaviewer" class="uk-position-relative">
-    <div class="uk-text-center uk-padding-small">
+    <div class="uk-text-center oc-p-s">
       <transition
         name="custom-classes-transition"
         :enter-active-class="activeClass.enter"
@@ -43,11 +43,11 @@
 
     <div class="uk-position-medium uk-position-bottom-center">
       <div
-        class="uk-overlay uk-overlay-default uk-padding-small uk-text-center uk-text-meta uk-text-truncate"
+        class="uk-overlay uk-overlay-default oc-p-s uk-text-center uk-text-meta uk-text-truncate"
       >
         {{ medium.name }}
       </div>
-      <div class="uk-overlay uk-overlay-primary uk-light uk-padding-small">
+      <div class="uk-overlay uk-overlay-primary uk-light oc-p-s">
         <div
           class="uk-width-large uk-flex uk-flex-middle uk-flex-center uk-flex-around"
           style="user-select:none;"
diff --git a/src/components/Top-Bar.vue b/src/components/Top-Bar.vue
index 758646000d3..a920dc7f28d 100644
--- a/src/components/Top-Bar.vue
+++ b/src/components/Top-Bar.vue
@@ -1,8 +1,5 @@
 <template>
-  <header
-    id="oc-topbar"
-    class="uk-flex uk-flex-middle uk-flex-wrap oc-border-bottom uk-padding-small"
-  >
+  <header id="oc-topbar" class="uk-flex uk-flex-middle uk-flex-wrap oc-border-b oc-p-s">
     <oc-grid v-if="!publicPage()" gutter="medium" flex>
       <div class="uk-hidden@l">
         <oc-button
diff --git a/src/pages/account.vue b/src/pages/account.vue
index 2935d324cd2..ed92680bca7 100644
--- a/src/pages/account.vue
+++ b/src/pages/account.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <oc-loader v-if="loading" />
-    <div v-if="!loading" class="uk-width-3-4@m uk-container uk-padding">
+    <div v-if="!loading" class="uk-width-3-4@m uk-container oc-p">
       <div class="uk-flex uk-flex-between uk-flex-middle">
         <h1 id="account-page-title" v-translate class="oc-page-title">Account</h1>
         <oc-button class="account-logout-button" @click="$_oc_settingsAccount_logout">

From 55d78be47c262b5f3a8b59e724f35785b4328465 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Oct 2020 12:27:58 +0200
Subject: [PATCH 05/28] Replace uikit margins with ODS margins

---
 apps/files/src/components/AllFilesList.vue    |  2 +-
 .../Collaborators/AdditionalPermissions.vue   |  2 +-
 .../Collaborators/AutocompleteItem.vue        | 12 +++--------
 .../components/Collaborators/Collaborator.vue | 12 +++++------
 .../Collaborators/EditCollaborator.vue        |  8 ++++----
 .../Collaborators/NewCollaborator.vue         |  7 ++-----
 .../Collaborators/SharedFilesList.vue         | 14 ++++++-------
 apps/files/src/components/FileDetails.vue     |  2 +-
 apps/files/src/components/FileItem.vue        |  4 ++--
 apps/files/src/components/FileLinkSidebar.vue |  6 +++---
 apps/files/src/components/FileList.vue        |  4 ++--
 .../src/components/FileSharingSidebar.vue     |  8 ++++----
 apps/files/src/components/FilesAppBar.vue     | 15 ++++++--------
 .../src/components/FilesLists/Indicators.vue  |  8 ++------
 .../components/FilesLists/QuickActions.vue    |  2 +-
 .../LocationPicker/LocationPicker.vue         |  4 ++--
 .../src/components/PublicLinks/FilesDrop.vue  |  2 +-
 .../src/components/PublicLinks/PublicLink.vue |  2 +-
 .../PublicLinksSidebar/EditPublicLink.vue     | 20 +++++++++----------
 apps/files/src/components/Roles/RoleItem.vue  |  2 +-
 apps/files/src/components/SidebarQuota.vue    |  2 +-
 apps/files/src/components/UploadMenu.vue      |  8 ++++----
 apps/files/src/components/UploadProgress.vue  |  6 +++---
 src/components/Notifications.vue              |  2 +-
 src/components/SearchBar.vue                  |  2 +-
 src/components/Top-Bar.vue                    |  2 +-
 src/components/UserMenu.vue                   |  2 +-
 src/pages/accessDenied.vue                    |  6 +++---
 src/pages/account.vue                         | 12 +++++------
 29 files changed, 80 insertions(+), 98 deletions(-)

diff --git a/apps/files/src/components/AllFilesList.vue b/apps/files/src/components/AllFilesList.vue
index 311c48d65cd..5afc269fbd3 100644
--- a/apps/files/src/components/AllFilesList.vue
+++ b/apps/files/src/components/AllFilesList.vue
@@ -72,7 +72,7 @@
           v-if="actionInProgress(rowItem)"
           size="small"
           :uk-tooltip="disabledActionTooltip(rowItem)"
-          class="uk-margin-small-left"
+          class="oc-ml-s"
         />
       </div>
       <div
diff --git a/apps/files/src/components/Collaborators/AdditionalPermissions.vue b/apps/files/src/components/Collaborators/AdditionalPermissions.vue
index f4192f05892..c9bdf7440f1 100644
--- a/apps/files/src/components/Collaborators/AdditionalPermissions.vue
+++ b/apps/files/src/components/Collaborators/AdditionalPermissions.vue
@@ -6,7 +6,7 @@
       :key="permission.name"
       v-model="permission.value"
       :label="permission.description"
-      class="uk-margin-xsmall-right files-collaborators-permission-checkbox"
+      class="oc-mr-xs files-collaborators-permission-checkbox"
       @change="permissionChecked"
     />
   </oc-grid>
diff --git a/apps/files/src/components/Collaborators/AutocompleteItem.vue b/apps/files/src/components/Collaborators/AutocompleteItem.vue
index 53ebb6989c6..33ecb421ec3 100644
--- a/apps/files/src/components/Collaborators/AutocompleteItem.vue
+++ b/apps/files/src/components/Collaborators/AutocompleteItem.vue
@@ -2,7 +2,7 @@
   <div class="uk-flex uk-flex-middle" :class="collaboratorClass">
     <avatar-image
       v-if="isUser"
-      class="uk-margin-small-right"
+      class="oc-mr-s"
       :width="48"
       :userid="item.value.shareWith"
       :user-name="item.label"
@@ -11,17 +11,11 @@
       <oc-icon
         v-if="item.value.shareType === shareTypes.group"
         key="avatar-group"
-        class="uk-margin-small-right"
+        class="oc-mr-s"
         name="group"
         size="large"
       />
-      <oc-icon
-        v-else
-        key="avatar-generic-person"
-        class="uk-margin-small-right"
-        name="person"
-        size="large"
-      />
+      <oc-icon v-else key="avatar-generic-person" class="oc-mr-s" name="person" size="large" />
     </template>
     <div class="files-collaborators-autocomplete-user-text">
       <div class="oc-text-bold files-collaborators-autocomplete-username" v-text="item.label" />
diff --git a/apps/files/src/components/Collaborators/Collaborator.vue b/apps/files/src/components/Collaborators/Collaborator.vue
index 91fae70fddd..70d59c048f6 100644
--- a/apps/files/src/components/Collaborators/Collaborator.vue
+++ b/apps/files/src/components/Collaborators/Collaborator.vue
@@ -27,15 +27,15 @@
             :toggle="'#' + $_resharerToggleId"
             mode="click"
             :options="{ pos: 'bottom-left', delayHide: 0 }"
-            class="uk-width-large uk-margin-small-top"
+            class="uk-width-large oc-mt-s"
             close-on-click
           >
             <translate tag="h4">Shared by:</translate>
-            <ul class="uk-list uk-list-divider uk-overflow-hidden uk-margin-remove">
+            <ul class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm">
               <li v-for="resharer in collaborator.resharers" :key="resharer.name">
                 <div class="uk-flex uk-flex-middle uk-flex-left">
                   <avatar-image
-                    class="uk-margin-small-right"
+                    class="oc-mr-s"
                     :width="48"
                     :userid="resharer.name"
                     :user-name="resharer.displayName"
@@ -80,7 +80,7 @@
         <div key="collaborator-avatar-loaded">
           <avatar-image
             v-if="isUser"
-            class="uk-margin-small-right files-collaborators-collaborator-indicator"
+            class="oc-mr-s files-collaborators-collaborator-indicator"
             :width="48"
             :userid="collaborator.collaborator.name"
             :user-name="collaborator.collaborator.displayName"
@@ -90,7 +90,7 @@
             <oc-icon
               v-if="collaborator.shareType === shareTypes.group"
               key="avatar-group"
-              class="uk-margin-small-right files-collaborators-collaborator-indicator"
+              class="oc-mr-s files-collaborators-collaborator-indicator"
               name="group"
               size="large"
               :aria-label="$gettext('Group')"
@@ -98,7 +98,7 @@
             <oc-icon
               v-else
               key="avatar-generic-person"
-              class="uk-margin-small-right files-collaborators-collaborator-indicator"
+              class="oc-mr-s files-collaborators-collaborator-indicator"
               name="person"
               size="large"
               :aria-label="$gettext('Remote user')"
diff --git a/apps/files/src/components/Collaborators/EditCollaborator.vue b/apps/files/src/components/Collaborators/EditCollaborator.vue
index b6b86f95feb..cb3823951ea 100644
--- a/apps/files/src/components/Collaborators/EditCollaborator.vue
+++ b/apps/files/src/components/Collaborators/EditCollaborator.vue
@@ -15,9 +15,9 @@
     </transition>
     <div
       v-if="user.id !== collaborator.owner.name"
-      class="uk-text-meta uk-flex uk-flex-middle uk-margin-small-bottom"
+      class="uk-text-meta uk-flex uk-flex-middle oc-mb-s"
     >
-      <oc-icon name="repeat" class="uk-margin-small-right" /> {{ collaborator.owner.displayName }}
+      <oc-icon name="repeat" class="oc-mr-s" /> {{ collaborator.owner.displayName }}
     </div>
     <collaborator class="uk-width-expand" :collaborator="collaborator" :first-column="false" />
     <collaborators-edit-options
@@ -25,11 +25,11 @@
       :collaborators-permissions="$_originalPermissions"
       :expiration-date="originalExpirationDate"
       :existing-collaborator-type="collaboratorType"
-      class="uk-margin-bottom"
+      class="oc-mb"
       @optionChange="collaboratorOptionChanged"
     />
     <hr class="divider" />
-    <oc-grid gutter="small" class="uk-margin-bottom">
+    <oc-grid gutter="small" class="oc-mb">
       <div>
         <oc-button
           key="edit-collaborator-cancel-button"
diff --git a/apps/files/src/components/Collaborators/NewCollaborator.vue b/apps/files/src/components/Collaborators/NewCollaborator.vue
index ae925dc4fbc..7365cc10848 100644
--- a/apps/files/src/components/Collaborators/NewCollaborator.vue
+++ b/apps/files/src/components/Collaborators/NewCollaborator.vue
@@ -49,12 +49,9 @@
         </oc-table>
       </div>
     </oc-grid>
-    <collaborators-edit-options
-      class="uk-margin-bottom"
-      @optionChange="collaboratorOptionChanged"
-    />
+    <collaborators-edit-options class="oc-mb" @optionChange="collaboratorOptionChanged" />
     <hr class="divider" />
-    <oc-grid gutter="small" class="uk-margin-bottom">
+    <oc-grid gutter="small" class="oc-mb">
       <div>
         <oc-button
           key="new-collaborator-cancel-button"
diff --git a/apps/files/src/components/Collaborators/SharedFilesList.vue b/apps/files/src/components/Collaborators/SharedFilesList.vue
index c4f7d3f5925..305278fb609 100644
--- a/apps/files/src/components/Collaborators/SharedFilesList.vue
+++ b/apps/files/src/components/Collaborators/SharedFilesList.vue
@@ -69,7 +69,7 @@
           v-if="actionInProgress(item)"
           size="small"
           :uk-tooltip="disabledActionTooltip(item)"
-          class="uk-margin-small-left"
+          class="oc-ml-s"
         />
       </div>
       <div
@@ -80,12 +80,12 @@
         <span
           v-for="share in prepareCollaborators(item.shares)"
           :key="share.id"
-          class="uk-margin-small-right uk-flex uk-flex-middle"
+          class="oc-mr-s uk-flex uk-flex-middle"
         >
           <avatar-image
             v-if="share.shareType === shareTypes.user && share.collaborator"
             :key="'avatar-' + share.id"
-            class="uk-margin-xsmall-right"
+            class="oc-mr-xs"
             :width="24"
             :userid="share.collaborator.name"
             :user-name="share.collaborator.displayName"
@@ -94,7 +94,7 @@
             v-else
             :key="'icon-' + share.id"
             :name="$_shareTypeIcon(share.shareType)"
-            class="uk-margin-xsmall-right"
+            class="oc-mr-xs"
             size="small"
             variation="active"
             aria-hidden="true"
@@ -126,13 +126,13 @@
         <oc-button
           v-if="item.status === 1"
           variation="raw"
-          class="file-row-share-status-action uk-text-meta uk-margin-left"
+          class="file-row-share-status-action uk-text-meta oc-ml"
           @click="pendingShareAction(item, 'DELETE')"
         >
           <translate>Decline</translate>
         </oc-button>
         <span
-          class="uk-text-small uk-margin-left file-row-share-status-text uk-text-baseline"
+          class="uk-text-small oc-ml file-row-share-status-text uk-text-baseline"
           v-text="shareStatus(item.status)"
         />
       </div>
@@ -142,7 +142,7 @@
         class="uk-visible@s uk-text-meta uk-text-nowrap uk-text-truncate uk-width-small uk-flex uk-flex-middle file-row-collaborators uk-flex-right"
       >
         <avatar-image
-          class="uk-margin-xsmall-right"
+          class="oc-mr-xs"
           :width="24"
           :userid="item.shareOwner.username"
           :user-name="item.shareOwner.displayName"
diff --git a/apps/files/src/components/FileDetails.vue b/apps/files/src/components/FileDetails.vue
index a11d9e0b47d..6f024988026 100644
--- a/apps/files/src/components/FileDetails.vue
+++ b/apps/files/src/components/FileDetails.vue
@@ -14,7 +14,7 @@
         <div class="uk-flex uk-flex-middle">
           <span
             id="files-sidebar-item-name"
-            class="uk-margin-small-right oc-text-bold"
+            class="oc-mr-s oc-text-bold"
             v-text="highlightedFile.name"
           />
         </div>
diff --git a/apps/files/src/components/FileItem.vue b/apps/files/src/components/FileItem.vue
index 03e09891e0f..8fc6543fabd 100644
--- a/apps/files/src/components/FileItem.vue
+++ b/apps/files/src/components/FileItem.vue
@@ -6,7 +6,7 @@
     <oc-img
       v-if="previewUrl"
       key="file-preview"
-      class="files-list-file-preview uk-margin-small-right"
+      class="files-list-file-preview oc-mr-s"
       :class="{ 'files-list-file-preview-small': !hasTwoRows }"
       :src="previewUrl"
       alt=""
@@ -17,7 +17,7 @@
       :name="previewIcon"
       :size="hasTwoRows ? 'large' : 'medium'"
       aria-hidden="true"
-      class="uk-margin-small-right"
+      class="oc-mr-s"
       variation="file-type"
     />
     <div class="uk-width-expand">
diff --git a/apps/files/src/components/FileLinkSidebar.vue b/apps/files/src/components/FileLinkSidebar.vue
index b23f069a4e1..bfed69c172f 100644
--- a/apps/files/src/components/FileLinkSidebar.vue
+++ b/apps/files/src/components/FileLinkSidebar.vue
@@ -14,7 +14,7 @@
               :aria-label="$_privateLinkCopyLabel"
               :uk-tooltip="$_privateLinkCopyLabel"
               variation="raw"
-              class="uk-margin-small-left"
+              class="oc-ml-s"
             >
               <oc-icon
                 v-if="!linksCopied[$_privateLinkOfHighlightedFile]"
@@ -50,7 +50,7 @@
               </translate>
             </i>
           </div>
-          <div class="uk-margin-small-top uk-margin-small-bottom">
+          <div class="oc-mt-s oc-mb-s">
             <oc-button
               id="files-file-link-add"
               icon="add"
@@ -63,7 +63,7 @@
             </oc-button>
           </div>
           <transition-group
-            class="uk-list uk-list-divider uk-overflow-hidden uk-margin-remove"
+            class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
             :enter-active-class="$_transitionGroupEnter"
             :leave-active-class="$_transitionGroupLeave"
             name="custom-classes-transition"
diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index 000187806fe..e89e77d59dd 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -15,7 +15,7 @@
         <div v-if="checkboxEnabled" id="files-list-header-checkbox" class="uk-flex uk-flex-center">
           <oc-checkbox
             id="filelist-check-all"
-            class="uk-margin-small-left"
+            class="oc-ml-s"
             :hide-label="true"
             :label="labelSelectAllItems"
             :value="selectedAll"
@@ -72,7 +72,7 @@
                 class="uk-flex uk-flex-center"
               >
                 <oc-checkbox
-                  class="uk-margin-small-left files-list-checkbox"
+                  class="oc-ml-s files-list-checkbox"
                   :value="selectedFiles.indexOf(rowItem) >= 0"
                   :label="labelSelectSingleItem(rowItem)"
                   :hide-label="true"
diff --git a/apps/files/src/components/FileSharingSidebar.vue b/apps/files/src/components/FileSharingSidebar.vue
index cfb9d4b9305..3a602daff7d 100644
--- a/apps/files/src/components/FileSharingSidebar.vue
+++ b/apps/files/src/components/FileSharingSidebar.vue
@@ -7,7 +7,7 @@
     >
       <oc-loader v-if="sharesLoading" :aria-label="$gettext('Loading people list')" />
       <template v-else>
-        <div v-if="$_ocCollaborators_canShare" class="uk-margin-small-top uk-margin-small-bottom">
+        <div v-if="$_ocCollaborators_canShare" class="oc-mt-s oc-mb-s">
           <oc-button
             variation="primary"
             class="files-collaborators-open-add-share-dialog-button"
@@ -23,7 +23,7 @@
           v-text="noResharePermsMessage"
         />
         <section>
-          <ul class="uk-list uk-list-divider uk-overflow-hidden uk-margin-remove">
+          <ul class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm">
             <li v-if="$_ownerAsCollaborator" :key="$_ownerAsCollaborator.key">
               <collaborator :collaborator="$_ownerAsCollaborator" />
             </li>
@@ -31,12 +31,12 @@
               <collaborator :collaborator="$_currentUserAsCollaborator" />
             </li>
           </ul>
-          <hr v-if="collaborators.length > 0" class="uk-margin-small-top uk-margin-small-bottom" />
+          <hr v-if="collaborators.length > 0" class="oc-mt-s oc-mb-s" />
         </section>
         <section>
           <transition-group
             id="files-collaborators-list"
-            class="uk-list uk-list-divider uk-overflow-hidden uk-margin-remove"
+            class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
             :enter-active-class="$_transitionGroupEnter"
             :leave-active-class="$_transitionGroupLeave"
             name="custom-classes-transition"
diff --git a/apps/files/src/components/FilesAppBar.vue b/apps/files/src/components/FilesAppBar.vue
index 430fe417452..f9a2681ae87 100644
--- a/apps/files/src/components/FilesAppBar.vue
+++ b/apps/files/src/components/FilesAppBar.vue
@@ -10,10 +10,10 @@
       @progress="onFileProgress"
     />
     <div>
-      <div class="uk-margin-small-bottom">
+      <div class="oc-mb-s">
         <oc-breadcrumb v-if="showBreadcrumb" id="files-breadcrumb" :items="breadcrumbs" home />
-        <span v-if="!showBreadcrumb" class="uk-flex uk-flex-middle uk-margin-small-bottom">
-          <oc-icon v-if="pageIcon" :name="pageIcon" class="uk-margin-small-right" />
+        <span v-if="!showBreadcrumb" class="uk-flex uk-flex-middle oc-mb-s">
+          <oc-icon v-if="pageIcon" :name="pageIcon" class="oc-mr-s" />
           <h1 class="oc-page-title" v-text="pageTitle" />
         </span>
         <span v-else-if="showBreadcrumb">
@@ -75,10 +75,7 @@
             </oc-drop>
           </template>
         </template>
-        <div
-          v-if="selectedResourcesAmount > 0"
-          class="uk-margin-small-right uk-visible@l uk-flex uk-flex-middle"
-        >
+        <div v-if="selectedResourcesAmount > 0" class="oc-mr-s uk-visible@l uk-flex uk-flex-middle">
           <translate
             v-if="selectedResourcesSize !== '?'"
             key="multiple-select-info"
@@ -97,7 +94,7 @@
             translate-comment="Number of selected resources displayed above the files list"
             >%{ amount } selected item</translate
           >
-          <span class="uk-margin-small-left uk-margin-small-right">|</span>
+          <span class="oc-ml-s oc-mr-s">|</span>
           <oc-button variation="raw" @click="resetFileSelection"
             ><translate>Clear selection</translate></oc-button
           >
@@ -106,7 +103,7 @@
           <oc-button
             v-if="selectedFiles.length > 0"
             key="restore-btn"
-            class="uk-margin-small-right"
+            class="oc-mr-s"
             @click="$_ocTrashbin_restoreFiles()"
           >
             <oc-icon name="restore" aria-hidden="true" />
diff --git a/apps/files/src/components/FilesLists/Indicators.vue b/apps/files/src/components/FilesLists/Indicators.vue
index ec2aec5ca90..c614cf9062d 100644
--- a/apps/files/src/components/FilesLists/Indicators.vue
+++ b/apps/files/src/components/FilesLists/Indicators.vue
@@ -1,16 +1,12 @@
 <template>
   <span>
-    <div
-      v-if="displayDefaultIndicators"
-      :class="{ 'uk-margin-xsmall-right': customIndicators }"
-      class="uk-flex"
-    >
+    <div v-if="displayDefaultIndicators" :class="{ 'oc-mr-xs': customIndicators }" class="uk-flex">
       <template v-if="areIndicatorsClickable">
         <oc-button
           v-for="(indicator, index) in defaultIndicators"
           :key="index"
           class="file-row-share-indicator uk-text-middle"
-          :class="{ 'uk-margin-xsmall-left': index > 0, 'uk-invisible': !indicator.visible }"
+          :class="{ 'oc-ml-xs': index > 0, 'uk-invisible': !indicator.visible }"
           :aria-label="indicator.label"
           :uk-tooltip="indicator.label"
           variation="raw"
diff --git a/apps/files/src/components/FilesLists/QuickActions.vue b/apps/files/src/components/FilesLists/QuickActions.vue
index f77cde2f327..40bd77396cc 100644
--- a/apps/files/src/components/FilesLists/QuickActions.vue
+++ b/apps/files/src/components/FilesLists/QuickActions.vue
@@ -7,7 +7,7 @@
       :aria-label="action.label"
       :uk-tooltip="action.label"
       variation="raw"
-      class="uk-margin-xsmall-right"
+      class="oc-mr-xs"
       @click.stop="action.handler({ item, client: $client, store: $store })"
     >
       <oc-icon :name="action.icon" aria-hidden="true" size="small" class="uk-flex" />
diff --git a/apps/files/src/components/LocationPicker/LocationPicker.vue b/apps/files/src/components/LocationPicker/LocationPicker.vue
index f514c80bdaf..d11fb0d01b1 100644
--- a/apps/files/src/components/LocationPicker/LocationPicker.vue
+++ b/apps/files/src/components/LocationPicker/LocationPicker.vue
@@ -4,8 +4,8 @@
       <span class="uk-margin-small-right" v-text="title" />
       <oc-breadcrumb :items="breadcrumbs" variation="lead" class="uk-text-lead" />
     </h1>
-    <hr class="uk-margin-remove-top" />
-    <div class="uk-margin-bottom">
+    <hr class="oc-mt-rm" />
+    <div class="oc-mb">
       <oc-grid gutter="small">
         <div>
           <oc-button @click="leaveLocationPicker(originalLocation)">
diff --git a/apps/files/src/components/PublicLinks/FilesDrop.vue b/apps/files/src/components/PublicLinks/FilesDrop.vue
index 331a6bd3695..c5262ad54d8 100644
--- a/apps/files/src/components/PublicLinks/FilesDrop.vue
+++ b/apps/files/src/components/PublicLinks/FilesDrop.vue
@@ -55,7 +55,7 @@
         </div>
         <div v-if="errorMessage" class="uk-text-center">
           <translate tag="h3">An error occurred while loading the public link</translate>
-          <p class="uk-margin-remove" v-text="errorMessage" />
+          <p class="oc-m-rm" v-text="errorMessage" />
         </div>
       </div>
     </div>
diff --git a/apps/files/src/components/PublicLinks/PublicLink.vue b/apps/files/src/components/PublicLinks/PublicLink.vue
index a70de0d958c..33f133a0aad 100644
--- a/apps/files/src/components/PublicLinks/PublicLink.vue
+++ b/apps/files/src/components/PublicLinks/PublicLink.vue
@@ -26,7 +26,7 @@
             :label="passwordFieldLabel"
             type="password"
             :placeholder="passwordPlaceholder"
-            class="uk-margin-small-bottom"
+            class="oc-mb-s"
           ></oc-text-input>
           <oc-button variation="primary" class="oc-login-authorize-button" :disabled="!password">
             <translate>Continue</translate>
diff --git a/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue b/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
index 3454b6f1b9a..0eab729e4a4 100644
--- a/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
+++ b/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
@@ -10,7 +10,7 @@
           {{ errors }}
         </oc-alert>
       </transition>
-      <div class="uk-margin">
+      <div class="oc-m">
         <label class="oc-label"><span v-translate>Name:</span></label>
         <input id="oc-files-file-link-name" v-model="name" class="uk-input" />
       </div>
@@ -22,7 +22,7 @@
           @roleSelected="$_selectRole"
         />
       </oc-grid>
-      <div class="uk-margin uk-grid-small uk-flex uk-flex-middle" uk-grid>
+      <div class="oc-m uk-grid-small uk-flex uk-flex-middle" uk-grid>
         <div v-if="$_expirationDate" class="uk-width-1-1 uk-width-2-5@m">
           <label class="oc-label" for="oc-files-file-link-expire-date">
             <span v-translate>Expiration date:</span>
@@ -52,9 +52,7 @@
         <div class="uk-width-1-1 uk-width-3-5@m">
           <label class="oc-label" for="oc-files-file-link-password">
             <span v-translate>Password:</span
-            ><em v-if="$_passwordEnforced" class="uk-margin-small-left"
-              >(<span v-translate>required</span>)</em
-            >
+            ><em v-if="$_passwordEnforced" class="oc-ml-s">(<span v-translate>required</span>)</em>
           </label>
           <div class="uk-position-relative">
             <input
@@ -80,22 +78,22 @@
       <!-- @TODO: Enable Mail API to use the following
                   ++++++++++++++++++++++++++++++++++++
         <template v-if="$_sendMailEnabled">
-            <h4 class="uk-margin-medium-top uk-heading-divider">
+            <h4 class="oc-mt-top uk-heading-divider">
                 Send mail notification
             </h4>
-            <div class="uk-margin">
+            <div class="oc-m">
                 <input type="text" class="uk-input" :placeholder="placeholder.mailTo" />
             </div>
-            <div class="uk-margin">
+            <div class="oc-m">
                 <textarea class="uk-textarea" :placeholder="placeholder.mailBody rows="4"></textarea>
             </div>
-            <div class="uk-margin">
-                <label><input type="checkbox" class="uk-checkbox uk-margin-small-right" v-translate>Send a copy to myself</label>
+            <div class="oc-m">
+                <label><input type="checkbox" class="uk-checkbox oc-mr-s" v-translate>Send a copy to myself</label>
             </div>
         </template>
         -->
       <hr class="divider" />
-      <oc-grid class="uk-margin-bottom" gutter="small">
+      <oc-grid class="oc-mb" gutter="small">
         <div>
           <oc-button id="oc-files-file-link-cancel" :disabled="saving" @click="$_closeForm">
             <translate>Cancel</translate>
diff --git a/apps/files/src/components/Roles/RoleItem.vue b/apps/files/src/components/Roles/RoleItem.vue
index a4ca60138c1..862d722b13b 100644
--- a/apps/files/src/components/Roles/RoleItem.vue
+++ b/apps/files/src/components/Roles/RoleItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="roles-select-role-item">
     <span class="oc-text-bold" v-text="role.label" />
-    <p v-if="showDescription" class="uk-text-meta uk-margin-remove" v-text="role.description" />
+    <p v-if="showDescription" class="uk-text-meta oc-m-rm" v-text="role.description" />
   </div>
 </template>
 
diff --git a/apps/files/src/components/SidebarQuota.vue b/apps/files/src/components/SidebarQuota.vue
index 96526f0bf2f..e777384ab43 100644
--- a/apps/files/src/components/SidebarQuota.vue
+++ b/apps/files/src/components/SidebarQuota.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="uk-text-center">
-    <oc-progress :value="quota.relative" :max="100" size="small" class="uk-margin-xsmall-bottom" />
+    <oc-progress :value="quota.relative" :max="100" size="small" class="oc-mb-xs" />
     <translate
       class="oc-light"
       :translate-params="{ used: usedQuota, total: quota.definition }"
diff --git a/apps/files/src/components/UploadMenu.vue b/apps/files/src/components/UploadMenu.vue
index a6de7b3424f..e5e117deec5 100644
--- a/apps/files/src/components/UploadMenu.vue
+++ b/apps/files/src/components/UploadMenu.vue
@@ -1,19 +1,19 @@
 <template>
-  <ul class="uk-list uk-list-divider uk-margin-remove-left uk-margin-remove-right">
+  <ul class="uk-list uk-list-divider oc-ml-rm oc-mr-rm">
     <li v-for="item in items" :key="item.id">
       <div class="uk-flex uk-flex-middle">
-        <oc-icon name="file_copy" class="uk-margin-small-right" />
+        <oc-icon name="file_copy" class="oc-mr-s" />
         <div class="uk-width-expand">
           <div class="uk-flex">
             <div class="oc-text-bold uk-width-expand uk-text-truncate">{{ item.name }}</div>
             <div class="uk-width-auto uk-text-nowrap">{{ item.size | fileSize }}</div>
           </div>
-          <div class="uk-margin-remove uk-position-relative uk-width-expand">
+          <div class="oc-m-rm uk-position-relative uk-width-expand">
             <oc-progress
               :aria-hidden="true"
               :max="100"
               :value="item.progress | toInt"
-              class="uk-width-expand uk-margin-remove"
+              class="uk-width-expand oc-m-rm"
             />
             <span :aria-hidden="true" class="uk-position-center oc-progress-text">
               {{ item.progress | roundNumber }} %
diff --git a/apps/files/src/components/UploadProgress.vue b/apps/files/src/components/UploadProgress.vue
index bbe69f55edc..786615810b7 100644
--- a/apps/files/src/components/UploadProgress.vue
+++ b/apps/files/src/components/UploadProgress.vue
@@ -1,12 +1,12 @@
 <template>
-  <div id="files-upload-progress" class="uk-clearfix oc-p-rm-vertical">
+  <div id="files-upload-progress" class="uk-clearfix oc-py-rm">
     <div class="uk-margin-remove uk-position-relative uk-width-expand">
       <oc-progress
         ref="progressbar"
         :aria-hidden="true"
         :max="100"
         :value="totalUploadProgress"
-        class="uk-width-expand uk-margin-remove"
+        class="uk-width-expand oc-m-rm"
       />
       <span :aria-hidden="true" class="uk-position-center oc-progress-text">
         {{ totalUploadProgress | roundNumber }} %
@@ -15,7 +15,7 @@
     </div>
     <oc-grid
       flex
-      class="uk-margin-small-top uk-margin-small-bottom uk-text-meta oc-cursor-pointer"
+      class="oc-mt-s oc-mb-s uk-text-meta oc-cursor-pointer"
       :aria-label="$gettext('Click row to toggle upload progress details')"
       @click.native="$_toggleExpanded"
     >
diff --git a/src/components/Notifications.vue b/src/components/Notifications.vue
index ea7eaac62cd..5dfbc7cdd05 100644
--- a/src/components/Notifications.vue
+++ b/src/components/Notifications.vue
@@ -26,7 +26,7 @@
               :key="index + '-' + actionIndex"
               size="small"
               :variation="action.primary ? 'primary' : 'default'"
-              class="uk-margin-small-left"
+              class="oc-ml-s"
               @click.prevent="executeRequest(el.app, action.link, action.type, el.notification_id)"
               >{{ action.label }}</oc-button
             >
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index f134b3aa7f3..55567c7dae3 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -23,7 +23,7 @@
       drop-id="oc-topbar-search-mobile"
       toggle="#files-open-search-btn"
       mode="click"
-      class="uk-margin-remove"
+      class="oc-m-rm"
       :options="{ delayHide: '0' }"
     >
       <oc-search-bar
diff --git a/src/components/Top-Bar.vue b/src/components/Top-Bar.vue
index a920dc7f28d..b85ea70f202 100644
--- a/src/components/Top-Bar.vue
+++ b/src/components/Top-Bar.vue
@@ -17,7 +17,7 @@
       v-if="!isPublicPage"
       flex
       gutter="small"
-      class="uk-width-expand uk-flex-right uk-margin-remove-top"
+      class="uk-width-expand uk-flex-right oc-mt-rm"
     >
       <notifications v-if="activeNotifications.length" />
       <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index c83c5533f61..2f59bbc0f4d 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -9,7 +9,7 @@
     >
       <oc-grid flex>
         <avatar-image
-          class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle uk-margin-xsmall-right"
+          class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle oc-mr-xs"
           :width="24"
           :userid="userId"
           :user-name="userDisplayName"
diff --git a/src/pages/accessDenied.vue b/src/pages/accessDenied.vue
index 890da8345bc..7c7cf4d803b 100644
--- a/src/pages/accessDenied.vue
+++ b/src/pages/accessDenied.vue
@@ -8,15 +8,15 @@
         <h3 class="oc-login-card-title">
           <span v-translate>Login Error</span>
         </h3>
-        <h4 v-translate class="uk-margin-remove">
+        <h4 v-translate class="oc-m-rm">
           You are not allowed to use this application.
         </h4>
         <br />
-        <div v-translate class="uk-margin-remove" @click="performLogout">
+        <div v-translate class="oc-m-rm" @click="performLogout">
           If you like to login with a different user please proceed to <a id="exitAnchor">exit</a>.
         </div>
         <br />
-        <div v-translate class="uk-margin-remove">
+        <div v-translate class="oc-m-rm">
           <strong>Attention:</strong> this will log you out from all applications you are running in
           this browser with your current user.
         </div>
diff --git a/src/pages/account.vue b/src/pages/account.vue
index ed92680bca7..76f9dc38edb 100644
--- a/src/pages/account.vue
+++ b/src/pages/account.vue
@@ -10,26 +10,26 @@
         </oc-button>
       </div>
       <hr />
-      <div class="oc-text-bold uk-margin-bottom"><translate>Account Information</translate></div>
+      <div class="oc-text-bold oc-mb"><translate>Account Information</translate></div>
       <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-2@s uk-margin-bottom">
+        <div class="uk-width-1-2@s oc-mb">
           <div class="uk-text-meta"><translate>Username:</translate></div>
           {{ user.username || user.id }}
         </div>
-        <div v-if="user.username && user.id" class="uk-width-1-2@s uk-margin-bottom">
+        <div v-if="user.username && user.id" class="uk-width-1-2@s oc-mb">
           <div class="uk-text-meta"><translate>User ID:</translate></div>
           {{ user.id }}
         </div>
-        <div class="uk-width-1-2@s uk-margin-bottom">
+        <div class="uk-width-1-2@s oc-mb">
           <div class="uk-text-meta"><translate>Display name:</translate></div>
           {{ user.displayname }}
         </div>
-        <div class="uk-width-1-2@s uk-margin-bottom">
+        <div class="uk-width-1-2@s oc-mb">
           <div class="uk-text-meta"><translate>Email:</translate></div>
           <template v-if="user.email">{{ user.email }}</template>
           <span v-else v-translate>No email has been set up</span>
         </div>
-        <div class="uk-width-1-2@s uk-margin-bottom" @click="$_oc_settingsAccount_getGroup">
+        <div class="uk-width-1-2@s oc-mb" @click="$_oc_settingsAccount_getGroup">
           <div class="uk-text-meta"><translate>Groups membership:</translate></div>
           <template v-if="groups.length > 0">
             <span v-for="(group, index) in groups" :key="index">

From e67e14d649f94a149ee5605c7fd91f48507ebc2a Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Oct 2020 12:45:53 +0200
Subject: [PATCH 06/28] Adapt spinner size prop values

---
 apps/files/src/components/AllFilesList.vue                  | 1 -
 apps/files/src/components/Collaborators/Collaborator.vue    | 6 +-----
 .../files/src/components/Collaborators/EditCollaborator.vue | 2 +-
 apps/files/src/components/Collaborators/NewCollaborator.vue | 2 +-
 apps/files/src/components/Collaborators/SharedFilesList.vue | 1 -
 apps/files/src/components/PrivateLink.vue                   | 2 +-
 apps/files/src/components/PublicLinks/FilesDrop.vue         | 4 ++--
 apps/files/src/components/PublicLinks/PublicLink.vue        | 2 +-
 .../src/components/PublicLinksSidebar/EditPublicLink.vue    | 4 ++--
 .../components/PublicLinksSidebar/PublicLinkListItem.vue    | 1 -
 apps/markdown-editor/src/MarkdownEditorAppBar.vue           | 2 +-
 apps/media-viewer/src/Mediaviewer.vue                       | 2 +-
 src/components/Avatar.vue                                   | 1 -
 13 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/apps/files/src/components/AllFilesList.vue b/apps/files/src/components/AllFilesList.vue
index 5afc269fbd3..77194e06b05 100644
--- a/apps/files/src/components/AllFilesList.vue
+++ b/apps/files/src/components/AllFilesList.vue
@@ -70,7 +70,6 @@
         />
         <oc-spinner
           v-if="actionInProgress(rowItem)"
-          size="small"
           :uk-tooltip="disabledActionTooltip(rowItem)"
           class="oc-ml-s"
         />
diff --git a/apps/files/src/components/Collaborators/Collaborator.vue b/apps/files/src/components/Collaborators/Collaborator.vue
index 70d59c048f6..d3c28883526 100644
--- a/apps/files/src/components/Collaborators/Collaborator.vue
+++ b/apps/files/src/components/Collaborators/Collaborator.vue
@@ -69,11 +69,7 @@
         >
           <oc-icon name="close" />
         </oc-button>
-        <oc-spinner
-          v-else-if="$_loadingSpinnerVisible"
-          :aria-label="$gettext('Removing person')"
-          size="small"
-        />
+        <oc-spinner v-else-if="$_loadingSpinnerVisible" :aria-label="$gettext('Removing person')" />
         <oc-icon v-else name="lock" class="uk-invisible"></oc-icon>
       </oc-table-cell>
       <oc-table-cell shrink>
diff --git a/apps/files/src/components/Collaborators/EditCollaborator.vue b/apps/files/src/components/Collaborators/EditCollaborator.vue
index cb3823951ea..73b04aeea80 100644
--- a/apps/files/src/components/Collaborators/EditCollaborator.vue
+++ b/apps/files/src/components/Collaborators/EditCollaborator.vue
@@ -42,7 +42,7 @@
       </div>
       <div>
         <oc-button v-if="saving" key="edit-collaborator-saving-button" :disabled="true">
-          <oc-spinner :aria-label="$gettext('Saving Share')" size="xsmall" />
+          <oc-spinner :aria-label="$gettext('Saving Share')" size="small" />
           <span v-translate :aria-hidden="true">Saving Share</span>
         </oc-button>
         <oc-button
diff --git a/apps/files/src/components/Collaborators/NewCollaborator.vue b/apps/files/src/components/Collaborators/NewCollaborator.vue
index 7365cc10848..517b35ef170 100644
--- a/apps/files/src/components/Collaborators/NewCollaborator.vue
+++ b/apps/files/src/components/Collaborators/NewCollaborator.vue
@@ -64,7 +64,7 @@
       </div>
       <div>
         <oc-button v-if="saving" key="new-collaborator-saving-button" :disabled="true">
-          <oc-spinner :aria-label="$gettext('Adding People')" size="xsmall" />
+          <oc-spinner :aria-label="$gettext('Adding People')" size="small" />
           <span v-translate :aria-hidden="true">Adding People</span>
         </oc-button>
         <oc-button
diff --git a/apps/files/src/components/Collaborators/SharedFilesList.vue b/apps/files/src/components/Collaborators/SharedFilesList.vue
index 305278fb609..9d0351248a6 100644
--- a/apps/files/src/components/Collaborators/SharedFilesList.vue
+++ b/apps/files/src/components/Collaborators/SharedFilesList.vue
@@ -67,7 +67,6 @@
         />
         <oc-spinner
           v-if="actionInProgress(item)"
-          size="small"
           :uk-tooltip="disabledActionTooltip(item)"
           class="oc-ml-s"
         />
diff --git a/apps/files/src/components/PrivateLink.vue b/apps/files/src/components/PrivateLink.vue
index 126470e694a..691e9149b0a 100644
--- a/apps/files/src/components/PrivateLink.vue
+++ b/apps/files/src/components/PrivateLink.vue
@@ -6,7 +6,7 @@
       </h1>
       <div v-if="loading" class="oc-login-card-body">
         <h3 class="oc-login-card-title" :aria-hidden="true">{{ $_resolvingPrivateLinkTitle }}</h3>
-        <oc-spinner :aria-label="$_resolvingPrivateLinkTitle"></oc-spinner>
+        <oc-spinner :aria-label="$_resolvingPrivateLinkTitle" />
       </div>
       <div v-if="errorMessage" class="oc-login-card-body">
         <h3 class="oc-login-card-title">
diff --git a/apps/files/src/components/PublicLinks/FilesDrop.vue b/apps/files/src/components/PublicLinks/FilesDrop.vue
index c5262ad54d8..40a424ac4a2 100644
--- a/apps/files/src/components/PublicLinks/FilesDrop.vue
+++ b/apps/files/src/components/PublicLinks/FilesDrop.vue
@@ -3,7 +3,7 @@
     <div class="oc-p uk-height-1-1">
       <div v-if="loading" key="loading-drop" class="uk-flex uk-flex-column uk-flex-middle">
         <h3 :aria-hidden="true">{{ $_loadingPublicLinkTitle }}</h3>
-        <oc-spinner size="medium" :aria-label="$_loadingPublicLinkTitle" />
+        <oc-spinner :aria-label="$_loadingPublicLinkTitle" size="large" />
       </div>
       <div v-else key="loaded-drop" class="uk-flex uk-flex-column uk-flex-middle uk-height-1-1">
         <div class="uk-text-center uk-width-1-1 uk-width-xxlarge@m">
@@ -45,7 +45,7 @@
                   />
                   <oc-spinner
                     v-if="file.status === 'uploading' || file.status === 'init'"
-                    size="xsmall"
+                    size="small"
                     :aria-label="$_ocUploadingFileMessage(file.name)"
                   />
                 </oc-table-cell>
diff --git a/apps/files/src/components/PublicLinks/PublicLink.vue b/apps/files/src/components/PublicLinks/PublicLink.vue
index 33f133a0aad..38517bf88a7 100644
--- a/apps/files/src/components/PublicLinks/PublicLink.vue
+++ b/apps/files/src/components/PublicLinks/PublicLink.vue
@@ -6,7 +6,7 @@
       </h1>
       <div v-if="loading" class="oc-login-card-body">
         <h3 class="oc-login-card-title" :aria-hidden="true">{{ $_loadingPublicLinkTitle }}</h3>
-        <oc-spinner :aria-label="$_loadingPublicLinkTitle"></oc-spinner>
+        <oc-spinner :aria-label="$_loadingPublicLinkTitle" />
       </div>
       <div v-if="errorMessage" class="oc-login-card-body">
         <h3 class="oc-login-card-title">
diff --git a/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue b/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
index 0eab729e4a4..da1b05a8d56 100644
--- a/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
+++ b/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
@@ -102,11 +102,11 @@
         <div>
           <oc-button v-if="saving" variation="primary" disabled>
             <template v-if="$_isNew">
-              <oc-spinner :aria-label="$gettext('Creating Public Link')" size="xsmall" />
+              <oc-spinner :aria-label="$gettext('Creating Public Link')" size="small" />
               <span v-translate :aria-hidden="true">Creating</span>
             </template>
             <template v-else>
-              <oc-spinner :aria-label="$gettext('Saving Public Link')" size="xsmall" />
+              <oc-spinner :aria-label="$gettext('Saving Public Link')" size="small" />
               <span v-translate :aria-hidden="true">Saving</span>
             </template>
           </oc-button>
diff --git a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
index cd7277753de..d57792c2188 100644
--- a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
+++ b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
@@ -15,7 +15,6 @@
         <oc-spinner
           v-else-if="$_loadingSpinnerVisible"
           :aria-label="$gettext('Removing public link…')"
-          size="small"
         />
         <oc-icon v-else name="lock" class="uk-invisible" />
       </oc-table-cell>
diff --git a/apps/markdown-editor/src/MarkdownEditorAppBar.vue b/apps/markdown-editor/src/MarkdownEditorAppBar.vue
index 9e962fb6f29..cfa5cc2a8f3 100644
--- a/apps/markdown-editor/src/MarkdownEditorAppBar.vue
+++ b/apps/markdown-editor/src/MarkdownEditorAppBar.vue
@@ -5,7 +5,7 @@
         <oc-button :disabled="!isTouched" @click="saveContent">
           <oc-icon name="save" aria-hidden="true" />
         </oc-button>
-        <oc-spinner v-if="isLoading"></oc-spinner>
+        <oc-spinner v-if="isLoading" />
       </div>
       <div class="uk-width-expand uk-text-center">
         <span>{{ activeFile.path.substr(1) }}</span>
diff --git a/apps/media-viewer/src/Mediaviewer.vue b/apps/media-viewer/src/Mediaviewer.vue
index d2beb7deccd..7720a798d22 100644
--- a/apps/media-viewer/src/Mediaviewer.vue
+++ b/apps/media-viewer/src/Mediaviewer.vue
@@ -31,7 +31,7 @@
       v-if="loading"
       :aria-label="this.$gettext('Loading media')"
       class="uk-position-center"
-      size="large"
+      size="xlarge"
     />
     <oc-icon
       v-if="failed"
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index 9a7c561fad5..4346995f6c6 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -3,7 +3,6 @@
     <oc-spinner
       v-if="loading"
       key="avatar-loading"
-      size="small"
       :aria-label="$gettext('Loading')"
       :style="`width: ${width}px; height: ${width}px;`"
     />

From fd02573db6111aa350373cb630740c3a77827764 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Oct 2020 12:49:59 +0200
Subject: [PATCH 07/28] Fix margin for public links form

---
 .../components/PublicLinksSidebar/EditPublicLink.vue   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue b/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
index da1b05a8d56..705e42806dc 100644
--- a/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
+++ b/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
@@ -10,7 +10,7 @@
           {{ errors }}
         </oc-alert>
       </transition>
-      <div class="oc-m">
+      <div class="oc-mb">
         <label class="oc-label"><span v-translate>Name:</span></label>
         <input id="oc-files-file-link-name" v-model="name" class="uk-input" />
       </div>
@@ -22,7 +22,7 @@
           @roleSelected="$_selectRole"
         />
       </oc-grid>
-      <div class="oc-m uk-grid-small uk-flex uk-flex-middle" uk-grid>
+      <div class="oc-mb uk-grid-small uk-flex uk-flex-middle" uk-grid>
         <div v-if="$_expirationDate" class="uk-width-1-1 uk-width-2-5@m">
           <label class="oc-label" for="oc-files-file-link-expire-date">
             <span v-translate>Expiration date:</span>
@@ -81,13 +81,13 @@
             <h4 class="oc-mt-top uk-heading-divider">
                 Send mail notification
             </h4>
-            <div class="oc-m">
+            <div class="oc-mb">
                 <input type="text" class="uk-input" :placeholder="placeholder.mailTo" />
             </div>
-            <div class="oc-m">
+            <div class="oc-mb">
                 <textarea class="uk-textarea" :placeholder="placeholder.mailBody rows="4"></textarea>
             </div>
-            <div class="oc-m">
+            <div class="oc-mb">
                 <label><input type="checkbox" class="uk-checkbox oc-mr-s" v-translate>Send a copy to myself</label>
             </div>
         </template>

From 723fb2956cb9e2ba80a72d6fa160a2403e2b7d84 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Oct 2020 15:15:12 +0200
Subject: [PATCH 08/28] Remove unused class

---
 apps/files/src/components/FileList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index e89e77d59dd..b3fa4fad964 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -72,7 +72,7 @@
                 class="uk-flex uk-flex-center"
               >
                 <oc-checkbox
-                  class="oc-ml-s files-list-checkbox"
+                  class="oc-ml-s"
                   :value="selectedFiles.indexOf(rowItem) >= 0"
                   :label="labelSelectSingleItem(rowItem)"
                   :hide-label="true"

From 5aaa365defd7e7e4727d967e2a598f78ce8b3f9e Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Oct 2020 15:49:40 +0200
Subject: [PATCH 09/28] Fix header resizing

---
 apps/files/src/components/FileList.vue                    | 8 +++++---
 .../components/PublicLinksSidebar/PublicLinkListItem.vue  | 4 +---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index b3fa4fad964..41378c5205a 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -10,7 +10,7 @@
         key="files-list-results-existence"
         gutter="small"
         flex
-        class="oc-p-s oc-pt-rm oc-pb-xs oc-border-b"
+        class="oc-px-s oc-pt-rm oc-pb-xs oc-border-b"
       >
         <div v-if="checkboxEnabled" id="files-list-header-checkbox" class="uk-flex uk-flex-center">
           <oc-checkbox
@@ -344,8 +344,6 @@ export default {
         const headerCheckbox = document.querySelector('#files-list-header-checkbox')
         const firstRowCheckbox = document.querySelector('#files-list-row-checkbox')
 
-        console.log(headerCheckbox)
-
         if (headerRow && firstRow) {
           headerRow.$el.style.width = getComputedStyle(firstRow.$el).width
         }
@@ -360,6 +358,10 @@ export default {
 </script>
 
 <style>
+#files-table-header {
+  box-sizing: border-box;
+}
+
 .files-list-row-disabled {
   opacity: 0.3;
   pointer-events: none;
diff --git a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
index d57792c2188..1fbda3f85a7 100644
--- a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
+++ b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
@@ -95,9 +95,7 @@
             class="oc-files-file-link-via"
           >
             <oc-icon name="exit_to_app" size="small" />
-            <span
-              class="oc-file-name oc-p-rm uk-text-truncate files-file-links-link-via-label"
-            >
+            <span class="oc-file-name oc-p-rm uk-text-truncate files-file-links-link-via-label">
               {{ $_viaLabel }}
             </span>
           </oc-button>

From c993d730a06a6ffe7122b6f9ec99cb2df9020550 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Oct 2020 16:21:55 +0200
Subject: [PATCH 10/28] Fix icon sizes

---
 .../src/components/Collaborators/AutocompleteItem.vue  |  4 ++--
 .../src/components/Collaborators/Collaborator.vue      |  9 ++++-----
 .../src/components/Collaborators/EditCollaborator.vue  |  2 +-
 .../src/components/Collaborators/SharedFilesList.vue   |  1 -
 apps/files/src/components/FileDetails.vue              |  2 +-
 apps/files/src/components/FileLinkSidebar.vue          |  2 --
 apps/files/src/components/FileList.vue                 |  2 +-
 apps/files/src/components/FilesLists/Indicators.vue    |  3 +--
 apps/files/src/components/FilesLists/QuickActions.vue  |  2 +-
 .../src/components/FilesLists/RowActionsDropdown.vue   |  2 +-
 apps/files/src/components/NoContentMessage.vue         |  2 +-
 apps/files/src/components/PublicLinks/FilesDrop.vue    |  4 ++--
 .../PublicLinksSidebar/PublicLinkListItem.vue          | 10 ++++------
 apps/files/src/components/Roles/RolesSelect.vue        |  2 +-
 apps/files/src/components/UploadProgress.vue           |  6 +-----
 apps/media-viewer/src/Mediaviewer.vue                  |  6 +++---
 src/components/ApplicationsMenu.vue                    |  8 ++++----
 17 files changed, 28 insertions(+), 39 deletions(-)

diff --git a/apps/files/src/components/Collaborators/AutocompleteItem.vue b/apps/files/src/components/Collaborators/AutocompleteItem.vue
index 33ecb421ec3..338d5d30171 100644
--- a/apps/files/src/components/Collaborators/AutocompleteItem.vue
+++ b/apps/files/src/components/Collaborators/AutocompleteItem.vue
@@ -13,9 +13,9 @@
         key="avatar-group"
         class="oc-mr-s"
         name="group"
-        size="large"
+        size="xlarge"
       />
-      <oc-icon v-else key="avatar-generic-person" class="oc-mr-s" name="person" size="large" />
+      <oc-icon v-else key="avatar-generic-person" class="oc-mr-s" name="person" size="xlarge" />
     </template>
     <div class="files-collaborators-autocomplete-user-text">
       <div class="oc-text-bold files-collaborators-autocomplete-username" v-text="item.label" />
diff --git a/apps/files/src/components/Collaborators/Collaborator.vue b/apps/files/src/components/Collaborators/Collaborator.vue
index d3c28883526..6f820f3e1eb 100644
--- a/apps/files/src/components/Collaborators/Collaborator.vue
+++ b/apps/files/src/components/Collaborators/Collaborator.vue
@@ -15,7 +15,7 @@
             :aria-label="$gettext('Show resharer details')"
             :uk-tooltip="$gettext('Show resharer details')"
           >
-            <oc-icon name="repeat" size="xsmall" class="uk-preserve-width" />
+            <oc-icon name="repeat" size="small" class="uk-preserve-width" />
             <span
               class="oc-p-rm uk-text-truncate files-collaborators-collaborator-reshare-information"
               >{{ $_reshareInformation }}</span
@@ -70,7 +70,7 @@
           <oc-icon name="close" />
         </oc-button>
         <oc-spinner v-else-if="$_loadingSpinnerVisible" :aria-label="$gettext('Removing person')" />
-        <oc-icon v-else name="lock" class="uk-invisible"></oc-icon>
+        <oc-icon v-else name="lock" class="uk-invisible" />
       </oc-table-cell>
       <oc-table-cell shrink>
         <div key="collaborator-avatar-loaded">
@@ -88,7 +88,7 @@
               key="avatar-group"
               class="oc-mr-s files-collaborators-collaborator-indicator"
               name="group"
-              size="large"
+              size="xlarge"
               :aria-label="$gettext('Group')"
             />
             <oc-icon
@@ -96,7 +96,7 @@
               key="avatar-generic-person"
               class="oc-mr-s files-collaborators-collaborator-indicator"
               name="person"
-              size="large"
+              size="xlarge"
               :aria-label="$gettext('Remote user')"
             />
           </div>
@@ -164,7 +164,6 @@
           >
             <oc-icon
               name="exit_to_app"
-              size="small"
               class="uk-preserve-width"
               :uk-tooltip="$gettext('Navigate to parent')"
             />
diff --git a/apps/files/src/components/Collaborators/EditCollaborator.vue b/apps/files/src/components/Collaborators/EditCollaborator.vue
index 73b04aeea80..348033f7f19 100644
--- a/apps/files/src/components/Collaborators/EditCollaborator.vue
+++ b/apps/files/src/components/Collaborators/EditCollaborator.vue
@@ -54,7 +54,7 @@
           variation="primary"
           @click="$_ocCollaborators_saveChanges"
         >
-          <translate>Save Share</translate>
+          <translate>Save</translate>
         </oc-button>
       </div>
     </oc-grid>
diff --git a/apps/files/src/components/Collaborators/SharedFilesList.vue b/apps/files/src/components/Collaborators/SharedFilesList.vue
index 9d0351248a6..8c3a764c357 100644
--- a/apps/files/src/components/Collaborators/SharedFilesList.vue
+++ b/apps/files/src/components/Collaborators/SharedFilesList.vue
@@ -94,7 +94,6 @@
             :key="'icon-' + share.id"
             :name="$_shareTypeIcon(share.shareType)"
             class="oc-mr-xs"
-            size="small"
             variation="active"
             aria-hidden="true"
           />
diff --git a/apps/files/src/components/FileDetails.vue b/apps/files/src/components/FileDetails.vue
index 6f024988026..01b183aa56f 100644
--- a/apps/files/src/components/FileDetails.vue
+++ b/apps/files/src/components/FileDetails.vue
@@ -8,7 +8,7 @@
   >
     <template v-if="highlightedFile" slot="title">
       <div class="uk-inline">
-        <oc-icon :name="fileTypeIcon(highlightedFile)" size="large" />
+        <oc-icon :name="fileTypeIcon(highlightedFile)" size="xlarge" />
       </div>
       <div class="uk-inline">
         <div class="uk-flex uk-flex-middle">
diff --git a/apps/files/src/components/FileLinkSidebar.vue b/apps/files/src/components/FileLinkSidebar.vue
index bfed69c172f..6d53993b84a 100644
--- a/apps/files/src/components/FileLinkSidebar.vue
+++ b/apps/files/src/components/FileLinkSidebar.vue
@@ -22,13 +22,11 @@
                 v-clipboard:copy="$_privateLinkOfHighlightedFile"
                 v-clipboard:success="$_clipboardSuccessHandler"
                 name="copy_to_clipboard"
-                size="small"
               />
               <oc-icon
                 v-else
                 id="files-sidebar-private-link-icon-copied"
                 name="ready"
-                size="small"
                 class="_clipboard-success-animation"
               />
             </oc-button>
diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index 41378c5205a..b5d6409ffb5 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -96,7 +96,7 @@
                   variation="raw"
                   @click.stop="toggleRowActionsDropdown(rowItem)"
                 >
-                  <oc-icon name="more_vert" class="uk-text-middle" size="small" />
+                  <oc-icon name="more_vert" class="uk-text-middle" />
                 </oc-button>
               </div>
             </oc-grid>
diff --git a/apps/files/src/components/FilesLists/Indicators.vue b/apps/files/src/components/FilesLists/Indicators.vue
index c614cf9062d..37df5a19a4a 100644
--- a/apps/files/src/components/FilesLists/Indicators.vue
+++ b/apps/files/src/components/FilesLists/Indicators.vue
@@ -12,7 +12,7 @@
           variation="raw"
           @click.stop="indicator.handler(item, indicator.id)"
         >
-          <oc-icon :name="indicator.icon" class="uk-text-middle" size="small" variation="passive" />
+          <oc-icon :name="indicator.icon" class="uk-text-middle" variation="passive" />
         </oc-button>
       </template>
       <template v-else>
@@ -23,7 +23,6 @@
           :aria-label="indicator.label"
           :uk-tooltip="indicator.label"
           class="uk-text-middle"
-          size="small"
           variation="system"
         />
       </template>
diff --git a/apps/files/src/components/FilesLists/QuickActions.vue b/apps/files/src/components/FilesLists/QuickActions.vue
index 40bd77396cc..5b32ba2d321 100644
--- a/apps/files/src/components/FilesLists/QuickActions.vue
+++ b/apps/files/src/components/FilesLists/QuickActions.vue
@@ -10,7 +10,7 @@
       class="oc-mr-xs"
       @click.stop="action.handler({ item, client: $client, store: $store })"
     >
-      <oc-icon :name="action.icon" aria-hidden="true" size="small" class="uk-flex" />
+      <oc-icon :name="action.icon" aria-hidden="true" class="uk-flex" />
     </oc-button>
   </div>
 </template>
diff --git a/apps/files/src/components/FilesLists/RowActionsDropdown.vue b/apps/files/src/components/FilesLists/RowActionsDropdown.vue
index 818c49a5e77..7c01f9a9040 100644
--- a/apps/files/src/components/FilesLists/RowActionsDropdown.vue
+++ b/apps/files/src/components/FilesLists/RowActionsDropdown.vue
@@ -18,7 +18,7 @@
             actionClicked()
           "
         >
-          <oc-icon :name="action.icon" aria-hidden="true" size="large" />
+          <oc-icon :name="action.icon" aria-hidden="true" size="medium" />
           {{ action.ariaLabel(item) }}
         </oc-button>
       </li>
diff --git a/apps/files/src/components/NoContentMessage.vue b/apps/files/src/components/NoContentMessage.vue
index bb4ce573daf..10d1f80f5c7 100644
--- a/apps/files/src/components/NoContentMessage.vue
+++ b/apps/files/src/components/NoContentMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="uk-text-center">
-    <oc-icon :name="icon" type="div" size="xlarge" variation="system" />
+    <oc-icon :name="icon" type="div" size="xxlarge" variation="system" />
     <div class="uk-text-muted uk-text-large">
       <slot name="message" />
     </div>
diff --git a/apps/files/src/components/PublicLinks/FilesDrop.vue b/apps/files/src/components/PublicLinks/FilesDrop.vue
index 40a424ac4a2..320d8c526ee 100644
--- a/apps/files/src/components/PublicLinks/FilesDrop.vue
+++ b/apps/files/src/components/PublicLinks/FilesDrop.vue
@@ -34,13 +34,13 @@
                   <oc-icon
                     v-if="file.status === 'done'"
                     name="ready"
-                    size="xsmall"
+                    size="small"
                     variation="success"
                   />
                   <oc-icon
                     v-if="file.status === 'error'"
                     name="info"
-                    size="xsmall"
+                    size="small"
                     variation="danger"
                   />
                   <oc-spinner
diff --git a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
index 1fbda3f85a7..d0b88080610 100644
--- a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
+++ b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
@@ -32,7 +32,7 @@
           <template v-if="link.expiration">
             |
             <oc-icon
-              size="xsmall"
+              size="small"
               name="text-calendar"
               class="fix-icon-baseline"
               :aria-hidden="true"
@@ -41,7 +41,7 @@
           </template>
           <template v-if="link.password">
             |
-            <oc-icon size="xsmall" name="lock" class="fix-icon-baseline" :aria-hidden="true" />
+            <oc-icon size="small" name="lock" class="fix-icon-baseline" :aria-hidden="true" />
             <span v-translate>Password protected</span>
           </template>
         </span>
@@ -56,7 +56,7 @@
             class="oc-files-file-link-edit"
             @click="$emit('onEdit', link)"
           >
-            <oc-icon name="edit" size="small" />
+            <oc-icon name="edit" />
           </oc-button>
           <oc-button
             :aria-label="$_publicLinkCopyLabel"
@@ -69,12 +69,10 @@
               v-clipboard:copy="link.url"
               v-clipboard:success="$_clipboardSuccessHandler"
               name="copy_to_clipboard"
-              size="small"
             />
             <oc-icon
               v-else
               name="ready"
-              size="small"
               class="oc-files-file-link-copied-url _clipboard-success-animation"
             />
           </oc-button>
@@ -94,7 +92,7 @@
             :aria-label="$gettext('Navigate to parent')"
             class="oc-files-file-link-via"
           >
-            <oc-icon name="exit_to_app" size="small" />
+            <oc-icon name="exit_to_app" />
             <span class="oc-file-name oc-p-rm uk-text-truncate files-file-links-link-via-label">
               {{ $_viaLabel }}
             </span>
diff --git a/apps/files/src/components/Roles/RolesSelect.vue b/apps/files/src/components/Roles/RolesSelect.vue
index 6c094be6e09..cffcb980252 100644
--- a/apps/files/src/components/Roles/RolesSelect.vue
+++ b/apps/files/src/components/Roles/RolesSelect.vue
@@ -9,7 +9,7 @@
       :class="`uk-width-1-1 files-${mode}-role-button`"
     >
       <role-item :show-description="false" :role="selectedRole" />
-      <oc-icon name="expand_more" size="small" />
+      <oc-icon name="expand_more" />
     </oc-button>
     <oc-drop
       close-on-click
diff --git a/apps/files/src/components/UploadProgress.vue b/apps/files/src/components/UploadProgress.vue
index 786615810b7..efd3ba7a69b 100644
--- a/apps/files/src/components/UploadProgress.vue
+++ b/apps/files/src/components/UploadProgress.vue
@@ -19,11 +19,7 @@
       :aria-label="$gettext('Click row to toggle upload progress details')"
       @click.native="$_toggleExpanded"
     >
-      <oc-icon
-        class="uk-width-auto"
-        :name="expanded ? 'expand_less' : 'expand_more'"
-        size="small"
-      />
+      <oc-icon class="uk-width-auto" :name="expanded ? 'expand_less' : 'expand_more'" />
       <div class="uk-width-expand uk-text-truncate">
         <translate
           v-if="count === 1"
diff --git a/apps/media-viewer/src/Mediaviewer.vue b/apps/media-viewer/src/Mediaviewer.vue
index 7720a798d22..5167932ec4d 100644
--- a/apps/media-viewer/src/Mediaviewer.vue
+++ b/apps/media-viewer/src/Mediaviewer.vue
@@ -37,7 +37,7 @@
       v-if="failed"
       name="review"
       variation="danger"
-      size="large"
+      size="xlarge"
       class="uk-position-center uk-z-index"
     />
 
@@ -55,7 +55,7 @@
           <oc-icon
             role="button"
             class="oc-cursor-pointer"
-            size="medium"
+            size="large"
             name="chevron_left"
             :aria-label="$gettext('Previous')"
             @click="prev"
@@ -67,7 +67,7 @@
           <oc-icon
             role="button"
             class="oc-cursor-pointer"
-            size="medium"
+            size="large"
             name="chevron_right"
             :aria-label="$gettext('Next')"
             @click="next"
diff --git a/src/components/ApplicationsMenu.vue b/src/components/ApplicationsMenu.vue
index f08d86da48a..9815aed6442 100644
--- a/src/components/ApplicationsMenu.vue
+++ b/src/components/ApplicationsMenu.vue
@@ -22,13 +22,13 @@
       <div class="uk-grid-small uk-text-center" uk-grid>
         <div v-for="(n, nid) in $_applicationsList" :key="nid" class="uk-width-1-3">
           <a v-if="n.url" key="external-link" :target="n.target" :href="n.url">
-            <oc-icon v-if="n.iconMaterial" :name="n.iconMaterial" size="large" />
-            <oc-icon v-if="n.iconUrl" :url="n.iconUrl" size="large" />
+            <oc-icon v-if="n.iconMaterial" :name="n.iconMaterial" size="xlarge" />
+            <oc-icon v-if="n.iconUrl" :url="n.iconUrl" size="xlarge" />
             <div>{{ n.title }}</div>
           </a>
           <router-link v-else key="internal-link" :to="n.path">
-            <oc-icon v-if="n.iconMaterial" :name="n.iconMaterial" size="large" />
-            <oc-icon v-if="n.iconUrl" :url="n.iconUrl" size="large" />
+            <oc-icon v-if="n.iconMaterial" :name="n.iconMaterial" size="xlarge" />
+            <oc-icon v-if="n.iconUrl" :url="n.iconUrl" size="xlarge" />
             <div v-text="n.title" />
           </router-link>
         </div>

From c15edf9d5eea1ffc990eecfc954ddbdc4439ad01 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Fri, 2 Oct 2020 16:09:10 +0200
Subject: [PATCH 11/28] Fix table scroll

---
 apps/files/src/components/FileList.vue | 14 +++---
 apps/files/src/components/FilesApp.vue | 62 ++++++++++++++------------
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index b5d6409ffb5..6573704114b 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- TODO: Take care of outside click overall and not just in files list -->
-  <div :id="id" class="uk-height-1-1 uk-position-relative" @click="hideRowActionsDropdown">
+  <div :id="id" class="uk-position-relative" @click="hideRowActionsDropdown">
     <div class="uk-flex uk-flex-column uk-height-1-1">
       <resize-observer @notify="$_resizeHeader" />
       <oc-grid
@@ -12,7 +12,7 @@
         flex
         class="oc-px-s oc-pt-rm oc-pb-xs oc-border-b"
       >
-        <div v-if="checkboxEnabled" id="files-list-header-checkbox" class="uk-flex uk-flex-center">
+        <div v-if="checkboxEnabled" id="files-list-header-checkbox" class="uk-text-center">
           <oc-checkbox
             id="filelist-check-all"
             class="oc-ml-s"
@@ -41,7 +41,7 @@
           </div>
         </div>
       </div>
-      <div v-else id="files-list-container" class="uk-overflow-auto">
+      <div v-else id="files-list-container" class="uk-overflow-auto uk-flex-1">
         <RecycleScroller
           v-if="fileData.length"
           v-slot="{ item: rowItem, index, active }"
@@ -110,9 +110,9 @@
           <slot name="noContentMessage" />
         </div>
       </div>
-      <oc-grid v-if="!loading" gutter="large" class="uk-width-1-1 oc-p-s uk-flex-1">
+      <div v-if="!loading" class="uk-width-1-1 uk-text-center oc-p-s">
         <slot name="footer" />
-      </oc-grid>
+      </div>
     </div>
     <row-actions-dropdown
       :displayed="rowActionsDisplayed"
@@ -375,4 +375,8 @@ export default {
   box-sizing: border-box;
   max-height: 77px;
 }
+
+* {
+  box-sizing: border-box;
+}
 </style>
diff --git a/apps/files/src/components/FilesApp.vue b/apps/files/src/components/FilesApp.vue
index 29b1c3e68d3..c68252f3807 100644
--- a/apps/files/src/components/FilesApp.vue
+++ b/apps/files/src/components/FilesApp.vue
@@ -1,34 +1,38 @@
 <template>
-  <div id="files" class="uk-flex uk-flex-column">
-    <oc-grid class="uk-height-1-1 uk-flex-1">
-      <div
-        ref="filesListWrapper"
-        tabindex="-1"
-        class="uk-width-expand uk-height-1-1 files-list-wrapper"
-        :class="{ 'uk-visible@m': _sidebarOpen }"
-        @dragover="$_ocApp_dragOver"
-      >
-        <files-app-bar />
-        <upload-progress v-show="$_uploadProgressVisible" class="oc-p-s uk-background-muted" />
-        <trash-bin v-if="$route.name === 'files-trashbin'" :file-data="activeFiles" />
-        <shared-files-list
-          v-else-if="sharedList"
-          :file-data="activeFiles"
-          @sideBarOpen="openSideBar"
-        />
-        <all-files-list
-          v-else
-          :file-data="activeFiles"
-          :parent-folder="currentFolder"
-          @sideBarOpen="openSideBar"
-        />
-      </div>
-      <file-details
-        v-if="_sidebarOpen && $route.name !== 'files-trashbin'"
-        class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@xl uk-height-1-1"
-        @reset="setHighlightedFile(null)"
+  <div id="files" class="uk-flex">
+    <div
+      ref="filesListWrapper"
+      tabindex="-1"
+      class="uk-width-expand uk-height-1-1 uk-flex uk-flex-column files-list-wrapper uk-overflow-hidden"
+      :class="{ 'uk-visible@m': _sidebarOpen }"
+      @dragover="$_ocApp_dragOver"
+    >
+      <files-app-bar />
+      <upload-progress v-show="$_uploadProgressVisible" class="oc-p-s uk-background-muted" />
+      <trash-bin
+        v-if="$route.name === 'files-trashbin'"
+        class="uk-flex-1 uk-overflow-hidden"
+        :file-data="activeFiles"
       />
-    </oc-grid>
+      <shared-files-list
+        v-else-if="sharedList"
+        class="uk-flex-1 uk-overflow-hidden"
+        :file-data="activeFiles"
+        @sideBarOpen="openSideBar"
+      />
+      <all-files-list
+        v-else
+        class="uk-flex-1 uk-overflow-hidden"
+        :file-data="activeFiles"
+        :parent-folder="currentFolder"
+        @sideBarOpen="openSideBar"
+      />
+    </div>
+    <file-details
+      v-if="_sidebarOpen && $route.name !== 'files-trashbin'"
+      class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@xl uk-height-1-1"
+      @reset="setHighlightedFile(null)"
+    />
   </div>
 </template>
 <script>

From 0cfd1ea5051239978eb364e3fd8839aae01d8893 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Oct 2020 16:37:06 +0200
Subject: [PATCH 12/28] Fix vertical alignment of star icon

---
 apps/files/src/components/FileDetails.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/files/src/components/FileDetails.vue b/apps/files/src/components/FileDetails.vue
index 01b183aa56f..2a7963d6018 100644
--- a/apps/files/src/components/FileDetails.vue
+++ b/apps/files/src/components/FileDetails.vue
@@ -18,11 +18,11 @@
             v-text="highlightedFile.name"
           />
         </div>
-        <div v-if="$route.name !== 'files-shared-with-others'">
+        <div v-if="$route.name !== 'files-shared-with-others'" class="uk-flex uk-flex-middle">
           <oc-star
             v-if="!publicPage() && isFavoritesEnabled"
             id="files-sidebar-star-icon"
-            class="uk-inline"
+            class="uk-inline oc-mr-xs"
             :shining="highlightedFile.starred"
             @click.native.stop="toggleFileFavorite(highlightedFile)"
           />

From 1791488e512d8bcc8c25ddee08ac6d51c0be5d83 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Fri, 2 Oct 2020 16:21:58 +0200
Subject: [PATCH 13/28] Adjusted checkboxes

---
 .../src/components/Collaborators/AdditionalPermissions.vue | 2 +-
 apps/files/src/components/FileList.vue                     | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/files/src/components/Collaborators/AdditionalPermissions.vue b/apps/files/src/components/Collaborators/AdditionalPermissions.vue
index c9bdf7440f1..38907813054 100644
--- a/apps/files/src/components/Collaborators/AdditionalPermissions.vue
+++ b/apps/files/src/components/Collaborators/AdditionalPermissions.vue
@@ -7,7 +7,7 @@
       v-model="permission.value"
       :label="permission.description"
       class="oc-mr-xs files-collaborators-permission-checkbox"
-      @change="permissionChecked"
+      @input="permissionChecked"
     />
   </oc-grid>
 </template>
diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index 6573704114b..e71e0636a31 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -19,8 +19,7 @@
             :hide-label="true"
             :label="labelSelectAllItems"
             :value="selectedAll"
-            @click.stop
-            @change.native="toggleAll"
+            @input="toggleAll"
           />
         </div>
         <slot name="headerColumns" />
@@ -77,8 +76,8 @@
                   :label="labelSelectSingleItem(rowItem)"
                   :hide-label="true"
                   size="large"
-                  @click.stop
-                  @change.native="toggleFileSelect(rowItem)"
+                  @click.native.stop
+                  @input="toggleFileSelect(rowItem)"
                 />
               </div>
               <slot name="rowColumns" :item="rowItem" :index="index" />

From b619f33e54c7c0bddd8e5131ede94e9aaaa01482 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Fri, 2 Oct 2020 16:22:47 +0200
Subject: [PATCH 14/28] Remove global test box sizing

---
 apps/files/src/components/FileList.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index e71e0636a31..1359c7b9bf8 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -374,8 +374,4 @@ export default {
   box-sizing: border-box;
   max-height: 77px;
 }
-
-* {
-  box-sizing: border-box;
-}
 </style>

From e55d9ff48600a3dc74cad3f3953618e2a71269a3 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Fri, 2 Oct 2020 16:34:29 +0200
Subject: [PATCH 15/28] Turn notifications bell into a button

---
 src/components/Notifications.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Notifications.vue b/src/components/Notifications.vue
index 5dfbc7cdd05..3792d27163f 100644
--- a/src/components/Notifications.vue
+++ b/src/components/Notifications.vue
@@ -1,12 +1,13 @@
 <template>
   <div id="oc-notification">
-    <oc-icon
+    <oc-button
       id="oc-notification-bell"
-      class="oc-cursor-pointer uk-flex uk-flex-middle"
-      name="bell"
+      variation="raw"
       :aria-label="notificationsLabel"
       :uk-tooltip="notificationsLabel"
-    />
+    >
+      <oc-icon class="oc-cursor-pointer uk-flex uk-flex-middle" name="bell" aria-hidden="true" />
+    </oc-button>
     <oc-drop
       id="oc-notification-drop"
       toggle="#oc-notification-bell"

From af76820ec7a6c3b1fbb072240035c917bd108fc1 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Fri, 2 Oct 2020 16:37:29 +0200
Subject: [PATCH 16/28] Push info about current folder back under files list

---
 apps/files/src/components/FileList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index 1359c7b9bf8..538120252ae 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -40,7 +40,7 @@
           </div>
         </div>
       </div>
-      <div v-else id="files-list-container" class="uk-overflow-auto uk-flex-1">
+      <div v-else id="files-list-container" class="uk-overflow-auto">
         <RecycleScroller
           v-if="fileData.length"
           v-slot="{ item: rowItem, index, active }"

From a0d4cd3553a1446933331f38c546d6dfda9c2483 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Oct 2020 17:25:02 +0200
Subject: [PATCH 17/28] Fix row heights

---
 apps/files/src/components/FileList.vue | 28 +++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index 538120252ae..d6e2277861f 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -47,7 +47,7 @@
           :key="fileData.length"
           class="uk-height-1-1"
           :items="fileData"
-          :item-size="hasTwoRows ? 77 : 55"
+          :item-size="_rowHeight"
         >
           <div
             :data-is-visible="active"
@@ -62,7 +62,7 @@
               :ref="index === 0 ? 'firstRow' : null"
               gutter="small"
               flex
-              class="file-row oc-px-s oc-py oc-border-b"
+              class="file-row oc-p-s oc-border-b"
               :class="_rowClasses(rowItem)"
             >
               <div
@@ -210,6 +210,10 @@ export default {
 
     item() {
       return this.$route.params.item
+    },
+
+    _rowHeight() {
+      return this.hasTwoRows ? 67 : 55
     }
   },
   watch: {
@@ -255,10 +259,7 @@ export default {
     },
 
     $_isActionEnabled(item, action) {
-      if (this.isActionEnabled && this.isActionEnabled(item, action)) {
-        return true
-      }
-      return false
+      return this.isActionEnabled && this.isActionEnabled(item, action)
     },
 
     $_actionInProgress(item) {
@@ -277,10 +278,14 @@ export default {
       return null
     },
     _rowClasses(item) {
+      const classes = []
+      if (!this.hasTwoRows) {
+        classes.push('file-row-s')
+      }
       if (this.highlightedFile && item.id === this.highlightedFile.id) {
-        return 'file-row oc-background-selected'
+        classes.push('oc-background-selected')
       }
-      return 'file-row'
+      return classes
     },
     selectRow(item, event) {
       if (!this.selectableRow || this.rowDisabled(item)) {
@@ -372,6 +377,11 @@ export default {
 
 .file-row {
   box-sizing: border-box;
-  max-height: 77px;
+  min-height: 67px;
+  max-height: 67px;
+}
+.file-row-s {
+  min-height: 55px;
+  max-height: 55px;
 }
 </style>

From eb3bbeb017a6d7393858d928603e0773c9b65ebb Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Oct 2020 17:39:40 +0200
Subject: [PATCH 18/28] Fix gap between buttons

---
 .../src/components/PublicLinksSidebar/PublicLinkListItem.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
index d0b88080610..ccc324e3a22 100644
--- a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
+++ b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
@@ -53,7 +53,7 @@
             :aria-label="$_editButtonLabel"
             :uk-tooltip="$_editButtonLabel"
             variation="raw"
-            class="oc-files-file-link-edit"
+            class="oc-files-file-link-edit oc-mr-xs"
             @click="$emit('onEdit', link)"
           >
             <oc-icon name="edit" />

From e43b18549d9028f65f4c1b744ab5272ffb98c999 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Oct 2020 17:50:37 +0200
Subject: [PATCH 19/28] Fix margin and padding in user menu trigger button

---
 src/components/UserMenu.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index 2f59bbc0f4d..9552a13a799 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -3,19 +3,19 @@
     <oc-button
       id="_userMenuButton"
       ref="menuButton"
-      class="oc-topbar-personal uk-height-1-1"
+      class="oc-topbar-personal uk-height-1-1 oc-pr-xs"
       variation="raw"
       :aria-label="$gettext('User Menu')"
     >
       <oc-grid flex>
         <avatar-image
-          class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle oc-mr-xs"
+          class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle"
           :width="24"
           :userid="userId"
           :user-name="userDisplayName"
         />
         <div
-          class="oc-topbar-personal-label uk-text-primary oc-text-bold"
+          class="oc-topbar-personal-label uk-text-primary oc-text-bold oc-ml-rm"
           v-text="userDisplayName"
         />
       </oc-grid>
@@ -108,9 +108,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-/* FIXME: https://github.com/owncloud/owncloud-design-system/issues/596 */
-.oc-topbar-personal-label {
-  margin-left: 0px !important;
-}
-</style>

From e1fe2cc6db24d426bfe2b1b80db529cecc006b91 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Sat, 3 Oct 2020 05:50:05 +0200
Subject: [PATCH 20/28] Set option prop on checkbox where recommended by design

---
 apps/files/src/components/FileList.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index d6e2277861f..0a04f653d84 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -73,6 +73,7 @@
                 <oc-checkbox
                   class="oc-ml-s"
                   :value="selectedFiles.indexOf(rowItem) >= 0"
+                  :option="rowItem"
                   :label="labelSelectSingleItem(rowItem)"
                   :hide-label="true"
                   size="large"

From 63d48d5ea6d302aa3de8c43e42d41659c092be14 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Sat, 3 Oct 2020 05:55:30 +0200
Subject: [PATCH 21/28] Fix trashbin page layout

---
 apps/files/src/components/Trashbin.vue | 128 ++++++++++++-------------
 1 file changed, 62 insertions(+), 66 deletions(-)

diff --git a/apps/files/src/components/Trashbin.vue b/apps/files/src/components/Trashbin.vue
index e49f9642f47..b580f9821f2 100644
--- a/apps/files/src/components/Trashbin.vue
+++ b/apps/files/src/components/Trashbin.vue
@@ -1,72 +1,68 @@
 <template>
-  <div id="files-list-container" class="uk-height-1-1">
-    <div class="uk-overflow-auto uk-height-1-1">
-      <file-list
-        id="files-list"
-        :file-data="fileData"
-        :loading="loadingFolder"
-        :actions="actions"
-        :is-action-enabled="isActionEnabled"
-        :selectable-row="false"
+  <file-list
+    id="files-list"
+    :file-data="fileData"
+    :loading="loadingFolder"
+    :actions="actions"
+    :is-action-enabled="isActionEnabled"
+    :selectable-row="false"
+  >
+    <template #headerColumns>
+      <div class="uk-text-truncate uk-text-meta uk-width-expand">
+        <sortable-column-header
+          :aria-label="$gettext('Sort files by name')"
+          :is-active="fileSortField === 'name'"
+          :is-desc="fileSortDirectionDesc"
+          @click="toggleSort('name')"
+        >
+          <translate translate-context="Name column in files table">Name</translate>
+        </sortable-column-header>
+      </div>
+      <div
+        :class="{ 'uk-visible@s': !_sidebarOpen, 'uk-hidden': _sidebarOpen }"
+        class="uk-text-nowrap uk-text-meta uk-width-small"
       >
-        <template #headerColumns>
-          <div class="uk-text-truncate uk-text-meta uk-width-expand">
-            <sortable-column-header
-              :aria-label="$gettext('Sort files by name')"
-              :is-active="fileSortField === 'name'"
-              :is-desc="fileSortDirectionDesc"
-              @click="toggleSort('name')"
-            >
-              <translate translate-context="Name column in files table">Name</translate>
-            </sortable-column-header>
-          </div>
-          <div
-            :class="{ 'uk-visible@s': !_sidebarOpen, 'uk-hidden': _sidebarOpen }"
-            class="uk-text-nowrap uk-text-meta uk-width-small"
-          >
-            <sortable-column-header
-              class="uk-align-right"
-              :aria-label="$gettext('Sort files by deletion time')"
-              :is-active="fileSortField === 'deleteTimestampMoment'"
-              :is-desc="fileSortDirectionDesc"
-              @click="toggleSort('deleteTimestampMoment')"
-            >
-              <translate translate-context="Deletion time column in 'deleted files' table">
-                Deletion Time
-              </translate>
-            </sortable-column-header>
-          </div>
-          <div class="oc-icon" />
-        </template>
-        <template #rowColumns="{ item }">
-          <div class="uk-width-expand uk-flex uk-flex-middle">
-            <file-item
-              :key="item.viewId"
-              :item="item"
-              :name="$_ocTrashbin_fileName(item)"
-              :display-preview="false"
-            />
-          </div>
-          <div
-            class="uk-text-meta uk-text-nowrap uk-width-small uk-text-right"
-            :class="{ 'uk-visible@s': !_sidebarOpen, 'uk-hidden': _sidebarOpen }"
-          >
-            {{ formDateFromNow(item.deleteTimestamp) }}
-          </div>
-        </template>
-        <template #loadingMessage>
-          <translate>Loading deleted files</translate>
-        </template>
-        <template #noContentMessage>
-          <no-content-message icon="delete">
-            <template #message>
-              <span v-translate>You have no deleted files.</span>
-            </template>
-          </no-content-message>
+        <sortable-column-header
+          class="uk-align-right"
+          :aria-label="$gettext('Sort files by deletion time')"
+          :is-active="fileSortField === 'deleteTimestampMoment'"
+          :is-desc="fileSortDirectionDesc"
+          @click="toggleSort('deleteTimestampMoment')"
+        >
+          <translate translate-context="Deletion time column in 'deleted files' table">
+            Deletion Time
+          </translate>
+        </sortable-column-header>
+      </div>
+      <div class="oc-icon" />
+    </template>
+    <template #rowColumns="{ item }">
+      <div class="uk-width-expand uk-flex uk-flex-middle">
+        <file-item
+          :key="item.viewId"
+          :item="item"
+          :name="$_ocTrashbin_fileName(item)"
+          :display-preview="false"
+        />
+      </div>
+      <div
+        class="uk-text-meta uk-text-nowrap uk-width-small uk-text-right"
+        :class="{ 'uk-visible@s': !_sidebarOpen, 'uk-hidden': _sidebarOpen }"
+      >
+        {{ formDateFromNow(item.deleteTimestamp) }}
+      </div>
+    </template>
+    <template #loadingMessage>
+      <translate>Loading deleted files</translate>
+    </template>
+    <template #noContentMessage>
+      <no-content-message icon="delete">
+        <template #message>
+          <span v-translate>You have no deleted files.</span>
         </template>
-      </file-list>
-    </div>
-  </div>
+      </no-content-message>
+    </template>
+  </file-list>
 </template>
 <script>
 import { mapGetters, mapActions } from 'vuex'

From 94a0069085cc76b7279e80664db7751e5687699e Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Sun, 4 Oct 2020 16:12:01 +0200
Subject: [PATCH 22/28] Update ODS to 1.12.0

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 69ed4642105..f1b86962b21 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
     "node-fs-extra": "^0.8.2",
     "npm-run-all": "^4.1.5",
     "oidc-client": "^1.9.1",
-    "owncloud-design-system": "^1.9.0",
+    "owncloud-design-system": "^1.12.0",
     "owncloud-sdk": "^1.0.0-740",
     "p-limit": "^2.2.1",
     "p-queue": "^6.1.1",
diff --git a/yarn.lock b/yarn.lock
index 3d12d19a6db..1b730c72284 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6906,10 +6906,10 @@ os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-owncloud-design-system@^1.9.0:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.11.1.tgz#8afa0117d2d7d86bec6fb0e3198c17c10328fa79"
-  integrity sha512-ULrf/LOkHhRaBX3VoprHRg69n51Gu8AaOiu1jzIAJzRxE40XM+kv8sXNBvjoxeiZZBX6WHVQCmXCyysKI5Yatg==
+owncloud-design-system@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.12.0.tgz#4f48047a99b3c0bfdd740b7a251a708afb656f7c"
+  integrity sha512-s6l5v4Z+Qw7Nq6W3OTcBrctsVGIDC9Sg+HbMyWv2JI1MDf1/nvsE1plgNOJ7GzfL1geOiqBOsGbzRJDJh6ePYw==
   dependencies:
     luxon "^1.22.0"
     mini-css-extract-plugin "^0.9.0"

From 237ef172dff5ddbb9f8536eedcd6e45c43f030dd Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Sun, 4 Oct 2020 16:16:24 +0200
Subject: [PATCH 23/28] Add changelog

---
 changelog/unreleased/change-share-to-add-people | 5 +++++
 changelog/unreleased/update-ods                 | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 changelog/unreleased/change-share-to-add-people
 create mode 100644 changelog/unreleased/update-ods

diff --git a/changelog/unreleased/change-share-to-add-people b/changelog/unreleased/change-share-to-add-people
new file mode 100644
index 00000000000..9a5fee0a5ae
--- /dev/null
+++ b/changelog/unreleased/change-share-to-add-people
@@ -0,0 +1,5 @@
+Change: Change sharing wording
+
+Renamed "Share" action to "Add people" and header column in the shared with list from "People" to "Shared with".
+
+https://github.com/owncloud/phoenix/pull/4120
diff --git a/changelog/unreleased/update-ods b/changelog/unreleased/update-ods
new file mode 100644
index 00000000000..edc35c7467b
--- /dev/null
+++ b/changelog/unreleased/update-ods
@@ -0,0 +1,7 @@
+Enhancement: Update owncloud-design-system to v1.12.0
+
+We've updated our design system to version 1.12.0.
+To see all new changes which this update brings, please check the changelog below.
+
+https://github.com/owncloud/owncloud-design-system/releases/tag/v1.12.0
+https://github.com/owncloud/phoenix/pull/4120

From d12923efd3fca5b5c1bc94dbf8862b49b32693aa Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Sun, 4 Oct 2020 16:17:50 +0200
Subject: [PATCH 24/28] Bump ODS version in the changelog

---
 changelog/unreleased/update-ods | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/changelog/unreleased/update-ods b/changelog/unreleased/update-ods
index edc35c7467b..65457b57713 100644
--- a/changelog/unreleased/update-ods
+++ b/changelog/unreleased/update-ods
@@ -1,7 +1,7 @@
-Enhancement: Update owncloud-design-system to v1.12.0
+Enhancement: Update owncloud-design-system to v1.12.1
 
-We've updated our design system to version 1.12.0.
+We've updated our design system to version 1.12.1.
 To see all new changes which this update brings, please check the changelog below.
 
-https://github.com/owncloud/owncloud-design-system/releases/tag/v1.12.0
+https://github.com/owncloud/owncloud-design-system/releases/tag/v1.12.1
 https://github.com/owncloud/phoenix/pull/4120

From 6252431796289b8d5a1c368710b9fcaa0bdbacbe Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Sun, 4 Oct 2020 19:20:07 +0200
Subject: [PATCH 25/28] Fix search selector

---
 src/components/SearchBar.vue                | 1 +
 tests/acceptance/pageObjects/phoenixPage.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 55567c7dae3..4d666e48f1e 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <oc-search-bar
+      id="files-global-search-bar"
       ref="globalSearchBar"
       class="uk-width-large uk-visible@m"
       :label="searchLabel"
diff --git a/tests/acceptance/pageObjects/phoenixPage.js b/tests/acceptance/pageObjects/phoenixPage.js
index b319cf82897..fdf79c011d4 100644
--- a/tests/acceptance/pageObjects/phoenixPage.js
+++ b/tests/acceptance/pageObjects/phoenixPage.js
@@ -216,7 +216,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     searchLoadingIndicator: {
-      selector: '#oc-topbar .oc-spinner-search'
+      selector: '#files-global-search-bar .oc-spinner'
     },
     userMenuButton: {
       selector: '#_userMenuButton'

From 8dbe2e614c178575ffe16fc04124cec03249569c Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Sun, 4 Oct 2020 19:32:46 +0200
Subject: [PATCH 26/28] Fix message close button selector

---
 tests/acceptance/pageObjects/phoenixPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/acceptance/pageObjects/phoenixPage.js b/tests/acceptance/pageObjects/phoenixPage.js
index fdf79c011d4..29b4a901c4a 100644
--- a/tests/acceptance/pageObjects/phoenixPage.js
+++ b/tests/acceptance/pageObjects/phoenixPage.js
@@ -195,7 +195,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     clearErrorMessage: {
-      selector: '//*[contains(@class, "oc-alert-close-icon")]',
+      selector: '//div[contains(@class, "oc-alert")]/button[contains(@aria-label, "Close")]',
       locateStrategy: 'xpath'
     },
     notificationBell: {

From 14c2b5ab93d5c7a52cc4a0ca141eeb10e153ea9e Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Sun, 4 Oct 2020 19:39:30 +0200
Subject: [PATCH 27/28] Fix share perms selector

---
 tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js b/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
index 55e2d44c228..592ad58e80e 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
@@ -686,7 +686,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     permissionCheckbox: {
-      selector: '//label[@id="files-collaborators-permission-%s"]/input',
+      selector: '//input[@id="files-collaborators-permission-%s"]',
       locateStrategy: 'xpath'
     },
     collaboratorExpirationDateInput: {

From 48cd9cae312388e487699a80d51b0793d46ea5f2 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Mon, 5 Oct 2020 10:01:42 +0200
Subject: [PATCH 28/28] Update ODS to 1.12.1

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index f1b86962b21..194f0b2a92f 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
     "node-fs-extra": "^0.8.2",
     "npm-run-all": "^4.1.5",
     "oidc-client": "^1.9.1",
-    "owncloud-design-system": "^1.12.0",
+    "owncloud-design-system": "^1.12.1",
     "owncloud-sdk": "^1.0.0-740",
     "p-limit": "^2.2.1",
     "p-queue": "^6.1.1",
diff --git a/yarn.lock b/yarn.lock
index 1b730c72284..920b0a4b362 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6906,10 +6906,10 @@ os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-owncloud-design-system@^1.12.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.12.0.tgz#4f48047a99b3c0bfdd740b7a251a708afb656f7c"
-  integrity sha512-s6l5v4Z+Qw7Nq6W3OTcBrctsVGIDC9Sg+HbMyWv2JI1MDf1/nvsE1plgNOJ7GzfL1geOiqBOsGbzRJDJh6ePYw==
+owncloud-design-system@^1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.12.1.tgz#55534e3b1c36a4451ee81500864e0131d24a98c3"
+  integrity sha512-ivvgYStZsqueIfTIRKhUV2Je7AXBT6PvVz18fhpdlNIHwfZFgYGVAbmS+DNuG77bXqhd18fny+AeMkfWVsSZrw==
   dependencies:
     luxon "^1.22.0"
     mini-css-extract-plugin "^0.9.0"