Define categorie color to each activity bar link

frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx

@@ -1,23 +1,55 @@
-import React from 'react';
 import SVG from 'react-inlinesvg';
+import getConfig from 'next/config';
+import styled from 'styled-components';
 
 import { optimizeAndDefineColor } from 'stylesheet';
 import { Link } from 'components/Link';
+import getActivityColor from 'components/pages/search/components/ResultCard/getActivityColor';
+import { ActivityFilter } from 'modules/activities/interface';
 
 interface Props {
   iconUrl: string;
   href: string;
   label: string;
+  type: ActivityFilter['type'];
 }
 
-export const ActivityButton: React.FC<Props> = ({ iconUrl, href, label }) => {
+const {
+  publicRuntimeConfig: { colors },
+} = getConfig();
+
+const getColor = (type: ActivityFilter['type']) => {
+  if (type === 'PRACTICE') {
+    return getActivityColor('practices');
+  }
+  if (type === 'OUTDOOR_PRACTICE') {
+    return getActivityColor('outdoorPractice');
+  }
+  if (type === 'CATEGORY') {
+    return getActivityColor('categories');
+  }
+  if (type === 'TOURISTIC_EVENT_TYPE') {
+    return getActivityColor('event');
+  }
+  return colors.primary3;
+};
+
+export const ActivityButton: React.FC<Props> = ({ iconUrl, href, label, type }) => {
   return (
-    <Link
+    <StyleLink
+      $color={getColor(type)}
       href={href}
-      className="flex flex-col items-center text-center mt-6 text-greyDarkColored bg-white transition hover:text-primary3 focus:text-primary3"
+      className={`flex flex-col items-center text-center mt-6 text-greyDarkColored bg-white transition`}
     >
       <SVG src={iconUrl} className="h-9 desktop:w-12" preProcessor={optimizeAndDefineColor()} />
       <span className="w-20 text-sm mt-2 text-ellipsis overflow-hidden">{label}</span>
-    </Link>
+    </StyleLink>
   );
 };
+
+const StyleLink = styled(Link)<{ $color?: string }>`
+  &:hover,
+  &:focus {
+    color: ${props => props.$color};
+  }
+`;

frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx

@@ -60,6 +60,7 @@ export const ActivitySearchFilter: React.FC<Props> = ({
                   ? intl.formatMessage({ id: activity.titleTranslationId })
                   : activity.label
               }
+              type={activity.type}
             />
           ))}
         </div>