Disable rollup for developemnt, update border radius of tile

white-label-loyalty · Aug 28, 2024 · 9c97607 · 9c97607
1 parent 30c2eac
commit 9c97607
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 15 deletions.
diff --git a/lib/components/atoms/Button/index.tsx b/lib/components/atoms/Button/index.tsx
@@ -66,7 +66,7 @@ const Button: React.FC<ButtonProps> = ({ title, onPress, variant }) => {
 
   return (
     <TouchableOpacity
-      style={[buttonStyle, { borderRadius: theme.sizes.borderRadiusButton }]}
+      style={[buttonStyle, { borderRadius: theme.sizes.borderRadiusSmButton }]}
       onPress={onPress}
     >
       <View style={styles.buttonInner}>

diff --git a/lib/components/atoms/LoadingIndicator/index.tsx b/lib/components/atoms/LoadingIndicator/index.tsx
@@ -15,7 +15,7 @@ const LoadingIndicator: React.FC<LoadingIndicatorProps> = () => {
         styles.container,
         {
           backgroundColor: theme.surface,
-          borderRadius: theme.sizes.borderRadius,
+          borderRadius: theme.sizes.borderRadiusSm,
           padding: theme.sizes.md,
         },
       ]}

diff --git a/lib/components/atoms/ProgressBar/index.tsx b/lib/components/atoms/ProgressBar/index.tsx
@@ -14,11 +14,11 @@ const useStyles = (theme: ThemeObject) => {
   return StyleSheet.create({
     container: {
       width: "100%",
-      borderRadius: theme.sizes.borderRadiusRounded,
+      borderRadius: theme.sizes.borderRadiusSmRounded,
       overflow: "hidden",
     },
     progress: {
-      borderRadius: theme.sizes.borderRadiusRounded,
+      borderRadius: theme.sizes.borderRadiusSmRounded,
       height: "100%",
     },
   });
@@ -32,7 +32,7 @@ const useContainerStyles = (theme: ThemeObject) => ({
 
 const useProgressStyles = createVariantSystem(
   // @ts-ignore
-  (theme: ThemeObject) => ({ borderRadius: theme.sizes.borderRadiusRounded }),
+  (theme: ThemeObject) => ({ borderRadius: theme.sizes.borderRadiusSmRounded }),
   (theme: ThemeObject) => ({
     primary: { backgroundColor: theme.primary },
     accent: { backgroundColor: theme.accent },

diff --git a/lib/components/atoms/Tile/index.tsx b/lib/components/atoms/Tile/index.tsx
@@ -4,6 +4,7 @@ import { StyleSheet, View } from "react-native";
 import { useTheme } from "../../../context/ThemeContext";
 import { useSectionContext } from "../../organisms/Section";
 import LoadingIndicator from "../LoadingIndicator";
+import { createResponsiveStyle } from "../../../utils/responsiveHelper";
 
 type TileProps = {
   children: React.ReactNode;
@@ -13,14 +14,20 @@ const Tile: React.FC<TileProps> = ({ children }) => {
   const { loading: isLoading } = useSectionContext();
   const { theme } = useTheme();
 
+  const responsiveStyles = createResponsiveStyle({
+    borderRadius: [theme.sizes.borderRadiusSm, theme.sizes.borderRadiusSm, theme.sizes.borderRadiusLg],
+    maxWidth: [270, 270, 320],
+  });
+
   return (
     <View
       style={[
         styles.container,
         {
           backgroundColor: theme.surface,
           borderColor: Color(theme.surface).darken(0.02).string(),
-          borderRadius: theme.sizes.borderRadius,
+          borderRadius: responsiveStyles.borderRadius,
+          maxWidth: responsiveStyles.maxWidth,
         },
       ]}
     >
@@ -37,7 +44,6 @@ const styles = StyleSheet.create({
     alignItems: "flex-start",
     justifyContent: "center",
     position: "relative",
-    maxWidth: 270,
     borderWidth: 1,
     aspectRatio: 1,
     // shadowColor: "#AAAAAA",

diff --git a/lib/components/organisms/PointsTile/index.tsx b/lib/components/organisms/PointsTile/index.tsx
@@ -32,7 +32,7 @@ const PointsTile: React.FC<PointsTileProps> = ({ configuration }) => {
     container: {
       padding: theme.sizes.md,
       maxWidth: 270,
-      borderRadius: theme.sizes.borderRadius,
+      borderRadius: theme.sizes.borderRadiusSm,
       width: "100%",
       flexDirection: "row",
       alignItems: "center",

diff --git a/lib/components/organisms/Section/index.tsx b/lib/components/organisms/Section/index.tsx
@@ -84,7 +84,7 @@ const SectionContent: React.FC = () => {
       <View
         style={[
           styles.sectionContent,
-          { borderRadius: theme.sizes.borderRadius },
+          { borderRadius: theme.sizes.borderRadiusSm },
         ]}
       >
         <Icon name="AlertTriangle" size={24} color="#967132" />

diff --git a/lib/utils/responsiveHelper.ts b/lib/utils/responsiveHelper.ts
@@ -3,8 +3,8 @@ import { Dimensions } from "react-native";
 // Define breakpoints
 const BREAKPOINTS = {
   MOBILE: 0,
-  TABLET: 600,
-  DESKTOP: 1024,
+  TABLET: 767,
+  DESKTOP: 768,
 };
 
 type ResponsiveStyle<T> = {

diff --git a/lib/utils/styling.ts b/lib/utils/styling.ts
@@ -1,7 +1,8 @@
 import { BaseThemeObject } from "../types/theme";
 
 export const sizes = {
-  borderRadius: 15,
+  borderRadiusSm: 15,
+  borderRadiusLg: 20,
   borderRadiusButton: 9,
   borderRadiusRounded: 9999,
   sm: 6,

diff --git a/package.json b/package.json
@@ -13,9 +13,6 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "rollup -c rollup.config.cjs --bundleConfigAsCjs",
-    "build:types": "tsc --emitDeclarationOnly",
-    "prepare": "yarn build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test-storybook": "test-storybook",