settings/tokens: Move token date metadata into shared .metadata element

Author: Turbo87

app/components/settings/api-tokens.hbs

@@ -71,16 +71,18 @@
           {{token.name}}
         </h3>
 
-        <div title={{token.last_used_at}} local-class="last-used-at" data-test-last-used-at>
-          {{#if token.last_used_at}}
-            Last used {{date-format-distance-to-now token.last_used_at addSuffix=true}}
-          {{else}}
-            Never used
-          {{/if}}
-        </div>
+        <div local-class="metadata">
+          <div title={{token.last_used_at}} local-class="last-used-at" data-test-last-used-at>
+            {{#if token.last_used_at}}
+              Last used {{date-format-distance-to-now token.last_used_at addSuffix=true}}
+            {{else}}
+              Never used
+            {{/if}}
+          </div>
 
-        <div title={{token.created_at}} local-class="created-at" data-test-created-at>
-          Created {{date-format-distance-to-now token.created_at addSuffix=true}}
+          <div title={{token.created_at}} local-class="created-at" data-test-created-at>
+            Created {{date-format-distance-to-now token.created_at addSuffix=true}}
+          </div>
         </div>
 
         {{#if token.token}}

app/components/settings/api-tokens.module.css

@@ -35,17 +35,19 @@
 }
 
 .name {
-    margin: 0 0 12px;
+    margin: 0 0 var(--space-s);
     font-weight: 500;
 }
 
 .dates {
 }
 
-.created-at,
-.last-used-at {
+.metadata {
     composes: small from '../../styles/shared/typography.module.css';
-    margin-top: 4px;
+
+    > * + * {
+        margin-top: var(--space-3xs);
+    }
 }
 
 .new-token-form {
@@ -168,11 +170,14 @@
         display: grid;
         grid-template:
             "name actions" auto
-            "last-user actions" auto
-            "created-at actions" auto
+            "metadata actions" auto
             "details details" auto
             / 1fr auto;
 
+        .metadata {
+            grid-area: metadata;
+        }
+
         .actions {
             grid-area: actions;
             align-self: start;