Provide "Help" on the Creator Onboarding Setup Page (#15308)

* Adds a help icon to the creator settings setup page

* Moves the help icon styles from the a tag to the inline_svg_tag

* Removes reused class and aligns help icon to the right

* Refactors help icon out into a partial used across necessary views

* Moves .admin-help-button class from admin.scss to scaffolds.scss

* Adds further utility classes to align help icon as expected

app/assets/stylesheets/admin.scss

@@ -169,22 +169,6 @@ label {
   color: var(--base-inverted);
 }
 
-.admin-help-button {
-  position: fixed;
-  bottom: var(--su-7);
-  margin-bottom: env(safe-area-inset-bottom);
-  right: var(--su-7);
-  z-index: var(--z-elevate);
-  cursor: pointer;
-  border-radius: 50px;
-
-  @media (max-width: $breakpoint-m) {
-    bottom: calc(var(--header-height) + var(--su-3));
-    right: var(--su-3);
-    padding: 0;
-  }
-}
-
 .mod-actions__data {
   max-width: 300px;
 }

app/assets/stylesheets/scaffolds.scss

@@ -93,3 +93,14 @@ body.dark-theme {
 body.trusted-status-true .trusted-visible-block {
   display: flex !important;
 }
+
+// The .admin-help-button class is included in this file since it
+// is referenced in both the admin and application layout.
+
+.admin-help-button {
+  margin-bottom: env(safe-area-inset-bottom);
+
+  @media (max-width: $breakpoint-m) {
+    bottom: calc(var(--header-height) + var(--su-3));
+  }
+}

app/controllers/admin/application_controller.rb

@@ -19,7 +19,8 @@ module Admin
       podcasts: "https://admin.forem.com/docs/advanced-customization/content-manager/podcasts",
       settings: "https://admin.forem.com/docs/advanced-customization/config",
       tags: "https://admin.forem.com/docs/forem-basics/tags",
-      users: "https://admin.forem.com/docs/forem-basics/user-roles"
+      users: "https://admin.forem.com/docs/forem-basics/user-roles",
+      creator_settings: "https://admin.forem.com/docs/getting-started/first-user-registration"
     }.freeze
 
     protected

app/views/admin/creator_settings/new.html.erb

@@ -39,6 +39,9 @@
       <div class="crayons-field mt-6 align-left">
         <%= submit_tag "Finish", class: "crayons-btn btn--primary" %>
       </div>
+      <% if @help_url %>
+        <%= render "shared/help_icon" %>
+      <% end %>
     <% end %>
 
     <%= inline_svg_tag("forem-background.svg", aria_hidden: true, class: "forem-background absolute bottom-0 right-0 hidden m:block") %>

app/views/layouts/admin.html.erb

@@ -98,9 +98,7 @@
 
       <%= yield %>
       <% if @help_url %>
-        <a class="admin-help-button crayons-btn crayons-btn--icon-rounded crayons-btn--s" href="<%= @help_url %>" target="_blank" rel="noopener noreferer">
-          <%= inline_svg_tag("circle-question.svg", aria: true, title: "Forem Admin Guide") %>
-        </a>
+        <%= render "shared/help_icon" %>
       <% end %>
     </main>
   </div>

app/views/shared/_help_icon.html.erb

@@ -0,0 +1,3 @@
+<a class="admin-help-button fixed bottom-7 right-3 z-elevate cursor-pointer radius-full l:right-7 crayons-btn crayons-btn--icon-rounded crayons-btn--s" href="<%= @help_url %>" target="_blank" rel="noopener noreferer">
+  <%= inline_svg_tag("circle-question.svg", aria: true, class: "block", title: "Forem Admin Guide") %>
+</a>