Update modal styles and add loading UI for diagram creation

XMLWordPrintableJSON

    • Type: Task
    • Resolution: Done
    • Priority: Major - P3
    • 1.46.3
    • Affects Version/s: None
    • Component/s: Data Modeling
    • None
    • 3
    • Iteration A (Apr 21 - May 5), Iteration B (May 5 - May 16)
    • Not Needed
    • 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:
                Resolved: