@omniumretail/component-library 1.2.12 → 1.2.14

package/src/components/CategoryResponse/index.tsx

@@ -317,7 +317,6 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
     return (
         <div className={styles.categoryResponse}>
             <div className={styles.sidebarWrapper}>
-                <div className={styles.title}>{t('components.categoryReadOnly.categories')}</div>
                 {renderCategories(localData.CategoryAnswers)}
             </div>
             <div className={styles.contentWrapper}>
@@ -330,9 +329,6 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                     onValuesChange={(_, allValues) => onFinish(allValues)}
                 >
                     <div className={styles.details}>
-                        <div className={styles.categoryName}>
-                            {selectedCategory?.Data?.CategoryName}
-                        </div>
                         <div className={styles.categoryDescription}>
                             {selectedCategory?.Data?.Description}
                         </div>
@@ -375,12 +371,13 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                                                 <div className={styles.actionContainer}>
                                                     <span className={styles.note}>{t('components.categoryResponse.actions')}: </span>
 
-                                                    {question?.Actions?.map((action: any, index: number) => (
-                                                        <a onClick={() => props.openAction!(action.Id)} key={action.Id} className={index > 0 ? styles.action : ''}>
-                                                            {action.Name}
-                                                            <br />
-                                                        </a>
-                                                    ))}
+                                                    <div className={styles.action}>
+                                                        {question?.Actions?.map((action: any, index: number) => (
+                                                            <a onClick={() => props.openAction!(action.Id)} key={action.Id}>
+                                                                {action.Name}
+                                                            </a>
+                                                        ))}
+                                                    </div>
                                                 </div>
                                             }
 
@@ -388,10 +385,7 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                                                 <div className={styles.buttonContainer} onClick={() => setIsNoteVisible({ categoryIndex: currentKey, questionIndex: index })}>
                                                     <CommentOutlined className={styles.iconStyle} />
 
-                                                    <span className={styles.buttonLabel}>{form.getFieldValue(`Questions`)?.[index].Note
-                                                        ? t('components.categoryResponse.editNote')
-                                                        : t('components.categoryResponse.addNote')}
-                                                    </span>
+                                                    <span className={styles.buttonLabel}>{t('components.categoryResponse.note')}</span>
                                                 </div>
 
                                                 <div className={styles.buttonContainer} onClick={() => handleAddAction(question.QuestionId, question.Id)}>

package/src/components/CategoryResponse/styles.module.scss

@@ -51,10 +51,10 @@
 .label {
     padding-bottom: 15px;
     font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-body-2);
+    font-size: var(--font-size-body-4);
 
-    @media(min-width: 768px) {
-        font-size: var(--font-size-body-4);
+    @media(max-width: 767px) {
+        font-size: var(--font-size-body-3);
     }
 }
 
@@ -165,18 +165,22 @@
 }
 
 .subject {
-    font-size: var(--font-size-body-2);
-    font-weight: var(--font-weight-semibold);
-    margin-bottom: 8px;
-
-    @media(min-width: 768px) {
+    font-size: var(--font-size-body-4);
+    font-weight: var(--font-weight-medium);
+    
+    @media(max-width: 767px) {
         font-size: var(--font-size-body-3);
     }
 }
 
 .description {
     font-weight: var(--font-weight-light);
+    font-size: var(--font-size-body-3);
     margin-bottom: 4px;
+
+    @media(max-width: 767px) {
+        font-size: var(--font-size-body-2);
+    }
 }
 
 .noteContainer {
@@ -191,10 +195,20 @@
     white-space: pre-wrap;
     max-height: 100px;
     overflow: auto;
+    font-size: var(--font-size-body-3);
+
+    @media(max-width: 767px) {
+        font-size: var(--font-size-body-2);
+    }
 }
 
 .note {
     font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-body-3);
+
+    @media(max-width: 767px) {
+        font-size: var(--font-size-body-2);
+    }
 }
 
 .form {
@@ -206,11 +220,13 @@
     font-weight: var(--font-weight-light);
     margin-bottom: 4px;
     margin-top: 16px;
+    display: flex;
+    gap: 4px;
 }
 
 .action {
-    margin-left: 46px;
-    margin-top: 12px;
+    display: flex;
+    flex-direction: column;
 }
 
 .actionsButtonsContainer {
@@ -243,8 +259,16 @@
 }
 
 .uploadContainer {
-    margin-top: 4px;
+    margin-top: 5px;
     cursor: pointer;
+
+    @media(min-width: 1350px) {
+        margin-top: 1px;
+    }
+
+    @media(min-width: 768px) {
+        font-size: 4px;
+    }
 }
 
 .iconStyle {
@@ -321,10 +345,11 @@
     }
 
     .ant-upload-wrapper .ant-upload-list .ant-upload-list-item {
-        max-width: 400px !important;
+        max-width: 110px !important;
+        font-size: 12px !important;
 
         @media(max-width: 767px) {
-            max-width: 250px !important;
+            font-size: 10px !important;
         }
     }