search

michelada / design_system

Design System running Tailwind underneath, by michelada.io for everyone.
https://michelada.github.io/design_system/site/
Apache License 2.0
1 stars 0 forks source link

Navbar component #70

Open sandrely2611-zz opened 2 years ago

sandrely2611-zz commented 2 years ago

Description

Based on the Ctrl project needs, we detect some inconsistencies in the Navbar component. Our goal with this ticket is to fix how this component looks, remove the unnecessary code from Ctrl. And be able to consume the component from the DS without adding extra css or js to make it work in Ctrl.

Narrative

Design System: https://www.figma.com/file/c1SBfQGUU3twlW3YjeL8Sx/michelada_DS?node-id=0%3A1 Control project: https://www.figma.com/file/TmTjBO1Ua93cm6B978ErDw/ControlMocks_21-0ct-2020?node-id=3456%3A0

Definition of done

  1. Code review approved
  2. Remove CSS/JS/HTML code related to the component from Ctrl
  3. Deployed to production
  4. Deployed to NPM library

Acceptance criteria

  1. Correct style issues (review comments section)
  2. Support mobile, tablet and desktop resolutions.
sandrely2611-zz commented 2 years ago

Issue #1

In mobile, when I open the dropdown menu, and want to click in the "My profile", "Admin" and "Sign Out" I have to click directly in the links to go to "My profile", "Admin" and "Sign Out", but if I clicked in other part of the div don't redirect me to the place "My profile", "Admin" and "Sign Out", the behavior expected is that I should be clicked in the entire div, and not only in the link, in order to redirect me to the place.

Current result:

If I clicked out of the link but in the same row or div, don't redirect me to the place that I selected.

Expected result:

I should be clicked in the entire div, and not only in the link, in order to redirect me to the place selected.

image

sandrely2611-zz commented 2 years ago

Issue #2 en Control

The profile picture in the navbar appears distorted (blurry, squished or stretched) and in some cases, the left and right sides of the photo get cropped making it look like an oval shape instead of a round shape (for images significantly longer than they are wide)

Current result:

The profile picture in the navbar is displayed distorted and in some cases it has an oval shape instead of a round shape.

Expected result:

The profile picture in the navbar is displayed clearly and it always has a round shape (it should look like a miniature version of the profile picture in the personal profile)

image

image

image

sandrely2611-zz commented 2 years ago

Issues #3 en Control

Navigation bar - font color on navigation links doesn't match the design - desktop

This ticket covers the improvement of the navigation bar component in the design system project. Some colors are showing different than the main color palette.

Summary

The font color on the links for La Barra, Team directory, PTOs, My Profile and Sign out doesn't match with the one in the Mockups

Description

Steps to reproduce

  1. Go to the url https://ctrl-staging.herokuapp.com/
  2. Login in CTRL as a collaborator
  3. Inspect the page to open dev tools
  4. Inspect any of the navigation links or the dropdown menu
  5. Check the font color
  6. The font colors for the links and the mockups don't match

Evidence

Expected behaviour: Mockup navbar fonts (Desktop large) image

Actual behaviour: Navbar fonts on staging (Desktop large) image image image

sandrely2611-zz commented 2 years ago

Issues #4

Summary The dropdown menu on the profile picture flashes when navigating to other sections under certain conditions

Description

The dropdown menu that appears when clicking the profile picture should only appear when the user clicks on the profile picture, but it has an unexpected behaviour:

When the user opens the dropdown menu and selects an option (excluding Sign out) and then clicks on the ctrl logo or the navigation links (usually in La Barra), the dropdown menu flashes for a quick second.

Steps to reproduce

Go to the url https://ctrl-staging.herokuapp.com/[](https://github.com/michelada/design_system/issues/70#expected-behaviour)[](https://github.com/michelada/design_system/issues/70#actual-behaviour)[](https://github.com/michelada/design_system/issues/70#environment)[](https://github.com/michelada/design_system/issues/70#evidence)

Login in CTRL as a collaborator Click on the profile picture to open the dropdown menu

For mobile: 4.1 Select an option from the dropdown menu (La Barra, Team directory, PTOs, My Profile or the X) 4.2 Click on ctrl logo

For tablet and desktop: 4.1 Select an option from the dropdown menu (My Profile or the X) 4.2 Click on ctrl logo and the navigation links (La Barra, Team directory, PTOs)

The dropdown menu flashes on some views (usually in La Barra)

Expected behaviour The dropdown menu only appears when the user clicks on the profile picture.

Actual behaviour The dropdown menu appears when the user clicks on the profile picture but it also flashes when some views are loading under certain conditions on all resolutions.

Environment Staging

Evidence

https://user-images.githubusercontent.com/9082790/154134928-513a1eea-f2cc-41af-833b-0b7da8a68f51.mov

https://user-images.githubusercontent.com/9082790/154134953-64c720b6-bdb7-4efd-83e9-c7bd9e37d210.mp4

https://user-images.githubusercontent.com/9082790/154135085-be25d717-bc4b-402a-b6ef-22ad7edd0681.mp4