Update rate limit modal (#11344)

app/assets/javascripts/utilities/showUserAlertModal.js.erb

@@ -22,13 +22,13 @@ function showUserAlertModal(title, text, confirm_text) {
  * @param {string} next_action_text Description of the next action that can be taken
  *
  * @example
- * showRateLimitModal('Made a comment', 'comment again');
+ * showRateLimitModal('Made a comment', 'comment again')
  */
 function showRateLimitModal(action_text, next_action_text) {
   let rateLimitText = buildRateLimitText(action_text, next_action_text);
   let rateLimitLink = '/faq';
   showUserAlertModal(
-    'Wait a Moment...',
+    'Wait a moment...',
     rateLimitText,
     'Got it',
     rateLimitLink,
@@ -61,10 +61,9 @@ const getModalHtml = (
   title,
   text,
   confirm_text,
-) => `<div id="${modalId}" data-testid="modal-container" class="crayons-modal hidden">
+) => `<div id="${modalId}" data-testid="modal-container" class="crayons-modal crayons-modal--m hidden">
     <div role="dialog" aria-modal="true" class="crayons-modal__box">
-      <div class="crayons-modal__box__header">
-        <h2>${title}</h2>
+      <div class="crayons-modal__box__header border-b-0 justify-end">
           <button class="crayons-btn crayons-btn--ghost crayons-btn--icon" type="button" 
               onClick="toggleUserAlertModal();" aria-label="Close">
             <svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon"
@@ -76,10 +75,23 @@ const getModalHtml = (
             </svg>
           </button>
       </div>
-      <div class="crayons-modal__box__body">
-        <p>${text}</p>
-        </br>
-        <button class="crayons-btn crayons-btn--icon" type="button" onClick="toggleUserAlertModal();">${confirm_text}</button>
+      <div class="crayons-modal__box__body pt-0 flex gap-2">
+        <div class="w-75">
+          <h2>
+            ${title}
+          </h2>
+          <p class="color-base-70">
+            ${text}
+          </p>
+          <button class="crayons-btn mt-4" type="button" onClick="toggleUserAlertModal();">
+            ${confirm_text}
+          </button>
+        </div>
+        <% if SiteConfig.mascot_image_url.present? %>
+          <figure class="w-25">
+            <img src="<%= SiteConfig.mascot_image_url %>" class="w-100" />
+          </figure>
+        <% end %>
       </div>
     </div>
     <div data-testid="modal-overlay" class="crayons-modal__overlay"></div>

app/models/site_config.rb

@@ -11,9 +11,6 @@ class SiteConfig < RailsSettings::Base
   cache_prefix { "v1" }
 
   LIGHTNING_ICON = File.read(Rails.root.join("app/assets/images/lightning.svg")).freeze
-  LOGO_PNG = URL.local_image("icon.png").freeze
-  MAIN_SOCIAL_IMAGE = URL.local_image("social-media-cover.png").freeze
-  MASCOT_IMAGE_URL = URL.local_image("mascot.png").freeze
   STACK_ICON = File.read(Rails.root.join("app/assets/images/stack.svg")).freeze
 
   # Meta
@@ -88,9 +85,11 @@ class SiteConfig < RailsSettings::Base
   field :recaptcha_secret_key, type: :string, default: ApplicationConfig["RECAPTCHA_SECRET"]
 
   # Images
-  field :main_social_image, type: :string, default: MAIN_SOCIAL_IMAGE
+  field :main_social_image, type: :string, default: proc { URL.local_image("social-media-cover.png") }
+
   field :favicon_url, type: :string, default: "favicon.ico"
-  field :logo_png, type: :string, default: LOGO_PNG
+  field :logo_png, type: :string, default: proc { URL.local_image("icon.png") }
+
   field :logo_svg, type: :string
   field :secondary_logo_url, type: :string
 
@@ -100,7 +99,7 @@ class SiteConfig < RailsSettings::Base
 
   # Mascot
   field :mascot_user_id, type: :integer, default: 1
-  field :mascot_image_url, type: :string, default: MASCOT_IMAGE_URL
+  field :mascot_image_url, type: :string, default: proc { URL.local_image("mascot.png") }
   field :mascot_image_description, type: :string, default: "The community mascot"
   field :mascot_footer_image_url, type: :string
   field :mascot_footer_image_width, type: :integer, default: 52

spec/system/comments/user_fills_out_comment_spec.rb

@@ -40,7 +40,7 @@ RSpec.describe "Creating Comment", type: :system, js: true do
 
       fill_in "text-area", with: raw_comment
       click_button("Submit")
-      expect(page).to have_text("Wait a Moment...")
+      expect(page).to have_text("Wait a moment...")
     end
 
     it "closes modal with close button" do
@@ -50,7 +50,7 @@ RSpec.describe "Creating Comment", type: :system, js: true do
       fill_in "text-area", with: raw_comment
       click_button("Submit")
       click_button("Got it")
-      expect(page).not_to have_text("Wait a Moment...")
+      expect(page).not_to have_text("Wait a moment...")
     end
 
     it "closes model with 'x' image button" do
@@ -60,7 +60,7 @@ RSpec.describe "Creating Comment", type: :system, js: true do
       fill_in "text-area", with: raw_comment
       click_button("Submit")
       find(".crayons-modal__box__header").click_button
-      expect(page).not_to have_text("Wait a Moment...")
+      expect(page).not_to have_text("Wait a moment...")
     end
   end