@hero-design/rn 7.0.5 → 7.1.1

package/lib/index.js

@@ -8139,7 +8139,7 @@ Processor$1["default"] = Processor$1;
 Root$2.registerProcessor(Processor$1);
 Document$1.registerProcessor(Processor$1);
 
-var _excluded$3 = ["inputs"],
+var _excluded$4 = ["inputs"],
     _excluded2 = ["inputId"];
 
 var Declaration$1 = declaration;
@@ -8156,7 +8156,7 @@ function fromJSON$1(json, inputs) {
   });
 
   var ownInputs = json.inputs,
-      defaults = _objectWithoutProperties$1(json, _excluded$3);
+      defaults = _objectWithoutProperties$1(json, _excluded$4);
 
   if (ownInputs) {
     inputs = [];
@@ -9789,6 +9789,7 @@ var palette = {
   greenDark30: '#017d6d',
   greenDark75: '#002d27',
   greenLight30: '#4dcaba',
+  greenLight75: '#c0ece6',
   greenLight90: '#e6f7f5',
   grey: '#a3a6ac',
   greyDark15: '#8b8d92',
@@ -9828,6 +9829,7 @@ var palette = {
   redDark15: '#bd2d09',
   redDark30: '#9b2508',
   redDark75: '#380d03',
+  redLight15: '#e35330',
   redLight30: '#e87254',
   redLight60: '#f2ae9d',
   redLight75: '#f7cdc2',
@@ -9879,30 +9881,41 @@ var systemPalette = {
   outline: palette.greyLight60
 };
 
+var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
+
+var scale = function scale(size) {
+  var _Dimensions$get = require$$0$1.Dimensions.get('window'),
+      width = _Dimensions$get.width,
+      height = _Dimensions$get.height;
+
+  var shortDimension = width < height ? width : height;
+  return shortDimension / BASE_WIDTH * size;
+};
+
 var BASE$1 = 8;
 var space = {
-  xxsmall: BASE$1 * 0.25,
-  xsmall: BASE$1 * 0.5,
-  small: BASE$1,
-  medium: BASE$1 * 2,
-  large: BASE$1 * 3,
-  xlarge: BASE$1 * 4,
-  xxlarge: BASE$1 * 5,
-  xxxlarge: BASE$1 * 6,
-  xxxxlarge: BASE$1 * 7
+  xxsmall: scale(BASE$1 * 0.25),
+  xsmall: scale(BASE$1 * 0.5),
+  small: scale(BASE$1),
+  medium: scale(BASE$1 * 2),
+  large: scale(BASE$1 * 3),
+  xlarge: scale(BASE$1 * 4),
+  xxlarge: scale(BASE$1 * 5),
+  xxxlarge: scale(BASE$1 * 6),
+  xxxxlarge: scale(BASE$1 * 7)
 };
 
 var BASE = 16;
 var fontSizes = {
-  xxxxxlarge: BASE * 2,
-  xxxxlarge: BASE * 1.75,
-  xxxlarge: BASE * 1.5,
-  xxlarge: BASE * 1.25,
-  xlarge: BASE * 1.125,
-  large: BASE,
-  medium: BASE * 0.875,
-  small: BASE * 0.75,
-  xsmall: BASE * 0.625 // 10
+  xxxxxlarge: scale(BASE * 2),
+  xxxxlarge: scale(BASE * 1.75),
+  xxxlarge: scale(BASE * 1.5),
+  xxlarge: scale(BASE * 1.25),
+  xlarge: scale(BASE * 1.125),
+  large: scale(BASE),
+  medium: scale(BASE * 0.875),
+  small: scale(BASE * 0.75),
+  xsmall: scale(BASE * 0.625) //      10
 
 };
 var fontWeights = {
@@ -9973,7 +9986,7 @@ var getCardTheme = function getCardTheme(theme) {
     "default": "12px"
   };
   var padding = {
-    "default": "".concat(theme.space.medium, "px")
+    "default": "".concat(theme.space.small, "px")
   };
   return {
     radii: radii,
@@ -10054,6 +10067,25 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
 };
 
+var getFABTheme = function getFABTheme(theme) {
+  var colors = {
+    buttonBackground: theme.colors.backgroundDark,
+    icon: theme.colors.invertedText
+  };
+  var sizes = {
+    width: '64px',
+    height: '64px'
+  };
+  var fontSizes = {
+    "default": "".concat(theme.fontSizes.xxxxlarge, "px")
+  };
+  return {
+    fontSizes: fontSizes,
+    colors: colors,
+    sizes: sizes
+  };
+};
+
 var getTheme = function getTheme() {
   var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : globalTheme;
   return _objectSpread2(_objectSpread2({}, theme), {}, {
@@ -10062,21 +10094,22 @@ var getTheme = function getTheme() {
       card: getCardTheme(theme),
       divider: getDividerTheme(theme),
       icon: getIconTheme(theme),
-      typography: getTypographyTheme(theme)
+      typography: getTypographyTheme(theme),
+      fab: getFABTheme(theme)
     }
   });
 };
 
 var theme = getTheme();
 
-var _templateObject$4, _templateObject2$3, _templateObject3$2, _templateObject4$2;
+var _templateObject$6, _templateObject2$3, _templateObject3$2, _templateObject4$2;
 var BACKGROUND_INTENTS = {
   success: 'successBackground',
   warning: 'warningBackground',
   danger: 'dangerBackground',
   info: 'infoBackground'
 };
-var StyledView = styled(require$$0$1.View)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  border-width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n\n  ", ";\n"])), function (_ref) {
+var StyledView = styled(require$$0$1.View)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  border-width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.badge.borderWidths["default"];
 }, function (_ref2) {
@@ -10109,7 +10142,7 @@ var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$2 || (_templateObj
   });
 });
 
-var _excluded$2 = ["content", "intent", "style", "testID"];
+var _excluded$3 = ["content", "intent", "style", "testID"];
 
 var Badge = function Badge(_ref) {
   var content = _ref.content,
@@ -10117,7 +10150,7 @@ var Badge = function Badge(_ref) {
       intent = _ref$intent === void 0 ? 'info' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$2);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$3);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({
     themeIntent: intent,
@@ -10128,8 +10161,8 @@ var Badge = function Badge(_ref) {
   }, content));
 };
 
