@magmamath/students-features 1.8.4 → 1.8.6-rc.1

package/dist/typescript/module/shared/hooks/useKeyboardOffset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardOffset.d.ts","sourceRoot":"","sources":["../../../../../src/shared/hooks/useKeyboardOffset.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAA0C,MAAM,cAAc,CAAA;AAQ/E;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,sBAuC7B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.8.4",
+  "version": "1.8.6-rc.1",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -52,6 +52,7 @@
     "@magmamath/students-qa": "*",
     "@matteappen/skills-utils": "^3.7.1",
     "@react-native-masked-view/masked-view": "*",
+    "react-native-confirmation-code-field": ">=8.0.0",
     "d3-shape": "3.2.0",
     "effector": "^23.2.3",
     "effector-action": "^1.2.2",
@@ -74,7 +75,7 @@
   "devDependencies": {
     "@magmamath/frontend-config": "1.7.2",
     "@magmamath/react-native-draw-board": "1.8.3",
-    "@magmamath/react-native-ui": "0.5.9",
+    "@magmamath/react-native-ui": "0.5.13",
     "@magmamath/students-qa": "0.2.3",
     "@matteappen/skills-utils": "^3.7.1",
     "@react-native-masked-view/masked-view": "^0.3.2",
@@ -102,6 +103,7 @@
     "react": "18.3.1",
     "react-i18next": "^15.5.2",
     "react-native": "0.76.3",
+    "react-native-confirmation-code-field": "^8.0.0",
     "react-native-builder-bob": "^0.33.3",
     "react-native-gesture-handler": "^2.28.0",
     "react-native-linear-gradient": "^2.8.3",

package/src/features/chatbot/components/ChatInput/FreeText/ChatTextInput.tsx

@@ -8,7 +8,6 @@ import {
   TextInputFocusEventData,
 } from 'react-native'
 import { COLORS, FONT_FAMILY, IS_WEB, SPACING } from '@magmamath/react-native-ui'
-import { INPUT_WIDTH } from '../../../constants'
 import { ColorScheme } from '@magmamath/students-features'
 import { useKeyBoard } from '../../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../../lib/constants'

package/src/features/profile/Profile.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+
+import { isWeb } from '../../shared/common.constants'
+import { ProfileActions } from './components/actions/ProfileActions'
+import { AccountInfoCard } from './components/info/AccountInfoCard'
+import { LanguageSettingsCard } from './components/settings/LanguageSettingsCard'
+import { PreferencesCard } from './components/settings/PreferencesCard'
+import { TextSettingsCard } from './components/settings/TextSettingsCard'
+import { ProfileProvider, type ProfileContextValue } from './context/ProfileContext'
+
+type ProfileProps = ProfileContextValue
+
+const TWO_COLUMN_BREAKPOINT = 768
+const COLUMN_MAX_WIDTH = 560
+
+export const Profile = (props: ProfileProps) => {
+  const { showSolveMode, versionInfo } = props
+  const { width } = useWindowDimensions()
+  const isTwoColumn = width >= TWO_COLUMN_BREAKPOINT
+
+  return (
+    <ProfileProvider value={props}>
+      <ScrollView
+        style={styles.container}
+        contentContainerStyle={styles.scroll}
+        scrollEnabled={isWeb}
+        showsVerticalScrollIndicator={isWeb}
+      >
+        <View style={[styles.columns, !isTwoColumn && styles.columnsStacked]}>
+          <View style={[styles.column, isTwoColumn ? styles.columnWide : styles.columnStacked]}>
+            <LanguageSettingsCard />
+            <TextSettingsCard />
+          </View>
+          <View style={[styles.column, isTwoColumn ? styles.columnWide : styles.columnStacked]}>
+            {showSolveMode && <PreferencesCard />}
+            <AccountInfoCard />
+          </View>
+        </View>
+        <ProfileActions />
+        {versionInfo ? <View style={styles.version}>{versionInfo}</View> : null}
+      </ScrollView>
+    </ProfileProvider>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: COLORS.NEUTRAL_3,
+    flex: 1,
+  },
+  scroll: {
+    flexGrow: 1,
+    gap: SPACING['800'],
+    paddingHorizontal: SPACING['800'],
+    paddingVertical: SPACING['600'],
+  },
+  columns: {
+    flexDirection: 'row',
+    gap: SPACING['600'],
+    justifyContent: 'center',
+    width: '100%',
+  },
+  columnsStacked: {
+    alignItems: 'center',
+    flexDirection: 'column',
+  },
+  column: {
+    gap: SPACING['600'],
+    maxWidth: COLUMN_MAX_WIDTH,
+  },
+  columnWide: {
+    flex: 1,
+  },
+  columnStacked: {
+    width: '100%',
+  },
+  version: {
+    alignSelf: 'flex-end',
+    marginTop: 'auto',
+  },
+})

