@tactics/toddle-styleguide 1.1.2 → 1.1.4

package/App.tsx

@@ -65,6 +65,7 @@ import {ModalPreview} from './src/components/templates/modal/modal.preview';
 import {LoadingIndicatorPreview} from './src/components/organisms/loading-indicator/loading-indicator.preview';
 import {WaveBackgroundPreview} from './src/components/molecules/wave-background/wave.preview';
 import {ToddleDateTimePreview} from './src/utilities/toddle-datetime/toddle-datetime.preview';
+import {BackgroundGradientPreview} from './src/components/atoms/background-gradient/background-gradient.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -250,6 +251,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Toddle DateTime"
         onPress={() => navigation.push('toddle-datetime')}
       />
+      <ReactBtn
+        title="Gradient background"
+        onPress={() => navigation.push('background-gradient')}
+      />
     </ScrollView>
   );
 };
@@ -410,6 +415,12 @@ function App() {
           <Stack.Screen name="toddle-datetime" options={{headerShown: false}}>
             {() => <ToddleDateTimePreview />}
           </Stack.Screen>
+          <Stack.Screen
+            name="background-gradient"
+            options={{headerShown: false}}
+          >
+            {() => <BackgroundGradientPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -50,6 +50,7 @@ import { LanguageButton } from './src/components/molecules/language-button/langu
 import { Modal } from './src/components/templates/modal/modal.component';
 import { LoadingIndicator } from './src/components/organisms/loading-indicator/loading-indicator.component';
 import { WaveBackground } from './src/components/molecules/wave-background/wave.component';
+import { BackgroundGradient } from './src/components/atoms/background-gradient/background-gradient.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -58,4 +59,5 @@ import { Initials } from './src/models/initials.model';
 import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.class';
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
-export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, MoreInfoButton, LanguageButton, Modal, LoadingIndicator, WaveBackground, };
+import CreateResponsiveStyle from './src/theme/responsive/index';
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, CreateResponsiveStyle, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, MoreInfoButton, LanguageButton, Modal, LoadingIndicator, WaveBackground, BackgroundGradient, };

package/index.tsx

@@ -68,6 +68,7 @@ import {LanguageButton} from './src/components/molecules/language-button/languag
 import {Modal} from './src/components/templates/modal/modal.component';
 import {LoadingIndicator} from './src/components/organisms/loading-indicator/loading-indicator.component';
 import {WaveBackground} from './src/components/molecules/wave-background/wave.component';
+import {BackgroundGradient} from './src/components/atoms/background-gradient/background-gradient.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -87,12 +88,16 @@ import {ThemeCtx} from './src/context/theme.context';
 //Export of Theme
 import {Scale} from './src/theme/scale/index';
 
