Fix pressed state in upload button

Author: GuidoBR

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

@@ -15,7 +15,9 @@
   &__error-message {
     border: 1px solid var(--ion-color-danger);
     border-radius: 0.5rem;
+
     --background: rgba(var(--ion-color-danger-rgb), 0.2);
+
     color: white;
     width: 100%;
 
@@ -28,7 +30,7 @@
     color: var(--ion-color-danger);
   }
 
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     --width: 28.125rem; // 450px
     --height: 65vh; // Use viewport height instead of fixed pixels
     --border-radius: 1rem; // Matching the image example
@@ -38,8 +40,10 @@
     display: flex;
     flex-direction: column;
     padding: 1.25rem;
+
     --background: var(--ion-color-primary);
     --color: white;
+
     border-radius: 1rem;
   }
 
@@ -58,7 +62,9 @@
 
     .upload-modal__close-button {
       --color: white;
+
       margin: 0;
+
       --padding-start: 0.5rem;
       --padding-end: 0.5rem;
     }
@@ -81,9 +87,9 @@
     justify-content: center;
     width: 100%;
     padding: 2rem 1rem;
-    border: 0.0625rem dashed rgba(255, 255, 255, 0.5);
+    border: 0.0625rem dashed rgb(255 255 255 / 50%);
     border-radius: 0.75rem;
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgb(255 255 255 / 10%);
     margin: 0.75rem 0;
 
     h2 {
@@ -97,7 +103,7 @@
     p {
       margin-top: 0;
       margin-bottom: 0.5rem;
-      color: rgba(255, 255, 255, 0.7);
+      color: rgb(255 255 255 / 70%);
       font-size: 0.875rem;
     }
   }
@@ -123,7 +129,7 @@
     p {
       margin-bottom: 0.25rem;
       font-size: 0.75rem;
-      color: rgba(255, 255, 255, 0.7);
+      color: rgb(255 255 255 / 70%);
     }
   }
 
@@ -136,28 +142,33 @@
     width: 100%;
     max-width: 12rem;
     font-weight: 500;
+
     --background: white;
     --color: var(--ion-color-primary);
     --border-radius: 0.5rem;
+
     height: 2.5rem;
+
+    // Override Ionic button internals with a more direct approach
+    --background-activated: inherit !important;
+
+    &.ion-activated::part(native) {
+      background-color: white !important;
+      box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
+      border: 1px solid #abbccd;
+    }
   }
 
   &__selected-file {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgb(255 255 255 / 10%);
     border-radius: 0.5rem;
     padding: 1rem;
     margin-bottom: 1rem;
   }
 
-  &__filename {
-    font-weight: 600;
-    margin-bottom: 0.5rem;
-    word-break: break-all;
-    color: white;
-  }
-
   &__start-upload {
     margin-top: 0.5rem;
+
     --background: white;
     --color: var(--ion-color-primary);
   }
@@ -171,14 +182,8 @@
     width: 100%;
   }
 
-  &__file-info {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 1.5rem;
-  }
-
   &__filesize {
-    color: rgba(255, 255, 255, 0.7);
+    color: rgb(255 255 255 / 70%);
     font-size: 0.875rem;
     margin-top: 0;
   }
@@ -190,7 +195,8 @@
       height: 0.5rem;
       border-radius: 0.25rem;
       overflow: hidden;
-      --background: rgba(255, 255, 255, 0.2);
+
+      --background: rgb(255 255 255 / 20%);
       --progress-background: white;
     }
   }
@@ -204,12 +210,13 @@
     ion-spinner {
       width: 1rem;
       height: 1rem;
+
       --color: white;
     }
 
     span {
       font-size: 0.875rem;
-      color: rgba(255, 255, 255, 0.7);
+      color: rgb(255 255 255 / 70%);
     }
   }
 
@@ -231,7 +238,7 @@
     }
 
     p {
-      color: rgba(255, 255, 255, 0.7);
+      color: rgb(255 255 255 / 70%);
       margin-bottom: 2rem;
     }
   }
@@ -265,6 +272,7 @@
     margin-top: 1rem;
     width: 100%;
     max-width: 15rem;
+
     --background: white;
     --color: var(--ion-color-primary);
   }
@@ -282,12 +290,14 @@
     margin-top: 1rem;
     width: 100%;
     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-color: rgb(255 255 255 / 60%);
+    --background: rgb(255 255 255 / 10%);
     --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;
@@ -314,7 +324,7 @@
     padding: 0.75rem;
     margin: 1.5rem 0;
     width: 100%;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
     max-width: 100%;
     box-sizing: border-box;
   }
@@ -365,8 +375,10 @@
     height: 0.25rem;
     border-radius: 0.125rem;
     margin-top: 0.25rem;
-    --background: rgba(0, 0, 0, 0.1);
+
+    --background: rgb(0 0 0 / 10%);
     --progress-background: var(--ion-color-primary);
+
     width: 100%;
   }
 
@@ -375,7 +387,7 @@
     display: flex;
     align-items: center;
     border-radius: 4px;
-    background: rgba(41, 69, 196, 0.5); // Darker blue background matching design
+    background: rgb(41 69 196 / 50%); // Darker blue background matching design
     padding: 12px 16px;
     margin: 5px 0;
     width: 100%;