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

ENH - Add new sidebar design #331

Merged
merged 4 commits into from
Nov 10, 2023
Merged

ENH - Add new sidebar design #331

merged 4 commits into from
Nov 10, 2023

Conversation

steff456
Copy link
Contributor

@steff456 steff456 commented Nov 5, 2023 •
edited
Loading

Fixes #283.

Description

This pull request:

  • Implements the new sidebar design

After (Logout)

image

After (Login)

image

Pull request checklist

  • Did you test this change locally?
  • Did you update the documentation (if required)?
  • Did you add/update relevant tests for this change (if required)?

Additional information

There's some differences between the given design and the changes of this PR because the implementation may require a complete re-write of whole components, @smeragoel please let me know if there's another way to handle each situation or if the change is required as the figma design you shared with me.

  1. The horizontal gray lines don't have the same width

Current state
image

This happens because all the margins for the sidebar are defined in the most outer box,

image

So the line in of the bottom will always look shorter than the top line

  1. The active environment green background only highlights the text, without the circle icon

Current state
image

Design
image

  1. Do we want to use a personalized icon, or the mui icon that accompanies the Shared Environment title?

Current state
image

Design
image

@steff456 steff456 added type: enhancement 💅🏼 New feature or request area: UI design 🎨 Items related to the user interface needs: review 👀 area: user experience 👩🏻‍💻 Items impacting the end-user experience labels Nov 5, 2023
@steff456 steff456 added this to the 🚀 JATIC - Q1 milestone Nov 5, 2023
@steff456 steff456 requested a review from smeragoel November 5, 2023 04:39
@steff456 steff456 self-assigned this Nov 5, 2023
@smeragoel
Copy link

  1. For the width of the horizontal lines, I'd prefer if they are the same width because it looks a little wonky if they are not. If it requires significant changes to the code, we can also remove the bottom line to resolve this quickly.
  2. That's completely fine, in fact, this is what I originally intended to do!
  3. How hard will it be to use a personalised icon, not just here but in other places as well? I am aiming to use the iconset we have defined in the design system. That will also require changes across other places we have used icons eventually.

@steff456
Copy link
Contributor Author

steff456 commented Nov 6, 2023

Great! Then I will do the changes accordingly,

  1. I'll remove the bottom line
  2. I'll leave it as it is
  3. We can use personalized icons everywhere, but I will need you to send me the svg to create custom ones. Can you please send me this one?

@smeragoel
Copy link

Here's the SVG:
Group_light

You can also export it directly from Figma if you need it in a different size: Group Icon
(Here's some documentation on the export tool in Figma, in case you need it!)

@steff456
Copy link
Contributor Author

steff456 commented Nov 9, 2023

@smeragoel this PR is ready for another review! I fixed the items discussed in our conversation and also fixed the typography that was off in the read the docs! link. Please let me know if there's anything else that needs to be addressed or if this PR is ready to merge!

@steff456 steff456 merged commit 26e9a12 into conda-incubator:design-system-implementation Nov 10, 2023
1 check passed
@steff456 steff456 deleted the sidebar branch November 10, 2023 15:01
@steff456 steff456 mentioned this pull request Nov 13, 2023
Closed
trallard pushed a commit that referenced this pull request Nov 27, 2023
@steff456 @costrouc
ENH - Design system implementation (#310)
65a7294 
* Add new colors and define green theme

* Fix primary button style

* Add new colors for roles and fix the shade used previously

* update main shade of color

* Fix icon buttons behavior and use across the UI

* Change name to condaStoreTheme, define more colors and refactor baseTheme

* Add rule for component in the baseTheme

* ENH -  Redefine new themes and colours (#292)

* Add new colors and define green theme

* Add new colors for roles and fix the shade used previously

* Update main shade of color

* Change name to condaStoreTheme, define more colors and refactor baseTheme

* Set input focus in purple

* Adjust all input components to design system using green

* Add new style for disabled buttons and hover state

* Implement new toggle switch design

* Fix border colors across the UI

* add missing semicolon to fix linting issues

* Add new design to links (#320)

* ENH - Add new sidebar design (#331)

* Add new style to left sidebar

* define react_app_version env variable

* Add custom icons, fix typography in link and do style changes from review

* Add trailing whitespace to fix lint error

---------

Co-authored-by: Christopher Ostrouchov <[email protected]>
@smeragoel smeragoel mentioned this pull request Nov 28, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@smeragoel smeragoel smeragoel approved these changes

Assignees

@steff456 steff456

Labels
area: UI design 🎨 Items related to the user interface area: user experience 👩🏻‍💻 Items impacting the end-user experience needs: review 👀 type: enhancement 💅🏼 New feature or request
Projects
conda-store 🐍
Status: Done 💪🏾
Milestone
🚀 JATIC - Q1
Development

Successfully merging this pull request may close these issues.
3 participants
@steff456 @smeragoel @kcpevey