fix: review comments, move colors to vars

Author: r0b1n

Diff for: packages/pluggableWidgets/file-uploader-web/src/components/ActionsBar.tsx

@@ -73,6 +73,8 @@ function onDownloadClick(fileUrl: string | undefined): void {
     if (!fileUrl) {
         return;
     }
-    const url = `${fileUrl}&target=window`;
+    const url = new URL(fileUrl);
+    url.searchParams.append("target", "window");
+
     window.open(url, "mendix_file");
 }

Diff for: packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss

@@ -7,10 +7,13 @@ $file-brand-warning: #eca51c;
 $file-color-danger-lighter: #f9d9dc;
 $file-brand-danger: #e33f4e;
 $file-gray-light: #6c7180;
+$file-gray-darker: #3b4251;
 $file-brand-success: #3cb33d;
 
 $file-action-icon-hover: #2a39b8;
 $file-action-icon-active: #264ae5;
+$file-dropzone-color: #8f620b;
+$file-progress-background-color: #f0f1f2;
 
 $file-icon: url(../assets/file-icon.svg);
 $file-warning-icon: url(../assets/warning-icon.svg);
@@ -92,7 +95,7 @@ Place your custom CSS here
     .dropzone-message {
         font-size: 12px;
         line-height: 17px;
-        color: #8f620b;
+        color: var(--file-dropzone-color, $file-dropzone-color);
 
         padding-left: 18px;
         margin-bottom: 1em;
@@ -187,7 +190,7 @@ Place your custom CSS here
                     .entry-details-main-name {
                         flex: 1;
                         font-weight: 600;
-                        color: #3b4251;
+                        color: var(--gray-darker, $file-gray-darker);
                         text-overflow: ellipsis;
                         overflow: hidden;
                         white-space: nowrap;
@@ -222,7 +225,7 @@ Place your custom CSS here
                                 background-image: var(--file-remove-icon-hover, $file-remove-icon-hover);
                             }
                             .file-action-icon {
-                                color: $file-action-icon-hover;
+                                color: var(--file-action-icon-hover, $file-action-icon-hover);
                             }
                         }
 
@@ -231,7 +234,7 @@ Place your custom CSS here
                                 background-image: var(--file-remove-icon-active, $file-remove-icon-active);
                             }
                             .file-action-icon {
-                                color: $file-action-icon-active;
+                                color: var(--file-action-icon-active, $file-action-icon-active);
                             }
                         }
 
@@ -262,7 +265,7 @@ Place your custom CSS here
 
                     height: 4px;
                     border-radius: 2px;
-                    background-color: #f0f1f2;
+                    background-color: var(--file-progress-background-color, $file-progress-background-color);
                     margin: 5px 0;
                     width: 100%;
                     overflow: hidden;