ServiceAccount: New service account modal to follow design system (#52373)

* ServiceAccount: New service account modal to follow design system

* Fixing spacing and removing double Field label

* Fixing imports

* Update comment

public/app/features/serviceaccounts/components/CreateTokenModal.tsx

@@ -8,11 +8,7 @@ import {
   ClipboardButton,
   DatePickerWithInput,
   Field,
-  FieldSet,
-  HorizontalGroup,
-  Icon,
   Input,
-  Label,
   Modal,
   RadioButtonGroup,
   useStyles2,
@@ -76,12 +72,7 @@ export const CreateTokenModal = ({ isOpen, token, serviceAccountLogin, onCreateT
     onClose();
   };
 
-  const modalTitle = (
+  const modalTitle = !token ? 'Add service account token' : 'Service account token created';
-    <div className={styles.modalHeaderTitle}>
-      <Icon className={styles.modalHeaderIcon} name="key-skeleton-alt" size="lg" />
-      <span>{!token ? 'Add service account token' : 'Service account token created'}</span>
-    </div>
-  );
 
   return (
     <Modal
@@ -93,11 +84,9 @@ export const CreateTokenModal = ({ isOpen, token, serviceAccountLogin, onCreateT
     >
       {!token ? (
         <div>
-          <FieldSet>
           <Field
             label="Display name"
             description="Name to easily identify the token"
-              className={styles.modalRow}
             // for now this is required
             // need to make this optional in backend as well
             required={true}
@@ -111,15 +100,16 @@ export const CreateTokenModal = ({ isOpen, token, serviceAccountLogin, onCreateT
               }}
             />
           </Field>
+          <Field label="Expiration">
             <RadioButtonGroup
-              className={styles.modalRow}
               options={EXPIRATION_OPTIONS}
               value={isWithExpirationDate}
               onChange={setIsWithExpirationDate}
               size="md"
             />
+          </Field>
           {isWithExpirationDate && (
-              <Field label="Expiration date" className={styles.modalRow}>
+            <Field label="Expiration date">
               <DatePickerWithInput
                 onChange={onExpirationDateChange}
                 value={newTokenExpirationDate}
@@ -128,42 +118,39 @@ export const CreateTokenModal = ({ isOpen, token, serviceAccountLogin, onCreateT
               />
             </Field>
           )}
-          </FieldSet>
+          <Modal.ButtonRow>
             <Button onClick={onGenerateToken} disabled={isWithExpirationDate && !isExpirationDateValid}>
               Generate token
             </Button>
+          </Modal.ButtonRow>
         </div>
       ) : (
         <>
-          <FieldSet>
+          <Field
-            <Label
+            label="Token"
-              description="You will not be able to see or generate it again. Loosing a token requires creating new one."
+            description="Copy the token now as you will not be able to see it again. Loosing a token requires creating a new one."
-              className={styles.modalRow}
           >
-              Copy the token. It will be showed only once.
-            </Label>
-            <Field label="Token" className={styles.modalRow}>
             <div className={styles.modalTokenRow}>
               <Input name="tokenValue" value={token} readOnly />
               <ClipboardButton
                 className={styles.modalCopyToClipboardButton}
                 variant="secondary"
                 size="md"
+                icon="copy"
                 getText={() => token}
               >
-                  <Icon name="copy" /> Copy to clipboard
+                Copy clipboard
               </ClipboardButton>
             </div>
           </Field>
-          </FieldSet>
+          <Modal.ButtonRow>
-          <HorizontalGroup>
             <ClipboardButton variant="primary" getText={() => token} onClipboardCopy={onCloseInternal}>
               Copy to clipboard and close
             </ClipboardButton>
             <Button variant="secondary" onClick={onCloseInternal}>
               Close
             </Button>
-          </HorizontalGroup>
+          </Modal.ButtonRow>
         </>
       )}
     </Modal>
@@ -185,29 +172,11 @@ const getStyles = (theme: GrafanaTheme2) => {
     modalContent: css`
       overflow: visible;
     `,
-    modalRow: css`
-      margin-bottom: ${theme.spacing(4)};
-    `,
     modalTokenRow: css`
       display: flex;
     `,
     modalCopyToClipboardButton: css`
       margin-left: ${theme.spacing(0.5)};
     `,
-    modalHeaderTitle: css`
-      font-size: ${theme.typography.size.lg};
-      margin: ${theme.spacing(0, 4, 0, 1)};
-      display: flex;
-      align-items: center;
-      position: relative;
-      top: 2px;
-    `,
-    modalHeaderIcon: css`
-      margin-right: ${theme.spacing(2)};
-      font-size: inherit;
-      &:before {
-        vertical-align: baseline;
-      }
-    `,
   };
 };