package/src/features/profile/__tests__/ProfileModel.test.ts

@@ -0,0 +1,99 @@
+import { createStore } from 'effector'
+import { Language } from '@magmamath/frontend-config'
+
+import { JoinClassError } from '../shared/JoinClassError'
+import { ProfileModel } from '../model/ProfileModel'
+import { JoinClassStatus, ProfileCanvasType } from '../shared/profile.constants'
+import type { JoinClassResult, ProfileSettings, ProfileUser } from '../shared/profile.types'
+
+const baseSettings: ProfileSettings = {
+  textToSpeech: false,
+  textSize: 16,
+  translationLanguage: null,
+  canvasType: ProfileCanvasType.DRAWING,
+  isTranslationLocked: false,
+}
+
+const createModel = (joinClass = jest.fn<Promise<JoinClassResult>, [unknown]>().mockResolvedValue({ name: 'Math' })) => {
+  const updateSettings = jest.fn().mockResolvedValue(undefined)
+  const notify = jest.fn()
+  const model = new ProfileModel({
+    api: { updateSettings, joinClass },
+    notify,
+    $user: createStore<ProfileUser | null>(null),
+    $settings: createStore<ProfileSettings>(baseSettings),
+  })
+  return { model, updateSettings, joinClass, notify }
+}
+
+describe('ProfileModel settings', () => {
+  it('persists text-to-speech changes', () => {
+    const { model, updateSettings } = createModel()
+    model.setTextToSpeech(true)
+    expect(updateSettings).toHaveBeenCalledWith({ textToSpeech: true })
+  })
+
+  it('persists text size changes', () => {
+    const { model, updateSettings } = createModel()
+    model.setTextSize(24)
+    expect(updateSettings).toHaveBeenCalledWith({ textSize: 24 })
+  })
+
+  it('persists canvas type changes', () => {
+    const { model, updateSettings } = createModel()
+    model.setCanvasType(ProfileCanvasType.SPREADSHEET)
+    expect(updateSettings).toHaveBeenCalledWith({ canvasType: ProfileCanvasType.SPREADSHEET })
+  })
+
+  it('persists translation language selection', () => {
+    const { model, updateSettings } = createModel()
+    model.language.selectLanguage(Language.FRENCH)
+    expect(updateSettings).toHaveBeenCalledWith({ translationLanguage: Language.FRENCH })
+  })
+
+  it('filters the language list by search', () => {
+    const { model } = createModel()
+    model.language.setSearch('french')
+    expect(model.language.$languages.getState()).toEqual([Language.FRENCH])
+  })
+})
+
+describe('ProfileModel join class', () => {
+  it('ignores incomplete codes', () => {
+    const { model, joinClass } = createModel()
+    model.joinClass.setCode('ABC')
+    expect(model.joinClass.$isComplete.getState()).toBe(false)
+    model.joinClass.submit()
+    expect(joinClass).not.toHaveBeenCalled()
+  })
+
+  it('submits a complete code, notifies success and resets', async () => {
+    const { model, joinClass, notify } = createModel()
+    model.joinClass.setCode('ABCDEF')
+    expect(model.joinClass.$isComplete.getState()).toBe(true)
+
+    model.joinClass.submit()
+    expect(joinClass).toHaveBeenCalledWith({ classCode: 'ABCDEF' })
+
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    expect(notify).toHaveBeenCalledWith(
+      expect.objectContaining({ status: JoinClassStatus.SUCCESS })
+    )
+    expect(model.joinClass.$code.getState()).toBe('')
+  })
+
+  it('notifies an error when the request fails', async () => {
+    const joinClass = jest
+      .fn<Promise<JoinClassResult>, [unknown]>()
+      .mockRejectedValue(new JoinClassError(1021))
+    const { model, notify } = createModel(joinClass)
+
+    model.joinClass.setCode('ABCDEF')
+    model.joinClass.submit()
+
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    expect(notify).toHaveBeenCalledWith(
+      expect.objectContaining({ status: JoinClassStatus.ERROR })
+    )
+  })
+})

package/src/features/profile/__tests__/profile.helpers.test.ts

