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(Icons): add ScreenIcon #2875

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

feat(Icons): add ScreenIcon #2875

wants to merge 3 commits into from
+1 −0

Conversation

JahazielGuzman
Copy link
Contributor

@JahazielGuzman JahazielGuzman commented May 9, 2024 •
edited by jira bot
Loading

Overview

Add screen icon to be used in community events page.

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: LEGO-3839
  • I have run this code to verify it works
  • This PR includes unit tests for the code change
  • This PR includes testing instructions tests for the code change
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

PR Links and Envs

Repository PR Link PR Env
Monolith Monolith PR Monolith Env
Portal Portal Link Portal Env
Another Repo Another Link Another Env

@JahazielGuzman JahazielGuzman requested a review from a team as a code owner May 9, 2024 22:40
@JahazielGuzman JahazielGuzman changed the title Create computer icon feat(Icons): add computerIcon May 9, 2024
@JahazielGuzman JahazielGuzman marked this pull request as draft May 9, 2024 22:41
LinKCoding
LinKCoding reviewed May 10, 2024
View reviewed changes
Copy link
Contributor

@LinKCoding LinKCoding left a comment

Choose a reason for hiding this comment

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

Hi @JahazielGuzman!
this icon doesn't actually show up well on the white/dark backgrounds --
white:
image
dark:
image

Do you have a design spec that requires this icon in particular?

Stacey mentioned that there's another icon being submitted that looks like:
image

Happy to talk more about this, thanks!

@JahazielGuzman
Copy link
Contributor Author

JahazielGuzman commented May 10, 2024 •
edited
Loading

Hi @JahazielGuzman! this icon doesn't actually show up well on the white/dark backgrounds -- white: image dark: image

Do you have a design spec that requires this icon in particular?

Stacey mentioned that there's another icon being submitted that looks like: image

Happy to talk more about this, thanks!

Hi @LinKCoding! This is the design I was working off of https://www.figma.com/file/7Oe7eNRzW9J0KbShrfbiPy/Events?type=design&node-id=1599-59038&mode=dev

this is what I as afraid of, I've seen this color/fill issue before. And I didn't know about the ScreenIcon, there doesn't seem to be a PR that I could find which would add the ScreenIcon, might you have a reference to the code where that is being added? And how long would it take for this to be merged in?

@JahazielGuzman JahazielGuzman changed the title feat(Icons): add computerIcon feat(Icons): add ScreenIcon May 13, 2024
@jakemhiller
Copy link
Member

jakemhiller commented May 13, 2024 •
edited
Loading

@JahazielGuzman here's a working SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17"><path stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round" d="M1.167 2.417h13.666s.667 0 .667.666v8.667s0 .667-.667.667H1.167s-.667 0-.667-.667V3.083s0-.666.667-.666ZM5 14.917h6M8 12.417v2.5"/></svg>

fwiw

  • i ran it through https://jakearchibald.github.io/svgomg/
  • removed the opacity
  • set the fill to none explicitly since this is a stroke icon
  • set the icon stroke color to #000000 so it would be replaced with currentColor by the build scripts

@codecademydev
Copy link
Collaborator

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

@codecademydev
Copy link
Collaborator

🚀 Styleguide deploy preview ready!

https://664262b6496fcb1287ba4654--gamut-preview.netlify.app

Deploy Logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@LinKCoding LinKCoding LinKCoding left review comments

@jakemhiller jakemhiller jakemhiller approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@JahazielGuzman @jakemhiller @codecademydev @LinKCoding