+// Export of responsive style
+import CreateResponsiveStyle from './src/theme/responsive/index';
+
 export {
   Initials,
   BubbleAlignment,
   KeyBoardTypes,
   Size,
   Scale,
+  CreateResponsiveStyle,
   VisualState,
   ThemeCtx,
   ToddleDateTime,
@@ -152,4 +157,5 @@ export {
   Modal,
   LoadingIndicator,
   WaveBackground,
+  BackgroundGradient,
 };

package/package.json

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

package/src/components/atoms/background-gradient/__snapshots__/background-gradient.test.js.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test gradient background should render a gradient background 1`] = `
+<ViewManagerAdapter_ExpoLinearGradient
+  proxiedProperties={
+    {
+      "colors": [
+        4281681564,
+        4284775115,
+        4284775115,
+      ],
+      "endPoint": [
+        0.9,
+        0.9,
+      ],
+      "locations": [
+        0,
+        0.55,
+        1,
+      ],
+      "startPoint": [
+        0.1,
+        0.1,
+      ],
+    }
+  }
+  style={
+    {
+      "height": "100%",
+      "position": "absolute",
+      "width": "100%",
+      "zIndex": -1,
+    }
+  }
+/>
+`;

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

@@ -0,0 +1 @@
+export declare const BackgroundGradient: () => JSX.Element;

package/src/components/atoms/background-gradient/background-gradient.component.tsx

@@ -0,0 +1,19 @@
+import React, {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {LinearGradient} from 'expo-linear-gradient';
+import {Stylesheet} from './background-gradient.styles';
+
+export const BackgroundGradient = () => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet();
+
+  return (
+    <LinearGradient
+      start={{x: 0.1, y: 0.1}}
+      end={{x: 0.9, y: 0.9}}
+      locations={[0, 0.55, 1]}
+      colors={Context.colors.gradient['1']}
+      style={styles.rootContainer}
+    />
+  );
+};

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

@@ -0,0 +1 @@
+export declare const BackgroundGradientPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/background-gradient/background-gradient.preview.tsx

@@ -0,0 +1,77 @@
+import React, {useContext, useState} from 'react';
+import {SafeAreaView, View, Platform, StatusBar} from 'react-native';
+import {Logo} from '../logo/logo.component';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Heading1, Heading4} from '../heading-components';
+import {Paragraph} from '../paragraph-components';
+import {SelectPicker} from '../../molecules/select-picker/select-picker.component';
+import {BackgroundGradient} from './background-gradient.component';
+
+export const BackgroundGradientPreview = ({}: {}) => {
+  const regions = [
+    {value: 'Leuven', label: 'Leuven'},
+    {value: 'Brussel', label: 'Brussel'},
+    {value: 'Antwerpen', label: 'Antwerpen'},
+  ];
+  const [selectedRegion, setSelectedRegion] = useState('');
+  const Context = useContext(ThemeCtx);
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+      }}
+    >
+      <BackgroundGradient />
+      <View
+        style={{
+          width: '100%',
+          height: '100%',
+          paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+          paddingLeft: 16,
+          paddingRight: 16,
+        }}
+      >
+        <View
+          style={{
+            marginTop: 16 * 3.5,
+            marginBottom: 16 * 5.5,
+            alignItems: 'center',
+          }}
+        >
+          <Logo big={true} colorIsWhite={true} />
+        </View>
+
+        <View>
+          <Heading1
+            bold={true}
+            textColor={Context.colors.ui.white}
+            textAlign={'left'}
+            addStyle={{marginBottom: 64}}
+          >
+            Welkom,
+          </Heading1>
+          <Heading4
+            bold={true}
+            textColor={Context.colors.ui.white}
+            addStyle={{marginBottom: 8}}
+          >
+            Regio
+          </Heading4>
+          <Paragraph
+            textColor={Context.colors.ui.white}
+            addStyle={{marginBottom: 16}}
+          >
+            Deze krijgt u toegestuurd van het kinderdagverblijf bij de start van
+            uw opvangtraject.
+          </Paragraph>
+          <SelectPicker
+            placeholder={'Choose your region'}
+            data={regions}
+            onChange={setSelectedRegion}
+            defaultValue={selectedRegion}
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};

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

@@ -0,0 +1,8 @@
+export function Stylesheet(): {
+  rootContainer: {
+    width: string;
+    height: string;
+    position: 'absolute';
+    zIndex: number;
+  };
+};

package/src/components/atoms/background-gradient/background-gradient.styles.js

@@ -0,0 +1,11 @@
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    rootContainer: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      zIndex: -1,
+    },
+  });

package/src/components/atoms/background-gradient/background-gradient.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {BackgroundGradient} from './background-gradient.component';
+
+describe('test gradient background', () => {
+  it('should render a gradient background', () => {
+    const tree = render.create(<BackgroundGradient />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -1960,7 +1960,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 17 Maart 2023 "
+            accessibilityLabel=" Vrijdag 17 Maart 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1992,10 +1992,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,
@@ -2015,9 +2011,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -2797,7 +2790,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 27 Maart 2023 "
+            accessibilityLabel="today Maandag 27 Maart 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2829,6 +2822,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,
@@ -2848,6 +2845,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -5357,8 +5357,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 17 Maart 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Vrijdag 17 Maart 2023 "
             accessibilityState={
               {
                 "busy": undefined,
@@ -5389,10 +5388,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,
@@ -5413,7 +5408,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -6212,7 +6207,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 27 Maart 2023 "
+            accessibilityLabel="today Maandag 27 Maart 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -6243,6 +6239,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,
@@ -6263,7 +6263,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

package/src/components/molecules/contact-role/__snapshots__/contact-role.test.js.snap

@@ -21,7 +21,7 @@ exports[`Contact role component test renders a contact who is the father 1`] = `
         ],
         {
           "color": "#1F2933",
-          "textAlign": undefined,
+          "textAlign": "center",
           "width": "100%",
         },
         {
@@ -44,7 +44,7 @@ exports[`Contact role component test renders a contact who is the father 1`] = `
         ],
         {
           "color": "#1F2933",
-          "textAlign": undefined,
+          "textAlign": "center",
           "width": "100%",
         },
         undefined,
@@ -77,7 +77,7 @@ exports[`Contact role component test renders a contact who is the sister 1`] = `
         ],
         {
           "color": "#1F2933",
-          "textAlign": undefined,
+          "textAlign": "center",
           "width": "100%",
         },
         {
@@ -100,7 +100,7 @@ exports[`Contact role component test renders a contact who is the sister 1`] = `
         ],
         {
           "color": "#1F2933",
-          "textAlign": undefined,
+          "textAlign": "center",
           "width": "100%",
         },
         undefined,

package/src/components/molecules/contact-role/contact-role.component.tsx

@@ -14,10 +14,10 @@ export const ContactRole = ({name, role}: ContactRoleProps) => {
 
   return (
     <View style={styles.container}>
-      <Heading2 bold={true} addStyle={styles.name}>
+      <Heading2 bold={true} textAlign={'center'} addStyle={styles.name}>
         {name}
       </Heading2>
-      <SmallText>{role}</SmallText>
+      <SmallText textAlign={'center'}>{role}</SmallText>
     </View>
   );
 };

package/src/components/molecules/time-tracker/time-tracker.component.d.ts

@@ -1,8 +1,9 @@
+import * as React from 'react';
 import { VisualState } from '../../../types/visual-state.enum';
 type TimeTrackerProps = {
     text: string;
     textColor?: string;
     visualState: VisualState;
 };
-declare const TimeTracker: ({ text, visualState, textColor }: TimeTrackerProps) => JSX.Element;
+declare const TimeTracker: React.MemoExoticComponent<({ text, visualState, textColor }: TimeTrackerProps) => JSX.Element>;
 export { TimeTracker as TimeTracker };

package/src/components/molecules/time-tracker/time-tracker.component.tsx

@@ -13,18 +13,28 @@ type TimeTrackerProps = {
   visualState: VisualState;
 };
 
-const TimeTracker = ({text, visualState, textColor}: TimeTrackerProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context, visualState);
+const TimeTracker = React.memo(
+  ({text, visualState, textColor}: TimeTrackerProps) => {
+    const context = useContext(ThemeCtx);
+    const styles = Stylesheet(context, visualState);
 
-  return (
-    <View style={styles.container}>
-      <View style={styles.bal} />
-      <View>
-        <TinyText textColor={textColor}>{text}</TinyText>
+    return (
+      <View style={styles.container}>
+        <View style={styles.bal} />
+        <View>
+          <TinyText textColor={textColor}>{text}</TinyText>
+        </View>
       </View>
-    </View>
-  );
-};
+    );
+  },
+  (prevProps, nextProps) => {
+    //Compare props and return true if the component should update
+    return (
+      prevProps.text !== nextProps.text ||
+      prevProps.visualState !== nextProps.visualState ||
+      prevProps.textColor !== nextProps.textColor
+    );
+  }
+);
 
 export {TimeTracker as TimeTracker};

package/src/components/organisms/child-list-item/child-list-item.component.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ImageSourcePropType } from 'react-native';
 import { Initials } from '../../../models/initials.model';
 import { VisualState } from '../../../types/visual-state.enum';
@@ -14,5 +15,5 @@ type ChildListItemProps = {
     textTimeTracker: string;
     visualStateTimeTracker: VisualState;
 };
-declare const ChildListItem: ({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, }: ChildListItemProps) => JSX.Element;
+declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, }: ChildListItemProps) => JSX.Element>;
 export { ChildListItem as ChildListItem };

package/src/components/organisms/child-list-item/child-list-item.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useContext} from 'react';
+import {useCallback, useContext, useMemo} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {ImageSourcePropType, Pressable, View} from 'react-native';
@@ -27,65 +27,71 @@ type ChildListItemProps = {
   visualStateTimeTracker: VisualState;
 };
 
-const ChildListItem = ({
-  id,
-  name,
-  department,
-  selectable,
-  isSelected,
-  onPressArrow,
-  onPressText,
-  onSelect,
-  sourceAvatar,
-  textTimeTracker,
-  visualStateTimeTracker,
-}: ChildListItemProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(isSelected, context);
+const ChildListItem = React.memo(
+  ({
+    id,
+    name,
+    department,
+    selectable,
+    isSelected,
+    onPressArrow,
+    onPressText,
+    onSelect,
+    sourceAvatar,
+    textTimeTracker,
+    visualStateTimeTracker,
+  }: ChildListItemProps) => {
+    const context = useContext(ThemeCtx);
+    const styles = Stylesheet(isSelected, context);
 
-  const onPressSelectable = () => {
-    selectable ? onSelect(id) : onPressText(id);
-  };
+    const onPressSelectable = useCallback(() => {
+      selectable ? onSelect(id) : onPressText(id);
+    }, [id, onPressText, onSelect, selectable]);
 
-  return (
-    <View style={styles.container}>
-      <Pressable onPress={onPressSelectable} style={styles.innerContainer}>
-        <Avatar source={sourceAvatar} size={Size.MEDIUM} />
-        <View style={styles.pressableText}>
-          <View style={styles.trackerContainer}>
-            <TimeTracker
-              text={textTimeTracker}
-              visualState={visualStateTimeTracker}
-              textColor={
-                isSelected ? context.colors.ui.white : context.colors.ui.black
-              }
-            />
-          </View>
-          <View>
-            <Heading2
-              bold={true}
-              numberOfLines={1}
-              ellipsizeMode={'tail'}
-              textColor={
-                isSelected ? context.colors.ui.white : context.colors.ui.black
-              }
-            >
-              {name}
-            </Heading2>
-            <SmallText
-              textColor={
-                isSelected ? context.colors.ui.white : context.colors.ui.black
-              }
-            >
-              {department}
-            </SmallText>
+    const onPressArrowCallback = useCallback(() => {
+      onPressArrow(id);
+    }, [id, onPressArrow]);
+
+    const textColor = useMemo(() => {
+      return isSelected ? context.colors.ui.white : context.colors.ui.black;
+    }, [isSelected]);
+
+    return (
+      <View style={styles.container}>
+        <Pressable onPress={onPressSelectable} style={styles.innerContainer}>
+          <Avatar source={sourceAvatar} size={Size.MEDIUM} />
+          <View style={styles.pressableText}>
+            <View style={styles.trackerContainer}>
+              <TimeTracker
+                text={textTimeTracker}
+                visualState={visualStateTimeTracker}
+                textColor={textColor}
+              />
+            </View>
+            <View>
+              <Heading2
+                bold={true}
+                numberOfLines={1}
+                ellipsizeMode={'tail'}
+                textColor={
+                  isSelected ? context.colors.ui.white : context.colors.ui.black
+                }
+              >
+                {name}
+              </Heading2>
+              <SmallText
+                textColor={
+                  isSelected ? context.colors.ui.white : context.colors.ui.black
+                }
+              >
+                {department}
+              </SmallText>
+            </View>
           </View>
-        </View>
-      </Pressable>
-      <>
-        {!selectable ? (
+        </Pressable>
+        {!selectable && (
           <Pressable
-            onPress={() => onPressArrow(id)}
+            onPress={onPressArrowCallback}
             style={styles.iconContainer}
           >
             <Icon
@@ -95,9 +101,9 @@ const ChildListItem = ({
               color={context.colors.ui.black}
             />
           </Pressable>
-        ) : null}
-      </>
-    </View>
-  );
-};
+        )}
+      </View>
+    );
+  }
+);
 export {ChildListItem as ChildListItem};

package/src/components/organisms/day-select/day-select.component.tsx

@@ -67,8 +67,8 @@ const DaySelect = ({onSelectDate, selectedDate, startDate}: DaySelectProps) => {
     });
 
   const composedGesture = Gesture.Simultaneous(
-    flingLeftGesture,
-    flingRightGesture
+    flingLeftGesture.runOnJS(true),
+    flingRightGesture.runOnJS(true)
   );
 
   return (

package/src/context/theme.context.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 interface ThemeInterface {
     colors: {
-        gradient: Array<string>;
+        gradient: {
+            1: string[];
+            0: string[];
+        };
         main: {
             9: string;
             8: string;

package/src/context/theme.context.ts

@@ -3,7 +3,10 @@ import {StaffMemberTheme} from '../theme/provider';
 
 interface ThemeInterface {
   colors: {
-    gradient: Array<string>;
+    gradient: {
+      1: string[];
+      0: string[];
+    };
     main: {
       9: string;
       8: string;

package/src/gradients/main/main.gradient.tsx

@@ -18,7 +18,7 @@ export const MainGradient = ({isActive = true}: MainGradientProps) => {
       start={{x: 0.1, y: 0.1}}
       end={{x: 0.9, y: 0.9}}
       locations={[0, 0.55, 1]}
-      colors={Context.colors.gradient}
+      colors={Context.colors.gradient['0']}
       style={styles.container}
     />
   ) : (

package/src/theme/provider/staff-member.theme.d.ts

@@ -1,6 +1,9 @@
 export declare const StaffMemberTheme: {
     colors: {
-        gradient: string[];
+        gradient: {
+            1: string[];
+            0: string[];
+        };
         main: {
             9: string;
             8: string;

package/src/theme/provider/staff-member.theme.ts

@@ -2,7 +2,10 @@ import {Colors} from '@tactics/kinderopvang-branding';
 
 export const StaffMemberTheme = {
   colors: {
-    gradient: [Colors.secondary[2], Colors.secondary[5], Colors.tertiary[4]],
+    gradient: {
+      1: [Colors.secondary[2], Colors.secondary[5], Colors.secondary[5]],
+      0: [Colors.secondary[2], Colors.secondary[5], Colors.tertiary[4]],
+    },
     main: {
       9: Colors.secondary[9],
       8: Colors.secondary[8],

package/src/theme/responsive/index.d.ts

@@ -0,0 +1,2 @@
+import { ScaledSize, StyleProp, StyleSheet } from 'react-native';
+export default function CreateResponsiveStyle<T, U extends Partial<T>>(mobileStyles: StyleSheet.NamedStyles<T>, tabletStyles: StyleSheet.NamedStyles<U>): (layout: ScaledSize) => (style: keyof T) => StyleProp<any>;

package/src/theme/responsive/index.ts

@@ -0,0 +1,17 @@
+import {ScaledSize, StyleProp, StyleSheet} from 'react-native';
+
+export default function CreateResponsiveStyle<T, U extends Partial<T>>(
+  mobileStyles: StyleSheet.NamedStyles<T>,
+  tabletStyles: StyleSheet.NamedStyles<U>
+) {
+  const mobile = StyleSheet.create<StyleSheet.NamedStyles<T>>(mobileStyles);
+  const tablet = StyleSheet.create<StyleSheet.NamedStyles<U>>(tabletStyles);
+
+  // Return a function that combines wraps web and mobile styles
+  return (layout: ScaledSize) =>
+    (style: keyof T): StyleProp<any> => {
+      if (layout.width > 768 && tablet.hasOwnProperty(style)) {
+        return StyleSheet.compose(mobile[style], tablet[style]);
+      } else return mobile[style];
+    };
+}