UX: refactor security modals (#12870)

- better form
- uses d-footer
- ensure buttons have the same height

Note that to achieve same height for btn without text, I made the choice to go for a minimum height which should work in most cases.

app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs

@@ -1,20 +1,23 @@
 {{#d-modal-body}}
-  <div class="form-horizontal">
-    {{input type="text" value=model.name}}
-  </div>
-  <div class="second-factor instructions">
-    {{i18n "user.second_factor.security_key.edit_description"}}
-  </div>
+  <form class="form-horizontal">
+    <div class="input-group">
+      <label for="security-key-name">{{i18n "user.second_factor.security_key.edit_description"}}</label>
+      {{input name="security-key-name" type="text" value=model.name}}
+    </div>
+  </form>
+{{/d-modal-body}}
+
+<div class="modal-footer">
   {{d-button
     action=(action "editSecurityKey")
     class="btn-primary"
     label="user.second_factor.security_key.save"
   }}
   {{d-button
     action=(action "disableSecurityKey")
-    class="btn-danger"
+    class="btn-danger no-text"
     icon="trash-alt"
     aria-label="user.second_factor.disable"
     title="user.second_factor.disable"
   }}
-{{/d-modal-body}}
+</div>

app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs

@@ -1,20 +1,23 @@
 {{#d-modal-body}}
-  <div class="form-horizontal">
-    {{input type="text" value=model.name}}
-  </div>
-  <div class="second-factor instructions">
-    {{i18n "user.second_factor.edit_description"}}
-  </div>
+  <form class="form-horizontal">
+    <div class="input-group">
+      <label for="authenticator-name">{{i18n "user.second_factor.edit_description"}}</label>
+      {{input name="authenticator-name" type="text" value=model.name}}
+    </div>
+  </form>
+{{/d-modal-body}}
+
+<div class="modal-footer">
   {{d-button
     action=(action "editSecondFactor")
     class="btn-primary"
     label="user.second_factor.save"
   }}
   {{d-button
     action=(action "disableSecondFactor")
-    class="btn-danger"
+    class="btn-danger no-text"
     icon="trash-alt"
     aria-label="user.second_factor.disable"
     title="user.second_factor.disable"
   }}
-{{/d-modal-body}}
+</div>

app/assets/stylesheets/common/components/buttons.scss

@@ -35,6 +35,7 @@
   &.no-text {
     .d-icon {
       margin-right: 0;
+      min-height: 17px;
     }
   }
   @include hover {