Dev: Use angle-brackets codemode and add icon to login and signup buttons

javascripts/discourse/templates/guest-gate.hbs

@@ -1,5 +1,5 @@
 {{#if (theme-setting 'dismissable_false')}}
-  {{#d-modal-body title=(theme-prefix 'guest_gate.title') dismissable=false}}
+  <DModalBody @title={{theme-prefix "guest_gate.title"}} @dismissable={{false}}>
     {{#if (theme-setting 'custom_gate_enabled') }}
       <div class="custom-gate-content">
         <img src="{{theme-setting 'custom_gate_image'}}"/>
@@ -13,9 +13,9 @@
       </div>
     {{/if}}
     {{login-buttons externalLogin=(action "externalLogin")}}
-  {{/d-modal-body}}
+  </DModalBody>
   {{else}}
-  {{#d-modal-body title=(theme-prefix 'guest_gate.title')}}
+  <DModalBody @title={{theme-prefix "guest_gate.title"}}>
     {{#if (theme-setting 'custom_gate_enabled') }}
       <div class="custom-gate-content">
         <img src="{{theme-setting 'custom_gate_image'}}"/>
@@ -29,24 +29,24 @@
       </div>
     {{/if}}
     {{login-buttons externalLogin=(action "externalLogin")}}
-  {{/d-modal-body}}
+  </DModalBody>
 {{/if}}
 
 <div class="modal-footer">
   {{#if ssoEnabled}}
     {{#if (theme-setting 'use_gate_buttons') }}
-      {{d-button class=(theme-setting 'login_button_style') label=(theme-prefix 'guest_gate.sso_log_in') action="showLogin"}}
+      <DButton @class={{theme-setting "login_button_style"}} @icon={{theme-setting "login_icon"}} @label={{theme-prefix "guest_gate.sso_log_in"}} @action={{"showLogin"}} />
       {{else}}
       <a href {{action "showLogin"}}>{{theme-i18n "guest_gate.sso_log_in"}}</a>
     {{/if}}
     {{else}}
     {{#if (theme-setting 'use_gate_buttons') }}
       {{#if (theme-setting 'custom_url_enabled') }}
-        {{d-button class=(theme-setting 'login_button_style') label=(theme-prefix 'guest_gate.log_in') href=(theme-setting 'custom_login_url')}}
-        {{d-button class=(theme-setting 'signup_button_style') label=(theme-prefix 'guest_gate.sign_up') href=(theme-setting 'custom_signup_url')}}
+        <DButton @class={{theme-setting "login_button_style"}} @icon={{theme-setting "login_icon"}} @label={{theme-prefix "guest_gate.log_in"}} @href={{theme-setting "custom_login_url"}} />
+        <DButton @class={{theme-setting "signup_button_style"}} @icon={{theme-setting "signup_icon"}} @label={{theme-prefix "guest_gate.sign_up"}} @href={{theme-setting "custom_signup_url"}} />
         {{else}}
-        {{d-button class=(theme-setting 'login_button_style') label=(theme-prefix 'guest_gate.log_in') action="showLogin"}}
-        {{d-button class=(theme-setting 'signup_button_style') label=(theme-prefix 'guest_gate.sign_up') action="showCreateAccount"}}
+        <DButton @class={{theme-setting "login_button_style"}} @icon={{theme-setting "login_icon"}} @label={{theme-prefix "guest_gate.log_in"}} @action={{"showLogin"}} />
+        <DButton @class={{theme-setting "signup_button_style"}} @icon={{theme-setting "signup_icon"}} @label={{theme-prefix "guest_gate.sign_up"}} @action={{"showCreateAccount"}} />
       {{/if}}
       {{else}}
       {{#if (theme-setting 'custom_url_enabled') }}

settings.yml

@@ -1,75 +1,88 @@
 max_guest_topic_views:
   type: string
   default: "1"
-  description: Number of topic views until gate displays. After the gate first appears, it appears randomly between 1 and this number.
+  description: "Number of topic views until gate displays. After the gate first appears, it appears randomly between 1 and this number."
 dismissable_false:
   type: bool
   default: false
-  description: Removes the close button, which prevents visitors from closing it.
+  description: "Removes the close button, which prevents visitors from closing it."
 use_gate_buttons:
   type: bool
   default: false
-  description: Use buttons on modal footer instead of links.
+  description: "Use buttons on modal footer instead of links."
 login_button_style:
   type: enum
   default: btn-primary
   choices:
     - btn-default
-  description: Guest Gate Login button style. btn-primary is a blue (tertiary) colored button by default. btn-default is a grey (primary-low) colored button by default.
+  description: "Guest Gate Login button style. btn-primary is a blue (tertiary) colored button by default. btn-default is a grey (primary-low) colored button by default."
 signup_button_style:
   type: enum
   default: btn-default
   choices:
     - btn-primary
-  description: Guest Gate Signup button style. btn-primary is a blue (tertiary) colored button by default. btn-default is a grey (primary-low) colored button by default.
+  description: "Guest Gate Signup button style. btn-primary is a blue (tertiary) colored button by default. btn-default is a grey (primary-low) colored button by default."
+login_icon:
+  type: string
+  default: "user"
+  description: "Add icon to Log In button."
+signup_icon:
+  type: string
+  default: "sign-in-alt"
+  description: "Add icon to Sign Up button."
+svg_icons: 
+  default: ""
+  type: "list"
+  list_type: "compact"
+  description: "List of FontAwesome 5 icons used in this theme component"
 custom_url_enabled:
   type: bool
   default: false
-  description: Enable the custom login url and custom signup url options. The normal behaviour (if you leave this option unchecked) is for the Login or Sign Up modal to appear on the current topic page.
+  description: "Enable the custom login url and custom signup url options. The normal behaviour (if you leave this option unchecked) is for the Login or Sign Up modal to appear on the current topic page."
 custom_login_url:
   type: string
   default: "/login"
-  description: For example, /login is the home page with the “Login” modal displayed.
+  description: "For example, /login is the home page with the “Login” modal displayed."
 custom_signup_url:
   type: string
   default: "/signup"
-  description: For example, /signup is the home page with the “Sign Up” modal displayed.
+  description: "For example, /signup is the home page with the “Sign Up” modal displayed."  
 gate_footer_position:
   default: center
   type: enum
   choices:
     - left
     - right
-  description: Footer buttons/links position.
+  description: "Footer buttons/links position."
 gate_show_only_once:
   type: bool
   default: false
-  description: Guest Gate modal show only once per session.
+  description: "Guest Gate modal show only once per session."
 custom_gate_enabled:
   type: bool
   default: false
-  description: Enable it if you want to customize the modal.
+  description: "Enable it if you want to customize the modal."
 custom_gate_image:
   type: upload
   default: ""
-  description: Upload an image to display at the top of the modal.
+  description: "Upload an image to display at the top of the modal."
 custom_gate_image_width:
   type: string
   default: "150px"
-  description: The uploaded image width. You can use px, % etc, e.g. 100% will add a full modal width (minus padding) image.
+  description: "The uploaded image width. You can use px, % etc, e.g. 100% will add a full modal width (minus padding) image."
 custom_gate_big_text_color:
   type: string
   default: "var(--primary)"
-  description: The “big text” appears below the image. You can set the color of the text.
+  description: "The “big text” appears below the image. You can set the color of the text."
 custom_gate_little_text_color:
   type: string
   default: "var(--primary)"
-  description: The “little text” appears below the big text. You can set the color of the text.
+  description: "The “little text” appears below the big text. You can set the color of the text."
 custom_gate_background_color:
   type: string
   default: "var(--secondary)"
-  description: Change the modal background color.
+  description: "Change the modal background color."
 custom_gate_link_color:
   type: string
   default: "var(--primary-medium)"
-  description: Change the footer link color. This applies if the use gate buttons setting is disabled and you have set up a custom gate.
+  description: "Change the footer link color. This applies if the use gate buttons setting is disabled and you have set up a custom gate."