-var _templateObject$3;
-var StyledCard = styled(require$$0$1.View)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$5;
+var StyledCard = styled(require$$0$1.View)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n  overflow: hidden;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.card.radii["default"];
 }, function (_ref2) {
@@ -10141,8 +10174,8 @@ var Card = function Card(props) {
   return /*#__PURE__*/React__default["default"].createElement(StyledCard, props);
 };
 
-var _templateObject$2, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
-var StyledDivider = styled(require$$0$1.View)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$4, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
+var StyledDivider = styled(require$$0$1.View)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.divider.borderWidths["default"];
 }, function (_ref2) {
@@ -10196,14 +10229,14 @@ var StyledDivider = styled(require$$0$1.View)(_templateObject$2 || (_templateObj
   }
 });
 
-var _excluded$1 = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$2 = ["marginHorizontal", "marginVertical", "style", "testID"];
 
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
       marginVertical = _ref.marginVertical,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$2);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({
     themeMarginHorizontal: marginHorizontal,
@@ -19841,9 +19874,9 @@ var heroIconConfig = {
 	preferences: preferences
 };
 
-var _templateObject$1, _templateObject2$1;
+var _templateObject$3, _templateObject2$1;
 var HeroIcon = dist.createIconSetFromIcoMoon(heroIconConfig, 'hero-icons', 'hero-icons.ttf');
-var StyledHeroIcon = styled(HeroIcon)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+var StyledHeroIcon = styled(HeroIcon)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
   var themeIntent = _ref.themeIntent,
       themeSize = _ref.themeSize;
   return css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: ", "px;\n  "])), function (_ref2) {
@@ -19872,8 +19905,8 @@ var Icon = function Icon(_ref) {
   });
 };
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var StyledText = styled(require$$0$1.Text)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$2, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var StyledText = styled(require$$0$1.Text)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var themeFontSize = _ref.themeFontSize,
       theme = _ref.theme;
 
