Bring Crayons to file upload

[Link2Twenty]

Describe the request I noticed the button in the file uploaded is still the standard HTML button, it would be nice to crayonify this.

To Reproduce

1. go to settings
2. scroll down to user
3. see upload option

Expected behaviour It would be nice to have a blue forem-esc button.

Screenshots Current

New

side note you can bring accessibility in line too

Additional context I've included a jsfiddle mock up. Styles don't have to go this exact route but I thought I'd get the ball rolling.

[github-actions[bot]]

Thanks for the issue, we will take it into consideration! Our team of engineers is busy working on many types of features, please give us time to get back to you.

Feature requests that require more discussion may be closed. Read more about our feature request process on forem.dev.

To our amazing contributors: issues labeled bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem-team. The OSS Community Manager or the engineers on OSS rotation will follow up.

For full info on how to contribute, please check out our contributors guide.

[aitchiss]

Pinging @anujbhavsar96 in case he has any thoughts on this one 😄

Definitely think it would be useful to create a design-system level file upload input. I'm not sure if it should maybe use secondary button variant though, since form submit would likely employ the primary one 🤔

[anujbhavsar96]

You are right @aitchiss , secondary button would be more appropriate here ✨

[Link2Twenty]

So more like this?

input[type=file]::file-selector-button {
    --border-width: 0px;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --vertical-padding: var(--su-2);
    --horizontal-padding: var(--su-4);
    --font-size: var(--fs-base);
    --with-icon-padding: var(--su-3);
    --icon-margin: var(--su-2);
    position: relative;
    display: inline-block;
    padding: calc(var(--vertical-padding) - var(--border-width)) calc(var(--horizontal-padding) - var(--border-width));
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--font-size);
    line-height: var(--su-6);
    font-weight: var(--fw-medium);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-props);
    border: var(--border-width) solid;
    overflow-wrap: normal;
    --bg: var(--button-secondary-bg);
    --bg-hover: var(--button-secondary-bg-hover);
    --border: transparent;
    --border-hover: transparent;
    --color: var(--button-secondary-color);
    --color-hover: var(--button-secondary-color-hover);
    --shadow: 0 1px 3px var(--shadow-color);
    --shadow-hover: 0 2px 5px var(--shadow-color);
    --bg-inverted: var(--button-primary-inverted-bg);
    --bg-inverted-hover: var(--button-primary-inverted-bg-hover);
    --color-inverted: var(--button-primary-inverted-color);
    --color-inverted-hover: var(--button-primary-inverted-color-hover);
    background-color: var(--bg);
    border-color: var(--border);
    box-shadow: var(--shadow);
    color: var(--color);
    margin-right: var(--fs-s);
}

[anujbhavsar96]

Yes. This works ✨ @Link2Twenty