feat: Update cancel button styling to match upload button dimensions and improve layout

Author: adamrefaey

frontend/src/common/components/Upload/UploadModal.scss

@@ -279,19 +279,30 @@
   &__cancel-btn {
     margin-top: 1rem;
     width: 100%;
-    max-width: 15rem;
+    max-width: 12rem; // Match the upload button's max-width
     --color: white;
     --border-color: rgba(255, 255, 255, 0.6);
     --background: rgba(255, 255, 255, 0.1);
     --border-radius: 0.5rem;
     --border-width: 1px;
     --border-style: solid;
+    height: 2.5rem; // Exactly match the upload button's height (40px)
+    font-weight: 500;
+    text-transform: none;
 
     ion-icon {
       margin-right: 0.5rem;
       font-size: 1.25rem;
     }
   }
+
+  &__bottom-actions {
+    margin-top: 20px;
+    width: 100%;
+    display: flex;
+    justify-content: center; // Center the button
+    padding: 0 1rem;
+  }
 
   &__file-item {
     display: flex;

frontend/src/common/components/Upload/UploadModal.tsx

@@ -8,7 +8,7 @@ import {
   IonLabel,
   IonItem
 } from '@ionic/react';
-import { closeOutline, cloudUploadOutline, documentOutline, checkmarkOutline, closeCircleOutline } from 'ionicons/icons';
+import { closeOutline, cloudUploadOutline, documentOutline, checkmarkOutline } from 'ionicons/icons';
 import { useTranslation } from 'react-i18next';
 import { UploadStatus, useFileUpload } from '../../hooks/useFileUpload';
 import { MedicalReport } from '../../models/medicalReport';
@@ -157,15 +157,16 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
             </div>
           </div>
         )}
-        
-        {/* Cancel button */}
+      </div>
+      
+      {/* Cancel button - updated to match the size of the upload button */}
+      <div className="upload-modal__bottom-actions">
         <IonButton 
           expand="block" 
           fill="outline"
           className="upload-modal__cancel-btn"
           onClick={handleCancel}
         >
-          <IonIcon icon={closeCircleOutline} slot="start" />
           {t('common.cancel')}
         </IonButton>
       </div>