feat(Assistant): Force "normal" variant for searchbar and dialogs

To override "inverted" variant when a custom wallpaper is set
cozy · Nov 12, 2024 · a352589 · a352589
1 parent ea844d1
commit a352589
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 34 deletions.
diff --git a/src/assistant/AssistantWrapperDesktop.jsx b/src/assistant/AssistantWrapperDesktop.jsx
@@ -1,18 +1,22 @@
 import React from 'react'
 
+import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
+
 import SearchBar from './Search/SearchBar'
 import SearchProvider from './Search/SearchProvider'
 import AssistantProvider from './AssistantProvider'
 
 const AssistantWrapperDesktop = () => {
   return (
-    <div className="app-list-wrapper u-mb-3 u-mh-auto u-w-100">
-      <AssistantProvider>
-        <SearchProvider>
-          <SearchBar />
-        </SearchProvider>
-      </AssistantProvider>
-    </div>
+    <CozyTheme variant="normal">
+      <div className="app-list-wrapper u-mb-3 u-mh-auto u-w-100">
+        <AssistantProvider>
+          <SearchProvider>
+            <SearchBar />
+          </SearchProvider>
+        </AssistantProvider>
+      </div>
+    </CozyTheme>
   )
 }
 

diff --git a/src/assistant/AssistantWrapperMobile.jsx b/src/assistant/AssistantWrapperMobile.jsx
@@ -4,45 +4,50 @@ import flag from 'cozy-flags'
 import cx from 'classnames'
 
 import { getFlagshipMetadata } from 'cozy-device-helper'
-import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
+import CozyTheme, {
+  useCozyTheme
+} from 'cozy-ui/transpiled/react/providers/CozyTheme'
 import SearchBar from 'cozy-ui/transpiled/react/SearchBar'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import AssistantIcon from 'assets/images/icon-assistant.png'
 import { FLAG_FAB_BUTTON_ENABLED } from 'components/AddButton/helpers'
+import { useWallpaperContext } from 'hooks/useWallpaperContext'
 
 import styles from './styles.styl'
 
 export const AssistantWrapperMobile = () => {
   const { type } = useCozyTheme()
+  const {
+    data: { isCustomWallpaper }
+  } = useWallpaperContext()
   const { t } = useI18n()
   const navigate = useNavigate()
 
   return (
-    <div
-      className={cx(
-        styles['assistantWrapper-mobile'],
-        styles[`assistantWrapper-mobile--${type}`],
-        {
+    <CozyTheme variant="normal">
+      <div
+        className={cx(styles['assistantWrapper-mobile'], {
+          [styles[`assistantWrapper-mobile--${type}`]]: !isCustomWallpaper,
           [styles['assistantWrapper-mobile--offset']]: flag(
             FLAG_FAB_BUTTON_ENABLED
           ),
           [styles['assistantWrapper-mobile--immersive']]:
             getFlagshipMetadata().immersive
-        }
-      )}
-    >
-      <SearchBar
-        size="medium"
-        icon={
-          <Icon className="u-ml-1 u-mr-half" icon={AssistantIcon} size={24} />
-        }
-        type="button"
-        label={t('assistant.search.placeholder')}
-        onClick={() => navigate('connected/search')}
-      />
-    </div>
+        })}
+      >
+        <SearchBar
+          size="medium"
+          icon={
+            <Icon className="u-ml-1 u-mr-half" icon={AssistantIcon} size={24} />
+          }
+          type="button"
+          label={t('assistant.search.placeholder')}
+          onClick={() => navigate('connected/search')}
+        />
+      </div>
+    </CozyTheme>
   )
 }
 

diff --git a/src/assistant/Views/AssistantDialog.jsx b/src/assistant/Views/AssistantDialog.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import Conversation from '../Conversations/Conversation'
@@ -38,9 +39,11 @@ const AssistantDialog = () => {
 
 const AssistantDialogWithProviders = () => {
   return (
-    <AssistantProvider>
-      <AssistantDialog />
-    </AssistantProvider>
+    <CozyTheme variant="normal">
+      <AssistantProvider>
+        <AssistantDialog />
+      </AssistantProvider>
+    </CozyTheme>
   )
 }
 

diff --git a/src/assistant/Views/SearchDialog.jsx b/src/assistant/Views/SearchDialog.jsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 
 import flag from 'cozy-flags'
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 
 import SearchProvider from '../Search/SearchProvider'
 import AssistantProvider, { useAssistant } from '../AssistantProvider'
@@ -54,11 +55,13 @@ const SearchDialog = () => {
 
 const SearchDialogWithProviders = () => {
   return (
-    <AssistantProvider>
-      <SearchProvider>
-        <SearchDialog />
-      </SearchProvider>
-    </AssistantProvider>
+    <CozyTheme variant="normal">
+      <AssistantProvider>
+        <SearchProvider>
+          <SearchDialog />
+        </SearchProvider>
+      </AssistantProvider>
+    </CozyTheme>
   )
 }