cozy-sharing 12.0.0 → 12.1.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [12.1.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@12.0.0...cozy-sharing@12.1.0) (2024-03-22)
+
+
+### Features
+
+* Adapt modal design to allow gutters into ListItem ([39dc590](https://github.com/cozy/cozy-libs/commit/39dc5905ee19e07967227e76d376ff04c6145c1e))
+* Show detail of recipient groups ([7d731db](https://github.com/cozy/cozy-libs/commit/7d731db9d313ba763652612352ce393f475bfe5f))
+
+
+
+
+
 # [12.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@11.1.0...cozy-sharing@12.0.0) (2024-03-21)
 
 

package/dist/components/ConfirmTrustedRecipientsDialog.js

@@ -1,7 +1,10 @@
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
+import cx from 'classnames';
 import React from 'react';
+import List from 'cozy-ui/transpiled/react/List';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import MemberRecipient from './Recipient/MemberRecipient';
 import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfirmationContainer';
@@ -16,17 +19,22 @@ var SharingContent = function SharingContent(_ref) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
     variant: "body1",
-    className: "u-mb-2"
-  }, t("ConfirmRecipientModal.intruction")), recipientsToBeConfirmed.map(function (recipientConfirmationData) {
+    className: cx('u-mb-half', isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half')
+  }, t("ConfirmRecipientModal.intruction")), /*#__PURE__*/React.createElement(List, {
+    className: isMobile ? 'u-mb-half' : 'u-mb-1'
+  }, recipientsToBeConfirmed.map(function (recipientConfirmationData) {
     return /*#__PURE__*/React.createElement(MemberRecipient, _extends({}, recipientConfirmationData, {
       key: "key_r_".concat(recipientConfirmationData.id),
       isOwner: false,
       recipientConfirmationData: recipientConfirmationData,
       verifyRecipient: verifyRecipient
     }));
-  }));
+  })));
 };
 /**
  * Displays the dialog's title that can be used when ConfirmTrustedRecipientsDialog is in sharing state

package/dist/components/ConfirmTrustedRecipientsDialog.stories.js

@@ -0,0 +1,39 @@
+import ConfirmTrustedRecipientsDialog from './ConfirmTrustedRecipientsDialog';
+var meta = {
+  component: ConfirmTrustedRecipientsDialog,
+  args: {
+    recipientsToBeConfirmed: [{
+      instance: 'https://example.com',
+      isOwner: false,
+      status: 'ready',
+      recipientConfirmationData: null,
+      verifyRecipient: function verifyRecipient() {},
+      fadeIn: true,
+      type: 'two-way',
+      onRevoke: function onRevoke() {},
+      onRevokeSelf: function onRevokeSelf() {}
+    }]
+  }
+};
+export default meta;
+export var Default = {
+  name: 'Default',
+  args: {
+    twoStepsConfirmationMethods: {
+      getRecipientsToBeConfirmed: function getRecipientsToBeConfirmed() {
+        return [{
+          name: 'John Doe',
+          instance: 'https://example.com',
+          isOwner: false,
+          status: 'ready'
+        }, {
+          name: 'Alice Doe',
+          instance: 'https://example.com',
+          isOwner: false,
+          status: 'ready'
+        }];
+      }
+    },
+    verifyRecipient: function verifyRecipient() {}
+  }
+};

package/dist/components/Recipient/GroupRecipient.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
 import { useClient } from 'cozy-client';
 import Fade from 'cozy-ui/transpiled/react/Fade';
 import ListItem from 'cozy-ui/transpiled/react/ListItem';
@@ -6,7 +7,9 @@ import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import { GroupRecipientDetail } from './GroupRecipientDetail';
 import { GroupRecipientPermissions } from './GroupRecipientPermissions';
 import { FADE_IN_DURATION } from '../../helpers/recipients';
 import { GroupAvatar } from '../Avatar/GroupAvatar';
@@ -14,12 +17,22 @@ import { GroupAvatar } from '../Avatar/GroupAvatar';
 var GroupRecipient = function GroupRecipient(props) {
   var name = props.name,
       members = props.members,
-      fadeIn = props.fadeIn;
+      fadeIn = props.fadeIn,
+      owner = props.owner;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
   var client = useClient();
+
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDetailOpened = _useState2[0],
+      setDetailOpened = _useState2[1];
+
   var nbMember = members.length;
   var nbMemberReady = members.filter(function (member) {
     return !['revoked', 'mail-not-sent'].includes(member.status);
@@ -27,11 +40,22 @@ var GroupRecipient = function GroupRecipient(props) {
   var isCurrentInstanceInsideMembers = members.some(function (member) {
     return member.instance === client.options.uri;
   });
-  return /*#__PURE__*/React.createElement(Fade, {
+
+  var toogleDetailOpened = function toogleDetailOpened() {
+    setDetailOpened(!isDetailOpened);
+  };
+
+  var closeDetail = function closeDetail() {
+    setDetailOpened(false);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Fade, {
     in: true,
     timeout: fadeIn ? FADE_IN_DURATION : 0
   }, /*#__PURE__*/React.createElement(ListItem, {
-    disableGutters: true
+    button: true,
+    onClick: toogleDetailOpened,
+    gutters: isMobile ? 'default' : 'double'
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(GroupAvatar, {
     size: "small"
   })), /*#__PURE__*/React.createElement(ListItemText, {
@@ -43,7 +67,14 @@ var GroupRecipient = function GroupRecipient(props) {
       nbMember: nbMember,
       nbMemberReady: nbMemberReady
     }) + (isCurrentInstanceInsideMembers ? " (".concat(t('GroupRecipient.secondary_you'), ")") : '')
-  }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(GroupRecipientPermissions, props))));
+  }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, {
+    className: isMobile ? 'u-mr-1' : 'u-mr-2'
+  }, /*#__PURE__*/React.createElement(GroupRecipientPermissions, props)))), isDetailOpened ? /*#__PURE__*/React.createElement(GroupRecipientDetail, {
+    owner: owner,
+    name: name,
+    members: members,
+    onClose: closeDetail
+  }) : null);
 };
 
 export { GroupRecipient };

