ui

Author: Laurie T. Malau

components/dashboard/src/feedback-form/FeedbackComponent.tsx

@@ -75,8 +75,8 @@ function FeedbackComponent(props: {
             {minimisedFirstView && (
                 <div
                     className={
-                        "flex flex-col justify-center px-6 border-t border-gray-200 dark:border-gray-800 " +
-                        (props.isError ? "mt-20" : "py-4")
+                        "flex flex-col justify-center px-6 py-4 border-gray-200 dark:border-gray-800 " +
+                        (props.isError ? "mt-20 bg-gray-100 dark:bg-gray-800 rounded-xl" : "border-t")
                     }
                 >
                     <p
@@ -96,7 +96,9 @@ function FeedbackComponent(props: {
                     <div
                         className={
                             "flex flex-col px-6 py-4 border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 " +
-                            (props.isError ? "w-96 mt-6 bg-gray-100 dark:bg-gray-800 rounded-xl" : "border-t border-b")
+                            (props.isError
+                                ? "w-96 mt-6 bg-gray-100 dark:bg-gray-800 rounded-xl"
+                                : "-mx-6 border-t border-b")
                         }
                     >
                         <div className="relative">
@@ -121,22 +123,22 @@ function FeedbackComponent(props: {
                                 .
                             </p>
                         </div>
-                    </div>
-                    <div className={"flex justify-end mt-6 " + (props.isError ? "mb-6" : "")}>
-                        <button className="secondary" onClick={onClose}>
-                            Cancel
-                        </button>
-                        <button className="ml-2" onClick={onSubmit}>
-                            Send Feedback
-                        </button>
+                        <div className="flex justify-end mt-6">
+                            <button className="secondary" onClick={onClose}>
+                                Cancel
+                            </button>
+                            <button className="ml-2" onClick={onSubmit}>
+                                Send Feedback
+                            </button>
+                        </div>
                     </div>
                 </>
             )}
             {isFeedbackSubmitted && (
                 <div
                     className={
                         "flex flex-col px-6 py-4 border-gray-200 dark:border-gray-800 " +
-                        (props.isError ? "mt-20" : "mt-6")
+                        (props.isError ? "mt-20 bg-gray-100 dark:bg-gray-800 rounded-xl" : "mt-6")
                     }
                 >
                     <p className={"text-center text-base " + (props.isError ? "text-gray-400" : "text-gray-500")}>