@magmamath/students-features 0.9.0-rc2 → 0.9.0-rc21

package/dist/typescript/module/shared/icons/MATH/SubsetIcon/SubsetIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubsetIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/SubsetIcon/SubsetIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,eAAO,MAAM,UAAU,oBAA0B,SAAS,sBAiBzD,CAAA"}
+{"version":3,"file":"SubsetIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/SubsetIcon/SubsetIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG5C,eAAO,MAAM,UAAU,oBAA0B,SAAS,sBAWzD,CAAA"}

package/dist/typescript/module/shared/icons/MATH/SubtractionIcon/SubtractionIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubtractionIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/SubtractionIcon/SubtractionIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,eAAO,MAAM,eAAe,oBAA0B,SAAS,sBAiB9D,CAAA"}
+{"version":3,"file":"SubtractionIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/SubtractionIcon/SubtractionIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG5C,eAAO,MAAM,eAAe,oBAA0B,SAAS,sBAW9D,CAAA"}

package/dist/typescript/module/shared/icons/MATH/ThetaIcon/ThetaIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThetaIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/ThetaIcon/ThetaIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,eAAO,MAAM,SAAS,oBAA0B,SAAS,sBAiBxD,CAAA"}
+{"version":3,"file":"ThetaIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/ThetaIcon/ThetaIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG5C,eAAO,MAAM,SAAS,oBAA0B,SAAS,sBAWxD,CAAA"}

package/dist/typescript/module/shared/icons/MATH/TildeIcon/TildeIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TildeIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/TildeIcon/TildeIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAI5C,eAAO,MAAM,SAAS,oBAA0B,SAAS,sBAiBxD,CAAA"}
+{"version":3,"file":"TildeIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/TildeIcon/TildeIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAK5C,eAAO,MAAM,SAAS,oBAA0B,SAAS,sBAWxD,CAAA"}

package/dist/typescript/module/shared/icons/MATH/UnionIcon/UnionIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnionIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/UnionIcon/UnionIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,eAAO,MAAM,SAAS,oBAA0B,SAAS,sBAexD,CAAA"}
+{"version":3,"file":"UnionIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/UnionIcon/UnionIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG5C,eAAO,MAAM,SAAS,oBAA0B,SAAS,sBASxD,CAAA"}

