@tactics/toddle-styleguide 1.2.0 → 1.2.1

package/App.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import 'intl';
 import 'intl/locale-data/jsonp/en';
 declare function App(): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/atoms/animated-wave/animated-wave.component.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const AnimatedWave: () => JSX.Element;

package/src/components/atoms/backdrop/backdrop.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type PopoverBackdropProps = {
     isVisible: boolean;
 };

package/src/components/atoms/background-gradient/background-gradient.component.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const BackgroundGradient: () => JSX.Element;

package/src/components/atoms/background-gradient/background-gradient.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const BackgroundGradientPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/calendar/__snapshots__/calendar.test.js.snap

@@ -1065,7 +1065,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Maandag 3 April 2023 "
+            accessibilityLabel=" Maandag 3 April 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1097,10 +1097,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1120,9 +1116,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -1153,7 +1146,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Dinsdag 4 April 2023 "
+            accessibilityLabel="today Dinsdag 4 April 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1185,6 +1178,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1204,6 +1201,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -4436,8 +4436,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Maandag 3 April 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Maandag 3 April 2023 "
             accessibilityState={
               {
                 "busy": undefined,
@@ -4468,10 +4467,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -4492,7 +4487,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -4524,7 +4519,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Dinsdag 4 April 2023 "
+            accessibilityLabel="today Dinsdag 4 April 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4555,6 +4551,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -4575,7 +4575,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

package/src/components/atoms/calendar/calendar.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type CalendarProps = {
     onDayPress: (day: ToddleDateTime) => void;

package/src/components/atoms/calendar/calendar.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const CalendarPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/check-switch/check-switch.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type CheckProps = {
     value: boolean;
     onToggle: () => void;

package/src/components/atoms/check-switch/check-switch.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const CheckPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/footer/footer.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const FooterPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/footer/footer.styles.js

@@ -6,8 +6,9 @@ export const Stylesheet = (context) =>
   StyleSheet.create({
     container: {
       flexDirection: 'row',
-      alignItems: 'center',
+      alignItems: Platform.OS === 'android' ? 'center' : 'flex-start',
       justifyContent: 'center',
+      paddingTop: Platform.OS === 'android' ? 0 : Scale.m,
       backgroundColor: context.colors.ui.xlightgrey,
       borderTopColor: context.colors.ui.lightgrey,
       borderStyle: 'solid',

package/src/components/atoms/heading-components/all-caps-heading/all-caps-heading.component.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TextProperties } from '../../../../types/text-properties.type';
 export declare const AllCapsHeading: ({ bold, children, textColor, textAlign, numberOfLines, ellipsizeMode, addStyle, }: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading1/heading1.component.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TextProperties } from '../../../../types/text-properties.type';
 export declare const Heading1: ({ bold, children, textColor, textAlign, addStyle, ellipsizeMode, numberOfLines, }: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading2/heading2.component.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TextProperties } from '../../../../types/text-properties.type';
 export declare const Heading2: ({ bold, children, textColor, textAlign, numberOfLines, ellipsizeMode, addStyle, }: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading3/heading3.component.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TextProperties } from '../../../../types/text-properties.type';
 export declare const Heading3: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading4/heading4.component.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TextProperties } from '../../../../types/text-properties.type';
 export declare const Heading4: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/headings.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const HeadingsPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/image-bubble/image-bubble.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ImageSourcePropType } from 'react-native';
 import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
 type ImageBubbleProps = {

package/src/components/atoms/image-bubble/image-bubble.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ImageBubblePreview: ({}: {}) => JSX.Element;

package/src/components/atoms/increment-input/increment-input.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type IncrementInputProps = {
     value: number;
     maxValue?: number;

package/src/components/atoms/increment-input/increment-input.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const IncrementInputPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/logo/logo.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type logoProps = {
     colorIsWhite?: boolean;
     big?: boolean;

package/src/components/atoms/logo/logo.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const LogoPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/paragraph-components/paragraph/paragraph.component.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TextProperties } from '../../../../types/text-properties.type';
 export declare const Paragraph: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => JSX.Element;

package/src/components/atoms/paragraph-components/paragraph-components.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ParagraphComponentsPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/paragraph-components/small-text/small-text.component.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TextProperties } from '../../../../types/text-properties.type';
 export declare const SmallText: ({ bold, textColor, textAlign, children, addStyle, ellipsizeMode, numberOfLines, }: TextProperties) => JSX.Element;

package/src/components/atoms/paragraph-components/tiny-text/tiny-text.component.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TextProperties } from '../../../../types/text-properties.type';
 export declare const TinyText: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => JSX.Element;

package/src/components/atoms/split-container/split-container.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SplitContainerPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/static-wave/static-wave.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ViewStyle } from 'react-native';
 export type WaveProps = {
     customStyle?: ViewStyle;

package/src/components/atoms/text-input/text-input.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
 type TextInputProps = {
     placeholder?: string;

package/src/components/atoms/text-input/text-input.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const TextInputPreview: ({}?: {}) => JSX.Element;

package/src/components/molecules/avatar/avatar.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ImageSourcePropType } from 'react-native';
 import { Size } from '../../../types/size.enum';
 import { Initials } from '../../../models/initials.model';
@@ -6,6 +7,7 @@ type AvatarProps = {
     size: Size;
     isBlocked?: boolean;
     isActive?: boolean;
+    isLoading?: boolean;
 };
-declare const Avatar: ({ source, size, isBlocked, isActive }: AvatarProps) => JSX.Element;
+declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, }: AvatarProps) => JSX.Element;
 export { Avatar as Avatar };

package/src/components/molecules/avatar/avatar.component.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react';
 import {useContext} from 'react';
 
-import {Image, ImageSourcePropType, ImageStyle, View} from 'react-native';
+import {
+  ActivityIndicator,
+  Image,
+  ImageSourcePropType,
+  ImageStyle,
+  View,
+} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './avatar.styles';
 import {Size} from '../../../types/size.enum';
@@ -14,9 +20,16 @@ type AvatarProps = {
   size: Size;
   isBlocked?: boolean;
   isActive?: boolean;
+  isLoading?: boolean;
 };
 
-const Avatar = ({source, size, isBlocked, isActive = true}: AvatarProps) => {
+const Avatar = ({
+  source,
+  size,
+  isBlocked,
+  isActive = true,
+  isLoading,
+}: AvatarProps) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, size, isBlocked, isActive);
 
@@ -56,7 +69,17 @@ const Avatar = ({source, size, isBlocked, isActive = true}: AvatarProps) => {
   };
 
   return source instanceof Initials ? (
-    <View style={styles.container}>{renderText(size)}</View>
+    <View style={styles.container}>
+      {isLoading ? (
+        <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
+      ) : (
+        renderText(size)
+      )}
+    </View>
+  ) : isLoading ? (
+    <View style={styles.container}>
+      <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
+    </View>
   ) : (
     <View style={styles.container}>
       {!isBlocked ? <MainGradient isActive={isActive} /> : null}

package/src/components/molecules/avatar/avatar.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const AvatarPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/blocked-message/blocked-message.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type BlockedMessageProps = {
     message: string;
 };

package/src/components/molecules/blocked-message/blocked-message.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const BlockedMessagePreview: ({}: {}) => JSX.Element;

package/src/components/molecules/button/button.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconNameType, IconStyleType } from '../../../types/icontype.type';
 type ButtonProps = {
     label: string;

package/src/components/molecules/button/button.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ButtonPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/calendar-select/calendar-select.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type CalendarSelectProps = {
     onPressDate: (date: ToddleDateTime) => void;

package/src/components/molecules/calendar-select/calendar-select.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const CalendarSelectPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/cancel-link/cancel-link.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type CancelLinkProps = {
     label: string;
     onPress: () => void;

package/src/components/molecules/cancel-link/cancel-link.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const CancelLinkPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/checkbox/checkbox.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type CheckboxProps = {
     value: boolean;
     onValueChange: () => void;

package/src/components/molecules/checkbox/checkbox.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const CheckboxPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/contact-role/contact-role.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type ContactRoleProps = {
     name: string;
     role?: string;

package/src/components/molecules/contact-role/contact-role.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ContactRolePreview: ({}: {}) => JSX.Element;

package/src/components/molecules/date-input/date-input.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type DateInputProps = {
     onPress: () => void;

package/src/components/molecules/date-input/date-input.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const DateInputPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/day/day.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type DayProps = {
     date: ToddleDateTime;

package/src/components/molecules/default-select/default-select.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type DefaultSelectProps = {
     label: string;
     onPress: () => void;

package/src/components/molecules/default-select/default-select.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const DefaultSelectPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/department_logo/department-logo.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type DepartmentLogoProps = {
     department: string;
 };

package/src/components/molecules/department_logo/department-logo.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const DepartmentLogoPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/failed-to-send/failed-bubble.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type FailedBubbleProps = {
     text: string;
     onPressRefresh: () => void;

package/src/components/molecules/filter-range/__snapshots__/filter-range.test.js.snap

@@ -13,7 +13,6 @@ exports[`Filter range test renders a filter range slider 1`] = `
     animationType="timing"
     onLayout={[Function]}
     onValueChange={[Function]}
-    step={1}
     style={
       [
         {
@@ -52,6 +51,7 @@ exports[`Filter range test renders a filter range slider 1`] = `
             "borderRadius": 50,
             "height": 8,
           },
+          undefined,
         ]
       }
     />

package/src/components/molecules/filter-range/filter-range.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type FilterRangeProps = {
     value: number | number[];
     onChange: (value: number | number[]) => void;

package/src/components/molecules/filter-range/filter-range.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const FilterRangePreview: ({}: {}) => JSX.Element;

package/src/components/molecules/filter-tab/filter-tab.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type FilterTab = {
     tabItem: {
         value: string;

package/src/components/molecules/filter-tab/filter-tab.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const FilterTabPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/info/info.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type InfoProps = {
     label: string;
     description: string;

package/src/components/molecules/info/info.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const InfoPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/language-button/language-button.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type LanguageButtonProps = {
     label: string;
     onPress?: () => void;

package/src/components/molecules/language-button/language-button.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const LanguageButtonPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/message-input/message-input.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
 type MessageInputProps = {
     placeholder?: string;

package/src/components/molecules/message-input/message-input.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const MessageInputPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/more-info-button/more-info-button.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type MoreInfoButtonProps = {
     label: string;
     onPress?: () => void;

package/src/components/molecules/more-info-button/more-info-button.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const MoreInfoButtonPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/password-input/password-input.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
 type PasswordInputProps = {
     placeholder?: string;

package/src/components/molecules/password-input/password-input.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PasswordInputPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/pill/pill.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VisualState } from '../../../types/visual-state.enum';
 type PillProps = {
     visualState: VisualState;

package/src/components/molecules/pill/pill.component.tsx

@@ -6,7 +6,7 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './pill.styles';
 import {VisualState} from '../../../types/visual-state.enum';
 import {TinyText} from '../../atoms/paragraph-components';
-import {TextColorHandler} from '../../../utilities/text-color-handler/text-color-handler';
+import {TextColorHandler} from '../../../utilities/color-handler/color-handler';
 
 type PillProps = {
   visualState: VisualState;

package/src/components/molecules/pill/pill.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PillPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/pressable-icon/pressable-icon.preview.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PressableIconPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/quick-filter/quick-filter.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VisualState } from '../../../types/visual-state.enum';
 type QuickFilterProps = {
     id: string;

package/src/components/molecules/quick-filter/quick-filter.component.tsx

@@ -6,7 +6,7 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {VisualState} from '../../../types/visual-state.enum';
 import {Stylesheet} from './quick-filter.styles';
 import {Paragraph} from '../../atoms/paragraph-components';
-import {TextColorHandler} from '../../../utilities/text-color-handler/text-color-handler';
+import {TextColorHandler} from '../../../utilities/color-handler/color-handler';
 
 type QuickFilterProps = {
   id: string;
@@ -31,7 +31,9 @@ const QuickFilter = ({
   return (
     <Pressable onPress={() => onSelect(id)} style={styles.container}>
       {isLoading ? (
-        <ActivityIndicator color={TextColorHandler(visualState, isLoading)} />
+        <ActivityIndicator
+          color={TextColorHandler(visualState, isSelected, isLoading)}
+        />
       ) : (
         <Paragraph
           bold={true}