Reduce Regenerate Token UI density

[easyCZ]

The Rengerate Token UI looks a bit dense, especially around the volume of dates being shown. Cleaning up and breaking it up a bit could make it easier to visually grep.

CC @gtsiolis if you've got ideas what we could improve here. Also feel free to close if this is the intended UX

[gtsiolis]

That's the most UX nerdy issue title I've read in a while. Thanks for opening this, @easyCZ!

Yeah, simply using our spacing guidelines for separating form groups using mt-4 could help.

For future reference, our spacing guidelines follow Tailwind's spacing scale. I'm posting below a screenshot from Foundations / Spacing in the component library in our Figma team.

Spacing Guidelines

Posting a diff below, although I'm not sure if the code is correct:

diff --git a/components/dashboard/src/settings/PersonalAccessTokens.tsx b/components/dashboard/src/settings/PersonalAccessTokens.tsx
index ea391388d..97243dcb9 100644
--- a/components/dashboard/src/settings/PersonalAccessTokens.tsx
+++ b/components/dashboard/src/settings/PersonalAccessTokens.tsx
@@ -148,7 +148,7 @@ function ShowTokenModal(props: TokenModalProps) {
                     Expires on {dayjs(props.token.expirationTime!.toDate()).format("MMM D, YYYY")}
                 </div>
             </div>
-            <>
+            <div className="mt-4">
                 {props.showDateSelector && (
                     <DateSelector
                         title="Expiration Date"
@@ -165,7 +165,7 @@ function ShowTokenModal(props: TokenModalProps) {
                         }
                     />
                 )}
-            </>
+            </div>
         </Modal>
     );
 }

Here's how the design should be after this change:

BEFORE	AFTER

[gtsiolis]

Opened #15107 to resolve this.