package/dist/typescript/module/shared/icons/MATH/YenIcon/YenIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YenIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/YenIcon/YenIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,eAAO,MAAM,OAAO,oBAA0B,SAAS,sBAetD,CAAA"}
+{"version":3,"file":"YenIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/MATH/YenIcon/YenIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG5C,eAAO,MAAM,OAAO,oBAA0B,SAAS,sBAStD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.9.0-rc2",
+  "version": "0.9.0-rc21",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",

package/src/features/endOfAssignment/components/EOAModal.tsx

@@ -14,6 +14,7 @@ import { ExamPaused } from './ExamPaused/ExamPaused'
 import { ExamSubmit } from './ExamSubmit/ExamSubmit'
 
 import { getModalContainerSize, shouldDisplayModalBackground } from '../helpers'
+import { ButtonColor } from '@magmamath/react-native-ui'
 
 const MODAL_CONTENT_VARIANTS_MAP = new Map([
   [EOAModalVariant.NO_CORRECT_ANSWERS, NoAnswer],
@@ -32,6 +33,7 @@ type EOAModalProps = {
   model: EOAModel
   textContent: EOAModalText
   onPracticePress: () => void
+  buttonColor?: ButtonColor
 }
 
 /**
@@ -40,7 +42,7 @@ type EOAModalProps = {
  * Dynamically renders a modal UI after an assignment ends, using the current `modalVariant`
  * to determine which specific view to display (e.g., `NoAnswer`, `CorrectAnswer`, `CheatDetected`).
  */
-export const EOAModal = ({ model, textContent, onPracticePress }: EOAModalProps) => {
+export const EOAModal = ({ model, textContent, onPracticePress, buttonColor }: EOAModalProps) => {
   const popUpData = useUnit(model.$popUpData)
   const modalVariant = useUnit(model.$modalVariant)
 
@@ -62,7 +64,12 @@ export const EOAModal = ({ model, textContent, onPracticePress }: EOAModalProps)
       style={getModalContainerSize(modalVariant)}
       onClose={model.hidePopUp}
       content={
-        <ModalContent model={model} textContent={textContent} onPracticePress={onPracticePress} />
+        <ModalContent
+          model={model}
+          textContent={textContent}
+          onPracticePress={onPracticePress}
+          buttonColor={buttonColor}
+        />
       }
       withBackground={withBackground}
     />

package/src/features/endOfAssignment/components/ExamPaused/ExamPaused.tsx

@@ -14,7 +14,11 @@ import { EOAModalContentProps } from '../../types'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
 
-export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
+export const ExamPaused = ({
+  textContent,
+  model,
+  buttonColor = ButtonColor.PURPLE,
+}: EOAModalContentProps) => {
   useKeyBoard({
     callback: (event) => {
       if (event.key === KeyboardKeys.ENTER) {
@@ -35,7 +39,7 @@ export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
 
       <Button
         variant={ButtonVariant.PRIMARY}
-        colorScheme={ButtonColor.PURPLE}
+        colorScheme={buttonColor}
         size={ButtonSize.LARGE}
         style={{ text: styles.buttonText }}
         onPress={model.hidePopUpAndLeave}

package/src/features/endOfAssignment/types.ts

@@ -1,4 +1,5 @@
 import { EOAModel } from './model/model'
+import { ButtonColor } from '@magmamath/react-native-ui'
 
 export enum EOAEventType {
   SUBMIT = 'SUBMIT',
@@ -33,6 +34,7 @@ export type EOAModalContentProps = {
   textContent: EOAModalText
   model: EOAModel
   onPracticePress?: () => void
+  buttonColor?: ButtonColor
 }
 
 export type EOAModalData = {

package/src/features/exampleSolution/components/SolutionSection.tsx

@@ -108,5 +108,6 @@ const styles = StyleSheet.create({
     fontSize: 28,
     marginHorizontal: SPACING[800],
     marginVertical: SPACING[400],
+    lineHeight: 36,
   },
 })

package/src/features/feedback/components/TeacherFeedback.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 import { StyleSheet, View } from 'react-native'
-import { TeacherFeedbackButton } from './TeacherFeedbackButton/TeacherFeedbackButton'
+import { TeacherFeedbackButton } from './TeacherFeedbackButton'
 import { TeacherFeedbackComments } from './TeacherFeedbackComments/TeacherFeedbackComments'
-import { FeedbackButtonColors, FeedbackButtonSize, FeedbackMode } from '../constants'
+import { FeedbackButtonSize, FeedbackMode } from '../constants'
 import { TeacherFeedbackModel } from '../model/model'
+import { ButtonColor } from '@magmamath/react-native-ui'
 
 type TeacherFeedbackProps = {
   model: TeacherFeedbackModel
   mode: FeedbackMode
   assignmentId: string
   problemId: string
-  color?: FeedbackButtonColors
+  buttonColor?: ButtonColor
   size?: FeedbackButtonSize
   heightOffset?: number
 }
@@ -21,7 +22,7 @@ export const TeacherFeedback = ({
   mode,
   assignmentId,
   problemId,
-  color = FeedbackButtonColors.BLUE,
+  buttonColor = ButtonColor.BLUE,
   size = FeedbackButtonSize.SMALL,
   heightOffset = 0,
 }: TeacherFeedbackProps) => {
@@ -50,7 +51,7 @@ export const TeacherFeedback = ({
         isOpen={isOpen}
         isLoading={isLoading}
         size={size}
-        color={color}
+        buttonColor={buttonColor}
       />
     </View>
   )

package/src/features/feedback/components/{TeacherFeedbackButton/TeacherFeedbackButton.tsx → TeacherFeedbackButton.tsx}

@@ -1,48 +1,23 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Button, COLORS } from '@magmamath/react-native-ui'
-import { UnreadMessagesBadge } from '../UnreadMessagesBadge'
-import { MessageBubbleIcon } from '../../../../shared/icons/MessageBubbleIcon'
-import { XCloseIcon } from '../../../../shared/icons/XCloseIcon'
-import { COLOR_SCHEMES } from './colorSchemes'
-import {
-  FeedbackButtonColors,
-  FeedbackButtonSize,
-  TEACHER_FEEDBACK_BUTTON_ID,
-} from '../../constants'
+import { Button, ButtonColor, COLORS } from '@magmamath/react-native-ui'
+import { UnreadMessagesBadge } from './UnreadMessagesBadge'
+import { MessageBubbleIcon } from '../../../shared/icons/MessageBubbleIcon'
+import { XCloseIcon } from '../../../shared/icons/XCloseIcon'
+import { FeedbackButtonSize, TEACHER_FEEDBACK_BUTTON_ID } from '../constants'
 
 const ICON_SIZES = {
   [FeedbackButtonSize.LARGE]: 37,
   [FeedbackButtonSize.SMALL]: 26,
 }
 
-const COLOR_PRESETS = {
-  [FeedbackButtonColors.PURPLE]: {
-    borderColor: COLORS.PURPLE_6,
-    schemeColor: COLOR_SCHEMES.PURPLE,
-  },
-  [FeedbackButtonColors.BLUE]: {
-    borderColor: COLORS.BLUE_6,
-    schemeColor: COLOR_SCHEMES.BLUE,
-  },
-}
-
-const getVariantStyles = (isUnread: boolean, color: FeedbackButtonColors) => {
-  const { borderColor, schemeColor } = COLOR_PRESETS[color]
-  return {
-    iconColor: isUnread ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9,
-    customColorScheme: isUnread ? schemeColor : COLOR_SCHEMES.GREY,
-    borderColor: isUnread ? borderColor : COLORS.NEUTRAL_5,
-  }
-}
-
 type TeacherFeedbackButtonProps = {
   isOpen: boolean
   isLoading: boolean
   onPress?: () => void
   unreadCommentsCount?: number
   size?: FeedbackButtonSize
-  color?: FeedbackButtonColors
+  buttonColor?: ButtonColor
 }
 
 export const TeacherFeedbackButton = ({
@@ -51,13 +26,11 @@ export const TeacherFeedbackButton = ({
   unreadCommentsCount,
   isLoading,
   size = FeedbackButtonSize.LARGE,
-  color = FeedbackButtonColors.BLUE,
+  buttonColor = ButtonColor.BLUE,
 }: TeacherFeedbackButtonProps) => {
   const isLarge = size === FeedbackButtonSize.LARGE
-  const { borderColor, iconColor, customColorScheme } = getVariantStyles(
-    !!unreadCommentsCount,
-    color,
-  )
+  const isUnread = !unreadCommentsCount
+  const iconColor = !isUnread ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9
 
   if (isOpen) {
     return (
@@ -68,11 +41,11 @@ export const TeacherFeedbackButton = ({
         variant="primary"
         disabled={isLoading}
         isLoading={isLoading}
+        colorScheme={isUnread ? ButtonColor.WHITE : buttonColor}
         style={{
           container: isLarge ? styles.containerLarge : styles.container,
           button: [styles.button, { borderColor: COLORS.NEUTRAL_5 }, styles[size]],
         }}
-        customColorScheme={COLOR_SCHEMES.GREY}
         icon={<XCloseIcon size={ICON_SIZES[size]} />}
       />
     )
@@ -86,11 +59,11 @@ export const TeacherFeedbackButton = ({
       variant="primary"
       disabled={isLoading}
       isLoading={isLoading}
+      colorScheme={isUnread ? ButtonColor.WHITE : buttonColor}
       style={{
         container: isLarge ? styles.containerLarge : styles.container,
-        button: [styles.button, { borderColor }, styles[size]],
+        button: [styles.button, styles[size]],
       }}
-      customColorScheme={customColorScheme}
       icon={
         <View style={styles.iconContainer}>
           <MessageBubbleIcon color={iconColor} size={ICON_SIZES[size]} />

package/src/features/feedback/components/index.ts

@@ -1,5 +1,5 @@
 export { TeacherFeedbackComments } from './TeacherFeedbackComments/TeacherFeedbackComments'
-export { TeacherFeedbackButton } from './TeacherFeedbackButton/TeacherFeedbackButton'
+export { TeacherFeedbackButton } from './TeacherFeedbackButton'
 export { TeacherFeedback } from './TeacherFeedback'
 export { UnreadMessagesBadge } from './UnreadMessagesBadge'
 export { ListCardCommentsCount } from './ListCardCommentsCount'

package/src/features/feedback/constants.ts

@@ -7,11 +7,6 @@ export const BUENOS_AIRES_FONT =
 export const EMPTY_COMMENT_ID = 'empty-comment'
 export const TEACHER_FEEDBACK_BUTTON_ID = 'teacherFeedbackButton'
 
-export enum FeedbackButtonColors {
-  BLUE = 'BLUE',
-  PURPLE = 'PURPLE',
-}
-
 export enum FeedbackButtonSize {
   SMALL = 'SMALL',
   LARGE = 'LARGE',

package/src/features/gifCelebrations/helpers.ts

@@ -1,4 +1,4 @@
-import { TranslationKeys } from '../../shared/translation/types'
+import { TranslationKeys } from 'src/shared/translation/types'
 import {
   CustomGetCachePathMethod,
   GifsGroups,

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

@@ -1,88 +1,54 @@
 import React, { useMemo, useState } from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, View } from 'react-native'
-import { COLORS, SelectGroup, SelectOptionSize } from '@magmamath/react-native-ui'
-import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
-import { IntegralABIcon } from '../../../../shared/icons/MATH/IntegralABIcon/IntegralABIcon'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import { COLORS, SelectGroup, SelectOptionSize, IS_MOBILE } from '@magmamath/react-native-ui'
 import { Locale, useText } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
-import { KeyboardLayoutProps, KeyboardType } from '../../types'
-
-enum SelectedLayout {
-  BASIC = 'basic',
-  ALGEBRA = 'algebra',
-}
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { useLayoutOptions } from './useLayoutOptions'
+import { SelectedLayout } from './types'
 
 export const AlgebraLayout = (props: KeyboardLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
   const t = useText()
+  const { width } = useWindowDimensions()
+  const selectOptions = useLayoutOptions(selectedLayout, setSelectedLayout)
+  const isDesktop = width > MOBILE_LAYOUT_WIDTH
+  const locale = t('locale') as Locale
 
-  const algebraKeyboardGroup =
-    KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.AlgebraAdvanced]
-  const basicKeyboardGroup =
-    KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtendedPlus]
+  const keyboardGroups = useMemo(() => {
+    const algebra = KEYBOARD_GROUPS_BY_LOCALE[locale][KeyboardType.AlgebraAdvanced]
+    const basic = isDesktop
+      ? KEYBOARD_GROUPS_BY_LOCALE[locale][KeyboardType.BasicPlusPlus]
+      : KEYBOARD_GROUPS_BY_LOCALE[locale][KeyboardType.BasicPlusPlusMobile]
 
-  const KEYBOARD_GROUPS = useMemo(
-    () =>
-      new Map([
-        [SelectedLayout.BASIC, basicKeyboardGroup],
-        [SelectedLayout.ALGEBRA, algebraKeyboardGroup],
-      ]),
-    [],
-  )
+    return new Map([
+      [SelectedLayout.BASIC, basic],
+      [SelectedLayout.ALGEBRA, algebra],
+    ])
+  }, [locale, isDesktop])
 
-  const selectOptions = useMemo(() => {
-    return [
-      {
-        title: (
-          <AlgebraIcon
-            color={selectedLayout === SelectedLayout.BASIC ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={16}
-          />
-        ),
-        key: '1',
-      },
-      {
-        title: (
-          <IntegralABIcon
-            color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={20}
-          />
-        ),
-        key: '2',
-      },
-    ]
-  }, [selectedLayout])
+  const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
 
   return (
     <View style={styles.container}>
-      <SelectGroup
-        numOfRows={2}
-        options={selectOptions}
-        size={SelectOptionSize.SMALL}
-        style={{
-          container: styles.optionContainer,
-        }}
-        color={props.color}
-        selectedOptions={[
-          selectedLayout === SelectedLayout.BASIC ? selectOptions[0] : selectOptions[1],
-        ]}
-        onOptionChange={(option) => {
-          setSelectedLayout(option.key === '1' ? SelectedLayout.BASIC : SelectedLayout.ALGEBRA)
-        }}
-      />
-      <KeysList
-        keys={KEYBOARD_GROUPS.get(selectedLayout)?.keys || []}
-        numOfRows={3}
-        {...props}
-        style={{
-          container: styles.keysContainer,
-          option: {
-            button: styles.keyButton,
-            text: [styles.keyText, selectedLayout === SelectedLayout.ALGEBRA && { fontSize: 11 }],
-          },
-        }}
-      />
+      {isDesktop && (
+        <SelectGroup
+          numOfRows={2}
+          options={selectOptions}
+          size={SelectOptionSize.SMALL}
+          style={{
+            container: styles.optionContainer,
+            option: { container: styles.option },
+          }}
+          color={props.color}
+          selectedOptions={[
+            selectedLayout === SelectedLayout.BASIC ? selectOptions[0] : selectOptions[1],
+          ]}
+        />
+      )}
+      <KeysList keys={currentKeys} numOfRows={3} {...props} />
     </View>
   )
 }
@@ -93,26 +59,20 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 16,
     paddingRight: 16,
-    width: 575,
-  },
-  keyButton: {
-    minWidth: 43,
-    maxWidth: 58,
-  },
-  keyText: {
-    fontWeight: 700,
-    fontSize: 14,
-  },
-  keysContainer: {
-    gap: 9,
   },
   optionContainer: {
     flexGrow: 0,
     flexShrink: 0,
-    flexBasis: 'auto',
+    flexBasis: IS_MOBILE ? 60 : 'auto',
     width: 'auto',
-    paddingRight: 16,
+    paddingRight: 18,
     borderRightWidth: 1,
     borderRightColor: COLORS.NEUTRAL_3,
+    maxWidth: 65,
+    gap: 9,
+  },
+  option: {
+    flexBasis: 45,
+    width: 44,
   },
 })

package/src/features/keyboard/components/AlgebraLayout/{keyboardGroups.tsx → keyboardGroups.ts}

@@ -5,7 +5,7 @@ import {
   MATH_BASIC_TRIGONOMETRIC_FUNCTIONS,
   MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS,
 } from '../../types/MathKeysGroups/trigonometric'
-import { KeyboardGroup } from '../../types'
+import { KeyboardGroup } from '../../types/types'
 
 export const MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP: KeyboardGroup = {
   id: 'math-entry-algebra',

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

@@ -0,0 +1,4 @@
+export enum SelectedLayout {
+  BASIC = 'basic',
+  ALGEBRA = 'algebra',
+}

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

@@ -0,0 +1,42 @@
+import React, { ReactNode, useMemo } from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
+import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
+import { IntegralABIcon } from '../../../../shared/icons/MATH/IntegralABIcon/IntegralABIcon'
+import { SelectedLayout } from './types'
+
+type LayoutOption = {
+  key: SelectedLayout
+  title: ReactNode
+  onPressIn: () => void
+}
+
+export function useLayoutOptions(
+  selectedLayout: SelectedLayout,
+  setSelectedLayout: (layout: SelectedLayout) => void,
+): LayoutOption[] {
+  return useMemo(
+    () => [
+      {
+        key: SelectedLayout.BASIC,
+        title: (
+          <AlgebraIcon
+            color={selectedLayout === SelectedLayout.BASIC ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+            size={22}
+          />
+        ),
+        onPressIn: () => setSelectedLayout(SelectedLayout.BASIC),
+      },
+      {
+        key: SelectedLayout.ALGEBRA,
+        title: (
+          <IntegralABIcon
+            color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+            size={25}
+          />
+        ),
+        onPressIn: () => setSelectedLayout(SelectedLayout.ALGEBRA),
+      },
+    ],
+    [selectedLayout, setSelectedLayout],
+  )
+}

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

@@ -1,21 +1,24 @@
 import React, { PropsWithChildren } from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, View } from 'react-native'
-import { KeyboardLayoutProps } from '../../types'
-import { MATH_ENTRY_BASIC_KEYBOARD_GROUP } from './keyboardGroup'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { Locale, useText } from '../../../../shared/translation'
+import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
 
 export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
-  const keys = props.children
-    ? MATH_ENTRY_BASIC_KEYBOARD_GROUP.keys
-    : MATH_ENTRY_BASIC_KEYBOARD_GROUP.keys.slice(0, -1)
+  const t = useText()
+  const keysByLocale = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.Basic]
+  const keys = props.children ? keysByLocale.keys : keysByLocale.keys.slice(0, -1)
+  const { width } = useWindowDimensions()
+
+  if (width <= MOBILE_LAYOUT_WIDTH && !props.children) {
+    return null
+  }
+
   return (
     <View style={styles.container}>
-      <KeysList
-        keys={keys}
-        numOfRows={2}
-        {...props}
-        style={{ container: styles.keysContainer, option: { button: styles.keyOption } }}
-      />
+      <KeysList keys={keys} numOfRows={2} {...props} />
       {props.children || null}
     </View>
   )
@@ -31,10 +34,4 @@ const styles = StyleSheet.create({
     height: '100%',
     paddingRight: 16,
   },
-  keysContainer: {
-    gap: 9,
-  },
-  keyOption: {
-    width: 42,
-  },
 })

package/src/features/keyboard/components/BasicLayout/CurrencyBasicLayout.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet } from 'react-native'
 import { BasicLayout } from './BasicLayout'
-import { KeyboardLayoutProps, KeyboardType } from '../../types'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
 
@@ -12,21 +11,7 @@ export const CurrencyBasicLayout = (props: KeyboardLayoutProps) => {
 
   return (
     <BasicLayout {...props}>
-      <KeysList
-        keys={keysGroup.keys}
-        numOfRows={keysGroup.keys.length}
-        style={{ container: styles.keysContainer, option: { text: styles.optionText } }}
-        {...props}
-      />
+      <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
     </BasicLayout>
   )
 }
-
-const styles = StyleSheet.create({
-  optionText: {
-    width: 25,
-  },
-  keysContainer: {
-    gap: 9,
-  },
-})

package/src/features/keyboard/components/BasicLayout/TimeBasicLayout.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet } from 'react-native'
 import { BasicLayout } from './BasicLayout'
-import { KeyboardLayoutProps, KeyboardType } from '../../types'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { useText, Locale } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
 
@@ -16,8 +16,10 @@ export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
         keys={keysGroup.keys}
         numOfRows={keysGroup.numOfRows || keysGroup.keys.length}
         style={{
-          option: { container: styles.optionContainer, text: styles.keysText },
-          container: styles.keysContainer,
+          option: {
+            text: styles.text,
+            button: styles.button,
+          },
         }}
         {...props}
       />
@@ -26,13 +28,10 @@ export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
 }
 
 const styles = StyleSheet.create({
-  optionContainer: {
-    flex: 1,
+  button: {
+    width: 45,
   },
-  keysContainer: {
-    gap: 9,
-  },
-  keysText: {
+  text: {
     fontSize: 14,
     fontWeight: 700,
   },