From 4d87360f842eac0b0cc4c77c1072238bbadaaa7d Mon Sep 17 00:00:00 2001
From: Dan Ungureanu <dan@ungureanu.me>
Date: Thu, 15 Apr 2021 14:46:49 +0300
Subject: [PATCH] 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/templates/modal/create-invite.hbs     | 44 +++++++++++--------
 .../acceptance/create-invite-modal-test.js    |  4 +-
 app/assets/stylesheets/common/base/modal.scss | 17 +++----
 app/assets/stylesheets/desktop/modal.scss     |  2 +-
 4 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs b/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs
index 69c9312904..0991bc70ac 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs
+++ b/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">
-      <label for="invite_link">{{i18n "user.invited.invite.instructions"}}</label>
-      {{input name="invite_link"
-              class="invite-link"
-              value=invite.link
-              readonly=true}}
-      {{copy-button selector="input.invite-link" copied=(action "copied")}}
+    <div class="input-group invite-link">
+      <label for="invite-link">{{i18n "user.invited.invite.instructions"}}</label>
+      <div class="invite-input-with-button">
+        {{input
+          name="invite-link"
+          class="invite-link"
+          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
-          id="invite-email"
-          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"
+        <div class="invite-input-with-button">
+          {{input
+            id="invite-email"
+            value=buffered.email
+            placeholderKey="topic.invite_reply.email_placeholder"
           }}
-        {{/if}}
+          {{#if capabilities.hasContactPicker}}
+            {{d-button
+              icon="address-book"
+              action=(action "searchContact")
+              class="btn-primary open-contact-picker"
+            }}
+          {{/if}}
+        </div>
       </div>
     {{/if}}
 
diff --git a/app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js b/app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js
index fd27c389b4..da6d3d3420 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js
+++ b/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")
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 41121900f6..1b57faac2a 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/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,
-  .control-group:nth-child(2) input,
-  .control-group:nth-child(3) input {
+  .future-date-input .select-kit-header {
     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 {
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index 5c22640ffe..0f6cb8603a 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -111,6 +111,6 @@
 .create-invite-modal,
 .create-invite-bulk-modal {
   .modal-inner-container {
-    width: 700px;
+    width: 600px;
   }
 }