update styling

quran · Feb 28, 2024 · f6806e0 · f6806e0
1 parent 52b87ee
commit f6806e0
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 6 deletions.
diff --git a/src/components/Course/CourseFeedback/CourseFeedbackForm/CourseFeedbackForm.module.scss b/src/components/Course/CourseFeedback/CourseFeedbackForm/CourseFeedbackForm.module.scss
@@ -0,0 +1,33 @@
+@use "src/styles/breakpoints";
+
+.bodyInput {
+    border: none !important;
+    border-radius: 0 !important;
+    padding-inline: 0 !important;
+    & > div {
+        border: none;
+        margin-block-start: var(--spacing-large);
+    }
+
+    textarea {
+        font-size: var(--font-size-large);
+        font-weight: var(--font-weight-medium);
+
+        @include breakpoints.smallerThanTablet {
+            min-height: 30vh;
+        }
+    }
+}
+
+.submitButton {
+    margin-block-start: var(--spacing-small);
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+}
+
+.ratingContainer {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
diff --git a/src/components/Course/CourseFeedback/CourseFeedbackForm/index.tsx b/src/components/Course/CourseFeedback/CourseFeedbackForm/index.tsx
@@ -2,14 +2,15 @@ import React, { useState } from 'react';
 
 import useTranslation from 'next-translate/useTranslation';
 
+import styles from './CourseFeedbackForm.module.scss';
+
 import {
   mutateCachedCourseAfterFeedback,
   mutateCachedLessonsAfterFeedback,
 } from '@/components/Course/utils/mutations';
 import buildFormBuilderFormField from '@/components/FormBuilder/buildFormBuilderFormField';
 import buildTranslatedErrorMessageByErrorId from '@/components/FormBuilder/buildTranslatedErrorMessageByErrorId';
 import FormBuilder from '@/components/FormBuilder/FormBuilder';
-import styles from '@/components/Notes/NoteModal/NoteModal.module.scss';
 import Button from '@/dls/Button/Button';
 import { ToastStatus, useToast } from '@/dls/Toast/Toast';
 import useMutateMultipleKeys from '@/hooks/useMutateMultipleKeys';
@@ -78,7 +79,21 @@ const CourseFeedbackForm: React.FC<Props> = ({ course, onSuccess }) => {
         {
           field: 'rating',
           type: FormFieldType.StarRating,
-          defaultValue: 5,
+          // user must pick a rating
+          defaultValue: null,
+          containerClassName: styles.ratingContainer,
+          rules: [
+            {
+              type: RuleType.Required,
+              value: true,
+              errorId: ErrorMessageId.RequiredField,
+              errorMessage: buildTranslatedErrorMessageByErrorId(
+                ErrorMessageId.RequiredField,
+                'rating',
+                t,
+              ),
+            },
+          ],
         },
         {
           field: 'body',
@@ -110,9 +125,11 @@ const CourseFeedbackForm: React.FC<Props> = ({ course, onSuccess }) => {
       isSubmitting={isLoading}
       renderAction={({ isLoading: isSubmitting }) => {
         return (
-          <Button htmlType="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
-            {t('common:submit')}
-          </Button>
+          <div className={styles.submitButton}>
+            <Button htmlType="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
+              {t('common:submit')}
+            </Button>
+          </div>
         );
       }}
     />

diff --git a/src/components/FormBuilder/buildFormBuilderFormField.ts b/src/components/FormBuilder/buildFormBuilderFormField.ts
@@ -30,7 +30,7 @@ const buildFormBuilderFormField = (formField: FormField, t: Translate): FormBuil
       rules: formField.rules.map((rule) => ({
         type: rule.type,
         value: rule.value,
-        errorMessage: t(`validation.${rule.errorId}`, {
+        errorMessage: t(`common:validation.${rule.errorId}`, {
           field: capitalize(formField.field),
           ...rule.errorExtraParams,
         }),