fix: Add space between button inside toolbar

cozy · Aug 12, 2024 · 4a35eae · 4a35eae
1 parent 77160da
commit 4a35eae
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 13 deletions.
diff --git a/src/modules/drive/Toolbar/components/AddButton.jsx b/src/modules/drive/Toolbar/components/AddButton.jsx
@@ -1,12 +1,13 @@
 import React, { useContext } from 'react'
 
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { AddMenuContext } from 'modules/drive/AddMenu/AddMenuProvider'
 
-export const AddButton = () => {
+export const AddButton = ({ className }) => {
  const { t } = useI18n()
  const {
  anchorRef,
@@ -20,9 +21,10 @@ export const AddButton = () => {
  return (
  <div ref={anchorRef} onClick={isOffline ? handleOfflineClick : undefined}>
  <Button
+ className={className}
  onClick={handleToggle}
  disabled={isDisabled || isOffline}
- icon={PlusIcon}
+ startIcon={<Icon icon={PlusIcon} />}
  label={t('toolbar.menu_add')}
  {...a11y}
  />

diff --git a/src/modules/drive/Toolbar/index.jsx b/src/modules/drive/Toolbar/index.jsx
@@ -53,7 +53,7 @@ const Toolbar = ({
  displayedFolder={displayedFolder}
  folderId={folderId}
  >
- <ShareButton isDisabled={isSharingDisabled} />
+ <ShareButton isDisabled={isSharingDisabled} className="u-mr-half" />
  </InsideRegularFolder>
 
  {hasWriteAccess && (
@@ -64,7 +64,7 @@ const Toolbar = ({
  displayedFolder={displayedFolder}
  isSelectionBarVisible={isSelectionBarVisible}
  >
- <AddButton />
+ <AddButton className="u-mr-half" />
  </AddMenuProvider>
  )}
 

diff --git a/src/modules/drive/Toolbar/share/ShareButton.jsx b/src/modules/drive/Toolbar/share/ShareButton.jsx
@@ -1,3 +1,4 @@
+import cx from 'classnames'
 import { useDisplayedFolder } from 'hooks'
 import React from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -6,7 +7,7 @@ import { ShareButton } from 'cozy-sharing'
 
 import { getPathToShareDisplayedFolder } from 'modules/drive/Toolbar/share/helpers'
 
-const ShareButtonWithProps = ({ isDisabled }) => {
+const ShareButtonWithProps = ({ isDisabled, className }) => {
  const { displayedFolder } = useDisplayedFolder()
  const navigate = useNavigate()
  const { pathname } = useLocation()
@@ -19,7 +20,7 @@ const ShareButtonWithProps = ({ isDisabled }) => {
  <ShareButton
  docId={displayedFolder.id}
  disabled={isDisabled}
- className="u-hide--mob"
+ className={cx('u-hide--mob', className)}
  onClick={() => share(displayedFolder)}
  />
  )

diff --git a/src/modules/public/DownloadButton.jsx b/src/modules/public/DownloadButton.jsx
@@ -2,20 +2,25 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import { useClient } from 'cozy-client'
-import { Button } from 'cozy-ui/transpiled/react'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { downloadFiles } from 'modules/actions/utils'
 
 const DownloadButton = ({ onDownload, ...props }) => (
- <Button onClick={() => onDownload()} icon={DownloadIcon} {...props} />
+ <Button
+ onClick={() => onDownload()}
+ startIcon={<Icon icon={DownloadIcon} />}
+ {...props}
+ />
 )
 
 export default DownloadButton
 
-export const DownloadFilesButton = ({ files }) => {
+export const DownloadFilesButton = ({ files, className }) => {
  const { t } = useI18n()
  const client = useClient()
  const { showAlert } = useAlert()
@@ -27,7 +32,8 @@ export const DownloadFilesButton = ({ files }) => {
  onDownload={() => {
  downloadFiles(client, files, { showAlert, t })
  }}
- theme="secondary"
+ variant="secondary"
+ className={className}
  />
  )
 }

diff --git a/src/modules/public/PublicToolbarByLink.jsx b/src/modules/public/PublicToolbarByLink.jsx
@@ -41,8 +41,10 @@ const PublicToolbarByLink = ({
  >
  {!isMobile && (
  <>
- {hasWriteAccess && <AddButton />}
- {files.length > 0 && <DownloadFilesButton files={files} />}
+ {hasWriteAccess && <AddButton className="u-mr-half" />}
+ {files.length > 0 && (
+ <DownloadFilesButton files={files} className="u-mr-half" />
+ )}
  </>
  )}
  {shouldDisplayMoreMenu && (