@xetwa/design-system 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/Cards/PlanCard/PlanCard.tsx

@@ -168,19 +168,19 @@ export const PlanCard = ({
 
         {isMini ? (
           <View style={[styles.miniHeader, { marginTop: scale(8), marginBottom: scale(4) }]}>
-            <View style={styles.miniLeft}>
-              <Typography variant="h1" color="#51332d" style={{ marginBottom: scale(2) }}>
+            <View style={styles.miniRow}>
+              <Typography variant="h1" color="#51332d" numberOfLines={1} adjustsFontSizeToFit style={{ flex: 1, marginRight: scale(8) }}>
                 {planName}
               </Typography>
-              <Typography variant="bodySm" color="#9a8478">
-                {tierLabel}
+              <Typography variant="display1" color="#51332d" numberOfLines={1} adjustsFontSizeToFit>
+                {priceText}
               </Typography>
             </View>
-            <View style={styles.miniRight}>
-              <Typography variant="display1" color="#51332d">
-                {priceText}
+            <View style={[styles.miniRow, { marginTop: scale(2) }]}>
+              <Typography variant="bodySm" color="#9a8478" numberOfLines={1} adjustsFontSizeToFit style={{ flex: 1, marginRight: scale(8) }}>
+                {tierLabel}
               </Typography>
-              <Typography variant="bodySm" color="#9a8478" style={{ marginTop: scale(2), textAlign: 'right' }}>
+              <Typography variant="bodySm" color="#9a8478" numberOfLines={1} adjustsFontSizeToFit style={{ textAlign: 'right' }}>
                 {pricePeriod}
               </Typography>
             </View>
@@ -276,19 +276,14 @@ const styles = StyleSheet.create({
     marginTop: 8,
   },
   miniHeader: {
+    width: '100%',
+  },
+  miniRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
+    alignItems: 'baseline',
     width: '100%',
   },
-  miniLeft: {
-    alignItems: 'flex-start',
-    flex: 1,
-  },
-  miniRight: {
-    alignItems: 'flex-end',
-    justifyContent: 'center',
-  },
   labelTier: {
 
     fontSize: 10,

package/src/styles/theme.ts

@@ -198,7 +198,7 @@ export const theme = {
     label: {
       ...font('Nunito-ExtraBold', '800'),
       fontSize: 10,
-      lineHeight: 10,
+      lineHeight: 14,
       letterSpacing: 1.2,
     },
     bodyLg: {
@@ -224,18 +224,19 @@ export const theme = {
     btnLg: {
       ...font('Nunito-ExtraBold', '800'),
       fontSize: 16,
+      lineHeight: 22,
       letterSpacing: 0.64,
     },
     btnMd: {
-      fontFamily: 'Nunito',
+      ...font('Nunito-ExtraBold', '800'),
       fontSize: 14,
-      fontWeight: '800' as const,
+      lineHeight: 20,
       letterSpacing: 0.56,
     },
     btnSm: {
-      fontFamily: 'Nunito',
+      ...font('Nunito-ExtraBold', '800'),
       fontSize: 12,
-      fontWeight: '800' as const,
+      lineHeight: 16,
       letterSpacing: 0.48,
     },
   },