Update modal styles and add loading UI for diagram creation

XMLWordPrintableJSON

    • Type: Task
    • Resolution: Unresolved
    • Priority: Major - P3
    • None
    • Affects Version/s: None
    • Component/s: Data Modeling
    • None
    • 3
    • Iteration A (Apr 21 - May 5), Iteration B (May 5 - May 16)
    • None
    • Developer Tools

      Update the diagram creation flow's styles to more accurately match the designs: 

      https://www.figma.com/design/nz84lFaVMLqq9ih4ZJtuP6/Data-modeling-viz-tool?node-id=2165-52064&t=303js43kstBEocuE-1 

      This diagram creation flow already exists, we just want to style this better and showing a loading state on the buttons. The `loadingText` and `isLoading` props from LeafyGreen’s Button component should be good for showing the loading.

      The buttons could use some styling to have proper gaps between them. Let's also add the labels for the modals.

      https://github.com/mongodb-js/compass/blob/1086d07de3afb2d52cd55eea00ac2da1d62ec753/packages/compass-data-modeling/src/components/new-diagram-form.tsx#L140

            Assignee:
            Basit Chonka
            Reporter:
            Rhys Howell
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated: