wip : change infomaniak implementation

Infomaniak · Sep 9, 2024 · 5668512 · 5668512
1 parent 27fa510
commit 5668512
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 108 deletions.
diff --git a/webapp/channels/src/components/common/svg_images_components/index.ts b/webapp/channels/src/components/common/svg_images_components/index.ts
@@ -9,5 +9,4 @@ export {PinSVG} from './pin_svg';
 export {ChannelFilesSVG} from './channel_files_svg';
 export {UserGroupsSVG} from './user_groups_svg';
 export {UserGroupMembersSVG} from './user_groups_members_svg';
-export {InfomaniakChannelSearchLightSvg} from './infomaniak_channel_search_light_svg';
-export {InfomaniakChannelSearchDarkSvg} from './infomaniak_channel_search_dark_svg';
+export {InfomaniakChannelSearchSvg} from './infomaniak_channel_search_svg';
diff --git a/...annels/src/components/common/svg_images_components/infomaniak_channel_search_dark_svg.tsx b/...annels/src/components/common/svg_images_components/infomaniak_channel_search_dark_svg.tsx
diff --git a/...s/infomaniak_channel_search_light_svg.tsx → ...ponents/infomaniak_channel_search_svg.tsx b/...s/infomaniak_channel_search_light_svg.tsx → ...ponents/infomaniak_channel_search_svg.tsx
@@ -1,10 +1,7 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
+import React from "react";
+import { useIntl } from "react-intl";
 
