Settings::ApiTokens: Move <form> out of the token list

Author: Turbo87

app/components/settings/api-tokens.hbs

@@ -23,38 +23,38 @@
   token when prompted.
 </p>
 
-<div local-class="token-list">
-  {{#if this.newToken}}
-    <form local-class="row create-token" {{on "submit" (prevent-default (perform this.saveTokenTask))}}>
-      <div local-class="name">
-        <Input
-          @type="text"
-          placeholder="New token name"
-          aria-label="New token name"
-          disabled={{this.newToken.isSaving}}
-          @value={{this.newToken.name}}
-          data-test-focused-input
-          {{auto-focus}}
-        />
-      </div>
+{{#if this.newToken}}
+  <form local-class="new-token-form" {{on "submit" (prevent-default (perform this.saveTokenTask))}}>
+    <div local-class="name">
+      <Input
+        @type="text"
+        placeholder="New token name"
+        aria-label="New token name"
+        disabled={{this.newToken.isSaving}}
+        @value={{this.newToken.name}}
+        data-test-focused-input
+        {{auto-focus}}
+      />
+    </div>
 
-      <div local-class="actions">
-        <button
-          type="submit"
-          local-class="save-button"
-          disabled={{or this.newToken.isSaving (not this.newToken.name)}}
-          title={{unless this.newToken.name "You must specify a name"}}
-          data-test-save-token-button
-        >
-          Create
-        </button>
-        {{#if this.newToken.isSaving}}
-          <LoadingSpinner local-class="spinner" data-test-saving-spinner />
-        {{/if}}
-      </div>
-    </form>
-  {{/if}}
+    <div local-class="actions">
+      <button
+        type="submit"
+        local-class="save-button"
+        disabled={{or this.newToken.isSaving (not this.newToken.name)}}
+        title={{unless this.newToken.name "You must specify a name"}}
+        data-test-save-token-button
+      >
+        Create
+      </button>
+      {{#if this.newToken.isSaving}}
+        <LoadingSpinner local-class="spinner" data-test-saving-spinner />
+      {{/if}}
+    </div>
+  </form>
+{{/if}}
 
+<div local-class="token-list">
   {{#each this.sortedTokens as |token|}}
     <div local-class="row" data-test-api-token={{token.id}}>
       <div local-class="name" data-test-name>

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

@@ -30,8 +30,13 @@
     &:last-child { border-bottom-width: 1px; }
 }
 
-.create-token {
+.new-token-form {
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    border: 1px solid #d5d3cb;
     background-color: var(--main-bg-dark);
+    margin-bottom: 24px;
 
     .name {
         padding-right: 20px;