fix: app file input styling to better ux (#4794)

No opened issue, it was reported in discord:
https://discord.com/channels/930156205542883409/1276973525546172478/1277006937396875497

## PR Type
<!-- Please uncomment one ore more that apply to this PR -->

- Bugfix
<!-- - Feature -->
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->


## Describe the current behavior?
<!-- Please describe the current behavior that is being modified or link
to a relevant issue. -->

Existing app-file-input has no style which creates confusion with text
elements, some elements are using class to specify variants instead of
using the actual variant attribute.


![image](https://github.com/user-attachments/assets/478394c6-217b-4d60-8104-c59cc253b8f1)


## Describe the new behavior?

Changes:
- Updated app-file-input to use `sl-button` and variant **secondary**
which seems a good fit for this situation.
- Removed a cursor pointer styling that was misleading because of
element's width
- Updated primary button to fit the primary theme color.


![image](https://github.com/user-attachments/assets/0428fa70-2fc1-4598-8e1e-e6c7c0d501aa)


## PR Checklist

- [X] Test: run `npm run test` and ensure that all tests pass
- [X] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [X] Ensure that your contribution follows [standard accessibility
guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design).
Use tools like https://webhint.io/ to validate your changes.


## Additional Information

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Justin Willis <[email protected]>
Co-authored-by: Beth Pan <[email protected]>
Co-authored-by: Gleb Khmyznikov <[email protected]>
Co-authored-by: Jaylyn Barbee <[email protected]>
Co-authored-by: Jaylyn Barbee <[email protected]>
Co-authored-by: Nikola Metulev <[email protected]>
Co-authored-by: Mara'ah Lee <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Adolf Daniel <[email protected]>
Co-authored-by: Justin Willis (HE / HIM) <[email protected]>
Co-authored-by: Zach Teutsch <[email protected]>
Co-authored-by: vipul-bhojwani <[email protected]>
Co-authored-by: Amrutha Srinivasan <[email protected]>
Co-authored-by: Federico Navarrete <[email protected]>
Co-authored-by: Toby Liu <[email protected]>
Co-authored-by: microsoft-github-policy-service[bot] <77245923+microsoft-github-policy-service[bot]@users.noreply.github.com>
Co-authored-by: Amrutha Srinivasan <[email protected]>
Co-authored-by: Jonas Thelemann <[email protected]>
Co-authored-by: Siraj Chokshi <[email protected]>
Co-authored-by: Thomas Peißl <[email protected]>
Co-authored-by: Migush <[email protected]>
Co-authored-by: Abdullhakim Sami Alshanqity <[email protected]>
Co-authored-by: mecmep <[email protected]>
Co-authored-by: Joel Limberg <[email protected]>
Co-authored-by: Pratik-k <[email protected]>

apps/pwabuilder/src/script/components/app-file-input.ts

@@ -50,13 +50,12 @@ export class FileInput extends LitElement implements FileInputElement {
   render() {
     return html`
       <div>
-        <fast-button
-          class="file-button"
-          appearance="lightweight"
+        <sl-button
+          variant="secondary"
           @click=${this.clickModalInput}
         >
           ${this.buttonText}
-        </fast-button>
+        </sl-button>
         <input
           id="${ifDefined(this.inputId)}"
           class="file-input hidden"

apps/pwabuilder/src/script/pages/image-generator.ts

@@ -86,11 +86,6 @@ export class ImageGenerator extends LitElement {
           font-size: 10px;
         }
 
-
-        app-file-input:hover {
-          cursor: pointer;
-        }
-
         sl-button {
           height: 24px;
           padding: 8px 0;
@@ -109,6 +104,11 @@ export class ImageGenerator extends LitElement {
           margin-top: 8px;
         }
 
+        #submit sl-button::part(base) {
+          background-color: var(--primary-color);
+          border-color: var(--primary-color);
+        }
+
         .background {
           background-color: var(--primary-color);
           color: var(--font-color);
@@ -229,7 +229,7 @@ export class ImageGenerator extends LitElement {
                 </div>
               </section>
               <section id="submit" class="form-bottom">
-                <sl-button id="generateButton" class="primary" ?disabled=${!this.generateEnabled || this.generating}
+                <sl-button id="generateButton" variant="primary" ?disabled=${!this.generateEnabled || this.generating}
                   @click=${this.generateZip}
                   ?loading=${this.generating}>
                   ${localeStrings.button.generate}