@magmamath/students-features 0.3.3 → 0.4.0

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { Button, COLORS, SPACING, Typography } from '@magmamath/react-native-ui'
+
+import { EOAModalContentProps } from '../../types'
+
+export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
+  return (
+    <View style={styles.container}>
+      <Typography variant='h2' style={styles.title}>
+        {textContent.title}
+      </Typography>
+
+      <Typography variant='h1' style={styles.description}>
+        {textContent.description}
+      </Typography>
+
+      <Button
+        variant='primary'
+        colorScheme='purple'
+        size='large'
+        style={{ text: styles.buttonText }}
+        onPress={model.hidePopUpAndLeave}
+      >
+        {textContent.leftButtonText}
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: SPACING[800],
+    alignItems: 'center',
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+  },
+  description: {
+    textAlign: 'center',
+    fontWeight: '700',
+  },
+  buttonText: {
+    textTransform: 'uppercase',
+  },
+})

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

@@ -0,0 +1,102 @@
+import React from 'react'
+import { View, StyleSheet, Platform, Image } from 'react-native'
+import { useUnit } from 'effector-react'
+import {
+  Button,
+  ButtonVariant,
+  COLORS,
+  IS_MOBILE,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+import { ExamSubmitContent } from './ExamSubmitContent'
+import { EOAModalContentProps } from '../../types'
+import { PracticeButton } from '../../ui/PracticeButton'
+
+export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
+  const popUpData = useUnit(model.$popUpData)
+
+  const problemsAmount = popUpData?.stats?.problemsAmount ?? 0
+  const practiceModeEnabled = popUpData?.user.practiceMode
+
+  const leaveAssignmentButtonVariant =
+    !practiceModeEnabled || popUpData?.newerAssignmentAvailable
+      ? ButtonVariant.PRIMARY
+      : ButtonVariant.TERTIARY
+
+  const handlePracticePress = () => {
+    onPracticePress?.()
+    model.hidePopUp()
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.contentBackground}>
+        {IS_MOBILE ? (
+          <Image source={require('./blurred-card.png')} />
+        ) : (
+          <ExamSubmitContent problemsAmount={problemsAmount} />
+        )}
+      </View>
+      <Typography variant="h2" style={styles.title}>
+        {textContent.title}
+      </Typography>
+      <Typography variant="h1" style={styles.description}>
+        {textContent.description}
+      </Typography>
+
+      <View style={styles.buttonsContainer}>
+        <Button
+          variant={leaveAssignmentButtonVariant}
+          size="large"
+          colorScheme={popUpData?.isExam ? 'purple' : 'blue'}
+          style={{ text: { textTransform: 'uppercase' } }}
+          onPress={model.hidePopUpAndLeave}
+        >
+          {textContent.leftButtonText ?? ''}
+        </Button>
+        {!!practiceModeEnabled && !popUpData?.newerAssignmentAvailable && (
+          <PracticeButton onPress={handlePracticePress} text={textContent.rightButtonText} />
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    gap: SPACING[400],
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+    paddingVertical: SPACING[100],
+  },
+  description: {
+    color: COLORS.NEUTRAL_9,
+    textAlign: 'center',
+    fontWeight: 700,
+    paddingTop: SPACING[800],
+    paddingBottom: SPACING[1600],
+  },
+  contentBackground: {
+    position: 'absolute',
+    zIndex: -1,
+    top: '22%',
+    ...(Platform.OS === 'web' && {
+      filter: 'blur(4px)',
+    }),
+  },
+  buttonsContainer: {
+    height: 62,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  buttonText: {
+    textTransform: 'uppercase',
+  },
+})

package/src/features/endOfAssignment/components/ExamSubmit/ExamSubmitContent.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { BORDER_RADIUS, COLORS, CorrectIcon, SPACING, Typography } from '@magmamath/react-native-ui'
+
+type ExamSumitContentProps = {
+  problemsAmount: number
+  description?: string
+}
+
+export const ExamSubmitContent = ({ problemsAmount, description }: ExamSumitContentProps) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.iconContainer}>
+          <CorrectIcon size={70} color={COLORS.NEUTRAL_1} />
+        </View>
+        <View style={styles.textContainer}>
+          <Typography variant="xxl" style={styles.largeText}>
+            {description || '?'}
+          </Typography>
+          <Typography style={styles.text}>/{problemsAmount}</Typography>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    opacity: 0.4,
+    paddingHorizontal: SPACING[100],
+    paddingTop: SPACING[100],
+    paddingBottom: 38,
+    marginBottom: SPACING[800],
+    backgroundColor: COLORS.NEUTRAL_5,
+    borderRadius: BORDER_RADIUS[400],
+  },
+  content: {
+    flexDirection: 'row',
+    borderRadius: BORDER_RADIUS[200],
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[800],
+    backgroundColor: COLORS.NEUTRAL_1,
+    gap: SPACING[500],
+  },
+  iconContainer: {
+    backgroundColor: COLORS.NEUTRAL_5,
+    padding: SPACING[200],
+    borderRadius: 100,
+    height: 70,
+    width: 70,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textContainer: {
+    flexDirection: 'row',
+  },
+  text: {
+    fontWeight: '700',
+    color: COLORS.NEUTRAL_5,
+    alignSelf: 'flex-end',
+  },
+  largeText: {
+    fontSize: 48,
+    fontWeight: '700',
+    lineHeight: 48,
+    color: COLORS.NEUTRAL_5,
+  },
+})

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