package/dist/components/Recipient/GroupRecipient.stories.js

@@ -3,8 +3,9 @@ var meta = {
   component: GroupRecipient,
   args: {
     name: 'Family',
-    isOwner: true,
-    read_only: false,
+    owner: {
+      public_name: 'Alice'
+    },
     members: [{
       status: 'ready'
     }, {

package/dist/components/Recipient/GroupRecipientDetail.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import { GroupRecipientDetailWithAccess } from './GroupRecipientDetailWithAccess';
+import { GroupRecipientDetailWithoutAccess } from './GroupRecipientDetailWithoutAccess';
+
+var GroupRecipientDetail = function GroupRecipientDetail(_ref) {
+  var name = _ref.name,
+      owner = _ref.owner,
+      members = _ref.members,
+      onClose = _ref.onClose;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var withAccess = members.filter(function (member) {
+    return !['revoked', 'mail-not-sent'].includes(member.status);
+  });
+  var withoutAccess = members.filter(function (member) {
+    return ['revoked', 'mail-not-sent'].includes(member.status);
+  });
+  var ownerName = owner.public_name;
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: true,
+    size: "small",
+    onClose: onClose,
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, name, ownerName ? /*#__PURE__*/React.createElement(Typography, {
+      variant: "caption"
+    }, t('GroupRecipientDetail.subtitle', {
+      ownerName: ownerName
+    })) : null),
+    content: /*#__PURE__*/React.createElement("div", {
+      className: "u-flex u-stack-xs u-flex-column"
+    }, withAccess.length > 0 ? /*#__PURE__*/React.createElement(GroupRecipientDetailWithAccess, {
+      withAccess: withAccess
+    }) : null, withoutAccess.length > 0 ? /*#__PURE__*/React.createElement(GroupRecipientDetailWithoutAccess, {
+      withoutAccess: withoutAccess
+    }) : null)
+  });
+};
+
+export { GroupRecipientDetail };

package/dist/components/Recipient/GroupRecipientDetail.stories.js

@@ -0,0 +1,55 @@
+import { GroupRecipientDetail } from './GroupRecipientDetail';
+var meta = {
+  component: GroupRecipientDetail,
+  args: {
+    name: 'Family',
+    owner: {
+      public_name: 'Alice'
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: 'Default',
+  args: {
+    members: [{
+      name: 'Alice',
+      instance: 'http://alice.cozy.localhost:8080',
+      status: 'ready'
+    }, {
+      name: 'marine@google.com',
+      status: 'mail-not-sent'
+    }, {
+      email: 'Martin',
+      status: 'pending'
+    }, {
+      name: 'Paul',
+      status: 'revoked'
+    }]
+  }
+};
+export var OnlyWithAccess = {
+  name: 'OnlyWithAccess',
+  args: {
+    members: [{
+      name: 'Alice',
+      instance: 'http://alice.cozy.localhost:8080',
+      status: 'ready'
+    }, {
+      name: 'Martin',
+      status: 'pending'
+    }]
+  }
+};
+export var OnlyWithoutAccess = {
+  name: 'OnlyWithoutAccess',
+  args: {
+    members: [{
+      name: 'marine@google.com',
+      status: 'mail-not-sent'
+    }, {
+      name: 'Paul',
+      status: 'revoked'
+    }]
+  }
+};

package/dist/components/Recipient/GroupRecipientDetailWithAccess.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud';
+import List from 'cozy-ui/transpiled/react/List';
+import ListItem from 'cozy-ui/transpiled/react/ListItem';
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import { getInitials, getDisplayName } from '../../models';
+
+var GroupRecipientDetailWithAccess = function GroupRecipientDetailWithAccess(_ref) {
+  var withAccess = _ref.withAccess;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle2"
+  }, t('GroupRecipientDetail.withAccess.title')), /*#__PURE__*/React.createElement(List, null, withAccess.map(function (recipient) {
+    var name = getDisplayName(recipient);
+    return /*#__PURE__*/React.createElement(ListItem, {
+      disableGutters: true,
+      key: recipient.index
+    }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Avatar, {
+      text: getInitials(recipient),
+      textId: name
+    })), /*#__PURE__*/React.createElement(ListItemText, {
+      primary: name,
+      secondary: recipient.instance ? /*#__PURE__*/React.createElement("div", {
+        className: "u-flex u-flex-items-center"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: ToTheCloudIcon,
+        size: 10,
+        style: {
+          marginRight: '0.25rem'
+        }
+      }), recipient.instance) : null
+    }));
+  })));
+};
+
+export { GroupRecipientDetailWithAccess };

