Settings::ApiTokens: Improve list and form styling some more

Author: Turbo87

app/components/settings/api-tokens.hbs

@@ -55,39 +55,21 @@
 
 <ul role="list" local-class="token-list">
   {{#each this.sortedTokens as |token|}}
-    <li>
-      <div local-class="row" data-test-api-token={{or token.id true}}>
-        <div local-class="name" data-test-name>
-          {{token.name}}
-        </div>
+    <li local-class="row" data-test-api-token={{or token.id true}}>
+      <h3 local-class="name" data-test-name>
+        {{token.name}}
+      </h3>
 
-        <div local-class="dates">
-          <span title={{token.created_at}} local-class="created-at" data-test-created-at>
-            Created {{date-format-distance-to-now token.created_at addSuffix=true}}
-          </span>
-          <span 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}}
-          </span>
-        </div>
+      <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="actions">
-          <button
-            type="button"
-            local-class="revoke-button"
-            disabled={{token.isSaving}}
-            data-test-revoke-token-button
-            {{on "click" (perform this.revokeTokenTask token)}}
-          >
-            Revoke
-          </button>
-          {{#if token.isSaving}}
-            <LoadingSpinner local-class="spinner" data-test-saving-spinner />
-          {{/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>
 
       {{#if token.token}}
@@ -99,6 +81,21 @@
           <pre class="terminal">cargo login {{token.token}}</pre>
         </div>
       {{/if}}
+
+      <div local-class="actions">
+        <button
+          type="button"
+          local-class="revoke-button"
+          disabled={{token.isSaving}}
+          data-test-revoke-token-button
+          {{on "click" (perform this.revokeTokenTask token)}}
+        >
+          Revoke
+        </button>
+        {{#if token.isSaving}}
+          <LoadingSpinner local-class="spinner" data-test-saving-spinner />
+        {{/if}}
+      </div>
     </li>
   {{/each}}
 </ul>

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

@@ -22,56 +22,45 @@
     box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
 
     > * {
-        padding: 10px 20px;
+        padding: 16px;
     }
 
     > * + * {
         border-top: 1px solid #f1f0ed;
     }
 }
 
-.row {
-    display: flex;
-    align-items: center;
+.name {
+    margin: 0 0 12px;
+    font-weight: 500;
+}
+
+.dates {
+}
+
+.created-at,
+.last-used-at {
+    composes: small from '../../styles/shared/typography.module.css';
+    margin-top: 4px;
 }
 
 .new-token-form {
-    padding: 10px 20px;
-    display: flex;
-    align-items: center;
+    padding: 16px;
     border-radius: 6px;
     background-color: white;
     box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
     margin-bottom: 24px;
 
     .input {
         padding: 8px;
-        margin-right: 20px;
         width: 100%;
+        border: 1px solid #ada796;
+        border-radius: 4px;
     }
 }
 
-.name {
-    flex: 1;
-    margin-right: 0.4em;
-    font-weight: bold;
-}
-
-.dates {
-    flex: content;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    margin-right: 0.4em;
-}
-
-.created-at,
-.last-used-at {
-    composes: small from '../../styles/shared/typography.module.css';
-    line-height: 1.15rem;
-}
-
 .actions {
+    margin-top: 12px;
     display: flex;
     align-items: center;
 }
@@ -82,12 +71,61 @@
 
 .save-button {
     composes: yellow-button small from '../../styles/shared/buttons.module.css';
+    flex-grow: 1;
+    border-radius: 4px;
 }
 
 .revoke-button {
     composes: tan-button small from '../../styles/shared/buttons.module.css';
+    flex-grow: 1;
+    border-radius: 4px;
 }
 
 .new-token {
-    margin-top: 20px;
+    margin: 24px 0;
+
+    pre {
+        border-radius: 4px;
+        margin-bottom: 0;
+        user-select: all;
+    }
+}
+
+@media (min-width: 640px) {
+    .new-token-form {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+
+        .input {
+            padding: 8px;
+            margin-right: 16px;
+        }
+
+        .actions {
+            margin: 0 0 0 16px;
+        }
+    }
+
+
+    .row {
+        display: grid;
+        grid-template:
+            "name actions" auto
+            "last-user actions" auto
+            "created-at actions" auto
+            "details details" auto
+            / 1fr auto;
+
+        .actions {
+            grid-area: actions;
+            align-self: start;
+            margin: 0 0 0 16px;
+        }
+
+        .new-token {
+            grid-area: details;
+            margin-bottom: 0;
+        }
+    }
 }

app/styles/shared/buttons.module.css

@@ -23,6 +23,7 @@
     padding: 15px 40px;
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     color: var(--text-color);
     text-decoration: none;
     font-weight: bold;