Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Wire up favicon form #2680

Merged
merged 3 commits into from
Jan 19, 2024
Merged

feat: Wire up favicon form #2680

merged 3 commits into from
Jan 19, 2024

Conversation

DafyddLlyr
Copy link
Contributor

@DafyddLlyr DafyddLlyr commented Jan 19, 2024

What does this PR do?

  • Wires up Team Settings > Design Setting > Favicon
  • Updates favicon in /preview and /unpublished routes if one is set in DB for team

To test

  • Standard "X" favicon still appears in Editor and for "unset" teams
  • If I upload a favicon for a team and save, it displays in /preview and /unpublished routes
  • File type restrictions work

image

image

Demo: https://2680.planx.pizza/barking-and-dagenham/backup-dec23-article4-barkinganddagenham-manual-constraints/preview?analytics=false

<InputRowItem width={50}>
<PublicFileUploadButton />
<InputRowItem width={formik.values.favicon ? 90 : 50}>
<ImgInput
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated this to use the wrapper ImgInput component which gives us a preview and a way to remove the image.

I'll open up a very small follow-on PR to make this change to the Logo form shortly to keep this visually and behaviorally consistent.

@@ -39,8 +60,16 @@ export const FaviconForm: React.FC = () => {
input={
<InputRow>
<InputRowLabel>Favicon:</InputRowLabel>
<InputRowItem width={50}>
<PublicFileUploadButton />
<InputRowItem width={formik.values.favicon ? 90 : 50}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resizing this on upload looks better to me than keeping it wide the whole time - very open to opinions here if this jump in not consistent / a bit weird @ianjon3s

@@ -139,7 +139,7 @@ const DesignSettings: React.FC = () => {
<ThemeAndLogoForm team={team} onSuccess={() => setOpen(true)} />
<ButtonForm team={team} onSuccess={() => setOpen(true)} />
<TextLinkForm team={team} onSuccess={() => setOpen(true)} />
<FaviconForm />
<FaviconForm team={team} onSuccess={() => setOpen(true)} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a little repetition with some of these props and form behaviours - I'll look at a small follow on PR to try and tidy this up 👌

Copy link

github-actions bot commented Jan 19, 2024

Removed vultr server and associated DNS entries

@DafyddLlyr DafyddLlyr requested a review from a team January 19, 2024 14:39
@DafyddLlyr DafyddLlyr marked this pull request as ready for review January 19, 2024 14:39
Copy link
Contributor

@Mike-Heneghan Mike-Heneghan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working as expected for me, looks great 👍

@DafyddLlyr DafyddLlyr merged commit f791959 into main Jan 19, 2024
12 checks passed
@DafyddLlyr DafyddLlyr deleted the dp/favicon-form branch January 19, 2024 15:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants