traffic light icons on hover

[Deep-Codes]

You mostly know this, traffic lights show icons in hover state.

I tried implementing it looks like this

If you want this implemented let me know I would raise a PR on it.

[PuruVJ]

OMG!!!! Thank you!!! please do make a PR 🤩🤩

[Deep-Codes]

https://github.com/PuruVJ/macos-web/blob/969df8a3223f5c012143fcd2e7a12b0c06621058/src/components/Desktop/Window/TrafficLights.tsx#L21

I believe here thougth they seem to be in order the naming is not correct:

      <ButtonBase className={css.closeLight} onClick={closeApp} />
      <ButtonBase className={css.stretchLight} />
      <ButtonBase className={css.minimizeLight} />

closeLight -> Red Button
stretchLight -> Green Button
minimizeLight -> Yellow Button

Tho in styles they are styled correctly

and yes i am working on a PR on it ⚡️.

[PuruVJ]

Feel free to rename the classes

[PuruVJ]

I have no idea which of these do what except for the red one. Use your judgement 😁

[PuruVJ]

Hi. Sorry for the inconvenience. I just merged a PR which changes TrafficLights component a bit. Could you pls git pull it and fix the merge conflicts, if any

[Deep-Codes]

Alright let me see 👀

[Deep-Codes]

@PuruVJ there's a problem

PR merged: It's hiding icons

arent styles scoped?

[PuruVJ]

Yes it is hiding styles for me too

[PuruVJ]

They are scoped if you use CSS modules

[PuruVJ]

Huh, it is CSS modules, but it is still hiding. Strange

[PuruVJ]

Oh wait, this lone svg is causing issues. This will not be scoped

[PuruVJ]

No issues, I'll scope it. No big deal :)

[PuruVJ]

Fixed. Will be live soon

[Deep-Codes]

Yeah this would solve it:

.container {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  height: 100%;

  &:hover .trafficLight svg {
    visibility: visible;
  }
}

.trafficLight svg {
  visibility: hidden;
}

[PuruVJ]

Fixed in #66

[PuruVJ]

Hi, Can I ask you your Twitter handle?

[Deep-Codes]

Hi, Can I ask you your Twitter handle?

Yeah sure it's @DeepankarBhade