@@ -0,0 +1,57 @@
+import { Language } from '@magmamath/frontend-config'
+
+import { JoinClassErrorCode } from '../shared/profile.constants'
+import {
+  getAvailableLanguages,
+  getJoinClassErrorMessage,
+  snapTextSize,
+} from '../shared/profile.helpers'
+
+// Echo the key so the error-code → key mapping is observable (i18next is not
+// initialised under jest, so the real getText returns undefined).
+jest.mock('../../../i18n/i18n', () => ({
+  getText: (key: string) => key,
+}))
+
+describe('profile.helpers', () => {
+  describe('snapTextSize', () => {
+    it('snaps to the nearest step and clamps to range', () => {
+      expect(snapTextSize(16)).toBe(16)
+      expect(snapTextSize(17)).toBe(16)
+      expect(snapTextSize(18)).toBe(20)
+      expect(snapTextSize(33)).toBe(32)
+      expect(snapTextSize(10)).toBe(16)
+    })
+  })
+
+  describe('getJoinClassErrorMessage', () => {
+    it('maps each known backend code to a distinct message', () => {
+      const messages = [
+        getJoinClassErrorMessage(JoinClassErrorCode.CLASS_NOT_FOUND),
+        getJoinClassErrorMessage(JoinClassErrorCode.ALREADY_JOINED),
+        getJoinClassErrorMessage(JoinClassErrorCode.OTHER_DISTRICT),
+      ]
+      expect(new Set(messages).size).toBe(messages.length)
+    })
+
+    it('falls back to the default message for unknown codes and null', () => {
+      const fallback = getJoinClassErrorMessage(null)
+      expect(getJoinClassErrorMessage(9999)).toBe(fallback)
+      expect(getJoinClassErrorMessage(JoinClassErrorCode.CLASS_NOT_FOUND)).not.toBe(fallback)
+    })
+  })
+
+  describe('getAvailableLanguages', () => {
+    it('lists priority languages first', () => {
+      const languages = getAvailableLanguages()
+      expect(languages[0]).toBe(Language.SPANISH)
+      expect(languages.length).toBeGreaterThan(5)
+    })
+
+    it('filters by search query', () => {
+      const languages = getAvailableLanguages('span')
+      expect(languages).toContain(Language.SPANISH)
+      expect(languages.every((language) => language.toLowerCase().includes('span'))).toBe(true)
+    })
+  })
+})

package/src/features/profile/components/actions/ProfileActions.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  ReanimatedButton,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { TEST_IDS } from '@magmamath/students-qa'
+
+import { useText } from '../../../../i18n/i18n'
+import { useProfile } from '../../context/ProfileContext'
+
+export const ProfileActions = () => {
+  const t = useText()
+  const { onLogout, onOpenJoinClass } = useProfile()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.leftHalf}>
+        <ReanimatedButton
+          variant={ButtonVariant.SECONDARY}
+          colorScheme={ButtonColor.WHITE}
+          size={ButtonSize.LARGE}
+          onPress={onOpenJoinClass}
+          testID={TEST_IDS.JOIN_NEW_CLASS_BUTTON}
+          style={buttonStyle}
+        >
+          {t('profile.joinNewClass')}
+        </ReanimatedButton>
+      </View>
+      <View style={styles.rightHalf}>
+        <ReanimatedButton
+          variant={ButtonVariant.PRIMARY}
+          colorScheme={ButtonColor.ORANGE}
+          size={ButtonSize.LARGE}
+          onPress={onLogout}
+          testID={TEST_IDS.LOGOUT_BUTTON}
+          style={buttonStyle}
+        >
+          {t('profile.logOut')}
+        </ReanimatedButton>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: SPACING['600'],
+    width: '100%',
+  },
+  leftHalf: {
+    alignItems: 'flex-end',
+    flex: 1,
+  },
+  rightHalf: {
+    alignItems: 'flex-start',
+    flex: 1,
+  },
+  text: {
+    textTransform: 'uppercase',
+  },
+})
+
+const buttonStyle = { text: styles.text }

package/src/features/profile/components/cards/ProfileCard.tsx

@@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+type ProfileCardProps = {
+  title: string
+  children: ReactNode
+  style?: StyleProp<ViewStyle>
+}
+
+export const ProfileCard = ({ title, children, style }: ProfileCardProps) => (
+  <View style={[styles.card, style]}>
+    <View style={styles.header}>
+      <Typography variant={HeadingVariants.H9} style={styles.title}>
+        {title}
+      </Typography>
+    </View>
+    <View style={styles.divider} />
+    <View style={styles.body}>{children}</View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS['400'],
+    padding: SPACING['400'],
+    ...SHADOWS['1'],
+  },
+  header: {
+    paddingLeft: SPACING['200'],
+  },
+  title: {
+    color: COLORS.NEUTRAL_7,
+  },
+  divider: {
+    backgroundColor: COLORS.NEUTRAL_3,
+    height: 1,
+    marginHorizontal: SPACING['100'],
+    marginVertical: SPACING['200'],
+  },
+  body: {
+    gap: SPACING['400'],
+    justifyContent: 'center',
+  },
+})