@@ -0,0 +1,105 @@
+import React, { ReactNode, useEffect, useState } from 'react'
+import { ButtonVariant, CrossIcon, COLORS, BORDER_RADIUS, SPACING, SHADOWS, Button } from '@magmamath/react-native-ui'
+import {
+  Animated,
+  GestureResponderEvent,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native'
+
+import { ModalModel } from './model'
+import { ModalBackground } from './ModalBackground'
+
+const stopPropagation = {
+  onTouchStart: (event: GestureResponderEvent) => {
+    event.stopPropagation()
+  },
+  onMouseDown: (event: MouseEvent) => {
+    event.stopPropagation()
+  },
+}
+
+export type ModalProps = {
+  isVisible: boolean
+  content: ReactNode
+  isDismissable: boolean
+  onClose?: () => void
+  hideCloseButton?: boolean
+  withBackground?: boolean
+  style?: {
+    overlay?: StyleProp<ViewStyle>
+    container?: StyleProp<ViewStyle>
+    header?: StyleProp<TextStyle> | StyleProp<ViewStyle>
+    content?: StyleProp<TextStyle> | StyleProp<ViewStyle>
+    footer?: StyleProp<ViewStyle>
+    closeButton?: StyleProp<ViewStyle>
+  }
+}
+
+export const Modal = ({ isVisible, isDismissable = true, onClose, style, content, withBackground }: ModalProps) => {
+  const [modalModel] = useState(() => new ModalModel())
+
+  useEffect(() => {
+    if (isVisible) {
+      modalModel.animation.show()
+    }
+  }, [isVisible])
+
+  if (!isVisible) return null
+  return (
+    <TouchableWithoutFeedback onPress={() => isDismissable && onClose?.()}>
+      <Animated.View style={[styles.overlay, style?.overlay, modalModel.animatedStyle]}>
+        <TouchableWithoutFeedback {...stopPropagation}>
+          <View style={[styles.container, style?.container]}>
+            {withBackground && <View style={styles.backgroundWrapper}>{<ModalBackground />}</View>}
+            {isDismissable && (
+              <View style={[styles.closeButton, style?.closeButton]}>
+                <Button
+                  variant={ButtonVariant.TERTIARY}
+                  icon={<CrossIcon size={18} color={COLORS.NEUTRAL_7} />}
+                  onPress={onClose}
+                />
+              </View>
+            )}
+            {content}
+          </View>
+        </TouchableWithoutFeedback>
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    zIndex: 10001,
+  },
+  container: {
+    position: 'relative',
+    justifyContent: 'space-between',
+    backgroundColor: COLORS.NEUTRAL_1,
+    minWidth: 300,
+    maxWidth: 957,
+    borderRadius: BORDER_RADIUS['400'],
+    paddingHorizontal: SPACING['1600'],
+    paddingVertical: SPACING['800'],
+    gap: SPACING['600'],
+    ...SHADOWS['5'],
+  },
+  closeButton: {
+    position: 'absolute',
+    top: SPACING['400'],
+    right: SPACING['400'],
+  },
+  backgroundWrapper: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: -1,
+  },
+})