@@ -19917,7 +19950,7 @@ var StyledText = styled(require$$0$1.Text)(_templateObject || (_templateObject =
   }
 });
 
-var _excluded = ["children", "fontSize", "fontWeight", "intent"];
+var _excluded$1 = ["children", "fontSize", "fontWeight", "intent"];
 
 var Text = function Text(_ref) {
   var children = _ref.children,
@@ -19927,7 +19960,7 @@ var Text = function Text(_ref) {
       fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
       _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'body' : _ref$intent,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledText, _extends$1({
     themeFontSize: fontSize,
@@ -19940,12 +19973,90 @@ var Typography = {
   Text: Text
 };
 
+var _templateObject$1;
+var StyledFABIcon = styled(Icon)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.__hd__.fab.colors.icon;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.fab.fontSizes["default"];
+});
+
+var _excluded = ["active"];
+var AnimatedIcons = require$$0$1.Animated.createAnimatedComponent(StyledFABIcon);
+
+var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
+  var active = _ref.active,
+      iconProps = _objectWithoutProperties$1(_ref, _excluded);
+
+  var rotateAnimation = React.useRef(new require$$0$1.Animated.Value(active ? 1 : 0));
+  React.useEffect(function () {
+    var animation = require$$0$1.Animated.timing(rotateAnimation.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: true
+    });
+    animation.start();
+    return function () {
+      animation.stop();
+    };
+  }, [active]);
+  var interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '-45deg']
+  });
+  return /*#__PURE__*/React__default["default"].createElement(require$$0$1.Animated.View, {
+    style: require$$0$1.StyleSheet.flatten([{
+      transform: [{
+        rotate: interpolatedRotateAnimation
+      }]
+    }])
+  }, /*#__PURE__*/React__default["default"].createElement(AnimatedIcons, iconProps));
+};
+
+var _templateObject;
+var StyledFABContainer = styled(require$$0$1.TouchableHighlight)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border-radius: 999px;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.__hd__.fab.sizes.height;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.fab.sizes.width;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.__hd__.fab.colors.buttonBackground;
+});
+
+var FAB = function FAB(_ref) {
+  var _onPress = _ref.onPress,
+      icon = _ref.icon,
+      animated = _ref.animated,
+      testID = _ref.testID,
+      active = _ref.active,
+      style = _ref.style;
+  return /*#__PURE__*/React__default["default"].createElement(StyledFABContainer, {
+    testID: testID,
+    onPress: function onPress() {
+      _onPress === null || _onPress === void 0 ? void 0 : _onPress();
+    },
+    activeOpacity: 0.6,
+    style: style
+  }, animated ? /*#__PURE__*/React__default["default"].createElement(AnimatedFABIcon, {
+    active: active,
+    icon: icon,
+    testID: "animatedFABIcon"
+  }) : /*#__PURE__*/React__default["default"].createElement(StyledFABIcon, {
+    icon: icon,
+    testID: "styledFABIcon"
+  }));
+};
+
 exports.Badge = Badge;
 exports.Card = Card;
 exports.Divider = Divider;
+exports.FAB = FAB;
 exports.Icon = Icon;
 exports.ThemeProvider = ThemeProvider;
 exports.Typography = Typography;
 exports.getTheme = getTheme;
+exports.scale = scale;
 exports.theme = theme;
 exports.useTheme = useTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.0.5",
+  "version": "7.1.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -18,7 +18,7 @@
     "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "7.0.5",
