@magmamath/students-features 1.8.0 → 1.8.1-rc.0

package/src/features/fluency-teacher/components/drawer/DrawerHeader.tsx

@@ -7,10 +7,11 @@ import {
   COLORS,
   CrossIcon,
   FONT_FAMILY,
+  HeadingVariants,
   SPACING,
+  Typography,
 } from '@magmamath/react-native-ui'
 import { useText } from '../../../../i18n/i18n'
-import { AverageCell } from '../table/AverageCell'
 
 import type { StudentResult } from '../../fluencyTeacher.types'
 
@@ -23,24 +24,20 @@ export const DrawerHeader = ({ student, onClose }: DrawerHeaderProps) => {
   const t = useText()
   return (
     <View style={styles.container}>
-      <Text style={styles.name} numberOfLines={1}>
-        {student.name}
-      </Text>
-      <View style={styles.mastery}>
-        <View style={styles.masteryRow}>
-          <Text style={styles.masteryLabel} numberOfLines={1}>
-            {t('teacher.fluency.overallMastery')}
-          </Text>
-          <Text style={styles.masteryValue}>{student.averagePercent}%</Text>
-        </View>
-        <View style={styles.masteryBar}>
-          <AverageCell percent={student.averagePercent} height={22} showPercent={false} />
-        </View>
+      <View style={styles.left}>
+        <Typography variant={HeadingVariants.H9} style={styles.label}>
+          {t('teacher.fluency.studentFluency')}
+        </Typography>
+        <Text style={styles.name}>{student.name}</Text>
+      </View>
+      <View style={styles.right}>
+        <Text style={styles.masteryLabel}>{t('teacher.fluency.overallMastery')}</Text>
+        <Text style={styles.masteryValue}>{student.averagePercent}%</Text>
       </View>
       <Button
-        variant={ButtonVariant.TERTIARY}
+        variant={ButtonVariant.SECONDARY}
         colorScheme={ButtonColor.WHITE}
-        icon={<CrossIcon size={18} color={COLORS.NEUTRAL_9} />}
+        icon={<CrossIcon size={18} color={COLORS.NEUTRAL_7} />}
         onPress={onClose}
         style={{ container: styles.closeButton }}
       />
@@ -52,43 +49,44 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: SPACING[400],
-    padding: SPACING[400],
+    paddingVertical: SPACING[500],
+    paddingHorizontal: SPACING[700],
+    borderTopWidth: 1,
     borderBottomWidth: 1,
     borderColor: COLORS.NEUTRAL_4,
   },
-  name: {
-    flex: 1,
+  left: {
+    marginLeft: 48,
+  },
+  label: {
+    color: COLORS.GREEN_7,
     fontFamily: FONT_FAMILY.buenosAiresSemiBold,
     fontWeight: '600',
-    fontSize: 24,
-    color: COLORS.NEUTRAL_10,
-  },
-  mastery: {
-    alignItems: 'flex-end',
   },
-  masteryBar: {
-    width: 150,
+  name: {
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontWeight: '700',
+    fontSize: 22,
+    color: COLORS.NEUTRAL_10,
   },
-  masteryRow: {
-    flexDirection: 'row',
+  right: {
     alignItems: 'flex-end',
-    gap: SPACING[100],
+    marginLeft: 'auto',
   },
   masteryLabel: {
-    fontFamily: FONT_FAMILY.buenosAires,
-    fontWeight: '400',
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontWeight: '700',
     fontSize: 13,
-    lineHeight: 26,
     color: COLORS.NEUTRAL_7,
   },
   masteryValue: {
-    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
-    fontWeight: '600',
-    fontSize: 24,
-    color: COLORS.PRIMARY_YELLOW,
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontWeight: '700',
+    fontSize: 28,
+    color: COLORS.GREEN_7,
   },
   closeButton: {
     alignSelf: 'center',
+    marginLeft: SPACING[600],
   },
 })

package/src/features/fluency-teacher/components/drawer/DrawerMasteryLegend.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+import type { TranslationKey } from '../../../../i18n/i18n'
+
+type MasteryLevelConfig = {
+  labelKey: TranslationKey
+  color: string
+}
+
+const MASTERY_LEVEL_CONFIG: MasteryLevelConfig[] = [
+  { labelKey: 'student.fluency.notStarted', color: COLORS.NEUTRAL_3 },
+  { labelKey: 'student.fluency.masteryLearning', color: COLORS.GREEN_2 },
+  { labelKey: 'student.fluency.masteryGrowing', color: COLORS.GREEN_3 },
+  { labelKey: 'student.fluency.masteryStrong', color: COLORS.GREEN_4 },
+  { labelKey: 'student.fluency.masteryMastered', color: COLORS.GREEN_7 },
+]
+
+export const DrawerMasteryLegend = () => {
+  const t = useText()
+  return (
+    <View style={styles.container}>
+      {MASTERY_LEVEL_CONFIG.map(({ labelKey, color }) => (
+        <View key={labelKey} style={styles.item}>
+          <View style={[styles.swatch, { backgroundColor: color }]} />
+          <Text style={styles.label}>{t(labelKey)}</Text>
+        </View>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[300],
+    paddingVertical: SPACING[150],
+    paddingHorizontal: SPACING[300],
+    borderRadius: 999,
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_4,
+    alignSelf: 'center',
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[150],
+  },
+  swatch: {
+    width: 14,
+    height: 14,
+    borderRadius: 4,
+  },
+  label: {
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontSize: 12,
+    fontWeight: '600',
+    color: COLORS.NEUTRAL_8,
+  },
+})

package/src/features/fluency-teacher/components/drawer/DrawerMatrixes.tsx

@@ -1,24 +1,42 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { SPACING } from '@magmamath/react-native-ui'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
 import { useText } from '../../../../i18n/i18n'
-import { useTeacherFluency } from '../../context/TeacherFluencyContext'
 import { DrawerOperatorBox } from './DrawerOperatorBox'
-import { OPERATOR_CARD_CONFIG } from '../../fluencyTeacher.constants'
-import { getOperatorsForGrade } from '../../fluencyTeacher.helpers'
+import { FluencyMathOperatorSymbol, FluencyOperator } from '../../fluencyTeacher.constants'
 
 export const DrawerMatrixes = () => {
   const t = useText()
-  const { grade } = useTeacherFluency()
   return (
     <View style={styles.grid}>
-      {getOperatorsForGrade(grade).map((operator) => (
-        <DrawerOperatorBox
-          key={operator}
-          title={t(OPERATOR_CARD_CONFIG[operator].labelKey)}
-          operator={operator}
-        />
-      ))}
+      <DrawerOperatorBox
+        title={t('student.fluency.addition')}
+        symbol={FluencyMathOperatorSymbol.ADDITION}
+        iconBg={COLORS.GREEN_1}
+        iconColor={COLORS.GREEN_7}
+        operator={FluencyOperator.ADDITION}
+      />
+      <DrawerOperatorBox
+        title={t('student.fluency.subtraction')}
+        symbol={FluencyMathOperatorSymbol.SUBTRACTION}
+        iconBg={COLORS.ORANGE_1}
+        iconColor={COLORS.ORANGE_7}
+        operator={FluencyOperator.SUBTRACTION}
+      />
+      <DrawerOperatorBox
+        title={t('student.fluency.multiplication')}
+        symbol={FluencyMathOperatorSymbol.MULTIPLICATION}
+        iconBg={COLORS.BLUE_1}
+        iconColor={COLORS.BLUE_7}
+        operator={FluencyOperator.MULTIPLICATION}
+      />
+      <DrawerOperatorBox
+        title={t('student.fluency.division')}
+        symbol={FluencyMathOperatorSymbol.DIVISION}
+        iconBg={COLORS.PURPLE_1}
+        iconColor={COLORS.PURPLE_7}
+        operator={FluencyOperator.DIVISION}
+      />
     </View>
   )
 }
@@ -27,7 +45,8 @@ const styles = StyleSheet.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: SPACING[400],
+    gap: SPACING[300],
+    marginTop: SPACING[300],
     marginBottom: SPACING[600],
   },
 })

package/src/features/fluency-teacher/components/drawer/DrawerOperatorBox.tsx

@@ -5,17 +5,25 @@ import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-na
 import { useText } from '../../../../i18n/i18n'
 import { useDrawerMatrix } from '../../hooks/useDrawerMatrix'
 import { DrawerMatrix } from '../matrix/DrawerMatrix'
-import { MatrixLegend } from '../matrix/MatrixLegend'
 import { useTeacherFluency } from '../../context/TeacherFluencyContext'
 
-import { FluencyOperator, OPERATOR_PALETTES } from '../../fluencyTeacher.constants'
+import { FluencyOperator } from '../../fluencyTeacher.constants'
 
 type DrawerOperatorBoxProps = {
   title: string
+  symbol: string
+  iconBg: string
+  iconColor: string
   operator: FluencyOperator
 }
 
-export const DrawerOperatorBox = ({ title, operator }: DrawerOperatorBoxProps) => {
+export const DrawerOperatorBox = ({
+  title,
+  symbol,
+  iconBg,
+  iconColor,
+  operator,
+}: DrawerOperatorBoxProps) => {
   const t = useText()
   const { model } = useTeacherFluency()
   const isLoading = useUnit(model.api.getStudentDetailsFx.pending)
@@ -28,9 +36,13 @@ export const DrawerOperatorBox = ({ title, operator }: DrawerOperatorBoxProps) =
     : ''
 
   return (
-    <View style={[styles.container, { borderColor: OPERATOR_PALETTES[operator].boxBorder }]}>
+    <View style={styles.container}>
       <View style={styles.header}>
+        <View style={[styles.iconBox, { backgroundColor: iconBg }]}>
+          <Text style={[styles.symbol, { color: iconColor }]}>{symbol}</Text>
+        </View>
         <Text style={styles.title}>{title}</Text>
+        <View style={styles.spacer} />
         <Text style={styles.factsLabel}>{factsLabel}</Text>
       </View>
       <View style={styles.content}>
@@ -39,10 +51,7 @@ export const DrawerOperatorBox = ({ title, operator }: DrawerOperatorBoxProps) =
             <ActivityIndicator size="large" color={COLORS.PRIMARY_BLUE} />
           </View>
         ) : (
-          <>
-            <DrawerMatrix {...matrixProps} />
-            {matrixProps.grid && <MatrixLegend operator={operator} grid={matrixProps.grid} />}
-          </>
+          <DrawerMatrix {...matrixProps} />
         )}
       </View>
     </View>
@@ -51,37 +60,48 @@ export const DrawerOperatorBox = ({ title, operator }: DrawerOperatorBoxProps) =
 
 const styles = StyleSheet.create({
   container: {
-    flexGrow: 1,
-    flexBasis: '45%',
+    width: 315,
+    height: 315,
     borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_4,
     borderRadius: BORDER_RADIUS[300],
-    backgroundColor: COLORS.NEUTRAL_1,
     padding: SPACING[400],
-    gap: SPACING[300],
   },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: SPACING[200],
+    marginBottom: SPACING[300],
+  },
+  iconBox: {
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  symbol: {
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontSize: 20,
+    marginBottom: 2,
   },
   title: {
-    flex: 1,
-    fontFamily: FONT_FAMILY.buenosAires,
-    fontWeight: '400',
-    fontSize: 16,
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '700',
+    fontSize: 15,
     color: COLORS.NEUTRAL_10,
   },
+  spacer: {
+    flex: 1,
+  },
   factsLabel: {
     fontFamily: FONT_FAMILY.buenosAiresSemiBold,
     fontSize: 13,
     fontWeight: '600',
-    textTransform: 'uppercase',
     color: COLORS.NEUTRAL_7,
   },
   content: {
-    height: 210,
-    flexDirection: 'row',
-    gap: SPACING[200],
+    flex: 1,
   },
   loader: {
     flex: 1,

package/src/features/fluency-teacher/components/drawer/DrawerOperatorStatCard.tsx

@@ -1,65 +1,65 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import { BORDER_RADIUS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
-import { getOperatorBandColors } from '../../fluencyTeacher.helpers'
-import { FluencyOperator } from '../../fluencyTeacher.constants'
+import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
 
-type DrawerOperatorStatCardProps = {
+export type DrawerOperatorStatCardProps = {
   title: string
-  value: number
+  value: number | string
   symbol: string
-  operator: FluencyOperator
+  color: string
 }
 
 export const DrawerOperatorStatCard = ({
   title,
   value,
   symbol,
-  operator,
-}: DrawerOperatorStatCardProps) => {
-  const { background, border, text } = getOperatorBandColors(operator, value)
-  return (
-    <View style={[styles.container, { backgroundColor: background, borderColor: border }]}>
-      <View style={styles.titleRow}>
-        <Text style={[styles.symbol, { color: text }]}>{symbol}</Text>
-        <Text style={[styles.title, { color: text }]} numberOfLines={1}>
-          {title}
-        </Text>
-      </View>
-      <Text style={[styles.value, { color: text }]}>{value}%</Text>
+  color,
+}: DrawerOperatorStatCardProps) => (
+  <View style={styles.container}>
+    <View style={[styles.iconContainer, { backgroundColor: color + '26' }]}>
+      <Text style={[styles.symbol, { color }]}>{symbol}</Text>
     </View>
-  )
-}
+    <View>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.value}>{value}%</Text>
+    </View>
+  </View>
+)
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    gap: SPACING[100],
-    padding: SPACING[200],
-    borderRadius: BORDER_RADIUS[200],
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[300],
+    padding: SPACING[300],
+    borderRadius: SPACING[300],
     borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_4,
+    backgroundColor: COLORS.NEUTRAL_2,
   },
-  titleRow: {
-    flexDirection: 'row',
+  iconContainer: {
+    width: 32,
+    height: 32,
+    borderRadius: SPACING[200],
     alignItems: 'center',
-    gap: SPACING[100],
+    justifyContent: 'center',
   },
   symbol: {
-    width: 16,
     fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontSize: 16,
-    textAlign: 'center',
+    fontSize: 28,
+    marginBottom: 2,
   },
   title: {
-    flexShrink: 1,
     fontFamily: FONT_FAMILY.buenosAires,
     fontWeight: '400',
-    fontSize: 16,
+    fontSize: 12,
+    color: COLORS.NEUTRAL_7,
   },
   value: {
-    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
-    fontWeight: '600',
-    fontSize: 24,
+    fontFamily: FONT_FAMILY.buenosAiresBold,
+    fontWeight: '700',
+    fontSize: 18,
+    color: COLORS.NEUTRAL_10,
   },
 })

package/src/features/fluency-teacher/components/drawer/DrawerStats.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { SPACING } from '@magmamath/react-native-ui'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
 import { useText } from '../../../../i18n/i18n'
-import { useTeacherFluency } from '../../context/TeacherFluencyContext'
 import { DrawerOperatorStatCard } from './DrawerOperatorStatCard'
 import type { StudentOperatorScores } from '../../fluencyTeacher.types'
 
-import { OPERATOR_CARD_CONFIG, OPERATOR_TO_COLUMN } from '../../fluencyTeacher.constants'
-import { getOperatorsForGrade } from '../../fluencyTeacher.helpers'
+import { FluencyMathOperatorSymbol } from '../../fluencyTeacher.constants'
 
 type DrawerStatsProps = {
   scores: StudentOperatorScores
@@ -15,18 +13,32 @@ type DrawerStatsProps = {
 
 export const DrawerStats = ({ scores }: DrawerStatsProps) => {
   const t = useText()
-  const { grade } = useTeacherFluency()
   return (
     <View style={styles.container}>
-      {getOperatorsForGrade(grade).map((operator) => (
-        <DrawerOperatorStatCard
-          key={operator}
-          title={t(OPERATOR_CARD_CONFIG[operator].labelKey)}
-          symbol={OPERATOR_CARD_CONFIG[operator].symbol}
-          operator={operator}
-          value={scores[OPERATOR_TO_COLUMN[operator]]}
-        />
-      ))}
+      <DrawerOperatorStatCard
+        title={t('student.fluency.addition')}
+        symbol={FluencyMathOperatorSymbol.ADDITION}
+        color={COLORS.PRIMARY_GREEN}
+        value={scores.addition}
+      />
+      <DrawerOperatorStatCard
+        title={t('student.fluency.subtraction')}
+        symbol={FluencyMathOperatorSymbol.SUBTRACTION}
+        color={COLORS.PRIMARY_ORANGE}
+        value={scores.subtraction}
+      />
+      <DrawerOperatorStatCard
+        title={t('student.fluency.multiplication')}
+        symbol={FluencyMathOperatorSymbol.MULTIPLICATION}
+        color={COLORS.PRIMARY_BLUE}
+        value={scores.multiplication}
+      />
+      <DrawerOperatorStatCard
+        title={t('student.fluency.division')}
+        symbol={FluencyMathOperatorSymbol.DIVISION}
+        color={COLORS.PRIMARY_PURPLE}
+        value={scores.division}
+      />
     </View>
   )
 }
@@ -34,7 +46,7 @@ export const DrawerStats = ({ scores }: DrawerStatsProps) => {
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    gap: SPACING[400],
-    paddingBottom: SPACING[400],
+    gap: SPACING[300],
+    paddingBottom: SPACING[300],
   },
 })

package/src/features/fluency-teacher/components/drawer/FluencyTeacherDrawer.tsx

@@ -7,8 +7,9 @@ import { DrawerHeader } from './DrawerHeader'
 import { DrawerStats } from './DrawerStats'
 import { DrawerMatrixes } from './DrawerMatrixes'
 import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import { DrawerMasteryLegend } from './DrawerMasteryLegend'
 
-const DRAWER_WIDTH = 815
+const DRAWER_WIDTH = 700
 const BACKDROP_COLOR = 'rgba(0, 0, 0, 0.2)'
 
 const backdropOpacity = new Animated.Value(0)
@@ -54,6 +55,7 @@ export const FluencyTeacherDrawer = () => {
             <DrawerStats scores={student.scores} />
             <ScrollView showsVerticalScrollIndicator={false}>
               <DrawerMatrixes />
+              <DrawerMasteryLegend />
             </ScrollView>
           </View>
         </Animated.View>
@@ -76,13 +78,12 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     width: DRAWER_WIDTH,
-    maxWidth: '100%',
     backgroundColor: COLORS.NEUTRAL_1,
     ...SHADOWS[3],
   },
   content: {
     flex: 1,
-    paddingVertical: SPACING[200],
-    paddingHorizontal: SPACING[400],
+    paddingVertical: SPACING[500],
+    paddingHorizontal: SPACING[700],
   },
 })

