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.

Sign up for GitHub

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

Jump to bottom

feat(buttons): add X social button #2644

Merged
merged 6 commits into from
Jul 26, 2024
Merged

feat(buttons): add X social button #2644

merged 6 commits into from
Jul 26, 2024

Conversation

julien-deramond
Copy link
Contributor

@julien-deramond julien-deramond commented Jul 24, 2024 •
edited
Loading

Related issues

Closes #2182

Description

This PR adds a new social button for the X social media platform.
We chose not to get rid of the Twitter one for now since some websites prefer to still use it.

Types of change

  • New feature (non-breaking change which adds functionality)

Live previews

@netlify Netlify
Copy link

netlify bot commented Jul 24, 2024 •
edited
Loading

✅ Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 105348f
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/66a1dc5e06e7a40008e49055
😎 Deploy Preview https://deploy-preview-2644--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@julien-deramond julien-deramond marked this pull request as ready for review July 24, 2024 04:53
louismaximepiton
louismaximepiton reviewed Jul 24, 2024
View reviewed changes
Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

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

The look is already fine, just quick questions

scss/_variables.scss Outdated Show resolved Hide resolved
scss/_variables.scss
@@ -1078,6 +1078,10 @@ $btn-social-networks: (
"tiktok": (
"color": #ff2c55,
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M7.024 30.054C4.584 28.212 3 25.235 3 21.876c0-5.59 4.39-10.123 9.805-10.123.45 0 .899.031 1.345.094v5.6a4.363 4.363 0 0 0-1.361-.218c-2.477 0-4.485 2.074-4.485 4.631 0 1.809 1.003 3.374 2.467 4.137l.31.146a4.348 4.348 0 0 0 1.708.348c2.471 0 4.476-2.065 4.484-4.615V0h5.335v.704c.02.211.046.42.082.63l.08.404a7.668 7.668 0 0 0 3.306 4.769A7.22 7.22 0 0 0 30 7.665V8.83l-.199-.047-.182-.047.381.094v4.312a12.4 12.4 0 0 1-7.392-2.443v11.177c0 5.591-4.39 10.124-9.804 10.124-2.02 0-3.898-.63-5.458-1.712l-.322-.234Z'/></svg>"
),
"x": (
"color": #1da1f2,
Copy link
Member

Choose a reason for hiding this comment

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

It's the right color regarding the UI Kit, but are we sure that this color is still good from the X pov ?

Copy link
Contributor Author

@julien-deramond julien-deramond Jul 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I don't think so, but without any further information, I've used the color defined in our design guidelines. Should be black or grayish IMO.

@louismaximepiton
Copy link
Member

How do the designers make the logo for this kind of component? It seems lighter than the logo from their documentation from a size point of view but isn't it altered then? The question is up to you.

@CyriaqueBillard
Copy link
Member

@julien-deramond @louismaximepiton As for the hover state of the X social button, we should be using the same blue as the blue used for the hover state of the X button on browser. If you are able to pick it up, I will change it in the UI kit, so we'll be aligned.

@Franco-Riccitelli
Copy link
Member

Franco-Riccitelli commented Jul 24, 2024 •
edited
Loading

I have updated and published the X logo used in the social button - in the Figma Web UI kit. The previous version was very thin and looked different to the standard version that appears on X in the mobile app and the web.

@Franco-Riccitelli
Copy link
Member

The previews look good to me for the Social buttons; however, if it is possible to update the X logo to the version I have added to the Figma Web UI kit, that would be great.
As already mentioned, the Figma Web UI kit can be updated with the Blue hover state colour used in the preview #1da1f2,
so no need to change this on the Dev side.

@julien-deramond
Copy link
Contributor Author

julien-deramond commented Jul 25, 2024 •
edited
Loading

Thanks for your feedback.

Before Now
Screenshot 2024-07-25 at 07 02 28 Screenshot 2024-07-25 at 07 02 33
  • @CyriaqueBillard @Franco-Riccitelli, based on your 2 comments, I haven't changed the blue hover color and I let you update it whenever it's possible with the value used here in the code. As spotted by Franco, this is #1da1f2.
  • @louismaximepiton, the logo SVG has been transformed via svgo

@Franco-Riccitelli
Copy link
Member

Update looks good to me.

louismaximepiton
louismaximepiton approved these changes Jul 25, 2024
View reviewed changes
Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

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

:shipit:

@julien-deramond julien-deramond merged commit e667c29 into main Jul 26, 2024
14 checks passed
@julien-deramond julien-deramond deleted the main-jd-add-x-social-button branch July 26, 2024 05:52
This was referenced Jul 26, 2024
Closed
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@louismaximepiton louismaximepiton louismaximepiton approved these changes

Assignees
No one assigned
Labels
feature
Projects
🟣 [Orange-Boosted-Bootstrap] PRs Board
Archived in project
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Drop 'Twitter' and introduce 'X'?
4 participants
@julien-deramond @louismaximepiton @CyriaqueBillard @Franco-Riccitelli