UX: Minor styling improvements to invites (#12715)

Reduce the width of the modal to make it consistent with other modals
and use the full width for inputs with a button on the right side.

app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs

@@ -1,12 +1,16 @@
 {{#d-modal-body title=(if invite.id "user.invited.invite.edit_title" "user.invited.invite.new_title")}}
   <form>
-    <div class="input-group invite-link-field">
+    <div class="input-group invite-link">
-      <label for="invite_link">{{i18n "user.invited.invite.instructions"}}</label>
+      <label for="invite-link">{{i18n "user.invited.invite.instructions"}}</label>
-      {{input name="invite_link"
+      <div class="invite-input-with-button">
-              class="invite-link"
+        {{input
-              value=invite.link
+          name="invite-link"
-              readonly=true}}
+          class="invite-link"
-      {{copy-button selector="input.invite-link" copied=(action "copied")}}
+          value=invite.link
+          readonly=true
+        }}
+        {{copy-button selector="input.invite-link" copied=(action "copied")}}
+      </div>
     </div>
 
     <p>{{expiresAtLabel}}</p>
@@ -37,20 +41,22 @@
     {{/if}}
 
     {{#if isEmail}}
-      <div class="input-group invite-email-field">
+      <div class="input-group invite-email">
         <label for="invite-email">{{i18n "user.invited.invite.email"}}</label>
-        {{input
+        <div class="invite-input-with-button">
-          id="invite-email"
+          {{input
-          value=buffered.email
+            id="invite-email"
-          placeholderKey="topic.invite_reply.email_placeholder"
+            value=buffered.email
-        }}
+            placeholderKey="topic.invite_reply.email_placeholder"
-        {{#if capabilities.hasContactPicker}}
-          {{d-button
-            icon="address-book"
-            action=(action "searchContact")
-            class="btn-primary open-contact-picker"
           }}
-        {{/if}}
+          {{#if capabilities.hasContactPicker}}
+            {{d-button
+              icon="address-book"
+              action=(action "searchContact")
+              class="btn-primary open-contact-picker"
+            }}
+          {{/if}}
+        </div>
       </div>
     {{/if}}
 

app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js

@@ -85,7 +85,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) {
     await visit("/u/eviltrout/invited/pending");
     await click(".invite-controls .btn:first-child");
 
-    await click(".invite-link-field .btn");
+    await click(".invite-link .btn");
 
     await click(".modal-footer .btn:last-child");
     assert.notOk(deleted, "does not delete invite on close");
@@ -96,7 +96,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) {
     await click(".invite-controls .btn:first-child");
 
     await click("#invite-type-email");
-    await click(".invite-link-field .btn");
+    await click(".invite-link .btn");
     assert.equal(
       find("#modal-alert").text(),
       I18n.t("user.invited.invite.blank_email")

app/assets/stylesheets/common/base/modal.scss

@@ -840,11 +840,6 @@
 
     input[type="text"] {
       width: 100%;
-
-      &.invite-link,
-      &#invite-email {
-        width: 85%;
-      }
     }
   }
 
@@ -867,9 +862,7 @@
 
   .input-group input[type="text"],
   .input-group .btn,
-  .future-date-input .select-kit-header,
+  .future-date-input .select-kit-header {
-  .control-group:nth-child(2) input,
-  .control-group:nth-child(3) input {
     height: 34px;
   }
 
@@ -877,6 +870,14 @@
     vertical-align: top;
   }
 
+  .invite-input-with-button {
+    display: flex;
+
+    .btn {
+      margin-left: 3px;
+    }
+  }
+
   .future-date-input {
     .date-picker-wrapper {
       input {

app/assets/stylesheets/desktop/modal.scss

@@ -111,6 +111,6 @@
 .create-invite-modal,
 .create-invite-bulk-modal {
   .modal-inner-container {
-    width: 700px;
+    width: 600px;
   }
 }