@magmamath/students-features 0.9.0-rc15 → 0.9.0-rc17

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

@@ -36,10 +36,6 @@ export const KeysList = ({
       style={{
         container: [styles.container, style?.container],
         row: styles.row,
-        option: {
-          container: styles.optionContainer,
-          ...style?.option,
-        },
       }}
       numOfRows={numOfRows}
       color={SelectOptionColor.GREY}
@@ -59,6 +55,11 @@ export const KeysList = ({
           key: key.katexValue,
           title: key.icon ? key.icon : key.label,
           delayPressIn: 0,
+          style: {
+            container: [styles.optionContainer, key.style?.container, style?.option?.container],
+            button: [styles.optionButton, key.style?.button, style?.option?.button],
+            text: [styles.optionText, key.style?.text, style?.option?.text],
+          },
           onPressIn: (e) => {
             onKeyPress?.({
               event: e,
@@ -92,4 +93,11 @@ const styles = StyleSheet.create({
     flexShrink: 0,
     flexBasis: 'auto',
   },
+  optionButton: {
+    width: 40,
+  },
+  optionText: {
+    fontSize: 16,
+    fontWeight: 700,
+  },
 })

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
-import { SPACING, IS_MOBILE } from '@magmamath/react-native-ui'
+import { SPACING } from '@magmamath/react-native-ui'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
 import { getKeyboardGroup } from '../../helpers'
@@ -21,11 +21,6 @@ export const Numpad = ({ style, ...props }: NumpadProps) => {
         numOfRows={3}
         style={{
           container: styles.keysContainer,
-          option: {
-            text: styles.keyText,
-            button: styles.keyButton,
-            container: IS_MOBILE ? { flexBasis: 45 } : styles.optionContainer,
-          },
         }}
         {...props}
       />

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, View } from 'react-native'
-import { COLORS, TabGroup, TabOptionProps, TabVariant, IS_MOBILE } from '@magmamath/react-native-ui'
+import { COLORS, TabGroup, TabOptionProps, TabVariant } from '@magmamath/react-native-ui'
 import {
   KEYBOARD_UNITS_GROUPS_BY_LOCALE,
   KeyboardUnitsGroupType,
@@ -36,14 +36,12 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
             <KeysList
               keys={keyGroup}
               numOfRows={1}
+              {...props}
               style={{
                 option: {
-                  button: styles.option,
-                  text: styles.text,
-                  ...(IS_MOBILE && { container: { flexBasis: 58, maxWidth: 58 } }),
+                  text: styles.keysText,
                 },
               }}
-              {...props}
             />
           ))}
         </View>
@@ -53,13 +51,6 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
 }
 
 const styles = StyleSheet.create({
-  option: {
-    minWidth: 42,
-  },
-  text: {
-    fontWeight: 700,
-    fontSize: 14,
-  },
   optionContainer: {
     flexGrow: 0,
     flexShrink: 0,
@@ -82,4 +73,8 @@ const styles = StyleSheet.create({
   keyGroupContainer: {
     gap: 8,
   },
+  keysText: {
+    fontSize: 14,
+    fontWeight: 700,
+  },
 })

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

@@ -4,7 +4,6 @@ import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import {
   COLORS,
   FONT_FAMILY,
-  IS_MOBILE,
   RulerIcon,
   SelectGroup,
   SelectOptionSize,
@@ -100,7 +99,7 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
         title: (
           <AlgebraIcon
             color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={20}
+            size={22}
           />
         ),
         key: '1',
@@ -132,7 +131,7 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
           size={SelectOptionSize.SMALL}
           style={{
             container: styles.optionContainer,
-            option: { ...(IS_MOBILE && { container: { flexBasis: 45 } }) },
+            option: { container: { flexBasis: 45, width: 44 } },
           }}
           color={props.color}
           selectedOptions={[
@@ -150,17 +149,7 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
           {...props}
         />
       ) : (
-        <KeysList
-          keys={basicExtendedKeys.keys}
-          numOfRows={3}
-          {...props}
-          style={{
-            option: {
-              button: styles.key,
-              ...(IS_MOBILE && { container: { flexBasis: 45, maxWidth: 45 } }),
-            },
-          }}
-        />
+        <KeysList keys={basicExtendedKeys.keys} numOfRows={3} {...props} />
       )}
     </View>
   )
@@ -181,12 +170,10 @@ const styles = StyleSheet.create({
     flexShrink: 0,
     flexBasis: 'auto',
     width: 'auto',
-    paddingRight: 16,
+    paddingRight: 18,
     borderRightWidth: 1,
     borderRightColor: COLORS.NEUTRAL_3,
     maxWidth: 65,
-  },
-  key: {
-    width: 42,
+    gap: 9,
   },
 })

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

@@ -39,5 +39,11 @@ export const MATH_GEOMETRY_SYMBOLS: MathKeysGroup<typeof MathGeometrySymbols> =
     label: 'rad',
     mathliveValue: 'rad',
     katexValue: 'rad',
+    style: {
+      text: {
+        fontSize: 14,
+        fontWeight: 700,
+      },
+    },
   },
 }

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

@@ -16,21 +16,41 @@ export const MATH_SPECIAL_OPERATORS: MathKeysGroup<typeof MathSpecialOperator> =
     label: 'lim',
     mathliveValue: '$\\lim_{\\placeholder{}}^{\\placeholder{}}$',
     katexValue: 'lim',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathSpecialOperator.LN]: {
     label: 'ln',
     mathliveValue: '$\\ln(\\placeholder{})$',
     katexValue: 'ln',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathSpecialOperator.LOG]: {
     label: 'log',
     mathliveValue: '$\\log_{\\placeholder{}}$',
     katexValue: 'log',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathSpecialOperator.LOG10]: {
     label: 'log10',
     mathliveValue: '$\\log_{10}(\\placeholder{})$',
     katexValue: 'log₁₀',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathSpecialOperator.BACKSPACE]: {
     icon: <BackspaceIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,

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

@@ -25,31 +25,61 @@ export const MATH_BASIC_TRIGONOMETRIC_FUNCTIONS: MathKeysGroup<
     label: 'sin',
     mathliveValue: '$\\sin(\\placeholder{})$',
     katexValue: 'sin()',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathBasicTrigonometricFunction.COS]: {
     label: 'cos',
     mathliveValue: '$\\cos(\\placeholder{})$',
     katexValue: 'cos',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathBasicTrigonometricFunction.TAN]: {
     label: 'tan',
     mathliveValue: '$\\tan(\\placeholder{})$',
     katexValue: 'tan',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathBasicTrigonometricFunction.COT]: {
     label: 'cot',
     mathliveValue: '$\\cot(\\placeholder{})$',
     katexValue: 'cot',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathBasicTrigonometricFunction.SEC]: {
     label: 'sec',
     mathliveValue: '$\\sec(\\placeholder{})$',
     katexValue: 'sec',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathBasicTrigonometricFunction.CSC]: {
     label: 'csc',
     mathliveValue: '$\\csc(\\placeholder{})$',
     katexValue: 'csc',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
   },
 }
 
@@ -60,30 +90,78 @@ export const MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS: MathKeysGroup<
     label: 'arcsin',
     mathliveValue: '$\\arcsin(\\placeholder{})$',
     katexValue: 'arcsin',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathInverseTrigonometricFunction.ARCCOS]: {
     label: 'arccos',
     mathliveValue: '$\\arccos(\\placeholder{})$',
     katexValue: 'arccos',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathInverseTrigonometricFunction.ARCTAN]: {
     label: 'arctan',
     mathliveValue: '$\\arctan(\\placeholder{})$',
     katexValue: 'arctan',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathInverseTrigonometricFunction.ARCCOT]: {
     label: 'arccot',
     mathliveValue: '$\\operatorname{arccot}(\\placeholder{})$',
     katexValue: 'arccot',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathInverseTrigonometricFunction.ARCSEC]: {
     label: 'arcsec',
     mathliveValue: '$\\operatorname{arcsec}(\\placeholder{})$',
     katexValue: 'arcsec',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
   [MathInverseTrigonometricFunction.ARCCSC]: {
     label: 'arccsc',
     mathliveValue: '$\\operatorname{arccsc}(\\placeholder{})$',
     katexValue: 'arccsc',
+    style: {
+      button: {
+        width: 58,
+      },
+      text: {
+        fontSize: 11,
+      },
+    },
   },
 }