Add dark mode support

README.md

@@ -55,14 +55,14 @@ Using a watcher - with Hot Module Replacement:
 ```sh
 $ cd cozy-photos
 $ yarn watch:photos:browser
-$ cozy-stack serve --appdir photos:/<project_absolute_path>/cozy-photos/build/photos --disable-csp
+$ cozy-stack serve --appdir photos:/<project_absolute_path>/cozy-photos/build --disable-csp
 ```
 
 Or directly build the app (static file generated):
 ```sh
 $ cd cozy-photos
 $ yarn build:photos
-$ cozy-stack serve --appdir photos:/<project_absolute_path>/cozy-photos/build/photos
+$ cozy-stack serve --appdir photos:/<project_absolute_path>/cozy-photos/build
 ```
 
 Your app is available at http://photos.cozy.localhost:8080/#/folder
@@ -81,7 +81,7 @@ $ yarn watch:photos:browser
 
 ```sh
 # in another terminal, run the docker container
-$ docker run --rm -it -p 8080:8080 -v "$(pwd)/build/photos":/data/cozy-app/photos cozy/cozy-app-dev
+$ docker run --rm -it -p 8080:8080 -v "$(pwd)/build":/data/cozy-app/photos cozy/cozy-app-dev
 ```
 
 Your app is available at http://photos.cozy.tools:8080.

jestHelpers/setup.js

@@ -1,25 +1,8 @@
 import Enzyme from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
-// To avoid the errors while creating theme (since no CSS stylesheet
-// defining CSS variables is injected during tests)
-// Material-UI: the color provided to augmentColor(color) is invalid.
-// The color object needs to have a `main` property or a `500` property.
-jest.mock('cozy-ui/transpiled/react/utils/color', () => ({
-  ...jest.requireActual('cozy-ui/transpiled/react/utils/color'),
-  getCssVariableValue: () => '#fff'
-}))
-
 global.cozy = {}
 
-jest.mock('cozy-bar/transpiled', () => ({
-  BarLeft: ({ children }) => children,
-  BarRight: ({ children }) => children,
-  BarCenter: ({ children }) => children,
-  BarSearch: ({ children }) => children,
-  setTheme: () => null
-}))
-
 jest.mock('cozy-intent', () => ({
   useWebviewIntent: jest.fn()
 }))

package.json

