FIX: Styling for feature topic on profile modal (#8727)

app/assets/javascripts/discourse/controllers/feature-topic-on-profile.js.es6

@@ -13,6 +13,10 @@ export default Controller.extend(ModalFunctionality, {
     this.set("newFeaturedTopic", null);
   },
 
+  onShow() {
+    this.set("modal.modalClass", "choose-topic-modal");
+  },
+
   actions: {
     save() {
       return ajax(`/u/${this.model.username}/feature-topic`, {

app/assets/javascripts/discourse/controllers/move-to-topic.js.es6

@@ -74,7 +74,7 @@ export default Controller.extend(ModalFunctionality, {
 
   onShow() {
     this.setProperties({
-      "modal.modalClass": "move-to-modal",
+      "modal.modalClass": "choose-topic-modal",
       saving: false,
       selection: "new_topic",
       categoryId: null,

app/assets/javascripts/discourse/templates/modal/feature-topic-on-profile.hbs

@@ -1,4 +1,4 @@
-{{#d-modal-body class="feature-topic-on-profile"}}
+{{#d-modal-body class="feature-topic-on-profile" id='choosing-topic'}}
   {{choose-topic currentTopicId=model.featured_topic.id
     selectedTopicId=newFeaturedTopicId
     additionalFilters="in:created status:public"
@@ -6,8 +6,11 @@
     topicChangedCallback=(action "newTopicSelected")
     loadOnInit=true
   }}
+{{/d-modal-body}}
+
+<div class="modal-footer">
   {{d-button action=(action "save")
     class="btn-primary save-featured-topic-on-profile"
     disabled=noTopicSelected
     label="user.feature_topic_on_profile.save"}}
-{{/d-modal-body}}
+</div>

app/assets/javascripts/discourse/templates/modal/move-to-topic.hbs

@@ -1,4 +1,4 @@
-{{#d-modal-body id='move-selected'}}
+{{#d-modal-body id='choosing-topic'}}
 
   {{#if model.isPrivateMessage}}
     <div class="radios">

app/assets/javascripts/discourse/templates/preferences/profile.hbs

@@ -68,7 +68,7 @@
 
     <div>
       {{d-button action=(action "showFeaturedTopicModal")
-        class="btn-primary feature-topic-on-profile-btn"
+        class="btn-default feature-topic-on-profile-btn"
         label="user.feature_topic_on_profile.open_search"}}
       {{#if model.featured_topic}}
         {{d-button action=(action "clearFeaturedTopicFromProfile")

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

@@ -619,7 +619,7 @@
 }
 
 // move-to topic modal
-.move-to-modal {
+.choose-topic-modal {
   // move to existing topic
   .existing-topic {
     .radio {

app/assets/stylesheets/desktop/modal.scss

@@ -110,13 +110,13 @@
   }
 }
 
-.move-to-modal {
+.choose-topic-modal {
   .modal-body {
     position: relative;
     height: 350px;
   }
 
-  #move-selected {
+  #choosing-topic {
     // prevents content from moving when user selects different move options 525px
     // is the same width we set on category edit modal
     width: 525px;

app/assets/stylesheets/mobile/modal.scss

@@ -43,7 +43,7 @@
   font-size: $font-up-4;
 }
 
-#move-selected {
+#choosing-topic {
   p {
     margin-top: 0;
   }

test/javascripts/acceptance/topic-move-posts-test.js.es6

@@ -18,28 +18,28 @@ QUnit.test("default", async assert => {
   await click(".selected-posts .move-to-topic");
 
   assert.ok(
-    find(".move-to-modal .title")
+    find(".choose-topic-modal .title")
       .html()
       .includes(I18n.t("topic.move_to.title")),
     "it opens move to modal"
   );
 
   assert.ok(
-    find(".move-to-modal .radios")
+    find(".choose-topic-modal .radios")
       .html()
       .includes(I18n.t("topic.split_topic.radio_label")),
     "it shows an option to move to new topic"
   );
 
   assert.ok(
-    find(".move-to-modal .radios")
+    find(".choose-topic-modal .radios")
       .html()
       .includes(I18n.t("topic.merge_topic.radio_label")),
     "it shows an option to move to existing topic"
   );
 
   assert.ok(
-    find(".move-to-modal .radios")
+    find(".choose-topic-modal .radios")
       .html()
       .includes(I18n.t("topic.move_to_new_message.radio_label")),
     "it shows an option to move to new message"
@@ -54,28 +54,28 @@ QUnit.test("moving all posts", async assert => {
   await click(".selected-posts .move-to-topic");
 
   assert.ok(
-    find(".move-to-modal .title")
+    find(".choose-topic-modal .title")
       .html()
       .includes(I18n.t("topic.move_to.title")),
     "it opens move to modal"
   );
 
   assert.not(
-    find(".move-to-modal .radios")
+    find(".choose-topic-modal .radios")
       .html()
       .includes(I18n.t("topic.split_topic.radio_label")),
     "it does not show an option to move to new topic"
   );
 
   assert.ok(
-    find(".move-to-modal .radios")
+    find(".choose-topic-modal .radios")
       .html()
       .includes(I18n.t("topic.merge_topic.radio_label")),
     "it shows an option to move to existing topic"
   );
 
   assert.not(
-    find(".move-to-modal .radios")
+    find(".choose-topic-modal .radios")
       .html()
       .includes(I18n.t("topic.move_to_new_message.radio_label")),
     "it does not show an option to move to new message"
@@ -99,21 +99,21 @@ QUnit.test("moving posts from personal message", async assert => {
   await click(".selected-posts .move-to-topic");
 
   assert.ok(
-    find(".move-to-modal .title")
+    find(".choose-topic-modal .title")
       .html()
       .includes(I18n.t("topic.move_to.title")),
     "it opens move to modal"
   );
 
   assert.ok(
-    find(".move-to-modal .radios")
+    find(".choose-topic-modal .radios")
       .html()
       .includes(I18n.t("topic.move_to_new_message.radio_label")),
     "it shows an option to move to new message"
   );
 
   assert.ok(
-    find(".move-to-modal .radios")
+    find(".choose-topic-modal .radios")
       .html()
       .includes(I18n.t("topic.move_to_existing_message.radio_label")),
     "it shows an option to move to existing message"