Merge pull request #137 from ModusCreateOrg/ADE-203

[ADE-203] UI fixes

Author: GuidoBR

.husky/pre-commit

@@ -5,14 +5,20 @@ sh ./lizard.sh
 
 # Only run frontend lint if the directory exists
 if [ -d "frontend" ]; then
-  cd frontend && npm run lint
+  cd frontend
+  npx lint-staged
+  npm run lint
+  cd ..
 fi
 
 cd $project_root
 
-# Add backend linting
+# Add backend linting and formatting
 if [ -d "backend" ]; then
-  cd backend && npm run lint
+  cd backend
+  npx lint-staged
+  npm run lint
+  cd ..
 fi
 
 exit 0

backend/package.json

@@ -26,6 +26,11 @@
     "cdk:destroy": "dotenv -- npx cdk destroy",
     "cdk:synth": "dotenv -- npx cdk synth"
   },
+  "lint-staged": {
+    "*.ts": [
+      "prettier --write"
+    ]
+  },
   "dependencies": {
     "@aws-sdk/client-bedrock": "^3.782.0",
     "@aws-sdk/client-bedrock-runtime": "^3.782.0",

frontend/package.json

@@ -28,8 +28,12 @@
   "lint-staged": {
     "*.{ts,tsx}": [
       "eslint --fix",
+      "prettier --write",
       "vitest related --run"
     ],
+    "*.{js,jsx,css,scss,md,json}": [
+      "prettier --write"
+    ],
     "*.scss": [
       "stylelint --fix"
     ]

frontend/src/common/components/Icon/SvgIcon.scss

@@ -8,13 +8,15 @@
     max-width: 100%;
     height: auto;
     /* CSS filter to display SVGs in #ABBCCD color */
-    filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1013%) hue-rotate(178deg) brightness(89%) contrast(84%);
+    filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1013%) hue-rotate(178deg)
+      brightness(89%) contrast(84%);
   }
 
   &--active {
     img {
       /* The active pink color from the design - using precise filter values for #FD7BF4 */
-      filter: brightness(0) saturate(100%) invert(65%) sepia(82%) saturate(5793%) hue-rotate(292deg) brightness(99%) contrast(98%);
+      filter: brightness(0) saturate(100%) invert(65%) sepia(82%) saturate(5793%) hue-rotate(292deg)
+        brightness(99%) contrast(98%);
     }
   }
 }

frontend/src/common/components/Icon/SvgIcon.tsx

@@ -73,11 +73,7 @@ const SvgIcon = ({
 
   return (
     <IonText
-      className={classNames(
-        'ls-svg-icon',
-        { 'ls-svg-icon--active': active },
-        className
-      )}
+      className={classNames('ls-svg-icon', { 'ls-svg-icon--active': active }, className)}
       data-testid={testid}
       {...props}
     >

frontend/src/common/components/Modal/ConfirmationModal.scss

@@ -75,7 +75,7 @@
 
   // Handle the pull indicator
   &::part(handle) {
-    background: #D9D9D9;
+    background: #d9d9d9;
     width: 36px;
     height: 4px;
     border-radius: 2px;

frontend/src/common/components/Modal/ConfirmationModal.tsx

@@ -30,10 +30,8 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   testid = 'confirmation-modal',
 }) => {
   // Replace placeholder with actual item name if provided
-  const formattedMessage = itemName 
-    ? message.replace('{itemName}', `"${itemName}"`)
-    : message;
-    
+  const formattedMessage = itemName ? message.replace('{itemName}', `"${itemName}"`) : message;
+
   return (
     <IonModal
       isOpen={isOpen}
@@ -43,11 +41,9 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
     >
       <div className="confirmation-modal__container">
         <h2 className="confirmation-modal__title">{title}</h2>
-        
-        <p className="confirmation-modal__message">
-          {formattedMessage}
-        </p>
-        
+
+        <p className="confirmation-modal__message">{formattedMessage}</p>
+
         <div className="confirmation-modal__actions">
           <IonButton
             expand="block"
@@ -58,7 +54,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
           >
             {cancelText}
           </IonButton>
-          
+
           <IonButton
             expand="block"
             fill="outline"
@@ -74,4 +70,4 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   );
 };
 
-export default ConfirmationModal;
+export default ConfirmationModal;

frontend/src/common/components/Router/TabNavigation.scss

@@ -10,7 +10,7 @@
     padding-bottom: 0;
 
     &-button {
-      --color: #ABBCCD;
+      --color: #abbccd;
       --color-selected: #fd7bf4;
 
       /* Ensure consistent alignment across platforms */
@@ -21,7 +21,7 @@
       &-icon {
         margin: 0;
         font-size: 1.25rem;
-        color: #ABBCCD;
+        color: #abbccd;
       }
 
       &.tab-selected {
@@ -31,7 +31,8 @@
           /* Apply to SvgIcon component */
           &.ls-svg-icon img {
             /* Pink color #FD7BF4 using precise filter values */
-            filter: brightness(0) saturate(100%) invert(65%) sepia(82%) saturate(5793%) hue-rotate(292deg) brightness(99%) contrast(98%);
+            filter: brightness(0) saturate(100%) invert(65%) sepia(82%) saturate(5793%)
+              hue-rotate(292deg) brightness(99%) contrast(98%);
           }
         }
       }

frontend/src/common/components/Router/__tests__/TabNavigation.test.tsx

@@ -231,19 +231,19 @@ vi.mock('../../Icon/SvgIcon', () => ({
 
 // Mock the SVG icons
 vi.mock('assets/icons/home.svg', () => ({
-  default: 'mocked-home-icon.svg'
+  default: 'mocked-home-icon.svg',
 }));
 vi.mock('assets/icons/reports.svg', () => ({
-  default: 'mocked-reports-icon.svg'
+  default: 'mocked-reports-icon.svg',
 }));
 vi.mock('assets/icons/upload.svg', () => ({
-  default: 'mocked-upload-icon.svg'
+  default: 'mocked-upload-icon.svg',
 }));
 vi.mock('assets/icons/chat.svg', () => ({
-  default: 'mocked-chat-icon.svg'
+  default: 'mocked-chat-icon.svg',
 }));
 vi.mock('assets/icons/profile.svg', () => ({
-  default: 'mocked-profile-icon.svg'
+  default: 'mocked-profile-icon.svg',
 }));
 
 // Mock the UploadModal component

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

@@ -190,7 +190,8 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
             <div className="upload-modal__file-details">
               <div className="upload-modal__filename">{file.name}</div>
               <div className="upload-modal__file-info">
-                {formatFileSize(file.size)} • {Math.ceil((1 - progress) * 10)} {t('upload.secondsLeft', { ns: 'common' })}
+                {formatFileSize(file.size)} • {Math.ceil((1 - progress) * 10)}{' '}
+                {t('upload.secondsLeft', { ns: 'common' })}
               </div>
               {/* Progress bar */}
               <IonProgressBar value={progress} className="upload-modal__progress" />