@@ -3,10 +3,10 @@
   "version": "1.66.0",
   "main": "src/main.jsx",
   "scripts": {
-    "build": "cozy-scripts build --manifest src/photos/targets/manifest.webapp --build-dir build/photos --src-dir src/photos --barV7 false --cozyClientJs",
-    "watch": "cozy-scripts watch --manifest src/photos/targets/manifest.webapp --build-dir build/photos --src-dir src/photos --barV7 false --cozyClientJs",
-    "start": "cozy-scripts start --manifest src/photos/targets/manifest.webapp --build-dir build/photos --src-dir src/photos --barV7 false --cozyClientJs",
-    "deploy": "cozy-app-publish --token $REGISTRY_TOKEN --build-dir 'build/photos/' --prepublish downcloud --postpublish mattermost",
+    "build": "cozy-scripts build --manifest src/photos/targets/manifest.webapp --build-dir build --src-dir src/photos --barV7 false --cozyClientJs",
+    "watch": "cozy-scripts watch --manifest src/photos/targets/manifest.webapp --build-dir build --src-dir src/photos --barV7 false --cozyClientJs",
+    "start": "cozy-scripts start --manifest src/photos/targets/manifest.webapp --build-dir build --src-dir src/photos --barV7 false --cozyClientJs",
+    "deploy": "cozy-app-publish --token $REGISTRY_TOKEN --build-dir 'build/' --prepublish downcloud --postpublish mattermost",
     "tx": "tx pull --all || true",
     "lint": "npm-run-all --parallel 'lint:*'",
     "lint:styles": "stylint src --config ./node_modules/cozy-scripts/config/.stylintrc",
@@ -76,24 +76,24 @@
     "@cozy/minilog": "1.0.0",
     "classnames": "2.3.1",
     "cozy-authentication": "2.10.10",
-    "cozy-bar": "10.0.0",
+    "cozy-bar": "^12.2.4",
     "cozy-ci": "0.5.2",
-    "cozy-client": "^45.1.0",
+    "cozy-client": "^47.6.0",
     "cozy-client-js": "0.20.0",
     "cozy-device-helper": "^2.5.0",
     "cozy-doctypes": "1.85.4",
     "cozy-flags": "3.0.1",
-    "cozy-harvest-lib": "18.0.0",
+    "cozy-harvest-lib": "^25.1.1",
     "cozy-intent": "^2.18.0",
     "cozy-keys-lib": "6.0.0",
     "cozy-logger": "1.9.1",
     "cozy-pouch-link": "^44.0.0",
     "cozy-realtime": "4.6.0",
     "cozy-scanner": "^7.0.0",
     "cozy-scripts": "^8.2.0",
-    "cozy-sharing": "10.0.0",
-    "cozy-stack-client": "^45.0.1",
-    "cozy-ui": "100.0.0",
+    "cozy-sharing": "^14.1.0",
+    "cozy-stack-client": "^47.4.0",
+    "cozy-ui": "^108.0.0",
     "date-fns": "1.30.1",
     "justified-layout": "2.1.2",
     "kd-tree-javascript": "1.0.3",

src/components/Button/CozyHomeLink.jsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { ButtonLink, useI18n } from 'cozy-ui/transpiled/react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import { HOME_LINK_HREF } from 'photos/constants/config'
 import CozyHomeLinkIcon from 'components/Button/CozyHomeLinkIcon'
 
 const CozyHomeLink = ({ className }) => {
   const { t } = useI18n()
   return (
-    <ButtonLink
+    <Button
+      component="a"
       label={t('Share.create-cozy')}
-      icon={CozyHomeLinkIcon}
+      startIcon={<Icon icon={CozyHomeLinkIcon} />}
       className={className}
       href={HOME_LINK_HREF}
-      size={'normal'}
     />
   )
 }

src/components/Button/MoreButton.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
+import cx from 'classnames'
 
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
-import { Button } from 'cozy-ui/transpiled/react'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
 
 import styles from './index.styl'
@@ -11,14 +13,12 @@ const MoreButton = ({ disabled, onClick, ...props }) => {
   return (
     <Button
       data-testid="more-button"
-      className={styles['dri-btn--more']}
-      theme="secondary"
+      className={cx('u-miw-auto', styles['dri-btn--more'])}
+      variant="secondary"
+      label={<Icon icon={DotsIcon} />}
       disabled={disabled}
       onClick={onClick}
-      extension="narrow"
-      icon={DotsIcon}
-      iconOnly
-      label={t('Toolbar.more')}
+      aria-label={t('Toolbar.more')}
       {...props}
     />
   )

src/components/Error/ErrorComponent.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
 import Empty from 'cozy-ui/transpiled/react/Empty'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import EmptyIcon from '../../photos/assets/icons/icon-image-broken.svg'
 
 export const ErrorComponent = ({ t, errorType }) => {

src/components/pushClient/Banner.jsx

@@ -8,9 +8,8 @@ import flow from 'lodash/flow'
 import { withClient } from 'cozy-client'
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
 import Banner from 'cozy-ui/transpiled/react/Banner'
-import Button, { ButtonLink } from 'cozy-ui/transpiled/react/deprecated/Button'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import palette from 'cozy-ui/transpiled/react/palette'
 import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
 
@@ -75,19 +74,20 @@ class BannerClient extends Component {
           inline
           icon={<Icon icon={DeviceLaptopIcon} size="100%" />}
           text={t(text)}
-          bgcolor={palette['paleGrey']}
+          bgcolor="var(--contrastBackgroundColor)"
           buttonOne={
-            <ButtonLink
+            <Button
+              component="a"
               href={t(link)}
-              theme="text"
-              icon={DownloadIcon}
+              variant="text"
+              startIcon={<Icon icon={DownloadIcon} />}
               label={t('Nav.banner-btn-client')}
               onClick={() => this.markAsSeen('banner')}
             />
           }
           buttonTwo={
             <Button
-              theme="text"
+              variant="text"
               label={t('SelectionBar.close')}
               onClick={() => {
                 this.markAsSeen('close')

src/components/pushClient/supportUs.styl

@@ -10,5 +10,5 @@
     margin-left 0
     margin-right 0
 .SupportUs__description
-    color var(--coolGrey)
+    color var(--actionColorActive)
     font-style italic

src/photos/components/DestroyConfirm.jsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 
 import React from 'react'
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 
 const DestroyConfirm = ({ t, confirm, onClose }) => {
   const confirmationTexts = ['forbidden', 'eye', 'link'].map(type => (
@@ -23,12 +23,12 @@ const DestroyConfirm = ({ t, confirm, onClose }) => {
       actions={
         <>
           <Button
-            theme="secondary"
+            variant="secondary"
             onClick={onClose}
             label={t('destroyconfirmation.cancel')}
           />
           <Button
-            theme="danger"
+            color="error"
             label={t('destroyconfirmation.delete')}
             onClick={confirm}
           />

src/photos/components/Layout.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Outlet, NavLink as RouterLink } from 'react-router-dom'
 
+import { BarComponent } from 'cozy-bar'
 import { useI18n, translate } from 'cozy-ui/transpiled/react/providers/I18n'
 import Sprite from 'cozy-ui/transpiled/react/Icon/Sprite'
 import { Layout as LayoutUI, Main } from 'cozy-ui/transpiled/react/Layout'
@@ -114,6 +115,7 @@ const getNavLinks = () => {
 
 export const Layout = ({ t }) => (
   <LayoutUI>
+    <BarComponent />
     <Sidebar className={styles['pho-sidebar']}>
       <Nav>{getNavLinks()}</Nav>
       {!isFlagshipApp() && <ButtonClient />}

src/photos/components/Loading.jsx

@@ -3,7 +3,6 @@ import classNames from 'classnames'
 
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
 import { Spinner } from 'cozy-ui/transpiled/react'
-import palette from 'cozy-ui/transpiled/react/palette'
 
 import styles from '../styles/loading.styl'
 
@@ -18,7 +17,7 @@ export const Loading = ({
       <Spinner
         size={size}
         loadingType={loadingType}
-        color={palette.dodgerBlue}
+        color="var(--primaryColor)"
         noMargin={noMargin}
         middle={middle}
       />

src/photos/components/StyledApp.jsx

@@ -4,7 +4,9 @@ import 'photos/styles/main.styl'
 import 'cozy-sharing/dist/stylesheet.css'
 
 import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
+
 const StyledApp = ({ children }) => {
   return <CozyTheme className="u-w-100">{children}</CozyTheme>
 }
+
 export default StyledApp