@magmamath/students-features 0.5.6 → 0.5.7-rc-0

package/dist/typescript/module/features/problemSelector/types.d.ts

@@ -0,0 +1,11 @@
+import { PROBLEM_SELECTOR_BUTTON_STATE } from './constants';
+export type ProblemSelectorButtonState = (typeof PROBLEM_SELECTOR_BUTTON_STATE)[keyof typeof PROBLEM_SELECTOR_BUTTON_STATE];
+export type ProblemSelectorButtonProps = {
+    key: string;
+    text: string;
+    state: ProblemSelectorButtonState;
+    locked: boolean;
+    onClick: () => void;
+    badgeValue?: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/typescript/module/features/problemSelector/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/features/problemSelector/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,aAAa,CAAA;AAE3D,MAAM,MAAM,0BAA0B,GACpC,CAAC,OAAO,6BAA6B,CAAC,CAAC,MAAM,OAAO,6BAA6B,CAAC,CAAA;AAEpF,MAAM,MAAM,0BAA0B,GAAG;IACvC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,0BAA0B,CAAA;IACjC,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA"}

package/dist/typescript/module/index.d.ts

@@ -4,4 +4,5 @@ export * from './features/chatbot';
 export * from './features/feedback';
 export * from './features/celebrations';
 export * from './features/endOfAssignment';
+export * from './features/problemSelector';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA"}

package/dist/typescript/module/shared/icons/LockIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './icon.types';
+export declare const LockIcon: ({ width, height, color }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=LockIcon.d.ts.map

package/dist/typescript/module/shared/icons/LockIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LockIcon.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/LockIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,6BAA2D,SAAS,sBASxF,CAAA"}

package/dist/typescript/module/shared/icons/Pi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pi.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/Pi.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAU,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAE9D,iBAAS,EAAE,CAAC,EAAE,IAAS,EAAE,KAAwB,EAAE,EAAE,SAAS,qBAS7D;AAED,eAAe,EAAE,CAAA"}
+{"version":3,"file":"Pi.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/Pi.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAU,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAE9D,iBAAS,EAAE,CAAC,EAAE,IAAS,EAAE,KAAwB,EAAE,EAAE,SAAS,qBAY7D;AAED,eAAe,EAAE,CAAA"}

package/dist/typescript/module/shared/icons/Valentine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Valentine.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/Valentine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAU,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAE9D,iBAAS,SAAS,CAAC,EAAE,IAAS,EAAE,KAAwB,EAAE,EAAE,SAAS,qBASpE;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"Valentine.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/Valentine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAU,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAE9D,iBAAS,SAAS,CAAC,EAAE,IAAS,EAAE,KAAwB,EAAE,EAAE,SAAS,qBAYpE;AAED,eAAe,SAAS,CAAA"}

package/dist/typescript/module/shared/icons/Winter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Winter.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/Winter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAU,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAE9D,iBAAS,MAAM,CAAC,EAAE,IAAS,EAAE,KAAwB,EAAE,EAAE,SAAS,qBAWjE;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Winter.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/Winter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAU,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAE9D,iBAAS,MAAM,CAAC,EAAE,IAAS,EAAE,KAAwB,EAAE,EAAE,SAAS,qBAejE;AAED,eAAe,MAAM,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.5.6",
+  "version": "0.5.7-rc-0",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -29,7 +29,7 @@
     "react-native-svg": "^15.10.0"
   },
   "devDependencies": {
-    "@magmamath/react-native-ui": "0.4.0",
+    "@magmamath/react-native-ui": "0.4.17",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",

package/src/features/celebrations/components/Spark.tsx

@@ -1,14 +1,18 @@
-import { IconProps } from '@magmamath/react-native-ui';
-import React from 'react';
-import { View } from 'react-native';
+import { IconProps } from '@magmamath/react-native-ui'
+import React from 'react'
+import { View } from 'react-native'
 
-export const Spark = ({ size = 10, color }: IconProps) => (
-  <View
-    style={{
-      width: size,
-      height: size,
-      backgroundColor: color,
-      borderRadius: size / 2,
-    }}
-  />
-);
+export const Spark = ({ size = 10, color }: IconProps) => {
+  const actualSize = typeof size === 'number' ? size : 0
+
+  return (
+    <View
+      style={{
+        width: actualSize,
+        height: actualSize,
+        backgroundColor: color,
+        borderRadius: actualSize / 2,
+      }}
+    />
+  )
+}

package/src/features/endOfAssignment/components/Modal/assets/SunrisingIcon.tsx

@@ -2,193 +2,194 @@ import * as React from 'react'
 import { IconProps } from '@magmamath/react-native-ui'
 import Svg, { G, Path, Defs, LinearGradient, Stop } from 'react-native-svg'
 
-export const SunrisingIcon = (props: IconProps) => {
-  const height = (props.size ?? 0) * 0.606
+export const SunrisingIcon = ({ size }: IconProps) => {
+  const actualSize = typeof size === 'number' ? size : 0
+  const height = actualSize * 0.606
 
   return (
-    <Svg width={props.size} height={height} viewBox='0 0 909 551' fill='none' {...props}>
+    <Svg width={size} height={height} viewBox="0 0 909 551" fill="none">
       <G opacity={0.1}>
         <Path
-          d='M164.04-598.854a893.984 893.984 0 01222.319 28.085L164.04 295.106v-893.96z'
-          fill='url(#paint0_linear_3505_1308)'
+          d="M164.04-598.854a893.984 893.984 0 01222.319 28.085L164.04 295.106v-893.96z"
+          fill="url(#paint0_linear_3505_1308)"
         />
         <Path
-          d='M-282.94-479.086a893.954 893.954 0 01206.577-86.837L164.04 295.106l-446.98-774.192z'
-          fill='url(#paint1_linear_3505_1308)'
+          d="M-282.94-479.086a893.954 893.954 0 01206.577-86.837L164.04 295.106l-446.98-774.192z"
+          fill="url(#paint1_linear_3505_1308)"
         />
         <Path
-          d='M-610.152-151.874A893.997 893.997 0 01-474.67-330.365l638.71 625.471-774.192-446.98z'
-          fill='url(#paint2_linear_3505_1308)'
+          d="M-610.152-151.874A893.997 893.997 0 01-474.67-330.365l638.71 625.471-774.192-446.98z"
+          fill="url(#paint2_linear_3505_1308)"
         />
         <Path
-          d='M-729.92 295.106a893.938 893.938 0 0128.086-222.319L164.04 295.106h-893.96z'
-          fill='url(#paint3_linear_3505_1308)'
+          d="M-729.92 295.106a893.938 893.938 0 0128.086-222.319L164.04 295.106h-893.96z"
+          fill="url(#paint3_linear_3505_1308)"
         />
         <Path
-          d='M-610.152 742.086a893.994 893.994 0 01-86.837-206.577L164.04 295.106l-774.192 446.98z'
-          fill='url(#paint4_linear_3505_1308)'
+          d="M-610.152 742.086a893.994 893.994 0 01-86.837-206.577L164.04 295.106l-774.192 446.98z"
+          fill="url(#paint4_linear_3505_1308)"
         />
         <Path
-          d='M-282.94 1069.3a894.157 894.157 0 01-178.491-135.484l625.471-638.71-446.98 774.194z'
-          fill='url(#paint5_linear_3505_1308)'
+          d="M-282.94 1069.3a894.157 894.157 0 01-178.491-135.484l625.471-638.71-446.98 774.194z"
+          fill="url(#paint5_linear_3505_1308)"
         />
         <Path
-          d='M611.02-479.086a893.96 893.96 0 01178.491 135.482L164.04 295.106l446.98-774.192z'
-          fill='url(#paint6_linear_3505_1308)'
+          d="M611.02-479.086a893.96 893.96 0 01178.491 135.482L164.04 295.106l446.98-774.192z"
+          fill="url(#paint6_linear_3505_1308)"
         />
         <Path
-          d='M938.232-151.874a894.096 894.096 0 0186.838 206.577L164.04 295.106l774.192-446.98z'
-          fill='url(#paint7_linear_3505_1308)'
+          d="M938.232-151.874a894.096 894.096 0 0186.838 206.577L164.04 295.106l774.192-446.98z"
+          fill="url(#paint7_linear_3505_1308)"
         />
         <Path
-          d='M1058 295.106c0 74.991-9.44 149.684-28.09 222.319L164.04 295.106H1058z'
-          fill='url(#paint8_linear_3505_1308)'
+          d="M1058 295.106c0 74.991-9.44 149.684-28.09 222.319L164.04 295.106H1058z"
+          fill="url(#paint8_linear_3505_1308)"
         />
         <Path
-          d='M938.232 742.086A893.96 893.96 0 01802.75 920.577L164.04 295.106l774.192 446.98z'
-          fill='url(#paint9_linear_3505_1308)'
+          d="M938.232 742.086A893.96 893.96 0 01802.75 920.577L164.04 295.106l774.192 446.98z"
+          fill="url(#paint9_linear_3505_1308)"
         />
         <Path
-          d='M611.02 1069.3a893.885 893.885 0 01-206.577 86.83L164.04 295.106 611.02 1069.3z'
-          fill='url(#paint10_linear_3505_1308)'
+          d="M611.02 1069.3a893.885 893.885 0 01-206.577 86.83L164.04 295.106 611.02 1069.3z"
+          fill="url(#paint10_linear_3505_1308)"
         />
         <Path
-          d='M164.04 1189.07a893.941 893.941 0 01-222.319-28.09L164.04 295.106v893.964z'
-          fill='url(#paint11_linear_3505_1308)'
+          d="M164.04 1189.07a893.941 893.941 0 01-222.319-28.09L164.04 295.106v893.964z"
+          fill="url(#paint11_linear_3505_1308)"
         />
       </G>
       <Defs>
         <LinearGradient
-          id='paint0_linear_3505_1308'
+          id="paint0_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
-          id='paint1_linear_3505_1308'
+          id="paint1_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
-          id='paint2_linear_3505_1308'
+          id="paint2_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
-          id='paint3_linear_3505_1308'
+          id="paint3_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
-          id='paint4_linear_3505_1308'
+          id="paint4_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
-          id='paint5_linear_3505_1308'
+          id="paint5_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
-          id='paint6_linear_3505_1308'
+          id="paint6_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
-          id='paint7_linear_3505_1308'
+          id="paint7_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
-          id='paint8_linear_3505_1308'
+          id="paint8_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
-          id='paint9_linear_3505_1308'
+          id="paint9_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
-          id='paint10_linear_3505_1308'
+          id="paint10_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
-          id='paint11_linear_3505_1308'
+          id="paint11_linear_3505_1308"
           x1={164.04}
           y1={383.036}
           x2={930.076}
           y2={383.036}
-          gradientUnits='userSpaceOnUse'
+          gradientUnits="userSpaceOnUse"
         >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
       </Defs>
     </Svg>

package/src/features/endOfAssignment/components/Modal/assets/TrophyIcon.tsx

@@ -2,60 +2,61 @@ import { IconProps } from '@magmamath/react-native-ui'
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
 
-export const TrophyIcon = (props: IconProps) => {
-  const height = (props.size ?? 0) * 0.982
+export const TrophyIcon = ({ size }: IconProps) => {
+  const actualSize = typeof size === 'number' ? size : 0
+  const height = actualSize * 0.982
 
   return (
-    <Svg width={props.size} height={height} viewBox='0 0 466 458' fill='none' {...props}>
+    <Svg width={size} height={height} viewBox="0 0 466 458" fill="none">
       <Path
-        d='M258.454 244.45l-5.731 32.767 16.384 2.86c8.047 1.407 15.796 2.106 23.222 2.106 15.697.011 29.985-3.137 42.766-9.389 6.728-3.292 13.025-7.438 18.9-12.449 44.672-38.12 50.247-115.859 49.604-158.813-.288-18.467-9.466-35.848-24.575-46.49-9.355-6.606-20.23-10.209-31.348-10.575a57.996 57.996 0 00-17.935 2.206c-14.355 4.09-26.36 13.38-33.875 25.994l-32.379-14.332L250.03 88.75l39.162 17.326c6.274 2.771 13.247 2.916 19.632.388 6.374-2.516 11.373-7.382 14.055-13.7a24.56 24.56 0 0115.974-14.112c2.993-.853 6.052-1.13 9.056-.853a24.578 24.578 0 0111.961 4.422c6.44 4.534 10.353 11.95 10.475 19.82 1.164 76.841-18.822 112.224-32.024 127.144-2.195 2.494-4.213 4.412-5.909 5.864-14.632 12.47-33.465 16.483-57.586 12.271l-16.372-2.871zM37.623 282.187c7.429 0 15.173-.703 23.223-2.111l16.379-2.864-5.73-32.757-16.378 2.865c-24.126 4.221-42.953.202-57.575-12.274-11.858-10.119-39.295-43.336-37.936-133.006.119-7.871 4.036-15.28 10.476-19.82a24.601 24.601 0 0121.015-3.57A24.606 24.606 0 017.075 92.764c2.683 6.318 7.675 11.186 14.058 13.709 6.384 2.522 13.355 2.38 19.63-.396l39.152-17.329-13.46-30.41-32.37 14.328C26.57 60.055 14.57 50.762.213 46.67c-16.936-4.828-34.901-1.777-49.293 8.369-15.102 10.647-24.286 28.03-24.565 46.498-.652 42.947 4.926 120.686 49.6 158.806 17.036 14.535 37.71 21.844 61.668 21.844z'
-        fill='#FFD690'
+        d="M258.454 244.45l-5.731 32.767 16.384 2.86c8.047 1.407 15.796 2.106 23.222 2.106 15.697.011 29.985-3.137 42.766-9.389 6.728-3.292 13.025-7.438 18.9-12.449 44.672-38.12 50.247-115.859 49.604-158.813-.288-18.467-9.466-35.848-24.575-46.49-9.355-6.606-20.23-10.209-31.348-10.575a57.996 57.996 0 00-17.935 2.206c-14.355 4.09-26.36 13.38-33.875 25.994l-32.379-14.332L250.03 88.75l39.162 17.326c6.274 2.771 13.247 2.916 19.632.388 6.374-2.516 11.373-7.382 14.055-13.7a24.56 24.56 0 0115.974-14.112c2.993-.853 6.052-1.13 9.056-.853a24.578 24.578 0 0111.961 4.422c6.44 4.534 10.353 11.95 10.475 19.82 1.164 76.841-18.822 112.224-32.024 127.144-2.195 2.494-4.213 4.412-5.909 5.864-14.632 12.47-33.465 16.483-57.586 12.271l-16.372-2.871zM37.623 282.187c7.429 0 15.173-.703 23.223-2.111l16.379-2.864-5.73-32.757-16.378 2.865c-24.126 4.221-42.953.202-57.575-12.274-11.858-10.119-39.295-43.336-37.936-133.006.119-7.871 4.036-15.28 10.476-19.82a24.601 24.601 0 0121.015-3.57A24.606 24.606 0 017.075 92.764c2.683 6.318 7.675 11.186 14.058 13.709 6.384 2.522 13.355 2.38 19.63-.396l39.152-17.329-13.46-30.41-32.37 14.328C26.57 60.055 14.57 50.762.213 46.67c-16.936-4.828-34.901-1.777-49.293 8.369-15.102 10.647-24.286 28.03-24.565 46.498-.652 42.947 4.926 120.686 49.6 158.806 17.036 14.535 37.71 21.844 61.668 21.844z"
+        fill="#FFD690"
       />
       <Path
         opacity={0.1}
-        d='M335.095 272.795c6.728-3.293 13.025-7.438 18.9-12.449 44.672-38.121 50.247-115.859 49.604-158.813-.288-18.467-9.466-35.848-24.575-46.49-9.355-6.606-20.23-10.209-31.348-10.575 3.326 3.691 14.3 18.057.233 33.332a24.578 24.578 0 0111.961 4.423c6.44 4.534 10.353 11.95 10.475 19.82 1.164 76.84-18.822 112.223-32.024 127.144 0 0 21.659 24.497-3.226 43.608z'
-        fill='#D25B00'
+        d="M335.095 272.795c6.728-3.293 13.025-7.438 18.9-12.449 44.672-38.121 50.247-115.859 49.604-158.813-.288-18.467-9.466-35.848-24.575-46.49-9.355-6.606-20.23-10.209-31.348-10.575 3.326 3.691 14.3 18.057.233 33.332a24.578 24.578 0 0111.961 4.423c6.44 4.534 10.353 11.95 10.475 19.82 1.164 76.84-18.822 112.223-32.024 127.144 0 0 21.659 24.497-3.226 43.608z"
+        fill="#D25B00"
       />
       <Path
-        d='M26.153 202.82L46.65 26.089a11.505 11.505 0 0111.429-10.18h213.797a11.504 11.504 0 0111.428 10.18l20.495 176.731c4.463 38.483-10.944 76.387-39.056 96.086l-8.179 5.73c-15.466 10.838-32.135 18.807-49.434 23.744-11.86 3.386-19.699 16.816-18.043 31.209l5.7 49.527h-59.619l5.7-49.527c1.656-14.393-6.182-27.825-18.043-31.209-17.299-4.937-33.967-12.905-49.434-23.744l-8.178-5.73c-28.115-19.699-43.522-57.604-39.059-96.086z'
-        fill='#FFD690'
+        d="M26.153 202.82L46.65 26.089a11.505 11.505 0 0111.429-10.18h213.797a11.504 11.504 0 0111.428 10.18l20.495 176.731c4.463 38.483-10.944 76.387-39.056 96.086l-8.179 5.73c-15.466 10.838-32.135 18.807-49.434 23.744-11.86 3.386-19.699 16.816-18.043 31.209l5.7 49.527h-59.619l5.7-49.527c1.656-14.393-6.182-27.825-18.043-31.209-17.299-4.937-33.967-12.905-49.434-23.744l-8.178-5.73c-28.115-19.699-43.522-57.604-39.059-96.086z"
+        fill="#FFD690"
       />
       <Path
         opacity={0.1}
-        d='M169.03 359.583l1.752 36.868h22.546l-4.245-36.868c-1.652-14.388 6.185-27.823 18.046-31.203 17.293-4.933 33.964-12.903 49.428-23.744l8.18-5.731c28.112-19.698 43.52-57.597 39.063-96.084L283.299 26.086a11.505 11.505 0 00-11.429-10.18h-50.531l12.193 186.914c2.505 38.487-6.152 76.386-21.959 96.084l-4.6 5.731c-8.702 10.841-18.068 18.811-27.801 23.743-6.661 3.382-11.073 16.817-10.142 31.205z'
-        fill='#D25B00'
+        d="M169.03 359.583l1.752 36.868h22.546l-4.245-36.868c-1.652-14.388 6.185-27.823 18.046-31.203 17.293-4.933 33.964-12.903 49.428-23.744l8.18-5.731c28.112-19.698 43.52-57.597 39.063-96.084L283.299 26.086a11.505 11.505 0 00-11.429-10.18h-50.531l12.193 186.914c2.505 38.487-6.152 76.386-21.959 96.084l-4.6 5.731c-8.702 10.841-18.068 18.811-27.801 23.743-6.661 3.382-11.073 16.817-10.142 31.205z"
+        fill="#D25B00"
       />
       <Path
-        d='M63.166 437.528l203.607-4.774v-6.731c0-16.335-13.295-29.576-29.63-29.576H92.742c-16.335 0-29.576 13.241-29.576 29.576v11.505z'
-        fill='#FFD690'
+        d="M63.166 437.528l203.607-4.774v-6.731c0-16.335-13.295-29.576-29.63-29.576H92.742c-16.335 0-29.576 13.241-29.576 29.576v11.505z"
+        fill="#FFD690"
       />
       <Path
         opacity={0.1}
-        d='M171.477 396.447c16.328 0 29.574 13.247 29.574 29.575v7.907l65.722-.857v-7.05c0-16.328-13.246-29.575-29.574-29.575h-65.722z'
-        fill='#D25B00'
+        d="M171.477 396.447c16.328 0 29.574 13.247 29.574 29.575v7.907l65.722-.857v-7.05c0-16.328-13.246-29.575-29.574-29.575h-65.722z"
+        fill="#D25B00"
       />
       <Path
-        d='M209.405 432.82c15.086 0 27.324 12.238 27.324 27.336v100.01h42.122c8.43 0 15.264-6.834 15.264-15.264v-84.746c0-15.097-12.239-27.336-27.335-27.336h-57.375z'
-        fill='#2488BB'
+        d="M209.405 432.82c15.086 0 27.324 12.238 27.324 27.336v100.01h42.122c8.43 0 15.264-6.834 15.264-15.264v-84.746c0-15.097-12.239-27.336-27.335-27.336h-57.375z"
+        fill="#2488BB"
       />
       <Path
         opacity={0.5}
-        d='M35.846 543.408a8.835 8.835 0 1017.668 0v-88.343c0-6.569 1.263-10.538 2.59-13.251 1.325-2.713 5.889-7.362 13.25-8.834H66.41c-5.89 0-13.567 0-20.614 5.889-6.683 5.586-9.95 13.376-9.95 22.086v82.453z'
-        fill='#fff'
+        d="M35.846 543.408a8.835 8.835 0 1017.668 0v-88.343c0-6.569 1.263-10.538 2.59-13.251 1.325-2.713 5.889-7.362 13.25-8.834H66.41c-5.89 0-13.567 0-20.614 5.889-6.683 5.586-9.95 13.376-9.95 22.086v82.453z"
+        fill="#fff"
       />
       <Path
-        d='M35.837 460.156v84.489c0 8.57 6.912 15.518 15.483 15.518H278.85c8.43 0 15.264-6.833 15.264-15.263v-84.744c0-15.097-12.239-27.336-27.335-27.336H63.173c-15.097 0-27.336 12.239-27.336 27.336z'
-        fill='#AAD5EF'
+        d="M35.837 460.156v84.489c0 8.57 6.912 15.518 15.483 15.518H278.85c8.43 0 15.264-6.833 15.264-15.263v-84.744c0-15.097-12.239-27.336-27.335-27.336H63.173c-15.097 0-27.336 12.239-27.336 27.336z"
+        fill="#AAD5EF"
       />
       <Path
         opacity={0.1}
-        d='M208.151 432.762c15.309 0 27.727 12.418 27.727 27.739l.004 33.137h42.744c8.555 0 15.489-6.934 15.489-15.489l-.003-17.648c0-15.32-12.419-27.739-27.739-27.739h-58.222z'
-        fill='#D25B00'
+        d="M208.151 432.762c15.309 0 27.727 12.418 27.727 27.739l.004 33.137h42.744c8.555 0 15.489-6.934 15.489-15.489l-.003-17.648c0-15.32-12.419-27.739-27.739-27.739h-58.222z"
+        fill="#D25B00"
       />
       <Path
         opacity={0.3}
-        d='M73.782 17.1c-1.8.654-4.135 2.151-6.083 4.197-2.014 2.118-2.78 3.928-2.901 4.848-3.966 30.145-7.066 56.336-10.696 87.003-3.112 26.288-9.844 72.335-12.788 92.948-2.944 20.613-2.944 23.442-2.944 35.337 0 22.086 10.364 42.197 10.364 42.197-4.634-5.04-14.077-23.056-15.589-26.678-5.247-12.574-9.599-33.753-7.343-51.809 4.73-37.865 7.788-67.529 10.907-93.864 5.03-41.445 4.877-42.092 8.977-77.441 1.785-15.392 1.08-18.069 13.976-18.069h18.25c-1.451.417-2.836.86-4.13 1.33zM35.846 543.249a8.834 8.834 0 008.834 8.834 8.834 8.834 0 008.834-8.834v-88.343c0-6.57 1.263-10.538 2.59-13.251 1.325-2.713 5.889-7.362 13.25-8.835 0 0-1.158-.003-2.94-.003-13.712 0-13.571.004-20.618 5.893-6.683 5.586-9.95 13.376-9.95 22.086v82.453z'
-        fill='#fff'
+        d="M73.782 17.1c-1.8.654-4.135 2.151-6.083 4.197-2.014 2.118-2.78 3.928-2.901 4.848-3.966 30.145-7.066 56.336-10.696 87.003-3.112 26.288-9.844 72.335-12.788 92.948-2.944 20.613-2.944 23.442-2.944 35.337 0 22.086 10.364 42.197 10.364 42.197-4.634-5.04-14.077-23.056-15.589-26.678-5.247-12.574-9.599-33.753-7.343-51.809 4.73-37.865 7.788-67.529 10.907-93.864 5.03-41.445 4.877-42.092 8.977-77.441 1.785-15.392 1.08-18.069 13.976-18.069h18.25c-1.451.417-2.836.86-4.13 1.33zM35.846 543.249a8.834 8.834 0 008.834 8.834 8.834 8.834 0 008.834-8.834v-88.343c0-6.57 1.263-10.538 2.59-13.251 1.325-2.713 5.889-7.362 13.25-8.835 0 0-1.158-.003-2.94-.003-13.712 0-13.571.004-20.618 5.893-6.683 5.586-9.95 13.376-9.95 22.086v82.453z"
+        fill="#fff"
       />
     </Svg>
   )

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

@@ -5,7 +5,6 @@ import { useUnit } from 'effector-react'
 import {
   Button,
   ButtonColor,
-  ButtonSize,
   ButtonVariant,
   COLORS,
   SPACING,
@@ -14,6 +13,7 @@ import {
 
 import { EOAModalContentProps } from '../../types'
 import { NoAnswerContent } from './NoAnswerContent'
+import { PracticeButton } from '../../ui/PracticeButton'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
 
@@ -22,49 +22,17 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
 
   const { stats, isExam, user } = popUpData ?? {}
 
-  function getButtons() {
-    const buttons = [
-      {
-        text: textContent.leftButtonText ?? '',
-        colorScheme: isExam ? ButtonColor.PURPLE : ButtonColor.BLUE,
-        onPress: () => model.hidePopUpAndLeave(),
-      },
-    ]
+  const buttonColorScheme = isExam ? ButtonColor.YELLOW : ButtonColor.BLUE
+  const practiceButtonVisible = user?.practiceButtonVisible && (!isExam || !!user?.practiceMode)
 
-    if (!isExam) {
-      buttons.push({
-        text: textContent.rightButtonText ?? '',
-        colorScheme: ButtonColor.BLUE,
-        onPress: () => {
-          model.goToFirstProblemPressed()
-          model.hidePopUp()
-        },
-      })
-      return buttons
-    }
-
-    const isPracticeAvailable = !!user?.practiceMode && user?.practiceButtonVisible
-
-    if (isPracticeAvailable) {
-      buttons.push({
-        text: textContent.rightButtonText ?? '',
-        colorScheme: ButtonColor.YELLOW,
-        onPress: () => {
-          onPracticePress?.()
-          model.hidePopUp()
-        },
-      })
-    }
-
-    return buttons
+  const handlePrimaryButtonPress = () => {
+    isExam ? onPracticePress?.() : model.goToFirstProblemPressed()
+    model.hidePopUp()
   }
 
-  const buttons = getButtons()
-
   useKeyBoard((event) => {
     if (event.key === KeyboardKeys.ENTER) {
-      const primaryButton = buttons.at(-1)
-      primaryButton?.onPress()
+      practiceButtonVisible ? handlePrimaryButtonPress() : model.hidePopUpAndLeave()
     }
   })
 
@@ -76,7 +44,7 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
             {textContent.title}
           </Typography>
         )}
-        {!!textContent.subtitle && buttons.length === 2 && (
+        {!!textContent.subtitle && practiceButtonVisible && (
           <Typography variant="h4" style={styles.subtitle}>
             {textContent.subtitle}
           </Typography>
@@ -87,18 +55,23 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
         problemsAmount={stats?.problemsAmount ?? 0}
       />
       <View style={styles.buttonsContainer}>
-        {buttons.map((button, index) => (
-          <Button
-            key={index}
-            variant={index === buttons.length - 1 ? ButtonVariant.PRIMARY : ButtonVariant.TERTIARY}
-            size={ButtonSize.LARGE}
-            colorScheme={button.colorScheme}
-            style={{ text: { textTransform: 'uppercase' } }}
-            onPress={button.onPress}
-          >
-            {button.text}
-          </Button>
-        ))}
+        <Button
+          variant={practiceButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
+          size="large"
+          colorScheme={popUpData?.isExam ? ButtonColor.PURPLE : ButtonColor.BLUE}
+          style={{ text: { textTransform: 'uppercase' } }}
+          onPress={model.hidePopUpAndLeave}
+        >
+          {textContent.leftButtonText ?? ''}
+        </Button>
+
+        {practiceButtonVisible && (
+          <PracticeButton
+            onPress={handlePrimaryButtonPress}
+            text={textContent.rightButtonText}
+            colorScheme={buttonColorScheme}
+          />
+        )}
       </View>
     </View>
   )

package/src/features/problemSelector/components/ProblemSelector.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { SPACING } from '@magmamath/react-native-ui'
+
+import { ProblemSelectorButton } from './ProblemSelectorButton'
+
+import { PROBLEM_SELECTOR_CONTENT_WIDTH } from '../constants'
+import { ProblemSelectorButtonProps } from '../types'
+
+type ProblemSelectorProps = {
+  buttons: ProblemSelectorButtonProps[]
+}
+
+export const ProblemSelector = ({ buttons }: ProblemSelectorProps) => {
+  if (!buttons.length) return null
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        {buttons.map((btn) => (
+          <ProblemSelectorButton {...btn} key={btn.key} />
+        ))}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { alignItems: 'center' },
+  contentContainer: {
+    width: PROBLEM_SELECTOR_CONTENT_WIDTH,
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    paddingVertical: SPACING[400],
+    gap: 15,
+  },
+})