package/src/features/fluency-teacher/components/matrix/DrawerMatrix.tsx

@@ -5,15 +5,14 @@ import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
 import { useText } from '../../../../i18n/i18n'
 import { MatrixHeaderRow } from './MatrixHeaderRow'
 import { MatrixRow } from './MatrixRow'
-import { MasteryLevel } from '../../fluencyTeacher.constants'
-import type { DrawerGrid } from '../../fluencyTeacher.types'
+import type { DrawerGrid } from '../../hooks/useDrawerGrid'
 
 type DrawerMatrixProps = {
   grid: DrawerGrid | null
   cellSize: number
   fontSize: number
   borderRadius: number
-  cellColorMap: Record<MasteryLevel, string>
+  cellColorMap: Record<number, string>
   onLayout: (e: LayoutChangeEvent) => void
 }
 

package/src/features/fluency-teacher/components/matrix/MatrixCell.tsx

@@ -1,24 +1,27 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
 import { getCellColor } from '../../fluencyTeacher.helpers'
-import { MasteryLevel } from '../../fluencyTeacher.constants'
 
-type MatrixCellProps = {
-  box: MasteryLevel | null
+export type MatrixCellProps = {
+  box: number | null
   isEmpty: boolean
   cellSize: number
   borderRadius: number
-  colorMap: Record<MasteryLevel, string>
+  colorMap: Record<number, string>
+  fontSize: number
 }
 
-export const MatrixCell = ({ box, isEmpty, cellSize, borderRadius, colorMap }: MatrixCellProps) => (
+export const MatrixCell = ({ box, isEmpty, cellSize, borderRadius, colorMap, fontSize }: MatrixCellProps) => (
   <View
     style={[
       styles.cell,
       { width: cellSize, height: cellSize, borderRadius },
       { backgroundColor: isEmpty ? 'transparent' : getCellColor(box, colorMap) },
     ]}
-  />
+  >
+    {isEmpty && <Text style={[styles.label, { fontSize }]}>-</Text>}
+  </View>
 )
 
 const styles = StyleSheet.create({
@@ -26,4 +29,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  label: {
+    color: COLORS.NEUTRAL_7,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
 })

package/src/features/fluency-teacher/components/matrix/MatrixHeaderRow.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
 
-type MatrixHeaderRowProps = {
+export type MatrixHeaderRowProps = {
   colLabels: number[]
   cellSize: number
   fontSize: number

package/src/features/fluency-teacher/components/matrix/MatrixRow.tsx

@@ -2,15 +2,14 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
 import { MatrixCell } from './MatrixCell'
-import { MasteryLevel } from '../../fluencyTeacher.constants'
-import type { DrawerGridCell } from '../../fluencyTeacher.types'
+import type { DrawerGridCell } from '../../hooks/useDrawerGrid'
 
-type MatrixRowProps = {
+export type MatrixRowProps = {
   label: number
   cells: DrawerGridCell[]
   cellSize: number
   borderRadius: number
-  colorMap: Record<MasteryLevel, string>
+  colorMap: Record<number, string>
   fontSize: number
 }
 
@@ -34,6 +33,7 @@ export const MatrixRow = ({
         cellSize={cellSize}
         borderRadius={borderRadius}
         colorMap={colorMap}
+        fontSize={fontSize}
       />
     ))}
   </View>