search

joshwcomeau / guppy

🐠A friendly application manager and task runner for React.js
ISC License
3.27k stars 154 forks source link

Add an icon after project title for project type #319

Closed AWolf81 closed 4 years ago

AWolf81 commented 5 years ago

I'd like to have an icon after project title in project page to indicate the project type. So it's easier to see the type of the project with-out scrolling down to the dependencies. This is useful for debugging Guppy and also for the user.

Describe the solution you'd like Add the project type icon after the project title in gray (same gray as the settings gear) or purple of the heading - check what looks better. The project type can be accessed inside ProjectPage with {project.type}. Just a mapping to the icons is needed. Code for the icons can be copied from CreateNewProjectWizard\MainPane.js.

christiansessler commented 5 years ago

Hey @AWolf81,

i was looking into this issue and i got it working with the same icons used in the projectwizard, u want the icons to be grey or purple, but i only found the colored images in the project, do i need to add new icons?

Currently it looks like this.

Chris grafik

j-f1 commented 5 years ago

You could try adding filter: grayscale() to the CSS for that icon.

AWolf81 commented 5 years ago

hi @christiansessler, thanks for tackling this. To your styling: I think the icon can be a bit larger and vertically centered so it lines up nicely with the title.

For the coloring: You could also inline the svgs and modify the style of the svg. Here is an example. Filtering would probably also work but I think inlining svg is more flexible. Just check that the icons are correctly rendered in CreateNewProjectWizard. I also think that it's good to refactor these icons to a new component location like in the Codesandbox so it can be re-used at both positions easily.