-import React from 'react';
-import {useIntl} from 'react-intl';
-
-export function InfomaniakChannelSearchLightSvg(props: React.HTMLAttributes<HTMLSpanElement>) {
+export function InfomaniakChannelSearchSvg(props: React.HTMLAttributes<HTMLSpanElement>) {
     const {formatMessage} = useIntl();
     return (
         <span {...props}>
@@ -19,36 +16,35 @@ export function InfomaniakChannelSearchLightSvg(props: React.HTMLAttributes<HTML
                 <g clipPath='url(#clip0_5407_2941)'>
                     <path
                         d='M4.04124 25.8945H96.0783C98.3103 25.8945 100.12 27.7039 100.12 29.9358V93.7862C100.12 96.0181 98.3103 97.8275 96.0783 97.8275H35.9673L17.3404 117.671V97.8275H4.04124C1.8093 97.8275 -4.57764e-05 96.0181 -4.57764e-05 93.7862V29.9358C-4.57764e-05 27.7039 1.8093 25.8945 4.04124 25.8945Z'
-                        fill='#7BB4D1'
-                    />
+                        fill='#7BB4D1'                    />
                     <path
                         d='M131.645 107.609L93.7298 83.2319L100.463 72.7596L138.378 97.1371C139.766 98.0294 140.168 99.8779 139.275 101.266L135.773 106.712C134.881 108.1 133.033 108.502 131.645 107.609Z'
-                        fill='#F1F1F1'
-                        stroke='#9F9F9F'
+                        fill='var(--no-results-light)'
+                        stroke='var(--no-results-dark)'
                         strokeWidth='0.5'
                     />
                     <path
                         d='M93.0094 28.5154C111.317 40.2865 116.616 64.6703 104.845 82.9782C93.0742 101.286 68.6904 106.585 50.3826 94.8142C32.0747 83.0431 26.7756 58.6592 38.5466 40.3513C50.3177 22.0434 74.7015 16.7443 93.0094 28.5154Z'
-                        fill='#F5F5F5'
-                        stroke='#9F9F9F'
+                        fill='var(--ik-illustration-grey-1)'
+                        stroke='var(--no-results-dark)'
                         strokeWidth='0.5'
                     />
                     <path
                         d='M87.7562 36.6856C101.552 45.5557 105.545 63.9301 96.6752 77.726C87.8051 91.5219 69.4307 95.5151 55.6349 86.645C41.839 77.7749 37.8458 59.4005 46.7159 45.6046C55.586 31.8087 73.9604 27.8156 87.7562 36.6856Z'
-                        fill='#FAFAFA'
-                        stroke='#9F9F9F'
+                        fill='var(--ik-illustration-grey-4)'
+                        stroke='var(--no-results-dark)'
                         strokeWidth='0.5'
                     />
                     <path
                         d='M74.2181 41.0963C80.0412 44.8403 81.7266 52.5958 77.9827 58.4189C74.2388 64.2419 66.4832 65.9273 60.6602 62.1834C54.8372 58.4395 53.1517 50.6839 56.8956 44.8609C60.6396 39.0378 68.3951 37.3524 74.2181 41.0963Z'
-                        fill='white'
-                        stroke='#9F9F9F'
+                        fill='var(--ik-illustration-grey-2)'
+                        stroke='var(--no-results-dark)'
                         strokeWidth='0.5'
                     />
                     <path
                         d='M133.465 98.7907C134.477 99.4412 134.77 100.789 134.119 101.801C133.469 102.813 132.121 103.106 131.109 102.455C130.097 101.804 129.805 100.457 130.455 99.4448C131.106 98.433 132.453 98.1401 133.465 98.7907Z'
-                        fill='white'
-                        stroke='#9F9F9F'
+                        fill='var(--ik-illustration-grey-6)'
+                        stroke='var(--no-results-dark)'
                         strokeWidth='0.5'
                     />
                 </g>
@@ -62,7 +58,6 @@ export function InfomaniakChannelSearchLightSvg(props: React.HTMLAttributes<HTML
                     </clipPath>
                 </defs>
             </svg>
-
         </span>
     );
 }
diff --git a/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx b/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx
@@ -10,11 +10,10 @@ import {FormattedMessage} from 'react-intl';
 import ChannelFilesIcon from 'components/widgets/icons/channel_files_icon';
 import IKFlagIcon from 'components/widgets/icons/ik_flag_icon';
 import PinIcon from 'components/widgets/icons/pin_icon';
-import {SearchSVG, ChannelSearchSVG, MentionsSVG, SavedMessagesSVG, PinSVG, ChannelFilesSVG, UserGroupsSVG, UserGroupMembersSVG} from 'components/common/svg_images_components';
+import {SearchSVG, ChannelSearchSVG, MentionsSVG, SavedMessagesSVG, PinSVG, ChannelFilesSVG, UserGroupsSVG, UserGroupMembersSVG, InfomaniakChannelSearchSvg} from 'components/common/svg_images_components';
 
 import {t} from 'utils/i18n';
 
-import ThemedChannelSearchIcon from './theme_channel_search_icon';
 import {NoResultsVariant, NoResultsLayout} from './types';
 import './no_results_indicator.scss';
 
@@ -34,7 +33,7 @@ interface Props {
 
 const iconMap: {[key in NoResultsVariant]: React.ReactNode } = {
     [NoResultsVariant.Search]: <SearchSVG className='no-results__icon'/>,
-    [NoResultsVariant.ChannelSearch]: <ThemedChannelSearchIcon className='no-results__icon'/>, // Utilisation du composant thématisé
+    [NoResultsVariant.ChannelSearch]: <InfomaniakChannelSearchSvg className='no-results__icon'/>, // Utilisation du composant thématisé
     [NoResultsVariant.Files]: <ChannelFilesSVG className='no-results__icon'/>,
     [NoResultsVariant.Mentions]: <MentionsSVG className='no-results__icon'/>,
 

diff --git a/webapp/channels/src/components/no_results_indicator/theme_channel_search_icon.tsx b/webapp/channels/src/components/no_results_indicator/theme_channel_search_icon.tsx
diff --git a/webapp/channels/src/sass/base/_css_variables.scss b/webapp/channels/src/sass/base/_css_variables.scss
@@ -37,6 +37,8 @@
     --dark-modal-font-color:#fff;
     --code-color: #f80;
     --code-block-color: #fff;
+    --no-results-light: #F1F1F1
+    --no-results-dark: #9F9F9F
 
     // Default RGB values to be replaced by applyTheme() (do not add opacity mutations here)
     // these are define to prevent flashes of unstyled content