From d7111e84f4d50faecb7d5146babaee591df31aff Mon Sep 17 00:00:00 2001
From: Jannik Streek <jannik.streek@gmail.com>
Date: Fri, 12 Jan 2024 19:02:14 +0100
Subject: [PATCH] make active filter in mobile visible

---
 frontend/src/live-chart/TextInputForm.tsx             | 2 +-
 frontend/src/shared/components/AdminOptionToolbar.tsx | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/live-chart/TextInputForm.tsx b/frontend/src/live-chart/TextInputForm.tsx
index 6a196d4..c9e841a 100644
--- a/frontend/src/live-chart/TextInputForm.tsx
+++ b/frontend/src/live-chart/TextInputForm.tsx
@@ -97,7 +97,7 @@ function TextInputForm(): React.ReactElement {
           <div className="d-flex w-full">
             <div className="flex-grow-1">{`${remainingTextInput} / ${MAX_LENGTH}`}</div>
             <div>
-              <Button type="submit" variant="primary" className="mt-1">
+              <Button type="submit" variant="secondary" className="mt-1 text-white">
                 <FormattedMessage
                   id="live.text.button.submit"
                   defaultMessage="Add Text"
diff --git a/frontend/src/shared/components/AdminOptionToolbar.tsx b/frontend/src/shared/components/AdminOptionToolbar.tsx
index 5482a8b..770ff53 100644
--- a/frontend/src/shared/components/AdminOptionToolbar.tsx
+++ b/frontend/src/shared/components/AdminOptionToolbar.tsx
@@ -13,7 +13,7 @@ interface AdminOptionToolbarProps {
   id: string | undefined
   adminId: string | undefined
   language?: string | undefined
-  filterFromServer?: string[] | undefined
+  filterFromServer?: string[]
   setWordFilter?: ((wordFilter: string[]) => void) | undefined
   setColorThemeGrey?: () => void
   setColorThemeFancy?: () => void
@@ -79,8 +79,12 @@ export function AdminOptionToolbar({ id, adminId, language, filterFromServer, se
   }
 
   const createCategoryFiltersForSmScreens = (): React.ReactNode[] => {
+    if (filterFromServer === undefined) return [<Dropdown.Item key={'filter-empty'}></Dropdown.Item>]
+
+    const normalizedFilterList = filterFromServer !== null && filterFromServer.length > 0 ? filterFromServer : ['all']
+
     return ['all', ...ALL_CATEGORIES].map((categoryName: string, index: number) => {
-      return (<Dropdown.Item key={`filter-sm-category-id-${index}`} variant="" onClick={(event) => handleFilterClick(categoryName)}>
+      return (<Dropdown.Item key={`filter-sm-category-id-${index}`} active={normalizedFilterList.includes(categoryName)} variant="" onClick={(event) => handleFilterClick(categoryName)}>
         <FormattedMessage
           id={`toolbar.buttons.dropdown.filter.${categoryName}`}
           defaultMessage={categoryName}