package/src/features/profile/components/info/AccountInfoCard.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { useUnit } from 'effector-react'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, HeadingVariants, InfoIcon, SPACING, Typography } from '@magmamath/react-native-ui'
+
+import { useText } from '../../../../i18n/i18n'
+import { useProfile } from '../../context/ProfileContext'
+import { ProfileCard } from '../cards/ProfileCard'
+
+const NOTE_ICON_SIZE = 20
+
+type InfoFieldProps = {
+  label: string
+  value: string
+}
+
+const InfoField = ({ label, value }: InfoFieldProps) => (
+  <View style={styles.field}>
+    <Typography variant={HeadingVariants.H8} style={styles.label}>
+      {label}
+    </Typography>
+    <Typography variant={HeadingVariants.H6} style={styles.value}>
+      {value}
+    </Typography>
+  </View>
+)
+
+export const AccountInfoCard = () => {
+  const t = useText()
+  const { model } = useProfile()
+  const user = useUnit(model.$user)
+
+  return (
+    <ProfileCard title={t('profile.accountInfo')}>
+      <InfoField label={t('profile.fullName')} value={user?.fullName ?? ''} />
+      <InfoField label={t('profile.username')} value={user?.username ?? ''} />
+      <InfoField label={t('profile.school')} value={user?.schoolName ?? ''} />
+      <View style={styles.noteDivider} />
+      <View style={styles.note}>
+        <InfoIcon size={NOTE_ICON_SIZE} color={COLORS.NEUTRAL_7} />
+        <Typography variant={HeadingVariants.H8} style={styles.noteText}>
+          {t('profile.changePasswordNote')}
+        </Typography>
+      </View>
+    </ProfileCard>
+  )
+}
+
+const styles = StyleSheet.create({
+  field: {
+    gap: SPACING['100'],
+    paddingHorizontal: SPACING['100'],
+  },
+  label: {
+    color: COLORS.NEUTRAL_7,
+  },
+  value: {
+    color: COLORS.NEUTRAL_9,
+  },
+  noteDivider: {
+    backgroundColor: COLORS.NEUTRAL_3,
+    height: 1,
+    marginHorizontal: SPACING['100'],
+  },
+  note: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: SPACING['200'],
+  },
+  noteText: {
+    color: COLORS.NEUTRAL_7,
+    flexShrink: 1,
+  },
+})

package/src/features/profile/components/modals/JoinClassModal.tsx

