setting colors to theme

HASKI-RAK · Sep 3, 2024 · 318ac1e · 318ac1e
1 parent 30f6934
commit 318ac1e
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 38 deletions.
diff --git a/src/components/CreateCourse/Modal/CreateCourseModal.tsx b/src/components/CreateCourse/Modal/CreateCourseModal.tsx
@@ -159,7 +159,7 @@ const CreateCourseModal = memo(
                     sx={{
                       m: 2,
                       '&.Mui-disabled': {
-                        border: (theme) => theme.palette.primary.dark
+                        border: (theme) => theme.palette.primary.main
                       }
                     }}
                     onClick={() => handleCreateCourse()}>

diff --git a/src/components/CreateTopic/Modal/CreateTopicModal.hooks.tsx b/src/components/CreateTopic/Modal/CreateTopicModal.hooks.tsx
@@ -11,24 +11,24 @@ import {
   postTopic
 } from '@services'
 import { usePersistedStore } from '@store'
-import { LearningElementWithClassification } from './CreateTopicModal'
+import { RemoteLearningElementWithClassification } from './CreateTopicModal'
 
 type useCreateTopicModalProps = {
-  setIsSending: React.Dispatch<React.SetStateAction<boolean>>
+  setCreateTopicIsSending: React.Dispatch<React.SetStateAction<boolean>>
   setSuccessTopicCreated: React.Dispatch<React.SetStateAction<boolean>>
   setSelectedTopics: React.Dispatch<React.SetStateAction<RemoteTopic[]>>
   selectedLearningElements: { [p: number]: RemoteLearningElement[] }
   setSelectedLearningElements: React.Dispatch<React.SetStateAction<{ [p: number]: RemoteLearningElement[] }>>
-  selectedLearningElementsClassification: { [p: number]: LearningElementWithClassification[] }
+  selectedLearningElementsClassification: { [p: number]: RemoteLearningElementWithClassification[] }
   setSelectedLearningElementsClassification: React.Dispatch<
-    React.SetStateAction<{ [p: number]: LearningElementWithClassification[] }>
+    React.SetStateAction<{ [p: number]: RemoteLearningElementWithClassification[] }>
   >
   selectedAlgorithms: { [p: number]: CreateAlgorithmTableNameProps[] }
   setSelectedAlgorithms: React.Dispatch<React.SetStateAction<{ [p: number]: CreateAlgorithmTableNameProps[] }>>
 }
 
 export const useCreateTopicModal = ({
-  setIsSending,
+  setCreateTopicIsSending,
   setSuccessTopicCreated,
   setSelectedTopics,
   selectedLearningElements,
@@ -38,10 +38,11 @@ export const useCreateTopicModal = ({
   selectedAlgorithms,
   setSelectedAlgorithms
 }: useCreateTopicModalProps) => {
-  const { addSnackbar } = useContext(SnackbarContext)
+  //Hooks
   const { t } = useTranslation()
+  const { addSnackbar } = useContext(SnackbarContext)
 
-  //Hooks
+  //States
   const getUser = usePersistedStore((state) => state.getUser)
 
   const handleCreateTopics = (topicName: string, lmsCourseId: number, courseId: string, user: User) => {
@@ -106,7 +107,7 @@ export const useCreateTopicModal = ({
   const handleCreate = (
     topicName: string,
     lmsCourseId: number,
-    selectedLearningElementsClassification: { [key: number]: LearningElementWithClassification[] },
+    selectedLearningElementsClassification: { [key: number]: RemoteLearningElementWithClassification[] },
     algorithmShortName: string,
     courseId?: string
   ) => {
@@ -116,7 +117,7 @@ export const useCreateTopicModal = ({
         handleCreateTopics(topicName, lmsCourseId, courseId, user).then((topic) => {
           const topicLmsId = topic.lms_id
           const topicId = topic.id
-          setIsSending(true)
+          setCreateTopicIsSending(true)
           Promise.all(
             selectedLearningElementsClassification[topicLmsId].map((element) =>
               handleCreateLearningElements(
@@ -155,7 +156,7 @@ export const useCreateTopicModal = ({
                       })
                       log.info(t('appGlobal.dataSendSuccessful'))
                       setSuccessTopicCreated(true)
-                      setIsSending(false)
+                      setCreateTopicIsSending(false)
                     } else {
                       addSnackbar({
                         message: t('error.postCalculateLearningPathForAllStudents'),
@@ -164,7 +165,7 @@ export const useCreateTopicModal = ({
                       })
                       log.error(t('error.postCalculateLearningPathForAllStudents'))
                       setSuccessTopicCreated(false)
-                      setIsSending(false)
+                      setCreateTopicIsSending(false)
                     }
                   })
                 })
@@ -233,7 +234,7 @@ export const useCreateTopicModal = ({
   }
 
   const handleLearningElementClassification = (learningElementClassifications: {
-    [key: number]: LearningElementWithClassification[]
+    [key: number]: RemoteLearningElementWithClassification[]
   }) => {
     setSelectedLearningElementsClassification(learningElementClassifications)
   }

diff --git a/src/components/CreateTopic/Modal/CreateTopicModal.tsx b/src/components/CreateTopic/Modal/CreateTopicModal.tsx
@@ -24,7 +24,7 @@ type CreateTopicModalProps = {
   handleCloseCreateTopicModal: () => void
 }
 
-export type LearningElementWithClassification = RemoteLearningElement & {
+export type RemoteLearningElementWithClassification = RemoteLearningElement & {
   classification: string
 }
 
@@ -35,38 +35,30 @@ const CreateTopicModal = memo(
     setSuccessTopicCreated,
     handleCloseCreateTopicModal
   }: CreateTopicModalProps) => {
-    const { t } = useTranslation()
-
     //Hooks
-    const [remoteTopics, setRemoteTopics] = useState<RemoteTopic[]>([])
+    const { t } = useTranslation()
     const { courseId } = useParams<{ courseId: string }>()
-    const [isSending, setIsSending] = useState<boolean>(false)
     const { addSnackbar } = useContext(SnackbarContext)
+    const [remoteTopics, setRemoteTopics] = useState<RemoteTopic[]>([])
+    const [isSending, setIsSending] = useState<boolean>(false)
     const [alreadyCreatedTopics, setAlreadyCreatedTopics] = useState<LearningPathTopic>()
     const [selectedTopics, setSelectedTopics] = useState<RemoteTopic[]>([])
     const [selectedLearningElements, setSelectedLearningElements] = useState<{
       [key: number]: RemoteLearningElement[]
     }>({})
     const [selectedLearningElementsClassification, setSelectedLearningElementsClassification] = useState<{
-      [key: number]: LearningElementWithClassification[]
+      [key: number]: RemoteLearningElementWithClassification[]
     }>({})
     const [selectedAlgorithms, setSelectedAlgorithms] = useState<{ [key: number]: CreateAlgorithmTableNameProps[] }>({})
     const [activeStep, setActiveStep] = useState<number>(0)
-    const steps = [
-      t('appGlobal.topics'),
-      t('appGlobal.learningElements'),
-      t('appGlobal.classifications'),
-      t('appGlobal.algorithms')
-    ]
-
     const {
       handleCreate,
       handleTopicChange,
       handleLearningElementChange,
       handleLearningElementClassification,
       handleAlgorithmChange
     } = useCreateTopicModal({
-      setIsSending,
+      setCreateTopicIsSending: setIsSending,
       setSuccessTopicCreated,
       setSelectedTopics,
       selectedLearningElements,
@@ -79,8 +71,16 @@ const CreateTopicModal = memo(
 
     //Store
     const getUser = usePersistedStore((state) => state.getUser)
-    const getRemoteTopics = useStore((state) => state.getRemoteTopic)
     const getTopics = useStore((state) => state.getLearningPathTopic)
+    const getRemoteTopics = useStore((state) => state.getRemoteTopic)
+
+    //Constants
+    const createTopicModalStepperSteps = [
+      t('appGlobal.topics'),
+      t('appGlobal.learningElements'),
+      t('appGlobal.classifications'),
+      t('appGlobal.algorithms')
+    ]
 
     useEffect(() => {
       getUser()
@@ -121,6 +121,7 @@ const CreateTopicModal = memo(
           log.error(t('error.getUser') + ' ' + error)
         })
 
+      //Sort topics after their creation (lower id is created before a higher id in LMS)
       setSelectedTopics((prevSelectedTopics) => [...prevSelectedTopics].sort((a, b) => a.topic_lms_id - b.topic_lms_id))
     }, [activeStep, getTopics, getUser, getRemoteTopics])
 
@@ -152,7 +153,7 @@ const CreateTopicModal = memo(
               <Close />
             </Fab>
             <Stepper activeStep={activeStep} sx={{ pt: '1rem' }}>
-              {steps.map((label, index) => (
+              {createTopicModalStepperSteps.map((label, index) => (
                 <Step key={label}>
                   <StepButton
                     color="inherit"

diff --git a/src/components/CreateTopic/Table/CreateAlgorithmTable.tsx b/src/components/CreateTopic/Table/CreateAlgorithmTable.tsx
@@ -61,7 +61,7 @@ const CreateAlgorithmTable = memo(
             <Grid container alignItems="flex-start">
               <Grid item xs={4}>
                 <Grid container direction="column">
-                  <Box bgcolor={'rgba(255,168,45,0.34)'} borderRadius={3}>
+                  <Box bgcolor={(theme) => theme.palette.info.light} borderRadius={3}>
                     <Grid container justifyContent="center">
                       <InputLabel
                         sx={{

diff --git a/src/components/CreateTopic/Table/CreateLearningElementClassificationTable.tsx b/src/components/CreateTopic/Table/CreateLearningElementClassificationTable.tsx
@@ -97,7 +97,7 @@ const CreateLearningElementClassificationTable = memo(
             direction="column"
             key={'Create Topic - Learning Element Classification: ' + lmsTopic.topic_lms_id}>
             <Paper sx={{ padding: '1rem', width: '95%' }}>
-              <Box bgcolor={'rgba(255,168,45,0.34)'} borderRadius={3}>
+              <Box bgcolor={(theme) => theme.palette.info.light} borderRadius={3}>
                 <Grid item container justifyContent="center" alignItems="center">
                   <Typography variant="h6" gutterBottom>
                     {lmsTopic.topic_lms_name}

diff --git a/src/components/CreateTopic/Table/CreateLearningElementTable.tsx b/src/components/CreateTopic/Table/CreateLearningElementTable.tsx
@@ -46,13 +46,13 @@ const CreateLearningElementTable = memo(
           </Grid>
           <Grid item xs={1.75}>
             <Fab
-              sx={{ mt: '1rem', mr: '0.5rem', color: '#f2852b', bgcolor: 'white' }}
+              sx={{ mt: '1rem', mr: '0.5rem', color: (theme) => theme.palette.primary.main, bgcolor: 'white' }}
               onClick={handleSelectAllLearningElements}
               size="medium">
               <CheckBox />
             </Fab>
             <Fab
-              sx={{ mt: '1rem', color: '#f2852b', bgcolor: 'white' }}
+              sx={{ mt: '1rem', color: (theme) => theme.palette.primary.main, bgcolor: 'white' }}
               onClick={handleDeselectAllLearningElements}
               size="medium">
               <CheckBoxOutlineBlank />
@@ -67,7 +67,7 @@ const CreateLearningElementTable = memo(
             direction="column"
             key={'Create Topic - Learning Element: ' + lmsTopic.topic_lms_id}>
             <Paper sx={{ padding: '1rem', width: '95%' }}>
-              <Box bgcolor={'rgba(255,168,45,0.34)'} borderRadius={3}>
+              <Box bgcolor={(theme) => theme.palette.info.light} borderRadius={3}>
                 <Grid container justifyContent="center" alignItems="center">
                   <Typography variant="h6" gutterBottom>
                     {lmsTopic.topic_lms_name}

diff --git a/src/components/Questionnaire/QuestionnaireQuestions/Table/TableCommonComponents.tsx b/src/components/Questionnaire/QuestionnaireQuestions/Table/TableCommonComponents.tsx
@@ -48,7 +48,7 @@ export const MemoTableRowQuestion = memo(({ question }: { question: string }) =>
       <TableCell
         align="left"
         sx={{
-          backgroundColor: (theme) => theme.palette.primary.dark,
+          backgroundColor: (theme) => theme.palette.primary.main,
           color: (theme) => theme.palette.secondary.contrastText
         }}>
         <Typography variant={'h5'}>{question}</Typography>
@@ -82,7 +82,7 @@ export const ButtonStack = memo(({ activeStep, handleNext, handleBack, steps, id
             id="next-button"
             sx={{
               '&.Mui-disabled': {
-                border: (theme) => theme.palette.primary.dark
+                border: (theme) => theme.palette.primary.main
               }
             }}
             variant="contained"
@@ -99,7 +99,7 @@ export const ButtonStack = memo(({ activeStep, handleNext, handleBack, steps, id
             id="back-button"
             sx={{
               '&.Mui-disabled': {
-                border: (theme) => theme.palette.primary.dark
+                border: (theme) => theme.palette.primary.main
               }
             }}
             variant="contained"
@@ -140,7 +140,7 @@ export const SendButton = memo(
         sx={{
           m: 2,
           '&.Mui-disabled': {
-            border: (theme) => theme.palette.primary.dark
+            border: (theme) => theme.palette.primary.main
           }
         }}>
         {isSending ? <CircularProgress size={24} /> : t('appGlobal.send')}