From e8c2a0d51949149dd327d78a584cd59ea4f54cbb Mon Sep 17 00:00:00 2001
From: Ashutosh Sahoo <ashutoshsahoo27@gmail.com>
Date: Thu, 18 Jul 2024 23:46:36 +0530
Subject: [PATCH] fix design of the Task reqest modal

---
 public/cancel-icon.svg                           |  2 +-
 src/components/MarkDownEditor/MarkDownEditor.tsx |  3 ++-
 src/components/issues/Card.module.scss           | 15 +++++++++------
 src/components/issues/TaskRequestForm.tsx        |  4 +++-
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/public/cancel-icon.svg b/public/cancel-icon.svg
index ec9861fe1..dfa6865bf 100644
--- a/public/cancel-icon.svg
+++ b/public/cancel-icon.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="red" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="#AE1820"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="#AE1820" stroke='#AE1820' stroke-width="3"/>
 </svg>
diff --git a/src/components/MarkDownEditor/MarkDownEditor.tsx b/src/components/MarkDownEditor/MarkDownEditor.tsx
index eee73527f..1e761fc6e 100644
--- a/src/components/MarkDownEditor/MarkDownEditor.tsx
+++ b/src/components/MarkDownEditor/MarkDownEditor.tsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { ChangeEvent, useState } from 'react';
 import Markdown from 'markdown-to-jsx';
+import styles from '@/components/issues/Card.module.scss';
 
 interface MarkDownEditorProps {
     onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
@@ -41,7 +42,7 @@ const MarkDownEditor: React.FC<MarkDownEditorProps> = ({
                     {getActivePaneLabel()}
                 </button>
             </div>
-            <div className="markdown-editor">
+            <div className={styles.markdown__spacing}>
                 {mode === 'description' && (
                     <div className="description-box">
                         <textarea
diff --git a/src/components/issues/Card.module.scss b/src/components/issues/Card.module.scss
index 8a1630bea..cc97bbb05 100644
--- a/src/components/issues/Card.module.scss
+++ b/src/components/issues/Card.module.scss
@@ -78,13 +78,16 @@
     flex-direction: column;
     gap: 1rem;
 }
+.request_spacing {
+    margin-top: 1rem;
+}
 .modalCloseIcon {
     appearance: none;
     background-color: transparent;
     border: none;
     position: absolute;
-    right: -24px;
-    top: -18px;
+    right: 10px;
+    top: 10px;
     cursor: pointer;
 }
 .trackMessage {
@@ -267,10 +270,6 @@
 .card__top__button {
     @include styles.issues-button;
     min-width: 9rem;
-
-    @media (max-width: 48rem) {
-        margin-top: 1rem;
-    }
 }
 
 .card__issue_created__by,
@@ -288,6 +287,10 @@
     }
 }
 
+.markdown__spacing {
+    margin-top: 0.5rem;
+}
+
 .card__link {
     font-family: 'Inter';
     font-style: normal;
diff --git a/src/components/issues/TaskRequestForm.tsx b/src/components/issues/TaskRequestForm.tsx
index b9e93a878..1c867bfe4 100644
--- a/src/components/issues/TaskRequestForm.tsx
+++ b/src/components/issues/TaskRequestForm.tsx
@@ -178,7 +178,9 @@ const TaskRequestForm: FC<ActionFormProps> = ({
                 </div>
             </div>
             {isLoading && <Loader />}
-            <div className={styles.form_container}>
+            <div
+                className={`${styles.form_container} ${styles.request_spacing}`}
+            >
                 <button
                     className={styles.card__top__button}
                     type="submit"