Align drop menu styling in right sidebar

changelog/unreleased/enhancement-drop-menu-styling-right-sidebar

@@ -0,0 +1,6 @@
+Enhancement: Drop menu styling in right sidebar
+
+We've styled and aligned all the drop menus in the right sidebar to match with the other drop menus.
+
+https://github.com/owncloud/web/pull/7365
+https://github.com/owncloud/web/issues/7335

packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue

@@ -7,10 +7,10 @@
       ref="expirationDateDrop"
       :toggle="'#' + editShareBtnId"
       mode="click"
-      padding-size="remove"
+      padding-size="small"
     >
       <oc-list class="collaborator-edit-dropdown-options-list" :aria-label="shareEditOptions">
-        <li v-if="isExpirationSupported" class="oc-px-s oc-py-xs">
+        <li v-if="isExpirationSupported" class="oc-rounded oc-menu-item-hover">
           <oc-datepicker
             v-model="enteredExpirationDate"
             :min-date="minExpirationDate"
@@ -22,25 +22,28 @@
           >
             <template #default="{ togglePopover }">
               <oc-button
-                class="files-collaborators-expiration-button"
+                class="files-collaborators-expiration-button oc-p-s action-menu-item"
                 data-testid="recipient-datepicker-btn"
                 appearance="raw"
                 @click="togglePopover"
               >
+                <oc-icon name="calendar" fill-type="line" size="medium" variation="passive" />
                 <span v-if="isExpirationDateSet" v-text="$gettext('Edit expiration date')" />
                 <span v-else v-text="$gettext('Set expiration date')" />
               </oc-button>
             </template>
           </oc-datepicker>
         </li>
-        <li v-for="(option, i) in options" :key="i" class="oc-px-s oc-py-xs">
+        <li v-for="(option, i) in options" :key="i" class="oc-rounded oc-menu-item-hover">
           <oc-button
             v-if="option.enabled"
             appearance="raw"
+            class="oc-p-s action-menu-item"
             :class="option.class"
             v-bind="option.additionalAttributes || {}"
             @click="option.method()"
           >
+            <oc-icon :name="option.icon" fill-type="line" size="medium" variation="passive" />
             <span v-text="option.title" />
           </oc-button>
         </li>
@@ -92,6 +95,7 @@ export default {
           method: this.removeExpirationDate,
           class: 'remove-expiration-date',
           enabled: this.canEditOrDelete,
+          icon: 'calendar',
           additionalAttributes: {
             'data-testid': 'collaborator-remove-expiration-btn'
           }
@@ -104,15 +108,16 @@ export default {
           method: this.removeShare,
           class: 'remove-share',
           enabled: this.canEditOrDelete,
+          icon: 'delete-bin-5',
           additionalAttributes: {
-            variation: 'danger',
             'data-testid': 'collaborator-remove-share-btn'
           }
         },
         {
           title: this.$gettext('Access details'),
           method: this.showAccessDetails,
           enabled: true,
+          icon: 'information',
           class: 'show-access-details'
         }
       ]
@@ -253,3 +258,9 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+.collaborator-edit-dropdown-options-list .action-menu-item {
+  width: 100%;
+  justify-content: flex-start;
+}
+</style>

packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue

@@ -20,7 +20,7 @@
       ref="rolesDrop"
       :toggle="'#' + roleButtonId"
       mode="click"
-      padding-size="remove"
+      padding-size="small"
       close-on-click
     >
       <oc-list class="files-recipient-role-drop-list" :aria-label="rolesListAriaLabel">
@@ -30,10 +30,17 @@
             ref="roleSelect"
             appearance="raw"
             justify-content="space-between"
-            class="files-recipient-role-drop-btn oc-py-xs oc-px-s"
-            :class="{ selected: isSelectedRole(role) }"
+            class="files-recipient-role-drop-btn oc-p-s"
+            :class="{
+              'oc-background-primary-gradient': isSelectedRole(role),
+              selected: isSelectedRole(role)
+            }"
+            :variation="isSelectedRole(role) ? 'inverse' : 'passive'"
             @click="selectRole(role)"
           >
+            <span>
+              <oc-icon :name="role.icon" />
+            </span>
             <role-item :role="role" :allow-share-permission="allowSharePermission" />
             <oc-icon v-if="isSelectedRole(role)" name="check" />
           </oc-button>
@@ -46,14 +53,17 @@
       class="files-recipient-custom-permissions-drop"
       mode="manual"
       :target="'#' + roleButtonId"
-      padding-size="small"
+      padding-size="remove"
     >
-      <h4 class="oc-text-bold oc-text-initial" v-text="$gettext(customPermissionsRole.label)" />
-      <oc-list class="oc-mb">
+      <h4
+        class="oc-text-bold oc-text-initial oc-m-rm oc-px-m oc-pt-m oc-pb-s"
+        v-text="$gettext(customPermissionsRole.label)"
+      />
+      <oc-list>
         <li
           v-for="permission in availablePermissions"
           :key="`files-collaborators-permission-${permission.key}`"
-          class="oc-my-xs"
+          class="oc-my-s oc-px-m"
         >
           <oc-checkbox
             :id="`files-collaborators-permission-${permission.key}`"
@@ -67,7 +77,12 @@
           />
         </li>
       </oc-list>
-      <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns">
+      <div
+        class="
+          files-recipient-custom-permissions-drop-cancel-confirm-btns
+          oc-px-m oc-py-s oc-mt-m oc-rounded-bottom
+        "
+      >
         <oc-button size="small" @click="cancelCustomPermissions" v-text="$gettext('Cancel')" />
         <oc-button
           size="small"
@@ -335,26 +350,47 @@ export default {
           fill: var(--oc-color-swatch-passive-default);
         }
       }
+
+      li {
+        margin: var(--oc-space-xsmall) 0;
+      }
     }
 
     &-btn {
-      border-radius: 0;
       width: 100%;
+      gap: var(--oc-space-medium);
+      justify-content: flex-start;
 
       &:hover,
       &:focus {
-        color: var(--oc-color-text-default) !important;
+        background-color: var(--oc-color-background-hover);
+        color: var(--oc-color-swatch-passive-default);
+        text-decoration: none;
       }
 
       &.selected {
-        background-color: var(--oc-color-swatch-primary-default) !important;
-        color: var(--oc-color-text-inverse) !important;
+        color: var(--oc-color-swatch-inverse-default) !important;
 
         ::v-deep .oc-icon > svg {
-          fill: var(--oc-color-text-inverse) !important;
+          fill: var(--oc-color-swatch-inverse-default) !important;
         }
       }
     }
   }
+
+  &-custom-permissions-drop-cancel-confirm-btns {
+    background: var(--oc-color-background-hover);
+    text-align: right;
+  }
+}
+
+.files-collaborators-permission-checkbox::v-deep {
+  .oc-checkbox {
+    border: 2px solid var(--oc-color-background-hover);
+  }
+
+  label {
+    margin-left: var(--oc-space-small);
+  }
 }
 </style>