make active filter in mobile visible

kitsteam · Jan 12, 2024 · d7111e8 · d7111e8
1 parent cbf4fa0
commit d7111e8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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}