twitter to x icon

[sarthak-kumar-shailendra]

Done

Changed the svg of twitter icon to x

QA

• Check out this feature branch
• Run the site using the command ./run serve or dotrun
• View the site locally in your web browser at: https://ubuntu-com-13247.demos.haus/
  • Be sure to test on mobile, tablet and desktop screen sizes
• [List additional steps to QA the new features or prove the bug has been resolved]

Issue / Card

Fixes #13246 , https://warthogs.atlassian.net/browse/WD-6905

Screenshots

Help

QA steps - Commit guidelines

[webteam-app]

Demo running at https://ubuntu-com-13247.demos.haus

[sarthak-kumar-shailendra]

@mtruj013 can you pls check this?

[codecov]

Codecov Report

Merging #13247 (8039555) into main (621f09d) will not change coverage.
Report is 23 commits behind head on main.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main   #13247   +/-   ##
=======================================
  Coverage   75.31%   75.31%           
=======================================
  Files         106      106           
  Lines        2840     2840           
  Branches      929      929           
=======================================
  Hits         2139     2139           
  Misses        679      679           
  Partials       22       22           

[mtruj013]

Thanks for your contribution @sarthak-kumar-shailendra! This needs a design review, I'll go ahead and review the code once that has been done as there may be some changes requested. cc: @lyubomir-popov

[lyubomir-popov]

Hi can you please define the height in rems not pixels?
On smaller screens, everything looks fine:

But on screens larger than 1680px, where we increase the value of 1rem, things get misaligned for two of the icons:

Bonus points for fixing the 4th icon as well :)

[sarthak-kumar-shailendra]

@lyubomir-popov Have converted pixels to rems and fixed the fourth icon as well. Can you check again?

[lyubomir-popov]

hi, thanks for doing this - but there's still something keeping it smaller @sarthak-kumar-shailendra:

maybe it is the 32px height on the svg itself? Can you please compare how the two in the middle (the bigger ones) are built?

[sarthak-kumar-shailendra]

This is how it's looking for screen having width 1698px in local. Are we checking the latest changes?

[lyubomir-popov]

I believe I'm looking at the latest demo - just opened it in a different browser with cleared cache, they still seem different heights:

(never mind the dark background, that's a feature of the brave browser)

[sarthak-kumar-shailendra]

is my last commit published in the latest demo?
I am asking because even I was getting 2 larger icons in local when height was mentioned in px (for larger screens) but after changing it to rem there's no spacing issue for both smaller and larger screens.
@lyubomir-popov @mtruj013

[mtruj013]

@lyubomir-popov @sarthak-kumar-shailendra looks like new pushes aren't triggering demo builds if they come from external contributors. I've manually triggered a build, it should be up to date now (same link)

[sarthak-kumar-shailendra]

@lyubomir-popov can you check now?

[lyubomir-popov]

Thanks @sarthak-kumar-shailendra the sizing is now correct, but I also noticed the X letter is transparent, and shows the background underneath. Can you please use the same colour as other icons in the set (light gray, solid). This is to ensure readability even when a user is using plugins/browser features that alter page backgrounds, as demonstrated in the brave browser screenshot above.

[sarthak-kumar-shailendra]

@lyubomir-popov did you mean like this?

[lyubomir-popov]

@sarthak-kumar-shailendra yes but please use the same colour as other icons in this set: #e5e5e5

[sarthak-kumar-shailendra]

@lyubomir-popov have pushed the changes, will need to trigger a new build manually

[mtruj013]

@sarthak-kumar-shailendra @lyubomir-popov demo should be up to date

[mtruj013]

Thanks @sarthak-kumar-shailendra, LGTM!