Assessment UI CleanUp (#206)

* fix: Worksheet fixing typography tags & colorTheme * fix: worksheet build error * fix: Assessment UI CleanUp
shiksha-platform · Jul 14, 2022 · 1123886 · 1123886
1 parent 12570c9
commit 1123886
Show file tree

Hide file tree

Showing 28 changed files with 997 additions and 1,075 deletions.
diff --git a/packages/assessment/src/colorTheme.js b/packages/assessment/src/colorTheme.js
@@ -0,0 +1,22 @@
+const colorTheme = {
+  gray: "#5E6B78",
+  lightGray: "#B5B5C8",
+  lightGray0: "#9E9E9E",
+  lightGray4: "#f3f4f6",
+  borderColor: "#E2E2E2",
+  successBarColor: "#0D921B",
+  pendingBarColor: "#DDDDDD",
+  dividerColor: "#f7f7f7",
+  bgSuccessAlert: "#B9FBC0",
+  circleProgressBarcolor: "#EAE0DF",
+  scoreSuccessStarColor: "#2BB639",
+  QuationsBoxBg: "#FEF1EE",
+  QuationsBoxContentBg: "#FFF8F7",
+  scoreCardBg1: "#FFE5B3",
+  scoreCardIcon1: "#E78D12",
+  scoreCardBg2: "#FEEFEB",
+  scoreCardIcon2: "#F57B7B",
+  reportDetailsSubheaderBg: "#FFCAAC",
+  achiverBoxBg: "#FFF9F9",
+};
+export default colorTheme;
diff --git a/packages/assessment/src/components/ExamScores/ExamScoresCard.js b/packages/assessment/src/components/ExamScores/ExamScoresCard.js
@@ -1,32 +1,30 @@
 import React, { useState } from "react";
-import { IconByName, ProgressBar } from "@shiksha/common-lib";
 import {
-  HStack,
-  Text,
-  VStack,
-  Stack,
-  Box,
-  Progress,
-  Button,
-  Divider,
-  Actionsheet,
-  Checkbox,
-} from "native-base";
+  IconByName,
+  ProgressBar,
+  overrideColorTheme,
+  BodyLarge,
+  Subtitle,
+  BodySmall,
+} from "@shiksha/common-lib";
+import { HStack, VStack, Box, Button, Divider } from "native-base";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import colorTheme from "../../colorTheme";
+const colors = overrideColorTheme(colorTheme);
 
 const ExamScoresCard = ({ setPageName }) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const [progressAssessment, setProgressAssessment] = React.useState([
     {
       name: "12 Assessed",
-      color: "#0D921B",
+      color: colors.successBarColor,
       value: 12,
     },
     {
       name: "6 pending",
-      color: "#DDDDDD",
+      color: colors.pendingBarColor,
       value: 6,
     },
   ]);
