Commit Graph
8 Commits
Author SHA1 Message Date
Bruno Quaresma 3217cb85f6 feat: improve usage visibility (#16134)
- Refactor the DAUs chart for clarity by improving the description and updating its title to better reflect the data.  
- Add a license consumption chart to the licenses page.
2025-01-17 12:37:54 -03:00
Bruno Quaresma cb6facb53a refactor: use the new button component on forms and dialogs (#16050)
This is a significant PR that will impact many parts of the UI, so I’d
like to ask you, @jaaydenh, for a very thorough review of the Storybook
stories on Chromatic. I know it’s a bit of a hassle with around 180
stories affected, but it’s all for a good cause 💪

Main changes:
- Update the `Button` component to match the [new buttons
design](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=3-1756&p=f&m=dev).
- Update forms and dialogs to use the new `Button` component.

Related to https://github.com/coder/coder/issues/14978
2025-01-07 14:28:58 -03:00
Bruno QuaresmaandJaayden Halko cee365670d chore: add spinner component (#16014)
This component is necessary to move forward with the "[Define a global
button style](https://github.com/coder/coder/issues/14978)" issue, as it
requires buttons to support loading states with spinners. The `Spinner`
component is heavily inspired by the [Radix UI Spinner
component](https://www.radix-ui.com/themes/docs/components/spinner) and
was developed with the help of [v0](https://v0.dev/).

**Preview**
![Screen Recording 2025-01-02 at 14 37
18](https://github.com/user-attachments/assets/838f6bb2-2125-4a55-9bee-3b3a52852d40)

---------

Co-authored-by: Jaayden Halko <jaayden.halko@gmail.com>
2025-01-02 16:10:38 -03:00
Bruno Quaresma 49fadb801d refactor: update the navbar to match the new designs (#15964)
Update the navbar to match the designs in [this Figma
file](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=4a6pX5tQU5Ti2Oyi-0).
Related to https://github.com/coder/coder/issues/15617.

**Desktop preview:**


https://github.com/user-attachments/assets/01ce7cd2-baaa-49c4-9e9a-bf6e675151da

**Mobile preview:**


https://github.com/user-attachments/assets/155e2521-7293-4368-a5f5-425179d76326

For a closer look, you can check Chromatic snapshots or test the changes
locally.

**A few considerations:**
- I made some adjustments to improve the design, such as removing the
chevron from the profile menu and reducing the size of the chevrons in
the dropdowns. I’ve documented these changes in the [Figma
file](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=4a6pX5tQU5Ti2Oyi-0)
so @chrifro can review them after returning from vacation.
- Some of the design questions involve how the proxy and account
dropdown menus should look on desktop and mobile. For desktop, I decided
to retain the current styles, and for mobile, I tried to infer how they
should look based on the existing design.
- There is some duplicated logic between the regular/desktop navbar
menus and the mobile menus, which could lead to inconsistencies and make
maintenance harder in the future. I plan to address this in a follow-up
PR to keep this review manageable.
- I’ve added tests to minimize inconsistencies and potential bugs while
working on this refactor.
2024-12-30 14:25:00 -03:00
Jaayden Halko 6c9ccca687 feat: implement CRUD UI for IDP organization sync settings (#15503)
resolves coder/internal#205

The goal is to create a new page located in deployment settings to allow
users to create and update organization IDP sync settings.

- [x] Use shadcn button for export policy button
- [x] Disable save button if form is not dirty
- [x] Disable "Add IdP organization" button if idp org name or coder
orgs are empty
- [x] Add footnote label below organization sync field input
- [x] Add button to Delete rows in mapping table
- [x] Create Multi-select combox box component to select coder org to
map to idp org
- [x] Storybook tests
- [x] Tooltip for assign default org switch
- [x] Display success/error toast on form submission

<img width="1181" alt="Screenshot 2024-12-02 at 20 33 07"
src="https://github.com/user-attachments/assets/86877d3b-82ec-4ed2-b239-bf8497352a9e">
2024-12-04 14:23:18 -05:00
Bruno QuaresmaandJaayden Halko 308df177c9 chore: use hsl for tailwind and shadcn theming (#15453)
Co-authored-by: Jaayden Halko <jaayden.halko@gmail.com>
2024-11-08 14:33:50 -03:00
de2f42eedd fix: enable Tailwind with storybook (#15418)
This adds index.css to the storybook preview file and references to
#storybook-root element in the tailwind config

---------

Co-authored-by: Spike Curtis <spike@coder.com>
Co-authored-by: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
2024-11-07 20:56:42 -05:00
Jaayden Halko d4131badb6 feat: implement Premium features page using shadcn/ui and Tailwind (#15094)
resolves coder/internal#176

This is a proof of concept to showcase the use of Tailwind + shadcn/ui.
The goal here was to implement a lower complexity page to reduce the
initial risk and highlight the specific global changes needed.

Changes:

- Create a separate version of Premium features content for Enterprise
and OSS users
- Use shadcn/ui button component and setup styling and variants to match
the buttons defined in the Coder Kit Figma.
https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=3-1756
- Setup theming using CSS variables and custom Tailwind colors by using
the dark class name on the root element.
- CSS variable design token naming and colors defined in Figma.
https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=1-2


<img width="1199" alt="Screenshot 2024-11-01 at 12 46 03 PM"
src="https://github.com/user-attachments/assets/a251450f-8447-405a-9cc4-9f6aad9cd19f">
<img width="1197" alt="Screenshot 2024-11-01 at 12 45 36 PM"
src="https://github.com/user-attachments/assets/e78a5a40-cbdf-4d85-9ffe-873505800fcc">
2024-11-06 12:53:00 -05:00