+    "@hero-design/colors": "7.1.1",
     "styled-components": "6.0.0-alpha.5"
   },
   "peerDependencies": {
@@ -30,7 +30,7 @@
     "@babel/core": "^7.17.5",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
+    "@babel/preset-typescript": "^7.17.12",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "@rollup/plugin-babel": "^5.3.1",

package/playground/components/Card.tsx

@@ -1,19 +1,17 @@
 import React, { ComponentProps } from 'react';
 import { View, ViewProps, StyleSheet } from 'react-native';
 import { palette } from '@hero-design/colors';
-import { Card, useTheme, Typography, Icon, Divider } from '../../src/index';
-
-const TextBox = (props: ViewProps) => (
-  <View
-    style={{
-      flex: 1,
-      justifyContent: 'flex-end',
-    }}
-    {...props}
-  />
-);
+import {
+  useTheme,
+  scale,
+  Card,
+  Typography,
+  Icon,
+  Divider,
+} from '../../src/index';
 
 const Screen = View;
+
 type DashboardCardProps = ViewProps & {
   icon: ComponentProps<typeof Icon>['icon'];
   title: string;
@@ -25,19 +23,28 @@ const DashboardCard = ({
   icon,
   title,
   subtitle,
-}: DashboardCardProps) => (
-  <Card testID="inductionContent" style={style}>
-    <View style={{ flex: 1, alignItems: 'flex-end' }}>
-      <Icon icon={icon} />
-    </View>
-    <TextBox>
-      <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
-        {title}
-      </Typography.Text>
-      <Typography.Text fontSize="medium">{subtitle}</Typography.Text>
-    </TextBox>
-  </Card>
-);
+}: DashboardCardProps) => {
+  const theme = useTheme();
+  return (
+    <Card style={style}>
+      <View style={{ flex: 1, alignItems: 'flex-end' }}>
+        <Icon icon={icon} />
+      </View>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'flex-end',
+          margin: theme.space.small,
+        }}
+      >
+        <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
+          {title}
+        </Typography.Text>
+        <Typography.Text fontSize="medium">{subtitle}</Typography.Text>
+      </View>
+    </Card>
+  );
+};
 
 const InductionCard = (props: ViewProps) => (
   <DashboardCard
@@ -59,13 +66,13 @@ const PoliciesCard = (props: ViewProps) => (
 const CertificationsCard = (props: ViewProps) => (
   <DashboardCard
     icon="file-certified"
-    title="Certification"
+    title="Certifications"
     subtitle="1 to update"
     {...props}
   />
 );
 
-const Payslip = (props: ViewProps) => {
+const RostersCard = (props: ViewProps) => {
   const theme = useTheme();
   const { style, ...otherProps } = props;
   return (
@@ -74,39 +81,30 @@ const Payslip = (props: ViewProps) => {
       style={StyleSheet.flatten([
         {
           flexDirection: 'row',
-          alignItems: 'stretch',
-          backgroundColor: palette.greyLight75,
+          alignItems: 'center',
+          backgroundColor: palette.greyLight90,
         },
         style,
       ])}
     >
-      <View>
+      <View style={{ padding: theme.space.small }}>
         <View
           style={{
             padding: theme.space.small,
-            backgroundColor: '#C0ECE6',
+            backgroundColor: theme.colors.infoLight,
             borderRadius: 999,
-            alignContent: 'stretch',
           }}
         >
-          <Icon icon="coin" />
+          <Icon icon="calendar-clock" />
         </View>
       </View>
       <View style={{ flex: 1, marginLeft: theme.space.small }}>
-        <Typography.Text fontSize="large" fontWeight="semi-bold">
+        <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
           Rosters
         </Typography.Text>
-        <Typography.Text fontSize="medium">3 shifts this week</Typography.Text>
-      </View>
-      <View
-        style={{
-          alignItems: 'center',
-          alignContent: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Icon icon="arrow-right" />
+        <Typography.Text fontSize="large">3 shifts this week</Typography.Text>
       </View>
+      <Icon icon="arrow-right" />
     </Card>
   );
 };
@@ -129,58 +127,53 @@ const MyLeaveCard = (props: ViewProps) => {
       ])}
     >
       <View
-        testID="header"
         style={{
-          marginHorizontal: theme.space.small,
-          marginTop: theme.space.small,
+          padding: theme.space.medium,
           justifyContent: 'space-between',
           flexDirection: 'row',
         }}
       >
-        <Typography.Text fontSize="large" fontWeight="semi-bold">
+        <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
           My Leave
         </Typography.Text>
-
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <Typography.Text fontWeight="semi-bold">Add / view</Typography.Text>
+          <Typography.Text fontSize="large" fontWeight="semi-bold">
+            Add / view
+          </Typography.Text>
           <Icon
             icon="circle-add-outlined"
             size="xsmall"
-            style={{ margin: theme.space.xxsmall }}
+            style={{ marginLeft: theme.space.small }}
           />
         </View>
       </View>
-      <Divider marginVertical="small" />
-      <View testID="content" style={{ margin: theme.space.small }}>
-        <Typography.Text fontSize="medium" fontWeight="semi-bold">
+      <Divider />
+      <View style={{ padding: theme.space.medium }}>
+        <Typography.Text
+          fontSize="large"
+          fontWeight="semi-bold"
+          style={{ marginBottom: theme.space.small }}
+        >
           Leave Balances
         </Typography.Text>
-        <View
-          testID="listItem1"
-          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
-        >
-          <Typography.Text>Jury Duty</Typography.Text>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">Jury Duty</Typography.Text>
           <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
         </View>
-        <View
-          testID="listItem1"
-          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
-        >
-          <Typography.Text>Annual Leave</Typography.Text>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">Annual Leave</Typography.Text>
           <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
         </View>
-        <View
-          testID="listItem1"
-          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
-        >
-          <Typography.Text>Values Champion Award</Typography.Text>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">
+            Values Champion Award
+          </Typography.Text>
           <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
         </View>
-        <View
-          testID="listItem1"
-          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
-        >
-          <Typography.Text>Family and Domestic</Typography.Text>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">
+            Family and Domestic
+          </Typography.Text>
           <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
         </View>
       </View>
@@ -191,13 +184,12 @@ const MyLeaveCard = (props: ViewProps) => {
 const CardPlayground = () => {
   const theme = useTheme();
   return (
-    <Screen>
-      <View style={{ flexDirection: 'row', height: 250 }}>
-        <View style={{ flex: 1 }}>
+    <Screen style={{ padding: theme.space.medium }}>
+      <View style={{ flexDirection: 'row', height: scale(216) }}>
+        <View style={{ flex: 1, marginRight: theme.space.medium }}>
           <InductionCard
             style={{
               flex: 1,
-              margin: theme.space.small,
               backgroundColor: theme.colors.primaryLight,
             }}
           />
@@ -206,31 +198,22 @@ const CardPlayground = () => {
           <PoliciesCard
             style={{
               flex: 1,
-              backgroundColor: palette.dodgerBlueLight75,
-              margin: theme.space.small,
+              backgroundColor: theme.colors.infoLight,
+              marginBottom: theme.space.medium,
             }}
             testID="policies"
           />
           <CertificationsCard
             style={{
               flex: 1,
-              margin: theme.space.small,
-              backgroundColor: palette.dodgerBlueLight75,
+              backgroundColor: theme.colors.infoLight,
             }}
             testID="certifications"
           />
         </View>
       </View>
-      <Payslip
-        style={{
-          margin: theme.space.small,
-        }}
-      />
-      <MyLeaveCard
-        style={{
-          margin: theme.space.small,
-        }}
-      />
+      <RostersCard style={{ marginTop: theme.space.medium }} />
+      <MyLeaveCard style={{ marginTop: theme.space.medium }} />
     </Screen>
   );
 };