redesign checkpoint

apps/mobile/src/app/(tabs)/attendance.tsx

@@ -104,7 +104,7 @@ export default function AttendanceScreen() {
       {/* Header */}
       <View style={styles.header}>
         <Text style={[typography.h1, { color: colors.textPrimary }]}>
-          Attendance
+          📍 Attendance
         </Text>
         <Text
           style={[
@@ -112,14 +112,18 @@ export default function AttendanceScreen() {
             { color: colors.textSecondary, marginTop: 4 },
           ]}
         >
-          Track your gym visits
+          {activeCheckIn
+            ? "You're crushing it today! 💪"
+            : history.length === 0
+              ? "Ready to start your fitness journey? 🚀"
+              : "Track your gym visits and build streaks! 🔥"}
         </Text>
       </View>
 
       {/* Check In/Out Section */}
       <View style={styles.section}>
         {activeCheckIn ? (
-          <MinimalCard variant="elevated" style={styles.activeCard}>
+          <MinimalCard variant="bordered" style={styles.activeCard}>
             <View style={styles.activeHeader}>
               <View style={styles.activeHeaderLeft}>
                 <IconContainer
@@ -135,7 +139,7 @@ export default function AttendanceScreen() {
                 </IconContainer>
                 <View style={{ marginLeft: 12 }}>
                   <Text style={[typography.h3, { color: colors.textPrimary }]}>
-                    Currently Checked In
+                    ✅ Currently Checked In
                   </Text>
                   <Text
                     style={[
@@ -165,7 +169,7 @@ export default function AttendanceScreen() {
           </MinimalCard>
         ) : (
           <MinimalButton
-            title="Check In"
+            title="💪 Check In"
             onPress={handleCheckIn}
             variant="primary"
             size="lg"
@@ -175,29 +179,19 @@ export default function AttendanceScreen() {
 
       {/* Attendance Calendar */}
       <View style={styles.section}>
-        <SectionHeader title="Calendar" />
-        <MinimalCard variant="default">
+        <SectionHeader title="📅 Calendar" />
+        <MinimalCard variant="default" style={{ borderRadius: 20 }}>
           <AttendanceCalendar attendanceRecords={history} />
         </MinimalCard>
       </View>
 
       {/* Recent History */}
       <View style={styles.section}>
-        <SectionHeader title="Recent History" />
+        <SectionHeader title="📊 Recent History" />
         {history.length === 0 ? (
-          <MinimalCard variant="default">
+          <MinimalCard variant="default" style={{ borderRadius: 20 }}>
             <View style={styles.emptyState}>
-              <IconContainer
-                variant="colored"
-                backgroundColor={`${colors.primary}15`}
-                size="lg"
-              >
-                <Ionicons
-                  name="calendar-outline"
-                  size={32}
-                  color={colors.primary}
-                />
-              </IconContainer>
+              <Text style={{ fontSize: 64 }}>📍</Text>
               <Text
                 style={[
                   typography.bodyEmphasis,
@@ -216,7 +210,7 @@ export default function AttendanceScreen() {
                   },
                 ]}
               >
-                Your check-in history will appear here
+                Check in to start building your streak! 🔥
               </Text>
             </View>
           </MinimalCard>
@@ -232,7 +226,11 @@ export default function AttendanceScreen() {
                 : null;
 
               return (
-                <MinimalCard key={index} variant="default">
+                <MinimalCard
+                  key={index}
+                  variant="bordered"
+                  style={{ borderRadius: 16 }}
+                >
                   <View style={styles.historyItem}>
                     <View style={styles.historyLeft}>
                       <IconContainer
@@ -315,6 +313,7 @@ const styles = StyleSheet.create({
   },
   activeCard: {
     padding: 20,
+    borderRadius: 20,
   },
   activeHeader: {
     flexDirection: "row",