package/dist/components/Recipient/GroupRecipientDetailWithoutAccess.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden';
+import List from 'cozy-ui/transpiled/react/List';
+import ListItem from 'cozy-ui/transpiled/react/ListItem';
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import { getInitials, getDisplayName } from '../../models';
+
+var GroupRecipientDetailWithoutAccess = function GroupRecipientDetailWithoutAccess(_ref) {
+  var withoutAccess = _ref.withoutAccess;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle2"
+  }, t('GroupRecipientDetail.withoutAccess.title')), /*#__PURE__*/React.createElement(List, null, withoutAccess.map(function (recipient) {
+    var icon = recipient.status === 'revoked' ? ForbiddenIcon : null;
+    var name = getDisplayName(recipient);
+    return /*#__PURE__*/React.createElement(ListItem, {
+      disableGutters: true,
+      key: recipient.index
+    }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Avatar, {
+      text: getInitials(recipient),
+      textId: name
+    })), /*#__PURE__*/React.createElement(ListItemText, {
+      primary: name,
+      secondary: /*#__PURE__*/React.createElement("div", {
+        className: "u-flex u-flex-items-center"
+      }, icon ? /*#__PURE__*/React.createElement(Icon, {
+        icon: icon,
+        size: 10,
+        style: {
+          marginRight: '0.25rem'
+        }
+      }) : null, t("GroupRecipientDetail.withoutAccess.status.".concat(recipient.status)))
+    }));
+  })));
+};
+
+export { GroupRecipientDetailWithoutAccess };

package/dist/components/Recipient/LinkRecipient.js

@@ -9,6 +9,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem';
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import LinkRecipientPermissions from './LinkRecipientPermissions';
 import RecipientConfirm from './RecipientConfirm';
@@ -35,6 +36,9 @@ var LinkRecipient = function LinkRecipient(props) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   var recipientConfirmationData = props.recipientConfirmationData,
       verifyRecipient = props.verifyRecipient,
       link = props.link,