@@ -63,41 +61,44 @@ const ExamScoresCard = ({ setPageName }) => {
   return (
     <>
       <VStack space={2}>
-        <Text>State Examinations</Text>
-        <Box borderRadius="md">
+        <BodyLarge>State Examinations</BodyLarge>
+        <Box
+          borderWidth="1"
+          borderColor={colors.borderColor}
+          borderRadius="10px"
+        >
           <VStack space="4">
-            <Box px="4" py={2} bg={"#F57B7B"} roundedTop="6">
+            <Box px="4" py={2} bg={colors.scoreCardIcon2} roundedTop="6">
               <HStack justifyContent={"center"} alignItems="center">
-                <IconByName name="TimeLineIcon" pr="0" color="white" />
-                <Text color="white" bold fontSize="xs">
+                <IconByName name="TimeLineIcon" pr="0" color={colors.white} />
+                <Subtitle color={colors.white}>
                   {" "}
                   4 Days left! Submit assessment scores now.
-                </Text>
+                </Subtitle>
               </HStack>
             </Box>
-            <Box px="4" bg={"#FFF8F7"}>
-              <Text bold mb="3">
-                Summative Assessment 1
-              </Text>
-              <Text mb="5" fontSize={"xs"} color={"muted.600"}>
+            <Box px="4">
+              <BodyLarge>Summative Assessment 1</BodyLarge>
+              <BodySmall py="2" color={colors.gray}>
                 Due Date - 27, May 2022
-              </Text>
+              </BodySmall>
               <VStack flex="auto" alignContent={"center"}>
                 <ProgressBar
                   isTextShow
                   legendType="separated"
                   h="35px"
-                  _bar={{ rounded: "md" }}
+                  _bar={{ rounded: "md", my: "3" }}
                   isLabelCountHide
                   data={progressAssessment}
                 />
               </VStack>
             </Box>
-            <Box p="4" bg={"#FCF3F3"} borderBottomRadius={6}>
+            <Divider my="1" mx="4" w="90%"></Divider>
+            <Box p="4" pt="4px" borderBottomRadius={6}>
               <Button
                 py={3}
                 colorScheme="button"
-                _text={{ color: "#fff" }}
+                _text={{ color: colors.white }}
                 onPress={() => navigate("/examscores")}
               >
                 {t("continue")}
@@ -106,16 +107,9 @@ const ExamScoresCard = ({ setPageName }) => {
           </VStack>
         </Box>
       </VStack>
-      <Text
-        my={2}
-        textAlign={"center"}
-        color={"#F87558"}
-        fontSize={12}
-        bold
-        cursor={"pointer"}
-      >
+      <Subtitle my={2} textAlign={"center"} color={colors.primary}>
         {t("VIEW PAST ASSESSMENTS")}
-      </Text>
+      </Subtitle>
     </>
   );
 };

diff --git a/packages/assessment/src/components/ExamScores/QuestionLIst.js b/packages/assessment/src/components/ExamScores/QuestionLIst.js
@@ -1,19 +1,6 @@
 import React, { useState, useEffect } from "react";
-import {
-  HStack,
-  Text,
-  VStack,
-  Stack,
-  Box,
-  Progress,
-  Button,
-  Divider,
-  Actionsheet,
-  Checkbox,
-  Radio,
-} from "native-base";
+import { VStack } from "native-base";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
 import SingleSelectQuestionCard from "./questionTypes/SingleSelectQuestionCard";
 import MultipleSelectQuestionCard from "./questionTypes/MultipleSelectQuestionCard";
 import SimpleQuestionCard from "./questionTypes/SimpleQuestionCard";

diff --git a/packages/assessment/src/components/ExamScores/QuestionLIst2.js b/packages/assessment/src/components/ExamScores/QuestionLIst2.js
@@ -1,30 +1,17 @@
 import React, { useState, useEffect } from "react";
-import {
-  HStack,
-  Text,
-  VStack,
-  Stack,
-  Box,
-  Progress,
-  Button,
-  Divider,
-  Actionsheet,
-  Checkbox,
-  Radio,
-  Avatar,
-} from "native-base";
+import { HStack, Text, VStack, Box, Button, Avatar } from "native-base";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
 import SingleSelectQuestionCard from "./questionTypes/SingleSelectQuestionCard";
-import MultipleSelectQuestionCard from "./questionTypes/MultipleSelectQuestionCard";
-import SimpleQuestionCard from "./questionTypes/SimpleQuestionCard";
 import {
-  assessmentRegistryService,
-  IconByName,
+  BodyLarge,
   Layout,
   Loading,
   useWindowSize,
+  overrideColorTheme,
+  Caption,
 } from "@shiksha/common-lib";
+import colorTheme from "../../colorTheme";
+const colors = overrideColorTheme(colorTheme);
 
 const QuestionList2 = ({ questionNumber }) => {
   const { t } = useTranslation();
@@ -55,7 +42,7 @@ const QuestionList2 = ({ questionNumber }) => {
         title: "Summative Assessment 1",
         isEnableSearchBtn: true,
         // setSearch: setSearch,
-        subHeading: "State Examinations",
+        subHeading: <BodyLarge>{t("State Examinations")}</BodyLarge>,
         iconComponent: (
           <Avatar
             size="48px"
@@ -70,10 +57,8 @@ const QuestionList2 = ({ questionNumber }) => {
       subHeader={
         <HStack space="4" justifyContent="space-between" alignItems="center">
           <VStack>
-            <Text fontSize={"lg"}>Rahul</Text>
-            <Text fontSize={"xs"} color={"muted.600"}>
-              Mr. Father’s Name
-            </Text>
+            <BodyLarge>Rahul</BodyLarge>
+            <Caption color={colors.lightGray0}>Mr. Father’s Name</Caption>
           </VStack>
           <Avatar
             size="37px"
@@ -84,7 +69,7 @@ const QuestionList2 = ({ questionNumber }) => {
           />
         </HStack>
       }
-      _subHeader={{ bg: "#D9F0FC" }}
+      _subHeader={{ bg: colors.cardBg }}
       _footer={{
         menues: [
           {
@@ -144,8 +129,8 @@ const QuestionList2 = ({ questionNumber }) => {
           )}
         </VStack>
       </Box>
-      <Box bg="white" p="5" position="sticky" bottom="84" shadow={2}>
-        <Button colorScheme="button" py={3} _text={{ color: "#fff" }}>
+      <Box bg={colors.white} p="5" position="sticky" bottom="84" shadow={2}>
+        <Button colorScheme="button" py={3} _text={{ color: colors.white }}>
           {t("Save")}
         </Button>
       </Box>

diff --git a/packages/assessment/src/components/ExamScores/QuestionLIst3.js b/packages/assessment/src/components/ExamScores/QuestionLIst3.js
@@ -1,30 +1,17 @@
 import React, { useState, useEffect } from "react";
-import {
-  HStack,
-  Text,
-  VStack,
-  Stack,
-  Box,
-  Progress,
-  Button,
-  Divider,
-  Actionsheet,
-  Checkbox,
-  Radio,
-  Avatar,
-} from "native-base";
+import { HStack, Text, VStack, Box, Button, Avatar } from "native-base";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import SingleSelectQuestionCard from "./questionTypes/SingleSelectQuestionCard";
 import MultipleSelectQuestionCard from "./questionTypes/MultipleSelectQuestionCard";
-import SimpleQuestionCard from "./questionTypes/SimpleQuestionCard";
 import {
-  assessmentRegistryService,
-  IconByName,
+  BodyLarge,
   Layout,
   Loading,
   useWindowSize,
+  overrideColorTheme,
+  Caption,
 } from "@shiksha/common-lib";
+import colorTheme from "../../colorTheme";
+const colors = overrideColorTheme(colorTheme);
 
 const QuestionList3 = ({ questionNumber }) => {
   const { t } = useTranslation();
@@ -97,7 +84,7 @@ const QuestionList3 = ({ questionNumber }) => {
         title: "Summative Assessment 1",
         isEnableSearchBtn: true,
         // setSearch: setSearch,
-        subHeading: "State Examinations",
+        subHeading: <BodyLarge>{t("State Examinations")}</BodyLarge>,
         iconComponent: (
           <Avatar
             size="48px"
@@ -112,10 +99,8 @@ const QuestionList3 = ({ questionNumber }) => {
       subHeader={
         <HStack space="4" justifyContent="space-between" alignItems="center">
           <VStack>
-            <Text fontSize={"lg"}>Rahul</Text>
-            <Text fontSize={"xs"} color={"muted.600"}>
-              Mr. Father’s Name
-            </Text>
+            <BodyLarge>Rahul</BodyLarge>
+            <Caption color={colors.lightGray0}>Mr. Father’s Name</Caption>
           </VStack>
           <Avatar
             size="37px"
@@ -126,7 +111,7 @@ const QuestionList3 = ({ questionNumber }) => {
           />
         </HStack>
       }
-      _subHeader={{ bg: "#D9F0FC" }}
+      _subHeader={{ bg: colors.cardBg }}
       _footer={{
         menues: [
           {
@@ -186,8 +171,8 @@ const QuestionList3 = ({ questionNumber }) => {
           )}
         </VStack>
       </Box>
-      <Box bg="white" p="5" position="sticky" bottom="84" shadow={2}>
-        <Button colorScheme="button" py={3} _text={{ color: "#fff" }}>
+      <Box bg={colors.white} p="5" position="sticky" bottom="84" shadow={2}>
+        <Button colorScheme="button" py={3} _text={{ color: colors.white }}>
           {t("Save")}
         </Button>
       </Box>

diff --git a/packages/assessment/src/components/ExamScores/QuestionLIst4.js b/packages/assessment/src/components/ExamScores/QuestionLIst4.js
@@ -1,30 +1,17 @@
-import React, { useState, useEffect } from "react";
-import {
-  HStack,
-  Text,
-  VStack,
-  Stack,
-  Box,
-  Progress,
-  Button,
-  Divider,
-  Actionsheet,
-  Checkbox,
-  Radio,
-  Avatar,
-} from "native-base";
+import React, { useState } from "react";
+import { HStack, Text, VStack, Box, Button, Avatar } from "native-base";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import SingleSelectQuestionCard from "./questionTypes/SingleSelectQuestionCard";
-import MultipleSelectQuestionCard from "./questionTypes/MultipleSelectQuestionCard";
 import SimpleQuestionCard from "./questionTypes/SimpleQuestionCard";
 import {
-  assessmentRegistryService,
-  IconByName,
   Layout,
   Loading,
   useWindowSize,
+  overrideColorTheme,
+  BodyLarge,
+  Caption,
 } from "@shiksha/common-lib";
+import colorTheme from "../../colorTheme";
+const colors = overrideColorTheme(colorTheme);
 
 const QuestionList4 = ({ questionNumber }) => {
   const { t } = useTranslation();
@@ -112,10 +99,8 @@ const QuestionList4 = ({ questionNumber }) => {
       subHeader={
         <HStack space="4" justifyContent="space-between" alignItems="center">
           <VStack>
-            <Text fontSize={"lg"}>Rahul</Text>
-            <Text fontSize={"xs"} color={"muted.600"}>
-              Mr. Father’s Name
-            </Text>
+            <BodyLarge>Rahul</BodyLarge>
+            <Caption color={colors.lightGray0}>Mr. Father’s Name</Caption>
           </VStack>
           <Avatar
             size="37px"
@@ -126,7 +111,7 @@ const QuestionList4 = ({ questionNumber }) => {
           />
         </HStack>
       }
-      _subHeader={{ bg: "#D9F0FC" }}
+      _subHeader={{ bg: colors.cardBg }}
       _footer={{
         menues: [
           {
@@ -186,8 +171,8 @@ const QuestionList4 = ({ questionNumber }) => {
           )}
         </VStack>
       </Box>
-      <Box bg="white" p="5" position="sticky" bottom="84" shadow={2}>
-        <Button colorScheme="button" py={3} _text={{ color: "#fff" }}>
+      <Box bg={colors.white} p="5" position="sticky" bottom="84" shadow={2}>
+        <Button colorScheme="button" py={3} _text={{ color: colors.white }}>
           {t("Save")}
         </Button>
       </Box>