package/src/features/endOfAssignment/components/Modal/ModalBackground.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { BORDER_RADIUS } from '@magmamath/react-native-ui'
+
+import { TrophyIcon } from './assets/TrophyIcon'
+import { SunrisingIcon } from './assets/SunrisingIcon'
+
+export const ModalBackground = () => (
+  <View style={[StyleSheet.absoluteFill, styles.backgroundContainer]}>
+    <View style={styles.bgImageLeft}>
+      <TrophyIcon size={466} />
+    </View>
+    <View style={styles.bgImageRight}>
+      <SunrisingIcon size={909} />
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'hidden',
+  },
+  bgImageLeft: {
+    position: 'absolute',
+    bottom: 0,
+    zIndex: -1,
+  },
+  bgImageRight: {
+    position: 'absolute',
+    zIndex: -2,
+  },
+})

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

@@ -0,0 +1,196 @@
+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
+
+  return (
+    <Svg width={props.size} height={height} viewBox='0 0 909 551' fill='none' {...props}>
+      <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)'
+        />
+        <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)'
+        />
+        <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)'
+        />
+        <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)'
+        />
+        <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)'
+        />
+        <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)'
+        />
+        <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)'
+        />
+        <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)'
+        />
+        <Path
+          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)'
+        />
+        <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)'
+        />
+        <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)'
+        />
+      </G>
+      <Defs>
+        <LinearGradient
+          id='paint0_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint1_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint2_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint3_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint4_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint5_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint6_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint7_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint8_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint9_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint10_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint11_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+      </Defs>
+    </Svg>
+  )
+}

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

@@ -0,0 +1,62 @@
+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
+
+  return (
+    <Svg width={props.size} height={height} viewBox='0 0 466 458' fill='none' {...props}>
+      <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'
+      />
+      <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'
+      />
+      <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'
+      />
+      <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'
+      />
+      <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'
+      />
+      <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'
+      />
+      <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'
+      />
+      <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'
+      />
+      <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'
+      />
+      <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'
+      />
+      <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'
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +1,34 @@
+import { IS_WEB } from '@magmamath/react-native-ui'
+import { Animated } from 'react-native'
+
+export class ModalModel {
+  private static ANIMATION_DURATION = 200
+  private static INITIAL_OPACITY = 0
+  private static createTimingAnimation(
+    animation: Animated.Value,
+    toValue: number
+  ) {
+    return Animated.timing(animation, {
+      toValue,
+      duration: ModalModel.ANIMATION_DURATION,
+      useNativeDriver: !IS_WEB,
+    })
+  }
+
+  public animation
+  public animatedStyle
+
+  constructor() {
+    const opacity = new Animated.Value(ModalModel.INITIAL_OPACITY)
+    const opacityAnimation = ModalModel.createTimingAnimation(opacity, 1)
+    this.animation = {
+      show: () => {
+        opacityAnimation.reset()
+        opacityAnimation.start()
+      },
+    }
+    this.animatedStyle = {
+      opacity,
+    }
+  }
+}