@@ -0,0 +1,180 @@
+import React, { useEffect, useMemo } from 'react'
+import { Animated, StyleSheet, Text, useWindowDimensions, View } from 'react-native'
+import { useUnit } from 'effector-react'
+import { CodeField, Cursor, useClearByFocusCell } from 'react-native-confirmation-code-field'
+import {
+  BaseModal,
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  CrossIcon,
+  FONT_FAMILY,
+  ReanimatedButton,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { TEST_IDS } from '@magmamath/students-qa'
+
+import { useText } from '../../../../i18n/i18n'
+import { useKeyboardOffset } from '../../../../shared/hooks/useKeyboardOffset'
+import { isWeb } from '../../../../shared/common.constants'
+import { CLASS_CODE_LENGTH } from '../../shared/profile.constants'
+import type { ProfileModalProps } from '../../model/profileModal.types'
+
+const CODE_PLACEHOLDER = '0'
+const MAX_MODAL_WIDTH = 1044
+const SCREEN_MARGIN = 48
+const CELL_GAP = SPACING['400']
+const MODAL_H_PADDING = SPACING['800']
+const CELL_ASPECT = 0.95
+const CELL_RADIUS_RATIO = 0.24 // 36 / 150 in the design
+const CELL_FONT_RATIO = 0.42 // 64 / 150 in the design
+const MAX_CELL_RADIUS = 36
+const CLOSE_ICON_SIZE = 18
+const KEYBOARD_LIFT_RATIO = 2
+
+export const JoinClassModal = ({ modal: { closeModal, params } }: ProfileModalProps) => {
+  const t = useText()
+  const { model } = params
+  const { width } = useWindowDimensions()
+  const { code, isComplete, isPending } = useUnit({
+    code: model.joinClass.$code,
+    isComplete: model.joinClass.$isComplete,
+    isPending: model.api.joinClassFx.pending,
+  })
+
+  const modalWidth = Math.min(MAX_MODAL_WIDTH, width - SCREEN_MARGIN)
+  const cellSize =
+    (modalWidth - MODAL_H_PADDING * 2 - CELL_GAP * (CLASS_CODE_LENGTH - 1)) / CLASS_CODE_LENGTH
+  const cellRadius = Math.min(MAX_CELL_RADIUS, cellSize * CELL_RADIUS_RATIO)
+  const cellFontSize = cellSize * CELL_FONT_RATIO
+
+  const setCode = (value: string) => model.joinClass.setCode(value.toUpperCase())
+  const [cellProps, getCellOnLayoutHandler] = useClearByFocusCell({ value: code, setValue: setCode })
+
+  useEffect(() => {
+    const subscription = model.api.joinClassFx.finally.watch(() => {
+      model.joinClass.reset()
+      closeModal()
+    })
+    return () => subscription.unsubscribe()
+  }, [model, closeModal])
+
+  const closeAndReset = () => {
+    model.joinClass.reset()
+    closeModal()
+  }
+
+  const submit = () => model.joinClass.submit()
+
+  const keyboardHeight = useKeyboardOffset()
+  const liftStyle = useMemo(
+    () => ({ transform: [{ translateY: Animated.multiply(keyboardHeight, -1 / KEYBOARD_LIFT_RATIO) }] }),
+    [keyboardHeight],
+  )
+
+  return (
+    <Animated.View style={liftStyle}>
+      <BaseModal
+        onClose={closeAndReset}
+        closeButton={
+          <Button
+            variant={ButtonVariant.TERTIARY}
+            icon={<CrossIcon size={CLOSE_ICON_SIZE} color={COLORS.NEUTRAL_7} />}
+            onPress={closeAndReset}
+            testID={TEST_IDS.JOIN_CLASS_CLOSE_BUTTON}
+          />
+        }
+        style={{ container: [styles.modal, { width: modalWidth }] }}
+        header={t('profile.joinClassTitle')}
+        content={
+          <CodeField
+            {...cellProps}
+            nativeID="join-class-code"
+            value={code}
+            onChangeText={setCode}
+            cellCount={CLASS_CODE_LENGTH}
+            rootStyle={styles.codeRoot}
+            textInputStyle={styles.codeInput}
+            autoFocus
+            autoComplete="off"
+            textContentType="oneTimeCode"
+            keyboardType="default"
+            returnKeyType="go"
+            onSubmitEditing={submit}
+            testID={TEST_IDS.JOIN_CLASS_INPUT(0)}
+            renderCell={({ index, symbol, isFocused }) => {
+              const isPlaceholder = !symbol && !isFocused
+              return (
+                <View
+                  key={index}
+                  style={[styles.cell, { borderRadius: cellRadius, width: cellSize }]}
+                  onLayout={getCellOnLayoutHandler(index)}
+                >
+                  <Text
+                    style={[styles.cellText, { fontSize: cellFontSize }, isPlaceholder && styles.cellPlaceholder]}
+                  >
+                    {symbol || (isFocused ? <Cursor /> : CODE_PLACEHOLDER)}
+                  </Text>
+                </View>
+              )
+            }}
+          />
+        }
+        footer={
+          <ReanimatedButton
+            variant={ButtonVariant.PRIMARY}
+            colorScheme={ButtonColor.ORANGE}
+            size={ButtonSize.LARGE}
+            onPress={submit}
+            disabled={!isComplete || isPending}
+            isLoading={isPending}
+            testID={TEST_IDS.JOIN_CLASS_SUBMIT_BUTTON}
+            style={buttonStyle}
+          >
+            {t('profile.joinClassButton')}
+          </ReanimatedButton>
+        }
+      />
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    gap: SPACING['800'],
+    paddingHorizontal: MODAL_H_PADDING,
+  },
+  codeRoot: {
+    flexDirection: 'row',
+    gap: CELL_GAP,
+    justifyContent: 'center',
+  },
+  codeInput: {
+    borderWidth: 0,
+    // kill the WebKit/iPad focus ring on the hidden input — focus is shown by the cells
+    ...(isWeb && { outlineStyle: 'none' }),
+  },
+  cell: {
+    alignItems: 'center',
+    aspectRatio: CELL_ASPECT,
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderColor: COLORS.NEUTRAL_5,
+    borderWidth: 3,
+    justifyContent: 'center',
+  },
+  cellText: {
+    color: COLORS.NEUTRAL_9,
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    textAlign: 'center',
+  },
+  cellPlaceholder: {
+    color: COLORS.NEUTRAL_5,
+  },
+  text: {
+    textTransform: 'uppercase',
+  },
+})
+
+const buttonStyle = { text: styles.text }