cozy-sharing 29.0.0 → 30.0.1

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [30.0.1](https://github.com/cozy/cozy-libs/compare/cozy-sharing@30.0.0...cozy-sharing@30.0.1) (2026-03-25)
+
+### Bug Fixes
+
+- Small locales adjustments ([c743965](https://github.com/cozy/cozy-libs/commit/c7439654ddc291e452168f6635e82cf28c388d7c))
+
+# [30.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@29.0.0...cozy-sharing@30.0.0) (2026-03-24)
+
+### Features
+
+- Upgrade cozy-ui and cozy-ui-plus in cozy-search and cozy-sharing ([f5fd252](https://github.com/cozy/cozy-libs/commit/f5fd2520150e276c8b55feeb1b994ba33d0a114b))
+
+### BREAKING CHANGES
+
+- You must have `cozy-ui >= 138.1.0 and cozy-ui-plus >= 6.0.0`
+
 # [29.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@28.11.3...cozy-sharing@29.0.0) (2026-03-24)
 
 ### Features

package/dist/components/ShareByEmail.spec.js

@@ -76,14 +76,14 @@ describe('ShareByEmailComponent', function () {
             sharingDesc: sharingDesc
           });
           act(function () {
-            fireEvent.change(screen.getByPlaceholderText('Add contacts or groups'), {
+            fireEvent.change(screen.getByPlaceholderText('Add contacts'), {
               target: {
                 value: 'quentin@cozycloud.cc'
               }
             });
           });
           act(function () {
-            fireEvent.keyPress(screen.getByPlaceholderText('Add contacts or groups'), {
+            fireEvent.keyPress(screen.getByPlaceholderText('Add contacts'), {
               key: 'Enter',
               code: 'Enter',
               charCode: 13
@@ -141,14 +141,14 @@ describe('ShareByEmailComponent', function () {
             }]
           });
           act(function () {
-            fireEvent.change(screen.getByPlaceholderText('Add contacts or groups'), {
+            fireEvent.change(screen.getByPlaceholderText('Add contacts'), {
               target: {
                 value: 'john@gmail.com'
               }
             });
           });
           act(function () {
-            fireEvent.keyPress(screen.getByPlaceholderText('Add contacts or groups'), {
+            fireEvent.keyPress(screen.getByPlaceholderText('Add contacts'), {
               key: 'Enter',
               code: 'Enter',
               charCode: 13
@@ -201,14 +201,14 @@ describe('ShareByEmailComponent', function () {
               createContact: createContact
             });
             act(function () {
-              fireEvent.change(screen.getByPlaceholderText('Add contacts or groups'), {
+              fireEvent.change(screen.getByPlaceholderText('Add contacts'), {
                 target: {
                   value: 'quentin@cozycloud.cc'
                 }
               });
             });
             act(function () {
-              fireEvent.keyPress(screen.getByPlaceholderText('Add contacts or groups'), {
+              fireEvent.keyPress(screen.getByPlaceholderText('Add contacts'), {
                 key: 'Enter',
                 code: 'Enter',
                 charCode: 13

package/dist/components/SharingBanner/components/PublicBanner.js

@@ -4,8 +4,10 @@ import React from 'react';
 import snarkdown from 'snarkdown';
 import { useClient } from 'cozy-client';
 import flag from 'cozy-flags';
-import Banner from 'cozy-ui/transpiled/react/Banner';
+import Alert from 'cozy-ui/transpiled/react/Alert';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import Button from 'cozy-ui/transpiled/react/Buttons';
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'twake-i18n';
 import CozyHomeLinkIcon from './CozyHomeLinkIcon';
 var styles = {
@@ -36,7 +38,7 @@ var PublicBannerCozyToCozyContent = function PublicBannerCozyToCozyContent(_ref)
       userBoldName = _beginning$1$split$1$2[0],
       ending = _beginning$1$split$1$2[1];
 
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(Avatar, {
     className: styles['bannermarkdown']
   }, beginning[0], /*#__PURE__*/React.createElement("img", {
     src: avatarURL,
@@ -61,6 +63,9 @@ var SharingBannerCozyToCozy = function SharingBannerCozyToCozy(_ref2) {
   var _useI18n2 = useI18n(),
       t = _useI18n2.t;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   var action = function action() {
     return openExternalLink(addSharingLink);
   };
@@ -78,24 +83,23 @@ var SharingBannerCozyToCozy = function SharingBannerCozyToCozy(_ref2) {
     icon: 'to-the-cloud',
     action: action
   };
-  return /*#__PURE__*/React.createElement(Banner, {
-    bgcolor: "var(--defaultBackgroundColor)",
-    text: /*#__PURE__*/React.createElement(PublicBannerCozyToCozyContent, {
-      sharing: sharing
-    }),
-    buttonOne: /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React.createElement(Alert, {
+    color: "var(--defaultBackgroundColor)",
+    square: true,
+    block: isMobile,
+    action: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
       variant: "text",
       label: buttonOne.label,
       icon: buttonOne.icon,
       onClick: buttonOne.action
-    }),
-    buttonTwo: /*#__PURE__*/React.createElement(Button, {
+    }), /*#__PURE__*/React.createElement(Button, {
       variant: "text",
       label: t('Share.banner.close'),
       onClick: onClose
-    }),
-    inline: true
-  });
+    }))
+  }, /*#__PURE__*/React.createElement(PublicBannerCozyToCozyContent, {
+    sharing: sharing
+  }));
 };
 
 var SharingBannerByLinkText = function SharingBannerByLinkText() {
@@ -122,6 +126,9 @@ var SharingBannerByLink = function SharingBannerByLink(_ref3) {
   var _useI18n4 = useI18n(),
       t = _useI18n4.t;
 
+  var _useBreakpoints2 = useBreakpoints(),
+      isMobile = _useBreakpoints2.isMobile;
+
   var HOME_LINK_HREF = flag('signup.url');
   var canNotCreateTwakeFromPublicSharingLink = flag('drive.twake-creation-from-public-sharing.disabled');
 
@@ -129,10 +136,11 @@ var SharingBannerByLink = function SharingBannerByLink(_ref3) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Banner, {
-    bgcolor: "var(--defaultBackgroundColor)",
-    text: /*#__PURE__*/React.createElement(SharingBannerByLinkText, null),
-    buttonOne: /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React.createElement(Alert, {
+    color: "var(--defaultBackgroundColor)",
+    square: true,
+    block: isMobile,
+    action: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
       component: "a",
       variant: "text",
       label: t('Share.create-cozy', {
@@ -140,14 +148,12 @@ var SharingBannerByLink = function SharingBannerByLink(_ref3) {
       }),
       icon: CozyHomeLinkIcon,
       href: HOME_LINK_HREF
-    }),
-    buttonTwo: /*#__PURE__*/React.createElement(Button, {
+    }), /*#__PURE__*/React.createElement(Button, {
       variant: "text",
       label: t('Share.banner.close'),
       onClick: onClose
-    }),
-    inline: true
-  });
+    }))
+  }, /*#__PURE__*/React.createElement(SharingBannerByLinkText, null));
 };
 
 SharingBannerCozyToCozy.propTypes = {

package/dist/components/SharingBanner/components/PublicBanner.spec.js

@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { useClient } from 'cozy-client';
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'twake-i18n';
 import { SharingBannerCozyToCozy } from './PublicBanner';
 jest.mock('twake-i18n');
@@ -33,12 +34,12 @@ describe('PublicBanner', function () {
       }
     }; // When
 
-    var _render = render( /*#__PURE__*/React.createElement(SharingBannerCozyToCozy, {
+    var _render = render( /*#__PURE__*/React.createElement(BreakpointsProvider, null, /*#__PURE__*/React.createElement(SharingBannerCozyToCozy, {
       sharing: sharing,
       isSharingShortcutCreated: true,
       addSharingLink: "discoveryLink",
       onClose: function onClose() {}
-    })),
+    }))),
         container = _render.container; // Then
 
 

package/dist/styles/publicBanner.styl

@@ -1,10 +1,10 @@
-@require 'components/avatar'
-@require 'components/circle'
 .bannermarkdown
     display inline-block
+    background-color var(--paleGrey)
+    color var(--silver)
+    position relative
+
     img
-        @extend $avatar
-        @extend $circle
         width rem(16)
         height rem(16)
         min-width rem(16)

package/dist/stylesheet.css

@@ -518,39 +518,18 @@ input[type=text] {
 }
 /*  imported from publicBanner.styl  */
 
-.publicBanner__bannermarkdown___1dR1E img {
+.publicBanner__bannermarkdown___1dR1E {
+  display: inline-block;
   background-color: var(--paleGrey);
   color: var(--silver);
   position: relative;
 }
-.publicBanner__bannermarkdown___1dR1E img svg {
-  width: 50%;
-  height: 50%;
-}
-.publicBanner__bannermarkdown___1dR1E img {
-  --circleSize: 2.5rem;
-  width: var(--circleSize);
-  height: var(--circleSize);
-  min-width: var(--circleSize);
-  min-height: var(--circleSize);
-  font-size: calc(var(--circleSize) / 2.28);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  overflow: hidden;
-  background-color: var(--dodgerBlue);
-  color: var(--white);
-}
-.publicBanner__bannermarkdown___1dR1E {
-  display: inline-block;
-}
 .publicBanner__bannermarkdown___1dR1E img {
-  width: 1rem;
-  height: 1rem;
-  min-width: 1rem;
-  min-height: 1rem;
-  font-size: 0.438rem;
+  width: rem(16);
+  height: rem(16);
+  min-width: rem(16);
+  min-height: rem(16);
+  font-size: rem(7);
   vertical-align: text-bottom;
 }
 /*  imported from tooltip.styl  */

package/locales/en.json

@@ -129,7 +129,7 @@
       },
       "shareByEmail": {
         "subtitle": "By email",
-        "emailPlaceholder": "Add contacts or groups",
+        "emailPlaceholder": "Add contacts",
         "send": "Send",
         "singleContactSuccess": "You sent an invite to %{email}.",
         "contactSuccess": "You sent an invite to %{smart_count} contact. |||| You sent an invite to %{smart_count} contacts.",
@@ -469,7 +469,7 @@
     "shareTitle": "Share \"%{name}\"",
     "successNotification": "Folder has been shared",
     "errorNotification": "Error while sharing folder",
-    "addPeople": "Add people to the shared folder :",
+    "addPeople": "Add people to the shared folder",
     "add": "Add"
   },
   "SharedDrive": {
@@ -480,7 +480,7 @@
       "cancel": "Cancel",
       "create": "Create",
       "save": "Save",
-      "addPeople": "Add people to the shared drive :",
+      "addPeople": "Add people to the shared drive",
       "successNotification": "Shared drive has been added",
       "errorNotification": "Error during shared drive creation",
       "successNotificationUpdate": "Your shared drive has been modified",

package/locales/fr.json

@@ -126,7 +126,7 @@
       },
       "shareByEmail": {
         "subtitle": "Par email",
-        "emailPlaceholder": "Ajouter des contacts ou des groupes",
+        "emailPlaceholder": "Ajouter des contacts",
         "send": "Envoyer",
         "singleContactSuccess": "Vous avez envoyé une invitation à %{email}.",
         "contactSuccess": "Vous avez invité %{smart_count} contact. |||| Vous avez invité %{smart_count} contacts.",
@@ -467,7 +467,7 @@
     "shareTitle": "Partager \"%{name}\"",
     "successNotification": "Le dossier a été partagé",
     "errorNotification": "Erreur lors du partage du dossier",
-    "addPeople": "Ajouter des utilisateurs au dossier partagé :",
+    "addPeople": "Ajouter des utilisateurs au dossier partagé",
     "add": "Ajouter"
   },
   "SharedDrive": {
@@ -478,7 +478,7 @@
       "cancel": "Annuler",
       "create": "Créer",
       "save": "Enregistrer",
-      "addPeople": "Ajouter des utilisateurs au drive partagé :",
+      "addPeople": "Ajouter des utilisateurs au drive partagé",
       "successNotification": "Le drive partagé a été ajouté",
       "errorNotification": "Erreur lors de la création du drive partagé",
       "successNotificationUpdate": "Votre drive partagé a été modifié",

package/locales/ru.json

@@ -129,7 +129,7 @@
       },
       "shareByEmail": {
         "subtitle": "По электронной почте",
-        "emailPlaceholder": "Добавить контакты или группы",
+        "emailPlaceholder": "Добавить контакты",
         "send": "Отправить",
         "singleContactSuccess": "Вы отправили приглашение на %{email}.",
         "contactSuccess": "Вы отправили приглашение %{smart_count} контакту. |||| Вы отправили приглашение %{smart_count} контактам.",
@@ -469,7 +469,7 @@
     "shareTitle": "Поделиться \"%{name}\"",
     "successNotification": "Папка была расшарена",
     "errorNotification": "Ошибка при расшаривании папки",
-    "addPeople": "Добавить людей в общую папку:",
+    "addPeople": "Добавить людей в общую папку",
     "add": "Добавить"
   },
   "SharedDrive": {
@@ -480,7 +480,7 @@
       "cancel": "Отмена",
       "create": "Создать",
       "save": "Сохранить",
-      "addPeople": "Добавить людей в общий диск:",
+      "addPeople": "Добавить людей в общий диск",
       "successNotification": "Общий диск добавлен",
       "errorNotification": "Ошибка при создании общего диска",
       "successNotificationUpdate": "Ваш общий диск был изменён",

package/locales/vi.json

@@ -129,7 +129,7 @@
       },
       "shareByEmail": {
         "subtitle": "Bằng email",
-        "emailPlaceholder": "Thêm liên hệ hoặc nhóm",
+        "emailPlaceholder": "Thêm liên hệ",
         "send": "Gửi",
         "singleContactSuccess": "Bạn đã gửi lời mời đến %{email}.",
         "contactSuccess": "Bạn đã gửi lời mời đến %{smart_count} liên hệ. |||| Bạn đã gửi lời mời đến %{smart_count} liên hệ.",
@@ -467,7 +467,7 @@
     "shareTitle": "Chia sẻ \"%{name}\"",
     "successNotification": "Thư mục đã được chia sẻ",
     "errorNotification": "Lỗi khi chia sẻ thư mục",
-    "addPeople": "Thêm người vào thư mục được chia sẻ:",
+    "addPeople": "Thêm người vào thư mục được chia sẻ",
     "add": "Thêm"
   },
   "SharedDrive": {
@@ -478,7 +478,7 @@
       "cancel": "Hủy",
       "create": "Tạo",
       "save": "Lưu",
-      "addPeople": "Thêm người vào ổ đĩa được chia sẻ:",
+      "addPeople": "Thêm người vào ổ đĩa được chia sẻ",
       "successNotification": "Ổ đĩa được chia sẻ đã được thêm",
       "errorNotification": "Lỗi trong quá trình tạo ổ đĩa được chia sẻ",
       "successNotificationUpdate": "Ổ đĩa được chia sẻ của bạn đã được sửa đổi",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "29.0.0",
+  "version": "30.0.1",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -58,7 +58,7 @@
     "cozy-device-helper": "^3.7.1",
     "cozy-intent": "^2.31.1",
     "cozy-minilog": "^3.10.1",
-    "cozy-ui": "^135.0.0",
+    "cozy-ui": "^138.1.0",
     "cozy-ui-plus": "^6.0.0",
     "jest": "30.3.0",
     "jest-environment-jsdom": "30.3.0",
@@ -74,8 +74,8 @@
     "cozy-flags": ">=4.8.1",
     "cozy-intent": ">=2.29.1",
     "cozy-minilog": ">=3.9.1",
-    "cozy-ui": ">=135.0.0",
-    "cozy-ui-plus": ">=1.2.0",
+    "cozy-ui": ">=138.1.0",
+    "cozy-ui-plus": ">=6.0.0",
     "prop-types": ">=15.7.2",
     "react": ">=16.12.0",
     "react-router": ">=5.0.1",
@@ -84,5 +84,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "4c152ef7f2acafb450df245f5ce58638cbdb6be3"
+  "gitHead": "32c42c7b2beb61697f0d0826b81d354f2de5d272"
 }

package/src/components/ShareByEmail.spec.jsx

@@ -72,20 +72,17 @@ describe('ShareByEmailComponent', () => {
     setup({ sharingDesc })
 
     act(() => {
-      fireEvent.change(screen.getByPlaceholderText('Add contacts or groups'), {
+      fireEvent.change(screen.getByPlaceholderText('Add contacts'), {
         target: { value: 'quentin@cozycloud.cc' }
       })
     })
 
     act(() => {
-      fireEvent.keyPress(
-        screen.getByPlaceholderText('Add contacts or groups'),
-        {
-          key: 'Enter',
-          code: 'Enter',
-          charCode: 13
-        }
-      )
+      fireEvent.keyPress(screen.getByPlaceholderText('Add contacts'), {
+        key: 'Enter',
+        code: 'Enter',
+        charCode: 13
+      })
     })
 
     act(() => {
@@ -131,20 +128,17 @@ describe('ShareByEmailComponent', () => {
     })
 
     act(() => {
-      fireEvent.change(screen.getByPlaceholderText('Add contacts or groups'), {
+      fireEvent.change(screen.getByPlaceholderText('Add contacts'), {
         target: { value: 'john@gmail.com' }
       })
     })
 
     act(() => {
-      fireEvent.keyPress(
-        screen.getByPlaceholderText('Add contacts or groups'),
-        {
-          key: 'Enter',
-          code: 'Enter',
-          charCode: 13
-        }
-      )
+      fireEvent.keyPress(screen.getByPlaceholderText('Add contacts'), {
+        key: 'Enter',
+        code: 'Enter',
+        charCode: 13
+      })
     })
 
     act(() => {
@@ -180,23 +174,17 @@ describe('ShareByEmailComponent', () => {
       setup({ sharingDesc, createContact })
 
       act(() => {
-        fireEvent.change(
-          screen.getByPlaceholderText('Add contacts or groups'),
-          {
-            target: { value: 'quentin@cozycloud.cc' }
-          }
-        )
+        fireEvent.change(screen.getByPlaceholderText('Add contacts'), {
+          target: { value: 'quentin@cozycloud.cc' }
+        })
       })
 
       act(() => {
-        fireEvent.keyPress(
-          screen.getByPlaceholderText('Add contacts or groups'),
-          {
-            key: 'Enter',
-            code: 'Enter',
-            charCode: 13
-          }
-        )
+        fireEvent.keyPress(screen.getByPlaceholderText('Add contacts'), {
+          key: 'Enter',
+          code: 'Enter',
+          charCode: 13
+        })
       })
 
       await waitFor(() => {

package/src/components/SharingBanner/components/PublicBanner.jsx

@@ -4,8 +4,10 @@ import snarkdown from 'snarkdown'
 
 import { useClient } from 'cozy-client'
 import flag from 'cozy-flags'
-import Banner from 'cozy-ui/transpiled/react/Banner'
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Button from 'cozy-ui/transpiled/react/Buttons'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'twake-i18n'
 
 import CozyHomeLinkIcon from './CozyHomeLinkIcon'
@@ -32,11 +34,11 @@ const PublicBannerCozyToCozyContent = ({ sharing }) => {
     .split('</strong>')
 
   return (
-    <span className={styles['bannermarkdown']}>
+    <Avatar className={styles['bannermarkdown']}>
       {beginning[0]}
       <img src={avatarURL} alt="avatar" /> <strong>{userBoldName}</strong>
       {ending}
-    </span>
+    </Avatar>
   )
 }
 PublicBannerCozyToCozyContent.propTypes = {
@@ -52,6 +54,7 @@ const SharingBannerCozyToCozy = ({
   onClose
 }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   const action = () => openExternalLink(addSharingLink)
   const buttonOne = isSharingShortcutCreated
@@ -66,26 +69,28 @@ const SharingBannerCozyToCozy = ({
         action
       }
   return (
-    <Banner
-      bgcolor="var(--defaultBackgroundColor)"
-      text={<PublicBannerCozyToCozyContent sharing={sharing} />}
-      buttonOne={
-        <Button
-          variant="text"
-          label={buttonOne.label}
-          icon={buttonOne.icon}
-          onClick={buttonOne.action}
-        />
-      }
-      buttonTwo={
-        <Button
-          variant="text"
-          label={t('Share.banner.close')}
-          onClick={onClose}
-        />
+    <Alert
+      color="var(--defaultBackgroundColor)"
+      square
+      block={isMobile}
+      action={
+        <>
+          <Button
+            variant="text"
+            label={buttonOne.label}
+            icon={buttonOne.icon}
+            onClick={buttonOne.action}
+          />
+          <Button
+            variant="text"
+            label={t('Share.banner.close')}
+            onClick={onClose}
+          />
+        </>
       }
-      inline
-    />
+    >
+      <PublicBannerCozyToCozyContent sharing={sharing} />
+    </Alert>
   )
 }
 
@@ -111,6 +116,7 @@ const SharingBannerByLinkText = () => {
 
 const SharingBannerByLink = ({ onClose }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   const HOME_LINK_HREF = flag('signup.url')
   const canNotCreateTwakeFromPublicSharingLink = flag(
@@ -122,27 +128,29 @@ const SharingBannerByLink = ({ onClose }) => {
   }
 
   return (
-    <Banner
-      bgcolor="var(--defaultBackgroundColor)"
-      text={<SharingBannerByLinkText />}
-      buttonOne={
-        <Button
-          component="a"
-          variant="text"
-          label={t('Share.create-cozy', { smart_count: 2 })}
-          icon={CozyHomeLinkIcon}
-          href={HOME_LINK_HREF}
-        />
+    <Alert
+      color="var(--defaultBackgroundColor)"
+      square
+      block={isMobile}
+      action={
+        <>
+          <Button
+            component="a"
+            variant="text"
+            label={t('Share.create-cozy', { smart_count: 2 })}
+            icon={CozyHomeLinkIcon}
+            href={HOME_LINK_HREF}
+          />
+          <Button
+            variant="text"
+            label={t('Share.banner.close')}
+            onClick={onClose}
+          />
+        </>
       }
-      buttonTwo={
-        <Button
-          variant="text"
-          label={t('Share.banner.close')}
-          onClick={onClose}
-        />
-      }
-      inline
-    />
+    >
+      <SharingBannerByLinkText />
+    </Alert>
   )
 }
 SharingBannerCozyToCozy.propTypes = {

package/src/components/SharingBanner/components/PublicBanner.spec.jsx

@@ -2,6 +2,7 @@ import { render } from '@testing-library/react'
 import React from 'react'
 
 import { useClient } from 'cozy-client'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'twake-i18n'
 
 import { SharingBannerCozyToCozy } from './PublicBanner'
@@ -31,12 +32,14 @@ describe('PublicBanner', () => {
 
     // When
     const { container } = render(
-      <SharingBannerCozyToCozy
-        sharing={sharing}
-        isSharingShortcutCreated={true}
-        addSharingLink="discoveryLink"
-        onClose={() => {}}
-      />
+      <BreakpointsProvider>
+        <SharingBannerCozyToCozy
+          sharing={sharing}
+          isSharingShortcutCreated={true}
+          addSharingLink="discoveryLink"
+          onClose={() => {}}
+        />
+      </BreakpointsProvider>
     )
 
     // Then

package/src/styles/publicBanner.styl

@@ -1,10 +1,10 @@
-@require 'components/avatar'
-@require 'components/circle'
 .bannermarkdown
     display inline-block
+    background-color var(--paleGrey)
+    color var(--silver)
+    position relative
+
     img
-        @extend $avatar
-        @extend $circle
         width rem(16)
         height rem(16)
         min-width rem(16)