diff --git a/public/index.html b/public/index.html
index fdfe1b2f6..a7993ea23 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,7 @@
width: 100vw;
height: 100vh;
padding: 0 1em;
- background-color: #fcfcfc
+ background-color: var(--paperBackgroundColor)
}
[role=application] p:first-child {
@@ -46,9 +46,9 @@
kbd,
code {
padding: .3em;
- border: 1px solid #999;
+ border: 1px solid var(--borderMainColor);
border-radius: 3px;
- background-color: #eee;
+ background-color: var(--paperBackgroundColor);
}
diff --git a/src/components/Apps/AppNavButtons.jsx b/src/components/Apps/AppNavButtons.jsx
index 0d19c948d..4b6621d0e 100644
--- a/src/components/Apps/AppNavButtons.jsx
+++ b/src/components/Apps/AppNavButtons.jsx
@@ -70,7 +70,7 @@ const AppNavButton = ({
{!isPublic && (
)}
diff --git a/src/components/BarComponent.jsx b/src/components/BarComponent.jsx
index 645e94723..e8f88a616 100644
--- a/src/components/BarComponent.jsx
+++ b/src/components/BarComponent.jsx
@@ -21,6 +21,7 @@ import Bar from './Bar'
import { Provider } from 'react-redux'
import { useClient } from 'cozy-client'
import { isMobileApp } from 'cozy-device-helper'
+import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
import stack from 'lib/stack'
@@ -153,13 +154,15 @@ const BarComponent = ({
setWrapperElement={setWrapperElement}
>
-
+
+
+
)
diff --git a/src/components/Drawer.spec.jsx b/src/components/Drawer.spec.jsx
index 4185fa66d..d68155cce 100644
--- a/src/components/Drawer.spec.jsx
+++ b/src/components/Drawer.spec.jsx
@@ -37,6 +37,7 @@ describe('bar', () => {
const logOut = jest.fn().mockImplementation(() => {
callOrder.push('logOut')
})
+
const onLogOut = jest.fn().mockImplementation(async () => {
prom = sleep(100)
callOrder.push('onLogOut')
@@ -52,6 +53,7 @@ describe('bar', () => {
expect(logOut).not.toHaveBeenCalled()
await prom
await sleep(0)
+
expect(logOut).toHaveBeenCalled()
expect(onLogOut).toHaveBeenCalled()
expect(callOrder).toEqual(['onLogOut', 'logOut'])
@@ -63,6 +65,7 @@ describe('bar', () => {
act(() => {
clickLogout()
})
+
expect(logOut).toHaveBeenCalled()
})
@@ -73,6 +76,7 @@ describe('bar', () => {
act(() => {
clickLogout()
})
+
expect(logOut).toHaveBeenCalled()
expect(onLogOut).toHaveBeenCalled()
})
diff --git a/src/components/Settings/SettingsContent.jsx b/src/components/Settings/SettingsContent.jsx
index acae025a9..a19236e31 100644
--- a/src/components/Settings/SettingsContent.jsx
+++ b/src/components/Settings/SettingsContent.jsx
@@ -20,14 +20,14 @@ import StorageData from 'components/Settings/StorageData'
import useI18n from 'components/useI18n'
const MenuIcon = ({ icon }) => {
- return
+ return
}
const ExternalLinkIcon = () => {
return (
)
diff --git a/src/lib/reducers/apps.spec.js b/src/lib/reducers/apps.spec.js
index ce4339108..2f7d483c7 100644
--- a/src/lib/reducers/apps.spec.js
+++ b/src/lib/reducers/apps.spec.js
@@ -20,6 +20,7 @@ describe('app reducer', () => {
stack.init(params)
})
+
it('dispatch RECEIVE_HOME_APP if context has default redirection', async () => {
jest.spyOn(client.get, 'context').mockResolvedValue({
data: { attributes: { default_redirection: 'home/' } }
@@ -28,6 +29,7 @@ describe('app reducer', () => {
const setted = setDefaultApp([{ slug: 'home' }])
await setted(dispatchMock)
+
expect(dispatchMock).toHaveBeenCalledWith({
homeApp: { slug: 'home' },
type: 'RECEIVE_HOME_APP'
@@ -40,6 +42,7 @@ describe('app reducer', () => {
const setted = setDefaultApp([{ slug: 'home' }])
await setted(dispatchMock)
+
expect(dispatchMock).toHaveBeenCalledWith({
homeApp: { slug: 'home' },
type: 'RECEIVE_HOME_APP'
diff --git a/src/styles/apps.css b/src/styles/apps.css
index aeb7bc4c0..c00f55f9a 100644
--- a/src/styles/apps.css
+++ b/src/styles/apps.css
@@ -17,7 +17,7 @@
padding: 0;
background-color: transparent;
border: none;
- color: black;
+ color: var(--primaryTextColor);
font-size: 1rem;
}
@@ -25,7 +25,7 @@
[role=banner] .coz-nav-apps-btns-main:focus,
[role=banner] .coz-nav-apps-btns-main:active {
cursor: pointer;
- color: black;
+ color: var(--primaryTextColor);
}
[role=banner] .coz-nav-apps-btns-main[disabled]:hover,
@@ -41,7 +41,7 @@
[role=banner] .coz-nav-apps-btns-sep {
height: 1.75rem;
- background-color: #d8d8d8;
+ background-color: var(--dividerColor);
width: 1px;
}
@@ -68,13 +68,13 @@
[role=banner] .coz-nav-apps-btns-home,
[role=banner] .coz-nav-apps-btns-home[href]:visited {
- color: var(--dodgerBlue);
+ color: var(--actionColorFocus);
}
[role=banner] .coz-nav-apps-btns-home[href]:hover,
[role=banner] .coz-nav-apps-btns-home[href]:active,
[role=banner] .coz-nav-apps-btns-home[href]:focus {
- color: var(--scienceBlue);
+ color: var(--actionColorHover);
}
[role=banner] .coz-nav-apps-btns.--currentHome .coz-nav-apps-btns-main {
@@ -131,8 +131,8 @@
/* current app item */
[role=banner] .coz-nav-apps-item.--current a[role=menuitem] {
font-weight: bold;
- background-color: var(--paleGrey);
- border-left: 4px solid var(--dodgerBlue)
+ background-color: var(--defaultBackgroundColor);
+ border-left: 4px solid var(--primaryColor)
}
[role=banner] .coz-nav-apps-item [role=menuitem],
@@ -146,7 +146,7 @@
height: 3rem;
/* we remove the left border from the padding */
padding: .5rem 1rem .5rem calc(1rem - 4px);
- color: var(--charcoalGrey);
+ color: var(--primaryTextColor);
text-decoration: none;
outline: none;
}
@@ -178,7 +178,7 @@
[role=banner] [role=menuitem].coz-apps-home-btn {
display: flex;
margin-top: 0;
- color: #5d6165;
+ color: var(--primaryTextColor);
font-weight: bold;
font-size: 14px;
justify-content: center;
@@ -225,10 +225,10 @@
animation-iteration-count: infinite;
animation-timing-function: linear;
background-position: -20rem 0;
- background-image: linear-gradient(to right, var(--silver) 0, var(--paleGrey) 50%, var(--silver) 100%);
+ background-image: linear-gradient(to right, var(--contrastBackgroundColor) 0, var(--defaultBackgroundColor) 50%, var(--contrastBackgroundColor) 100%);
background-size: 20rem 10rem;
background-repeat: no-repeat;
- background-color: var(--silver);
+ background-color: var(--defaultBackgroundColor);
border-radius: .15rem;
margin: .1rem 0;
}
@@ -254,12 +254,12 @@
height: 2rem;
width: 2rem;
border-radius: 2rem;
- background-color: var(--silver);
+ background-color: var(--defaultBackgroundColor);
flex-shrink: 0;
}
[role=banner] .coz-nav-apps-btns-main.coz-loading-placeholder {
height: 1.5rem;
margin: 0;
- background-color: var(--silver);
+ background-color: var(--defaultBackgroundColor);
}
\ No newline at end of file
diff --git a/src/styles/banner.css b/src/styles/banner.css
index 0f29b3519..202e6c466 100644
--- a/src/styles/banner.css
+++ b/src/styles/banner.css
@@ -37,16 +37,16 @@
[role=banner] .coz-bar-banner {
display: flex;
- background: var(--dodgerBlue);
+ background: var(--primaryColor);
box-sizing: border-box;
width: 100%;
height: 3rem;
padding: 0 1rem 0 1rem;
justify-content: space-between;
align-items: center;
- color: white;
+ color: var(--primaryContrastTextColor);
overflow: hidden;
- box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.06);
+ box-shadow: var(--shadow2);
transition: height 1s;
transition-delay: 1s;
}
@@ -56,7 +56,7 @@
[role=banner] .coz-bar-banner-button:visited
[role=banner] .coz-bar-banner-button:active
[role=banner] .coz-bar-banner-button:focus {
- border-color: white!important;
+ border-color: var(--primaryContrastTextColor) !important;
min-height: 2rem;
height: 2rem;
flex-shrink: 0;
diff --git a/src/styles/bar.css b/src/styles/bar.css
index 861db342c..7cb76e498 100644
--- a/src/styles/bar.css
+++ b/src/styles/bar.css
@@ -46,7 +46,7 @@
min-width: 8em;
font-size: 1.5em;
font-weight: normal;
- color: var(--charcoalGrey);
+ color: var(--primaryTextColor);
}
@media (max-width: 48em) {
diff --git a/src/styles/drawer.css b/src/styles/drawer.css
index 47d5d5779..500ccb3cc 100644
--- a/src/styles/drawer.css
+++ b/src/styles/drawer.css
@@ -23,7 +23,7 @@
left: 0;
width: 100%;
height: 100%;
- background-color: var(--charcoalGrey);
+ background-color: var(--primaryTextColor);
opacity: 0;
transition: opacity .2s ease-out .1s;
}
@@ -42,7 +42,7 @@
height: 100%;
display: flex;
flex-direction: column;
- background-color: #fff;
+ background-color: var(--paperBackgroundColor);
transform: translateX(-100%);
transform-origin: 0% 0%;
}
@@ -68,7 +68,7 @@
[role=banner] .coz-drawer-wrapper nav hr {
margin: 0;
border: none;
- border-bottom: solid 1px var(--silver);
+ border-bottom: solid 1px var(--borderMainColor);
}
[role=banner] .coz-drawer-wrapper .coz-nav-icon {
diff --git a/src/styles/indicators.css b/src/styles/indicators.css
index c722ee3bc..c06eb55f2 100644
--- a/src/styles/indicators.css
+++ b/src/styles/indicators.css
@@ -12,24 +12,24 @@
[role=banner] progress[value] {
/* Reset the default appearance */
appearance: none;
- background-color: var(--paleGrey);
- border: solid 1px var(--silver);
+ background-color: var(--defaultBackgroundColor);
+ border: solid 1px var(--borderMainColor);
border-radius: 2px;
- color: var(--dodgerBlue);
+ color: var(--primaryColor);
}
[role=banner] progress[value]::-webkit-progress-bar {
- background: var(--paleGrey);
+ background: var(--defaultBackgroundColor);
border-radius: 2px;
}
[role=banner] progress[value]::-webkit-progress-value {
- background: var(--dodgerBlue);
+ background: var(--primaryColor);
border-radius: 1px;
}
[role=banner] progress[value]::-moz-progress-bar {
- background: var(--dodgerBlue);
+ background: var(--primaryColor);
border-radius: 1px;
}
@@ -38,5 +38,5 @@
margin: 0 0 .1em 0;
font-weight: normal;
font-size: .875em;
- color: var(--pomegranate);
+ color: var(--errorColor);
}
diff --git a/src/styles/nav.css b/src/styles/nav.css
index ce52038c2..fa9de4a05 100644
--- a/src/styles/nav.css
+++ b/src/styles/nav.css
@@ -43,10 +43,10 @@
min-width: 100%;
max-height: calc(100vh - 4rem);
overflow-y: auto;
- background-color: #fff;
+ background-color: var(--paperBackgroundColor);
border-radius: 8px;
- border: solid 1px rgba(50, 54, 63, 0.12);
- box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.19), 0 6px 18px 0 rgba(50, 54, 63, 0.19);
+ border: solid 1px var(--borderMainColor);
+ box-shadow: var(--shadow5);
opacity: 1;
transform: scale(1);
transform-origin: 80% 0%;
@@ -73,7 +73,7 @@
}
[role=banner] .coz-nav-pop .coz-nav-group {
- border-bottom: solid 1px var(--silver);
+ border-bottom: solid 1px var(--borderMainColor);
}
[role=banner] .coz-nav-pop .coz-nav-group:last-child {
diff --git a/src/styles/navigation_item.css b/src/styles/navigation_item.css
index cdc71fcd9..b185d3371 100644
--- a/src/styles/navigation_item.css
+++ b/src/styles/navigation_item.css
@@ -9,7 +9,7 @@
[role=banner] a[role=menuitem]:focus,
[role=banner] button[role=menuitem]:hover,
[role=banner] button[role=menuitem]:focus {
- background-color: var(--paleGrey);
+ background-color: var(--defaultBackgroundColor);
}
[role=banner] [role=menuitem][aria-busy=true]::after {
diff --git a/src/styles/settings.css b/src/styles/settings.css
index 46a8c49e1..dc7f48fd5 100644
--- a/src/styles/settings.css
+++ b/src/styles/settings.css
@@ -1,11 +1,9 @@
[role=banner] .coz-nav-settings-btn {
- color: var(--slateGrey);
+ color: var(--primaryTextColor);
}
[role=banner] .coz-nav-settings-btn:hover,
[role=banner] .coz-nav-settings-btn:focus {
- background-color: var(--paleGrey);
- box-shadow: inset 0 -1px 0 0 var(--silver);
- color: var(--charcoalGrey);
+ background-color: var(--actionColorHover);
}
[role=banner] .coz-nav-pop--settings {
@@ -23,7 +21,7 @@
text-align: left;
font-size: 1rem;
white-space: nowrap;
- color: var(--charcoalGrey);
+ color: var(--primaryTextColor);
text-decoration: none;
outline: none;
}
diff --git a/src/styles/storage.css b/src/styles/storage.css
index 82273652b..f02b028a5 100644
--- a/src/styles/storage.css
+++ b/src/styles/storage.css
@@ -7,7 +7,7 @@
flex-direction: column;
align-items: left;
padding-top: .5em;
- color: var(--coolGrey);
+ color: var(--secondaryTextColor);
}
[role=banner] .coz-nav-storage-text {
diff --git a/src/styles/theme.styl b/src/styles/theme.styl
index 76250ea38..86d623c84 100644
--- a/src/styles/theme.styl
+++ b/src/styles/theme.styl
@@ -1,18 +1,19 @@
[role=banner] .coz-bar-wrapper
- box-shadow inset 0 -1px 0 0 var(--silver)
+ box-shadow inset 0 -1px 0 0 var(--dividerColor)
--cozBarThemePrimaryColor var(--primaryColor)
--cozBarThemePrimaryContrastTextColor var(--primaryContrastTextColor)
+ background-color var(--paperBackgroundColor)
.coz-nav-apps-btns
- color var(--slateGrey)
+ color var(--secondaryTextColor)
.coz-bar-burger
- color var(--coolGrey)
+ color var(--iconTextColor)
@media (max-width: 64em)
[role=banner] .coz-bar-wrapper
- background-color var(--white)
+ background-color var(--paperBackgroundColor)
@media (max-width: 48em)
[role=banner] .coz-bar-wrapper
diff --git a/test/lib/BarLike.jsx b/test/lib/BarLike.jsx
index 88d562e97..def4bec5e 100644
--- a/test/lib/BarLike.jsx
+++ b/test/lib/BarLike.jsx
@@ -4,6 +4,7 @@ import { Provider } from 'react-redux'
import I18n from 'cozy-ui/transpiled/react/providers/I18n'
import { CozyProvider, createMockClient } from 'cozy-client'
import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
import { createStore } from 'lib/store'
import enLocale from 'locales/en.json'
@@ -23,9 +24,11 @@ const BarLike = ({ children, client }) => {
return (
-
- {children}
-
+
+
+ {children}
+
+
)