cart & checkout: UI enhacnements

src/pages/cart/components/specialRequest/SpecialRequestCard.module.css

@@ -1,5 +1,12 @@
 .inputField {
-  height: 50px;
+  border-radius: 8px !important;
+  justify-content: space-between;
+  padding-top: 12px;
+  padding-right: 16px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+  opacity: 1;
+  border-width: 1px;
 }
 
 .editButton {

src/pages/cart/components/specialRequest/SpecialRequestCard.tsx

@@ -9,13 +9,13 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
 import styles from "./SpecialRequestCard.module.css";
+import TextArea from "antd/es/input/TextArea";
 
 export default function SpecialRequestCard() {
   const { t } = useTranslation();
   const { isDesktop } = useBreakPoint();
   const dispatch = useAppDispatch();
   const { specialRequest } = useAppSelector(selectCart);
-  const { isRTL } = useAppSelector((state) => state.locale);
   const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
 
   const handleSpecialRequestSave = (value: string) => {
@@ -32,12 +32,8 @@ export default function SpecialRequestCard() {
         title={t("cart.specialRequest")}
         dividerStyle={{ margin: "5px 0 0 0" }}
       >
-        <Form.Item
-          label={t("cart.specialRequest")}
-          name="specialRequest"
-          style={{ position: "relative", top: -5 }}
-        >
-          <Input
+        <Form.Item name="specialRequest" style={{ marginTop: 12 }}>
+          {/* <Input
             placeholder={t("cart.specialRequest")}
             size="large"
             autoFocus={false}
@@ -51,6 +47,13 @@ export default function SpecialRequestCard() {
                 <u>{t("cart.editNote")}</u> {isRTL ? <LeftOutlined /> : <RightOutlined />}
               </div>
             }
+          /> */}
+          <TextArea
+            placeholder={t("cart.leaveANoteHere")}
+            rows={2}
+            autoFocus={false}
+            className={styles.inputField}
+            onChange={(e) => handleSpecialRequestSave(e.target.value)}
           />
         </Form.Item>
       </ProInputCard>