@@ -49,7 +53,7 @@ var LinkRecipient = function LinkRecipient(props) {
     in: true,
     timeout: fadeIn ? FADE_IN_DURATION : 0
   }, /*#__PURE__*/React.createElement(ListItem, {
-    disableGutters: true
+    gutters: isMobile ? 'default' : 'double'
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Circle, {
     size: "small",
     className: styles['link-recipient-icon-circle']

package/dist/components/Recipient/MemberRecipient.js

@@ -9,6 +9,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem';
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import MemberRecipientPermissions from './MemberRecipientPermissions';
 import MemberRecipientStatus from './MemberRecipientStatus';
@@ -24,6 +25,9 @@ var MemberRecipient = function MemberRecipient(props) {
 
   var client = useClient();
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   var instance = props.instance,
       isOwner = props.isOwner,
       status = props.status,
@@ -45,7 +49,7 @@ var MemberRecipient = function MemberRecipient(props) {
     in: true,
     timeout: fadeIn ? FADE_IN_DURATION : 0
   }, /*#__PURE__*/React.createElement(ListItem, {
-    disableGutters: true
+    gutters: isMobile ? 'default' : 'double'
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberAvatar, {
     size: "small",
     recipient: props

package/dist/components/Recipient/RecipientList.stories.js

@@ -34,6 +34,9 @@ export var WithGroup = {
       addedBy: 0,
       read_only: false,
       index: 0,
+      owner: {
+        public_name: 'Alice'
+      },
       members: [{
         status: 'pending',
         email: 'ben@gmail.com',

package/dist/components/ShareDialogCozyToCozy.js

@@ -4,6 +4,7 @@ var _excluded = ["showShareByLink", "documentType", "document"];
 import cx from 'classnames';
 import React from 'react';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import { default as DumbShareByEmail } from './ShareByEmail';
 import { default as DumbShareByLink } from './ShareByLink';
@@ -64,8 +65,13 @@ var SharingContent = function SharingContent(_ref) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   return /*#__PURE__*/React.createElement("div", {
     className: cx(styles['share-modal-content'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx('u-pt-1-half', isMobile ? 'u-ph-1' : 'u-ph-2')
   }, showShareOnlyByLink && /*#__PURE__*/React.createElement("div", {
     className: styles['share-byemail-onlybylink']
   }, t("".concat(documentType, ".share.shareByEmail.onlyByLink"), {
@@ -84,8 +90,7 @@ var SharingContent = function SharingContent(_ref) {
     onShare: onShare,
     sharing: sharing,
     sharingDesc: sharingDesc
-  }), showWhoHasAccess && /*#__PURE__*/React.createElement(WhoHasAccess, {
-    className: "u-mt-half",
+  })), showWhoHasAccess && /*#__PURE__*/React.createElement(WhoHasAccess, {
     document: document,
     documentType: documentType,
     isOwner: isOwner,
@@ -139,7 +144,8 @@ var ShareDialogCozyToCozy = function ShareDialogCozyToCozy(_ref3) {
     dialogTitleOnShare: SharingTitleFunction({
       documentType: documentType,
       document: document
-    })
+    }),
+    disableGutters: true
   }));
 };
 

package/dist/components/ShareDialogOnlyByLink.js

@@ -1,6 +1,8 @@
+import cx from 'classnames';
 import React from 'react';
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import { default as DumbShareByLink } from './ShareByLink';
 import WhoHasAccess from './WhoHasAccess';
@@ -22,7 +24,11 @@ var ShareDialogOnlyByLink = function ShareDialogOnlyByLink(_ref) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   return /*#__PURE__*/React.createElement(Dialog, {
+    disableGutters: true,
     disableEnforceFocus: true,
     open: true,
     onClose: onClose,
@@ -30,9 +36,9 @@ var ShareDialogOnlyByLink = function ShareDialogOnlyByLink(_ref) {
       name: document.name || document.attributes.name
     }),
     content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
-      variant: "h6"
+      variant: "h6",
+      className: cx(isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half')
     }, t('Share.contacts.whoHasAccess')), /*#__PURE__*/React.createElement(WhoHasAccess, {
-      className: "u-mt-half",
       document: document,
       documentType: documentType,
       isOwner: isOwner,
@@ -43,12 +49,14 @@ var ShareDialogOnlyByLink = function ShareDialogOnlyByLink(_ref) {
       permissions: permissions,
       onUpdateShareLinkPermissions: onUpdateShareLinkPermissions,
       onRevokeLink: onRevokeLink
-    }), /*#__PURE__*/React.createElement(DumbShareByLink, {
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cx('u-mt-half', isMobile ? 'u-ph-1 u-mb-1' : 'u-ph-2 u-mb-1-half')
+    }, /*#__PURE__*/React.createElement(DumbShareByLink, {
       link: link,
       document: document,
       documentType: documentType,
       onEnable: onShareByLink
-    }))
+    })))
   });
 };
 

package/dist/components/ShareDialogTwoStepsConfirmationContainer.js

@@ -293,6 +293,7 @@ var ShareDialogTwoStepsConfirmationContainer = function ShareDialogTwoStepsConfi
   }
 
   return /*#__PURE__*/React.createElement(FixedDialog, {
+    disableGutters: true,
     disableEnforceFocus: true,
     open: true,
     onClose: onClose,

package/dist/components/ShareModal/SharingDetailsModal.js

@@ -1,7 +1,9 @@
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs';
 import Divider from 'cozy-ui/transpiled/react/Divider';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import { getDisplayName } from '../../models';
 var styles = {
@@ -44,7 +46,11 @@ export var SharingDetailsModal = function SharingDetailsModal(_ref) {
       t = _useI18n.t,
       f = _useI18n.f;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   return /*#__PURE__*/React.createElement(Dialog, {
+    disableGutters: true,
     open: true,
     onClose: onClose,
     className: styles['share-modal'],
@@ -52,7 +58,7 @@ export var SharingDetailsModal = function SharingDetailsModal(_ref) {
     content: /*#__PURE__*/React.createElement("div", {
       className: styles['share-modal-content']
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles['share-details']
+      className: cx(styles['share-details'], isMobile ? 'u-ph-1 u-pt-1-half' : 'u-ph-2 u-pt-1')
     }, /*#__PURE__*/React.createElement(OwnerIdentity, {
       name: t("".concat(documentType, ".share.sharedBy"), {
         name: getDisplayName(owner)

package/dist/components/WhoHasAccess.js

@@ -49,9 +49,7 @@ var WhoHasAccess = function WhoHasAccess(_ref2) {
     className: className
   }, /*#__PURE__*/React.createElement(RecipientWaitingForConfirmationAlert, {
     recipientsToBeConfirmed: recipientsToBeConfirmed
-  }), /*#__PURE__*/React.createElement(List, {
-    disablePadding: true
-  }, link && /*#__PURE__*/React.createElement(LinkRecipient, {
+  }), /*#__PURE__*/React.createElement(List, null, link && /*#__PURE__*/React.createElement(LinkRecipient, {
     document: document,
     documentType: documentType,
     onRevoke: onRevoke,

package/locales/en.json

@@ -376,5 +376,18 @@
       "title": "Remove me from sharing",
       "desc": "You keep the content but it won't be updated between your Cozy anymore."
     }
+  },
+  "GroupRecipientDetail": {
+    "subtitle": "Managed by %{ownerName}",
+    "withAccess": {
+      "title": "Access to item"
+    },
+    "withoutAccess": {
+      "title": "No access",
+      "status": {
+        "mail-not-sent": "Invitation failed",
+        "revoked": "Sharing revoked"
+      }
+    }
   }
 }

package/locales/fr.json

@@ -374,5 +374,18 @@
       "title": "Quitter le partage",
       "desc": "Vous conserverez une copie mais vos changements ne seront plus synchronisés."
     }
+  },
+  "GroupRecipientDetail": {
+    "subtitle": "Géré par %{ownerName}",
+    "withAccess": {
+      "title": "Accès à l’élément"
+    },
+    "withoutAccess": {
+      "title": "Aucun accès",
+      "status": {
+        "mail-not-sent": "Echec de l’invitation",
+        "revoked": "Partage révoqué"
+      }
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -71,5 +71,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "ebef29fe4f3f3704c967ebfd2d330d9b95d6e25b"
+  "gitHead": "5de831d050135822b1b9295ae8888d11f6372ee5"
 }