@magmamath/students-features 0.9.5-rc.1 → 0.9.5

package/src/features/endOfAssignment/model/model.ts

@@ -9,6 +9,7 @@ export class EOAModel {
   public readonly leavePressed = createEvent()
   public readonly goToFirstProblemPressed = createEvent()
   public readonly recommendationsUpdated = createEvent<boolean>()
+  public readonly popUpStatsUpdated = createEvent<Partial<EOAModalData['stats']>>()
   public readonly popUpTriggered = createEvent<EOAEventType>()
 
   public readonly $popUpData = createStore<EOAModalData | null>(null)
@@ -16,6 +17,9 @@ export class EOAModel {
     .on(this.recommendationsUpdated, (state, hasRecommendations) =>
       state ? { ...state, hasRecommendations } : state,
     )
+    .on(this.popUpStatsUpdated, (state, payload) =>
+      state ? { ...state, stats: { ...state.stats, ...payload } } : state,
+    )
     .reset(this.hidePopUp)
 
   public readonly $modalVariant = createStore<EOAModalVariant | null>(null)
@@ -33,7 +37,7 @@ export class EOAModel {
       }
 
       if (eventType === EOAEventType.EXAM_PAUSED) return EOAModalVariant.EXAM_PAUSED
-      
+
       if (eventType === EOAEventType.CHEAT_DETECTED) {
         return EOAModalVariant.EXAM_SAFE_MODE_CHEAT_DETECTED
       }

package/src/features/endOfAssignment/types.ts

@@ -34,11 +34,11 @@ export type EOAModalContentProps = {
   textContent: EOAModalText
   model: EOAModel
   onPracticePress?: () => void
-  buttonColor?: ButtonColor
 }
 
 export type EOAModalData = {
   isExam: boolean
+  isAssessment: boolean
   newerAssignmentAvailable?: boolean
   examFinished?: boolean
   cheatDetection?: boolean
@@ -63,5 +63,6 @@ export type EOAModalText = {
     correctAnswersPlural?: string
     goodCalculations?: string
     goodCalculationsPlural?: string
+    score?: string
   }
 }

package/src/features/endOfAssignment/ui/PracticeButtonGroup.tsx

@@ -11,13 +11,14 @@ import Animated, {
 import { ButtonVariant, SPACING, Button, ButtonSize, ButtonColor } from '@magmamath/react-native-ui'
 
 import { PracticeButton } from './PracticeButton'
+import { getEoaButtonColor } from '../helpers'
 
 type PracticeButtonGroupProps = {
   textContent: { leftButtonText?: string; rightButtonText?: string }
   isPracticeButtonVisible: boolean
   onLeftButtonPress: () => void
   onRightButtonPress: () => void
-  isExam: boolean
+  buttonColor?: ButtonColor
 }
 
 export const PracticeButtonGroup = ({
@@ -25,7 +26,7 @@ export const PracticeButtonGroup = ({
   isPracticeButtonVisible,
   onLeftButtonPress,
   onRightButtonPress,
-  isExam,
+  buttonColor = ButtonColor.BLUE,
 }: PracticeButtonGroupProps) => {
   const buttonsContainerOpacity = useSharedValue(0)
 
@@ -45,7 +46,7 @@ export const PracticeButtonGroup = ({
         <Button
           variant={isPracticeButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
           size={ButtonSize.LARGE}
-          colorScheme={isExam ? ButtonColor.PURPLE : ButtonColor.BLUE}
+          colorScheme={buttonColor}
           style={{ text: { textTransform: 'uppercase' } }}
           onPress={onLeftButtonPress}
         >

package/src/features/keyboard/components/AlgebraLayout/AlgebraLayout.tsx

@@ -9,11 +9,11 @@ import { SelectedLayout } from './types'
 import { getKeyboardGroup } from '../../helpers'
 import { getSelectOptions } from './helpers'
 
-export const AlgebraLayout = (props: KeyboardLayoutProps) => {
+export const AlgebraLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
   const t = useText()
   const { width } = useWindowDimensions()
-  const selectOptions = getSelectOptions(selectedLayout, setSelectedLayout)
+  const selectOptions = getSelectOptions({ selectedLayout, setSelectedLayout, onLayoutChange })
   const isDesktop = width > MOBILE_LAYOUT_WIDTH && !IS_MOBILE
   const locale = t('locale') as Locale
 

package/src/features/keyboard/components/AlgebraLayout/helpers.tsx

@@ -10,10 +10,17 @@ type LayoutOption = {
   onPressIn: () => void
 }
 
-export function getSelectOptions(
-  selectedLayout: SelectedLayout,
-  setSelectedLayout: (layout: SelectedLayout) => void,
-): LayoutOption[] {
+type GetSelectOptionsProps = {
+  selectedLayout: SelectedLayout
+  setSelectedLayout: (layout: SelectedLayout) => void
+  onLayoutChange?: (isSecondaryLayout: boolean) => void
+}
+
+export function getSelectOptions({
+  selectedLayout,
+  setSelectedLayout,
+  onLayoutChange,
+}: GetSelectOptionsProps): LayoutOption[] {
   return [
     {
       key: SelectedLayout.BASIC,
@@ -23,7 +30,10 @@ export function getSelectOptions(
           size={22}
         />
       ),
-      onPressIn: () => setSelectedLayout(SelectedLayout.BASIC),
+      onPressIn: () => {
+        setSelectedLayout(SelectedLayout.BASIC)
+        onLayoutChange?.(false)
+      },
     },
     {
       key: SelectedLayout.ALGEBRA,
@@ -33,7 +43,10 @@ export function getSelectOptions(
           size={25}
         />
       ),
-      onPressIn: () => setSelectedLayout(SelectedLayout.ALGEBRA),
+      onPressIn: () => {
+        setSelectedLayout(SelectedLayout.ALGEBRA)
+        onLayoutChange?.(true)
+      },
     },
   ]
 }

package/src/features/keyboard/components/BasicLayout/keyboardGroups.ts

@@ -58,7 +58,3 @@ export const MATH_CURRENCY_US_KEYBOARD_GROUP: KeyboardGroup = {
   id: MathEntryKeyboardGroupId.CURRENCY_US,
   keys: [MATH_CURRENCY_UNITS.DOLLAR, MATH_CURRENCY_UNITS.CENT],
 }
-export const MATH_CURRENCY_DE_KEYBOARD_GROUP: KeyboardGroup = {
-  id: MathEntryKeyboardGroupId.CURRENCY_DE,
-  keys: [MATH_CURRENCY_UNITS.EURO, MATH_CURRENCY_UNITS.DOLLAR, MATH_CURRENCY_UNITS.POUND],
-}

package/src/features/keyboard/components/Keyboard.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useRef } from 'react'
 import { Animated, StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
 import { COLORS, IS_MOBILE, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
-import { getLayoutByCharType } from '../constants/keyboardLayouts'
 import { KeyboardKey, KeyboardKeyValue } from '../types/types'
 import { Numpad } from './Numpad/Numpad'
 import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
@@ -11,6 +10,7 @@ import {
   slideInAnimationSettings,
   slideOutAnimationSettings,
 } from './constants'
+import { MainLayout } from './MainLayout'
 
 type KeyboardProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -19,15 +19,15 @@ type KeyboardProps = {
   color?: SelectOptionColor
   isVisible?: boolean
   isDisabled?: boolean
+  showUnderlinedKeys?: boolean
   disabledKeys?: KeyboardKey[]
 }
 
 export const Keyboard = ({ style, characterType, isVisible = true, ...props }: KeyboardProps) => {
   const slideAnim = useRef(new Animated.Value(isVisible ? 0 : KEYBOARD_SLIDE_DISTANCE)).current
+
   const { width } = useWindowDimensions()
   const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
-
-  const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType])
   const mobileStyles = useMemo(
     () => getLayoutConfigStyles(characterType, isMobile),
     [characterType, isMobile],
@@ -57,7 +57,7 @@ export const Keyboard = ({ style, characterType, isVisible = true, ...props }: K
         },
       ]}
     >
-      <Layout {...props} />
+      <MainLayout {...props} characterType={characterType} />
       <Numpad {...props} style={mobileStyles} />
     </Animated.View>
   )

package/src/features/keyboard/components/MainLayout.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
+import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { SelectOptionColor, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
+import { getLayoutByCharType } from '../constants/keyboardLayouts'
+import { KeyboardKey, KeyboardKeyValue } from '../types/types'
+import { UnderlinedLayout } from './UnderlinedLayout/UnderlinedLayout'
+import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
+
+type LayoutProps = {
+  onKeyPress: (key: KeyboardKeyValue) => void
+  characterType?: number
+  color?: SelectOptionColor
+  isVisible?: boolean
+  isDisabled?: boolean
+  showUnderlinedKeys?: boolean
+  disabledKeys?: KeyboardKey[]
+}
+
+export const MainLayout = ({
+  characterType,
+  showUnderlinedKeys = false,
+  ...props
+}: LayoutProps) => {
+  const [isUnderlinedVisible, setIsUnderlinedVisible] = useState(showUnderlinedKeys)
+  const [isSecondaryLayoutSelected, setIsSecondaryLayoutSelected] = useState(false)
+
+  const fadeAnim = useRef(new Animated.Value(showUnderlinedKeys ? 1 : 0)).current
+  const fadeRef = useRef<Animated.CompositeAnimation | null>(null)
+
+  const { width } = useWindowDimensions()
+  const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
+
+  const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType])
+  const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile
+
+  const animateFade = useCallback(
+    (toValue: number, onComplete?: () => void) => {
+      fadeRef.current?.stop()
+      fadeRef.current = Animated.timing(fadeAnim, {
+        toValue,
+        duration: 250,
+        useNativeDriver: !IS_WEB,
+      })
+      fadeRef.current.start(() => onComplete?.())
+    },
+    [fadeAnim],
+  )
+
+  useEffect(() => {
+    if (showUnderlinedKeys) {
+      setIsUnderlinedVisible(true)
+      animateFade(1)
+      return
+    }
+    animateFade(0, () => setIsUnderlinedVisible(false))
+
+    return () => {
+      fadeRef.current?.stop()
+    }
+  }, [showUnderlinedKeys, animateFade])
+
+  return (
+    <View style={styles.container}>
+      <Layout {...props} onLayoutChange={setIsSecondaryLayoutSelected} />
+      {isUnderlinedLayoutVisible && (
+        <Animated.View style={{ opacity: fadeAnim }}>
+          <UnderlinedLayout {...props} />
+        </Animated.View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+  },
+})

package/src/features/keyboard/components/UnderlinedLayout/UnderlinedLayout.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { KeysList } from '../KeysList/KeysList'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { Locale, useText } from '../../../../shared/translation'
+import { getKeyboardGroup } from '../../helpers'
+
+export const UnderlinedLayout = (props: KeyboardLayoutProps) => {
+  const t = useText()
+  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Underlined)
+
+  return <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
+}

package/src/features/keyboard/components/UnderlinedLayout/keyboardGroups.ts

@@ -0,0 +1,12 @@
+import { KeyboardGroup } from '../../types/types'
+import { MathEntryKeyboardGroupId } from '../../types/keyboardGroupIds'
+import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
+
+export const MATH_ENTRY_UNDERLINED_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.UNDERLINED,
+  keys: [
+    MATH_BASIC_OPERATORS.UNDERLINED_TEN,
+    MATH_BASIC_OPERATORS.UNDERLINED_ONE,
+    MATH_BASIC_OPERATORS.UNDERLINED_U,
+  ],
+}

package/src/features/keyboard/components/UnitsLayout/UnitsLayout.tsx

@@ -12,7 +12,7 @@ import { KeyboardUnitsGroupType, SelectedLayout } from './types'
 import { getSelectOptions } from './helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const UnitsLayout = (props: KeyboardLayoutProps) => {
+export const UnitsLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
   const t = useText()
   const locale = t('locale') as Locale
@@ -26,6 +26,7 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
     activeTabKey: activeTab.key as KeyboardUnitsGroupType,
     selectedLayout,
     setSelectedLayout,
+    onLayoutChange,
   })
 
   return (

package/src/features/keyboard/components/UnitsLayout/helpers.tsx

@@ -8,12 +8,14 @@ type UseLayoutSelectOptionsProps = {
   activeTabKey: KeyboardUnitsGroupType
   selectedLayout: SelectedLayout
   setSelectedLayout: (layout: SelectedLayout) => void
+  onLayoutChange?: (isSecondaryLayout: boolean) => void
 }
 
 export const getSelectOptions = ({
   activeTabKey,
   selectedLayout,
   setSelectedLayout,
+  onLayoutChange,
 }: UseLayoutSelectOptionsProps) => {
   {
     const SelectedIcon = UNITS_KEYBOARD_GROUPS.get(activeTabKey)?.icon || RulerIcon
@@ -27,7 +29,10 @@ export const getSelectOptions = ({
             size={22}
           />
         ),
-        onPressIn: () => setSelectedLayout(SelectedLayout.ALGEBRA),
+        onPressIn: () => {
+          setSelectedLayout(SelectedLayout.ALGEBRA)
+          onLayoutChange?.(false)
+        },
       },
       {
         key: SelectedLayout.UNITS,
@@ -37,7 +42,10 @@ export const getSelectOptions = ({
             size={16}
           />
         ),
-        onPressIn: () => setSelectedLayout(SelectedLayout.UNITS),
+        onPressIn: () => {
+          setSelectedLayout(SelectedLayout.UNITS)
+          onLayoutChange?.(true)
+        },
       },
     ]
   }

package/src/features/keyboard/constants/keyboardGroupsByLocale.ts

@@ -1,6 +1,5 @@
 import { KeyboardGroup, KeyboardType } from '../types/types'
 import {
-  MATH_CURRENCY_DE_KEYBOARD_GROUP,
   MATH_CURRENCY_SW_KEYBOARD_GROUP,
   MATH_CURRENCY_UK_KEYBOARD_GROUP,
   MATH_CURRENCY_US_KEYBOARD_GROUP,
@@ -40,6 +39,7 @@ import {
 import { Locale } from '../../../shared/translation'
 import { MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP } from '../components/AlgebraLayout/keyboardGroups'
 import { KeyboardUnitsGroupType, UnitKeyboardGroups } from '../components/UnitsLayout/types'
+import { MATH_ENTRY_UNDERLINED_KEYBOARD_GROUP } from '../components/UnderlinedLayout/keyboardGroups'
 
 function createKeyboardLocale(overrides: Partial<Record<KeyboardType, KeyboardGroup>>) {
   const base: Record<KeyboardType, KeyboardGroup> = {
@@ -56,6 +56,7 @@ function createKeyboardLocale(overrides: Partial<Record<KeyboardType, KeyboardGr
     [KeyboardType.BasicTime]: MATH_TIME_US_KEYBOARD_GROUP,
     [KeyboardType.AlgebraAdvanced]: MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP,
     [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_US_KEYBOARD_GROUP,
+    [KeyboardType.Underlined]: MATH_ENTRY_UNDERLINED_KEYBOARD_GROUP,
   }
   return { ...base, ...overrides }
 }
@@ -97,20 +98,6 @@ export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, Keyb
     [KeyboardType.BasicTime]: MATH_TIME_SW_KEYBOARD_GROUP,
     [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_SW_KEYBOARD_GROUP,
   }),
-  [Locale.DE]: createKeyboardLocale({
-    [KeyboardType.Basic]: MATH_ENTRY_BASIC_SW_KEYBOARD_GROUP,
-    [KeyboardType.BasicPlus]: MATH_ENTRY_BASIC_SW_PLUS,
-    [KeyboardType.BasicPlusMobile]: MATH_ENTRY_BASIC_PLUS_MOBILE_SW,
-    [KeyboardType.BasicPlusPlus]: MATH_ENTRY_BASIC_PLUS_PLUS_SW,
-    [KeyboardType.BasicPlusPlusMobile]: MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE_SW,
-    [KeyboardType.BasicUnits]: {
-      ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
-      keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],
-    },
-    [KeyboardType.BasicCurrency]: MATH_CURRENCY_DE_KEYBOARD_GROUP,
-    [KeyboardType.BasicTime]: MATH_TIME_SW_KEYBOARD_GROUP,
-    [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_SW_KEYBOARD_GROUP,
-  }),
 }
 export const KEYBOARD_UNITS_GROUPS_BY_LOCALE: Record<
   Locale,
@@ -132,10 +119,4 @@ export const KEYBOARD_UNITS_GROUPS_BY_LOCALE: Record<
     [KeyboardUnitsGroupType.VOLUME]: MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS,
     [KeyboardUnitsGroupType.WEIGHT]: MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS,
   }),
-  [Locale.DE]: createKeyboardUnitsLocale({
-    [KeyboardUnitsGroupType.LENGTH]: MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS,
-    [KeyboardUnitsGroupType.AREA]: MATH_ENTRY_AREA_UNITS_SW_KEYBOARD_GROUPS,
-    [KeyboardUnitsGroupType.VOLUME]: MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS,
-    [KeyboardUnitsGroupType.WEIGHT]: MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS,
-  }),
 }

package/src/features/keyboard/types/MathKeysGroups/basicOperators.tsx

@@ -42,6 +42,9 @@ import { EqualsIcon } from '../../../../shared/icons/keyboard/EqualsIcon/EqualsI
 import { AbsoluteValueIcon } from '../../../../shared/icons/keyboard/AbsoluteValueIcon/AbsoluteValueIcon'
 import { IntervalIcon } from '../../../../shared/icons/keyboard/IntervalIcon/IntervalIcon'
 import { createMathKeysGroup } from './helpers'
+import { UnderlinedTenIcon } from '../../../../shared/icons/keyboard/UnderlinedTenIcon/UnderlinedTenIcon'
+import { UnderlinedOneIcon } from '../../../../shared/icons/keyboard/UnderlinedOneIcon/UnderlinedOneIcon'
+import { UnderlinedUIcon } from '../../../../shared/icons/keyboard/UnderlinedUIcon/UnderlinedUIcon'
 
 export const MATH_BASIC_OPERATORS = createMathKeysGroup({
   ADDITION: {
@@ -266,4 +269,22 @@ export const MATH_BASIC_OPERATORS = createMathKeysGroup({
     mathliveValue: '$\\left[, \\right]$',
     katexValue: '[ , ]',
   },
+  UNDERLINED_TEN: {
+    icon: <UnderlinedTenIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\underline{10}',
+    katexValue: '10̲',
+    spreadsheetValue: 'TEN',
+  },
+  UNDERLINED_ONE: {
+    icon: <UnderlinedOneIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\underline{1}',
+    katexValue: '1̲',
+    spreadsheetValue: 'ONE_FOOT_NOTE',
+  },
+  UNDERLINED_U: {
+    icon: <UnderlinedUIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\underline{u}',
+    katexValue: 'U̲',
+    spreadsheetValue: 'FRACTION',
+  },
 })

package/src/features/keyboard/types/keyboardGroupIds.ts

@@ -27,5 +27,5 @@ export enum MathEntryKeyboardGroupId {
   CURRENCY_SW = 'math-entry-currency-sw',
   CURRENCY_UK = 'math-entry-currency-uk',
   CURRENCY_US = 'math-entry-currency-us',
-  CURRENCY_DE = 'math-entry-currency-de',
+  UNDERLINED = 'math-entry-underlined',
 }

package/src/features/keyboard/types/types.ts

@@ -13,6 +13,7 @@ export const enum KeyboardType {
   BasicPlusPlus = 'BasicPlusPlus',
   BasicPlusPlusMobile = 'BasicPlusPlusMobile',
   Numpad = 'Numpad',
+  Underlined = 'Underlined',
 }
 
 export type KeyboardKey = {
@@ -44,6 +45,7 @@ export type KeyboardGroup = {
 
 export type KeyboardLayoutProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
+  onLayoutChange?: (isSecondaryLayout: boolean) => void
   color?: SelectOptionColor
   isDisabled?: boolean
   disabledKeys?: KeyboardKey[]

package/src/lib/helpers/helpers.ts

@@ -27,27 +27,12 @@ export const getRelativeTimeText = (date: Date) => {
   const years = getYears(days)
 
   if (seconds < 60) return getText('time.justNow')
-
-  if (minutes < 60) {
-    if (minutes === 1) return `1 ${getText('time.minuteAgo')}`
-    return getText('time.minutesAgo', { count: minutes.toString() })
-  }
-
-  if (hours < 24) {
-    if (hours === 1) return `1 ${getText('time.hourAgo')}`
-    return getText('time.hoursAgo', { count: hours.toString() })
-  }
-
-  if (days < 30) {
-    if (days === 1) return `1 ${getText('time.dayAgo')}`
-    return getText('time.daysAgo', { count: days.toString() })
-  }
-
-  if (months < 12) {
-    if (months === 1) return `1 ${getText('time.monthAgo')}`
-    return getText('time.monthsAgo', { count: months.toString() })
-  }
-
-  if (years === 1) return `1 ${getText('time.yearAgo')}`
-  return getText('time.yearsAgo', { count: years.toString() })
+  if (minutes < 60)
+    return `${minutes} ${minutes === 1 ? getText('time.minuteAgo') : getText('time.minutesAgo')}`
+  if (hours < 24)
+    return `${hours} ${hours === 1 ? getText('time.hourAgo') : getText('time.hoursAgo')}`
+  if (days < 30) return `${days} ${days === 1 ? getText('time.dayAgo') : getText('time.daysAgo')}`
+  if (months < 12)
+    return `${months} ${months === 1 ? getText('time.monthAgo') : getText('time.monthsAgo')}`
+  return `${years} ${years === 1 ? getText('time.yearAgo') : getText('time.yearsAgo')}`
 }

package/src/shared/icons/keyboard/UnderlinedOneIcon/UnderlinedOneIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const UnderlinedOneIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 17 17" fill="none">
+      <Path d="M7.93176 12.1924V3.83738H6.46176V1.84238H10.0918V12.1924H7.93176Z" fill={color} />
+      <Path
+        d="M2.15088 15.1924H15.1509"
+        stroke={color}
+        stroke-width="1.2"
+        stroke-linecap="square"
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/UnderlinedTenIcon/UnderlinedTenIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const UnderlinedTenIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 17 17" fill="none">
+      <Path
+        d="M3.25158 12.1924V3.83738H1.78158V1.84238H5.41158V12.1924H3.25158ZM11.4998 1.69238C14.0348 1.69238 15.5198 3.52238 15.5198 6.80738V7.16738C15.5198 10.4524 14.0348 12.2824 11.4998 12.2824C8.96482 12.2824 7.47982 10.4524 7.47982 7.16738V6.80738C7.47982 3.52238 8.96482 1.69238 11.4998 1.69238ZM9.65482 7.16738C9.65482 9.38738 10.2698 10.3024 11.4998 10.3024C12.7298 10.3024 13.3448 9.38738 13.3448 7.16738V6.80738C13.3448 4.58738 12.7298 3.67238 11.4998 3.67238C10.2698 3.67238 9.65482 4.58738 9.65482 6.80738V7.16738Z"
+        fill={color}
+      />
+      <path
+        d="M2.15088 15.1924H15.1509"
+        stroke={color}
+        stroke-width="1.2"
+        stroke-linecap="square"
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/UnderlinedUIcon/UnderlinedUIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const UnderlinedUIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 17 17" fill="none">
+      <Path
+        d="M10.6573 1.69238H12.8473V8.42738C12.8473 10.7824 11.4523 12.4174 8.6473 12.4174C5.8273 12.4174 4.4473 10.7824 4.4473 8.42738V1.69238H6.6223V8.26238C6.6223 9.56738 7.4023 10.3474 8.6473 10.3474C9.8923 10.3474 10.6573 9.56738 10.6573 8.26238V1.69238Z"
+        fill={color}
+      />
+      <Path
+        d="M2.15088 15.1924H15.1509"
+        stroke={color}
+        stroke-width="1.2"
+        stroke-linecap="square"
+      />
+    </Svg>
+  )
+}

package/src/shared/translation/constants.ts

@@ -4,7 +4,6 @@ import GB from './localization/gb.json'
 import SW from './localization/sw.json'
 import CA from './localization/ca.json'
 import SCT from './localization/sct.json'
-import DE from './localization/de.json'
 
 export const LOCALIZATION_CONFIGS = {
   [Locale.EN]: EN,
@@ -12,5 +11,4 @@ export const LOCALIZATION_CONFIGS = {
   [Locale.SW]: SW,
   [Locale.CA]: CA,
   [Locale.SCT]: SCT,
-  [Locale.DE]: DE,
 }

package/src/shared/translation/localization/ca.json

@@ -3,15 +3,15 @@
   "teacherFeedback.noComments": "No comments yet",
   "time.justNow": "just now",
   "time.minuteAgo": "minute ago",
-  "time.minutesAgo": "{{count}} minutes ago",
+  "time.minutesAgo": "minutes ago",
   "time.hourAgo": "hour ago",
-  "time.hoursAgo": "{{count}} hours ago",
+  "time.hoursAgo": "hours ago",
   "time.dayAgo": "day ago",
-  "time.daysAgo": "{{count}} days ago",
+  "time.daysAgo": "days ago",
   "time.monthAgo": "month ago",
-  "time.monthsAgo": "{{count}} months ago",
+  "time.monthsAgo": "months ago",
   "time.yearAgo": "year ago",
-  "time.yearsAgo": "{{count}} years ago",
+  "time.yearsAgo": "years ago",
   "chat": {
     "anotherHint": "Give me another hint",
     "giveHint": "I need a hint",

package/src/shared/translation/localization/en.json

@@ -3,15 +3,15 @@
   "teacherFeedback.noComments": "No comments yet",
   "time.justNow": "just now",
   "time.minuteAgo": "minute ago",
-  "time.minutesAgo": "{{count}} minutes ago",
+  "time.minutesAgo": "minutes ago",
   "time.hourAgo": "hour ago",
-  "time.hoursAgo": "{{count}} hours ago",
+  "time.hoursAgo": "hours ago",
   "time.dayAgo": "day ago",
-  "time.daysAgo": "{{count}} days ago",
+  "time.daysAgo": "days ago",
   "time.monthAgo": "month ago",
-  "time.monthsAgo": "{{count}} months ago",
+  "time.monthsAgo": "months ago",
   "time.yearAgo": "year ago",
-  "time.yearsAgo": "{{count}} years ago",
+  "time.yearsAgo": "years ago",
   "chat": {
     "anotherHint": "Give me another hint",
     "giveHint": "I need a hint",

package/src/shared/translation/localization/gb.json

@@ -3,15 +3,15 @@
   "teacherFeedback.noComments": "No comments yet",
   "time.justNow": "just now",
   "time.minuteAgo": "minute ago",
-  "time.minutesAgo": "{{count}} minutes ago",
+  "time.minutesAgo": "minutes ago",
   "time.hourAgo": "hour ago",
-  "time.hoursAgo": "{{count}} hours ago",
+  "time.hoursAgo": "hours ago",
   "time.dayAgo": "day ago",
-  "time.daysAgo": "{{count}} days ago",
+  "time.daysAgo": "days ago",
   "time.monthAgo": "month ago",
-  "time.monthsAgo": "{{count}} months ago",
+  "time.monthsAgo": "months ago",
   "time.yearAgo": "year ago",
-  "time.yearsAgo": "{{count}} years ago",
+  "time.yearsAgo": "years ago",
   "chat": {
     "anotherHint": "Give me another hint",
     "giveHint": "I need a hint",