kiso_themes 1.0.2

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_notifications.html.erb

@@ -0,0 +1,59 @@
+<h5>NOTIFICATIONS</h5>
+<ul class="list-unstyled">
+  <li class="d-flex align-items-center mb-4">
+    <div class="mr-auto">
+      <h6>DIGESTS</h6>
+      <p class="text-muted small">Choose wheather daily, weekly or monthly digests are emailed to you.</p>
+    </div>
+    <select class="custom-select small">
+      <option value="1">Daily</option>
+      <option value="2">Weekly</option>
+      <option value="3">Monthly</option>
+    </select>
+  </li>
+  <li class="d-flex align-items-center mb-4">
+    <div class="mr-auto">
+      <h6>SMS ALERTS</h6>
+      <p class="text-muted small">Choose whether to enable SMS alerts sent to you.</p>
+    </div>
+    <input type="checkbox" name="checkbox" class="bootstrap-switch" data-on-color="primary" checked/>
+  </li>
+  <li class="d-flex align-items-center mb-4">
+    <div class="mr-auto">
+      <h6>@ NOTIFICATIONS</h6>
+      <p class="text-muted small">Recieve a notification when some @'s you.</p>
+    </div>
+    <input type="checkbox" name="checkbox" class="bootstrap-switch" data-on-color="primary" checked/>
+  </li>
+  <li class="d-flex align-items-center mb-4">
+    <div class="mr-auto">
+      <h6>PROJECT ARCHIVE NOTIFICATIONS</h6>
+      <p class="text-muted small">Receive a notification when someone archives a project.</p>
+    </div>
+    <input type="checkbox" name="checkbox" class="bootstrap-switch" data-on-color="primary" checked/>
+  </li>
+  <li class="d-flex align-items-center mb-4">
+    <div class="mr-auto">
+      <h6>DEADLINE NOTIFICATIONS</h6>
+      <p class="text-muted small">Receive a notification when a deadline is about to expire.</p>
+    </div>
+    <input type="checkbox" name="checkbox" class="bootstrap-switch" data-on-color="primary" checked/>
+  </li>
+  <li class="d-flex align-items-center mb-4">
+    <div class="mr-auto">
+      <h6>MICROMANAGEMENT NOTIFICATIONS</h6>
+      <p class="text-muted small">Receive a notification when someone is about to micromanage the hell out of you.</p>
+    </div>
+    <input type="checkbox" name="checkbox" class="bootstrap-switch" data-on-color="primary" checked/>
+  </li>
+  <li class="d-flex align-items-center mb-4">
+    <div class="mr-auto">
+      <h6>MARKETING EMAILS</h6>
+      <p class="text-muted small">Opt in to our fantastical marketing emails.</p>
+    </div>
+    <input type="checkbox" name="checkbox" class="bootstrap-switch" data-on-color="primary" checked/>
+  </li>
+</ul>
+<div class="actions d-flex">
+  <button class="btn btn-success ml-auto">Save Changes</button>
+</div>

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_notifications.html.haml

@@ -0,0 +1,42 @@
+%h5 NOTIFICATIONS
+%ul.list-unstyled
+  %li.d-flex.align-items-center.mb-4
+    .mr-auto
+      %h6 DIGESTS
+      %p.text-muted.small Choose wheather daily, weekly or monthly digests are emailed to you.
+    %select.custom-select.small
+      %option{value: "1"} Daily
+      %option{value: "2"} Weekly
+      %option{value: "3"} Monthly
+  %li.d-flex.align-items-center.mb-4
+    .mr-auto
+      %h6 SMS ALERTS
+      %p.text-muted.small Choose whether to enable SMS alerts sent to you.
+    %input.bootstrap-switch{checked: "checked", "data-on-color" => "primary", name: "checkbox", type: "checkbox"}/
+  %li.d-flex.align-items-center.mb-4
+    .mr-auto
+      %h6 @ NOTIFICATIONS
+      %p.text-muted.small Recieve a notification when some @'s you.
+    %input.bootstrap-switch{checked: "checked", "data-on-color" => "primary", name: "checkbox", type: "checkbox"}/
+  %li.d-flex.align-items-center.mb-4
+    .mr-auto
+      %h6 PROJECT ARCHIVE NOTIFICATIONS
+      %p.text-muted.small Receive a notification when someone archives a project.
+    %input.bootstrap-switch{checked: "checked", "data-on-color" => "primary", name: "checkbox", type: "checkbox"}/
+  %li.d-flex.align-items-center.mb-4
+    .mr-auto
+      %h6 DEADLINE NOTIFICATIONS
+      %p.text-muted.small Receive a notification when a deadline is about to expire.
+    %input.bootstrap-switch{checked: "checked", "data-on-color" => "primary", name: "checkbox", type: "checkbox"}/
+  %li.d-flex.align-items-center.mb-4
+    .mr-auto
+      %h6 MICROMANAGEMENT NOTIFICATIONS
+      %p.text-muted.small Receive a notification when someone is about to micromanage the hell out of you.
+    %input.bootstrap-switch{checked: "checked", "data-on-color" => "primary", name: "checkbox", type: "checkbox"}/
+  %li.d-flex.align-items-center.mb-4
+    .mr-auto
+      %h6 MARKETING EMAILS
+      %p.text-muted.small Opt in to our fantastical marketing emails.
+    %input.bootstrap-switch{checked: "checked", "data-on-color" => "primary", name: "checkbox", type: "checkbox"}/
+.actions.d-flex
+  %button.btn.btn-success.ml-auto Save Changes

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_notifications.html.slim

@@ -0,0 +1,42 @@
+h5 NOTIFICATIONS
+ul.list-unstyled
+  li.d-flex.align-items-center.mb-4
+    .mr-auto
+      h6 DIGESTS
+      p.text-muted.small Choose wheather daily, weekly or monthly digests are emailed to you.
+    select.custom-select.small
+      option value: "1"  Daily
+      option value: "2"  Weekly
+      option value: "3"  Monthly
+  li.d-flex.align-items-center.mb-4
+    .mr-auto
+      h6 SMS ALERTS
+      p.text-muted.small Choose whether to enable SMS alerts sent to you.
+    input.bootstrap-switch checked: "checked" data-on-color="primary", name: "checkbox", type: "checkbox" /
+  li.d-flex.align-items-center.mb-4
+    .mr-auto
+      h6 @ NOTIFICATIONS
+      p.text-muted.small Recieve a notification when some @'s you.
+    input.bootstrap-switch checked: "checked" data-on-color="primary", name: "checkbox", type: "checkbox" /
+  li.d-flex.align-items-center.mb-4
+    .mr-auto
+      h6 PROJECT ARCHIVE NOTIFICATIONS
+      p.text-muted.small Receive a notification when someone archives a project.
+    input.bootstrap-switch checked: "checked" data-on-color="primary", name: "checkbox", type: "checkbox" /
+  li.d-flex.align-items-center.mb-4
+    .mr-auto
+      h6 DEADLINE NOTIFICATIONS
+      p.text-muted.small Receive a notification when a deadline is about to expire.
+    input.bootstrap-switch checked: "checked" data-on-color="primary", name: "checkbox", type: "checkbox" /
+  li.d-flex.align-items-center.mb-4
+    .mr-auto
+      h6 MICROMANAGEMENT NOTIFICATIONS
+      p.text-muted.small Receive a notification when someone is about to micromanage the hell out of you.
+    input.bootstrap-switch checked: "checked" data-on-color="primary", name: "checkbox", type: "checkbox" /
+  li.d-flex.align-items-center.mb-4
+    .mr-auto
+      h6 MARKETING EMAILS
+      p.text-muted.small Opt in to our fantastical marketing emails.
+    input.bootstrap-switch checked: "checked" data-on-color="primary", name: "checkbox", type: "checkbox" /
+.actions.d-flex
+  button.btn.btn-success.ml-auto Save Changes

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_plan.html.erb

@@ -0,0 +1,70 @@
+<h5>PLAN</h5>
+<p>Your current plan is highlighted below, and you can change at any time.</p>
+<div class="plan-selector">
+  <form action="">
+    <div class="form-check">
+      <label class="custom-control custom-radio">
+        <input name="plan-level" type="radio" class="custom-control-input" checked>
+        <span class="custom-control-indicator"></span>
+        <span class="custom-control-description d-flex w-100">
+          <div class="details">
+            <div class="plan-name">Indie</div>
+            <div class="plan-description">10 projects, 500MB storage</div>
+          </div>
+          <div class="price">
+            $9/mo
+          </div>
+        </span>
+      </label>
+    </div>
+    <div class="form-check">
+      <label class="custom-control custom-radio">
+        <input name="plan-level" type="radio" class="custom-control-input">
+        <div class="highlight"></div>
+        <span class="custom-control-indicator"></span>
+        <span class="custom-control-description d-flex w-100">
+          <div class="details">
+            <div class="plan-name">Basic</div>
+            <div class="plan-description">20 projects, 1500MB storage</div>
+          </div>
+          <div class="price">
+            $19/mo
+          </div>
+        </span>
+      </label>
+    </div>
+    <div class="form-check">
+      <label class="custom-control custom-radio">
+        <input name="plan-level" type="radio" class="custom-control-input">
+        <span class="custom-control-indicator"></span>
+        <span class="custom-control-description d-flex w-100">
+          <div class="details">
+            <div class="plan-name">Pro</div>
+            <div class="plan-description">30 projects, 2500MB storage</div>
+          </div>
+          <div class="price">
+            $29/mo
+          </div>
+        </span>
+      </label>
+    </div>
+    <div class="form-check">
+      <label class="custom-control custom-radio">
+        <input name="plan-level" type="radio" class="custom-control-input">
+        <span class="custom-control-indicator"></span>
+        <span class="custom-control-description d-flex w-100">
+          <div class="details">
+            <div class="plan-name">Master</div>
+            <div class="plan-description">100 projects, Unlimited storage</div>
+          </div>
+          <div class="price">
+            $49/mo
+          </div>
+        </span>
+      </label>
+    </div>
+  </form>
+  <div class="actions d-flex">
+    <button class="btn btn-success ml-auto">Save Changes</button>
+  </div>
+</div>

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_plan.html.haml

@@ -0,0 +1,47 @@
+%h5 PLAN
+%p Your current plan is highlighted below, and you can change at any time.
+.plan-selector
+  %form{action: ""}
+    .form-check
+      %label.custom-control.custom-radio
+        %input.custom-control-input{checked: "checked", name: "plan-level", type: "radio"}/
+        %span.custom-control-indicator
+        %span.custom-control-description.d-flex.w-100
+          .details
+            .plan-name Indie
+            .plan-description 10 projects, 500MB storage
+          .price
+            $9/mo
+    .form-check
+      %label.custom-control.custom-radio
+        %input.custom-control-input{name: "plan-level", type: "radio"}/
+        .highlight
+        %span.custom-control-indicator
+        %span.custom-control-description.d-flex.w-100
+          .details
+            .plan-name Basic
+            .plan-description 20 projects, 1500MB storage
+          .price
+            $19/mo
+    .form-check
+      %label.custom-control.custom-radio
+        %input.custom-control-input{name: "plan-level", type: "radio"}/
+        %span.custom-control-indicator
+        %span.custom-control-description.d-flex.w-100
+          .details
+            .plan-name Pro
+            .plan-description 30 projects, 2500MB storage
+          .price
+            $29/mo
+    .form-check
+      %label.custom-control.custom-radio
+        %input.custom-control-input{name: "plan-level", type: "radio"}/
+        %span.custom-control-indicator
+        %span.custom-control-description.d-flex.w-100
+          .details
+            .plan-name Master
+            .plan-description 100 projects, Unlimited storage
+          .price
+            $49/mo
+  .actions.d-flex
+    %button.btn.btn-success.ml-auto Save Changes

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_plan.html.slim

@@ -0,0 +1,47 @@
+h5 PLAN
+p Your current plan is highlighted below, and you can change at any time.
+.plan-selector
+  form action: "" 
+    .form-check
+      label.custom-control.custom-radio
+        input.custom-control-input checked: "checked", name: "plan-level", type: "radio" /
+        span.custom-control-indicator
+        span.custom-control-description.d-flex.w-100
+          .details
+            .plan-name Indie
+            .plan-description 10 projects, 500MB storage
+          .price
+            | $9/mo
+    .form-check
+      label.custom-control.custom-radio
+        input.custom-control-input name: "plan-level", type: "radio" /
+        .highlight
+        span.custom-control-indicator
+        span.custom-control-description.d-flex.w-100
+          .details
+            .plan-name Basic
+            .plan-description 20 projects, 1500MB storage
+          .price
+            | $19/mo
+    .form-check
+      label.custom-control.custom-radio
+        input.custom-control-input name: "plan-level", type: "radio" /
+        span.custom-control-indicator
+        span.custom-control-description.d-flex.w-100
+          .details
+            .plan-name Pro
+            .plan-description 30 projects, 2500MB storage
+          .price
+            | $29/mo
+    .form-check
+      label.custom-control.custom-radio
+        input.custom-control-input name: "plan-level", type: "radio" /
+        span.custom-control-indicator
+        span.custom-control-description.d-flex.w-100
+          .details
+            .plan-name Master
+            .plan-description 100 projects, Unlimited storage
+          .price
+            | $49/mo
+  .actions.d-flex
+    button.btn.btn-success.ml-auto Save Changes

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_profile.html.erb

@@ -0,0 +1,65 @@
+
+<h5 class="mb-4">PROFILE</h5>
+<form>
+  <div class="form-group">
+    <label>Name</label>
+    <input type="text" class="form-control" placeholder="Enter email" value="Johnny Appleseed">
+  </div>
+  <div class="form-group">
+    <label>Email address</label>
+    <input type="email" class="form-control" placeholder="Enter email" value="johnny@appleseed.com">
+  </div>
+  <div class="form-group">
+    <label>Timezone</label>
+    <div>
+      <select class="custom-select w-100" id="user_time_zone">
+        <option value="Hawaii">(GMT-10:00) Hawaii</option>
+        <option value="Alaska">(GMT-09:00) Alaska</option>
+        <option value="Pacific Time (US &amp; Canada)"> (GMT-08:00) Pacific Time (US &amp; Canada) </option>
+        <option value="Arizona">(GMT-07:00) Arizona</option>
+        <option value="Mountain Time (US &amp; Canada)">(GMT-07:00) Mountain Time (US &amp; Canada)</option>
+        <option value="Central Time (US &amp; Canada)" selected="selected">(GMT-06:00) Central Time (US &amp; Canada)</option>
+        <option value="Eastern Time (US &amp; Canada)">(GMT-05:00) Eastern Time (US &amp; Canada)</option>
+        <option value="Indiana (East)">(GMT-05:00) Indiana (East)</option>
+        <option value="" disabled="disabled">-------------</option>
+        <option value="American Samoa">(GMT-11:00) American Samoa</option>
+        <option value="International Date Line West">(GMT-11:00) International Date Line West</option>
+        <option value="Midway Island">(GMT-11:00) Midway Island</option>
+        <option value="Tijuana">(GMT-08:00) Tijuana</option>
+        <option value="Chihuahua">(GMT-07:00) Chihuahua</option>
+        <option value="Mazatlan">(GMT-07:00) Mazatlan</option>
+        <option value="Central America">(GMT-06:00) Central America</option>
+        <option value="Guadalajara">(GMT-06:00) Guadalajara</option>
+        <option value="Mexico City">(GMT-06:00) Mexico City</option>
+        <option value="Monterrey">(GMT-06:00) Monterrey</option>
+      </select>
+    </div>
+  </div>
+  <div class="form-group">
+    <label>Street &amp; Number</label>
+    <input type="text" class="form-control" placeholder="Street & Number" value="5th Avenue 3053">
+  </div>
+  <div class="form-group">
+    <label>City</label>
+    <input type="text" class="form-control" placeholder="City" value="San Francisco">
+  </div>
+  <div class="form-group">
+    <label>ZIP</label>
+    <input type="text" class="form-control" placeholder="ZIP" value="3352">
+  </div>
+  <div class="form-group">
+    <label>New password</label>
+    <input type="password" class="form-control">
+  </div>
+  <div class="form-group">
+    <label>Confirm new password</label>
+    <input type="password" class="form-control">
+  </div>
+  <div class="form-group">
+    <label>Current password</label>
+    <input type="password" class="form-control">
+  </div>
+  <div class="form-group d-flex">
+    <input type="submit" class="btn btn-success ml-auto" value="Save changes">
+  </div>
+</form>

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_profile.html.haml

@@ -0,0 +1,51 @@
+%h5.mb-4 PROFILE
+%form
+  .form-group
+    %label Name
+    %input.form-control{placeholder: "Enter email", type: "text", value: "Johnny Appleseed"}
+    .form-group
+      %label Email address
+      %input.form-control{placeholder: "Enter email", type: "email", value: "johnny@appleseed.com"}
+      .form-group
+        %label Timezone
+        %div
+          %select#user_time_zone.custom-select.w-100
+            %option{value: "Hawaii"} (GMT-10:00) Hawaii
+            %option{value: "Alaska"} (GMT-09:00) Alaska
+            %option{value: "Pacific Time (US & Canada)"} (GMT-08:00) Pacific Time (US  Canada)
+            %option{value: "Arizona"} (GMT-07:00) Arizona
+            %option{value: "Mountain Time (US & Canada)"} (GMT-07:00) Mountain Time (US  Canada)
+            %option{selected: "selected", value: "Central Time (US & Canada)"} (GMT-06:00) Central Time (US  Canada)
+            %option{value: "Eastern Time (US & Canada)"} (GMT-05:00) Eastern Time (US  Canada)
+            %option{value: "Indiana (East)"} (GMT-05:00) Indiana (East)
+            %option{disabled: "disabled", value: ""} -------------
+            %option{value: "American Samoa"} (GMT-11:00) American Samoa
+            %option{value: "International Date Line West"} (GMT-11:00) International Date Line West
+            %option{value: "Midway Island"} (GMT-11:00) Midway Island
+            %option{value: "Tijuana"} (GMT-08:00) Tijuana
+            %option{value: "Chihuahua"} (GMT-07:00) Chihuahua
+            %option{value: "Mazatlan"} (GMT-07:00) Mazatlan
+            %option{value: "Central America"} (GMT-06:00) Central America
+            %option{value: "Guadalajara"} (GMT-06:00) Guadalajara
+            %option{value: "Mexico City"} (GMT-06:00) Mexico City
+            %option{value: "Monterrey"} (GMT-06:00) Monterrey
+      .form-group
+        %label Street  Number
+        %input.form-control{placeholder: "Street  Number", type: "text", value: "5th Avenue 3053"}
+        .form-group
+          %label City
+          %input.form-control{placeholder: "City", type: "text", value: "San Francisco"}
+          .form-group
+            %label ZIP
+            %input.form-control{placeholder: "ZIP", type: "text", value: "3352"}
+            .form-group
+              %label New password
+              %input.form-control{type: "password"}
+              .form-group
+                %label Confirm new password
+                %input.form-control{type: "password"}
+                .form-group
+                  %label Current password
+                  %input.form-control{type: "password"}
+                  .form-group.d-flex
+                    %input.btn.btn-success.ml-auto{type: "submit", value: "Save changes"}

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_profile.html.slim

@@ -0,0 +1,51 @@
+h5.mb-4 PROFILE
+form
+  .form-group
+    label Name
+    input.form-control placeholder: "Enter email", type: "text", value: "Johnny Appleseed" 
+    .form-group
+      label Email address
+      input.form-control placeholder: "Enter email", type: "email", value: "johnny@appleseed.com" 
+      .form-group
+        label Timezone
+        div
+          select#user_time_zone.custom-select.w-100
+            option value: "Hawaii"  (GMT-10:00) Hawaii
+            option value: "Alaska"  (GMT-09:00) Alaska
+            option value: "Pacific Time (US & Canada)"  (GMT-08:00) Pacific Time (US  Canada)
+            option value: "Arizona"  (GMT-07:00) Arizona
+            option value: "Mountain Time (US & Canada)"  (GMT-07:00) Mountain Time (US  Canada)
+            option selected: "selected", value: "Central Time (US & Canada)"  (GMT-06:00) Central Time (US  Canada)
+            option value: "Eastern Time (US & Canada)"  (GMT-05:00) Eastern Time (US  Canada)
+            option value: "Indiana (East)"  (GMT-05:00) Indiana (East)
+            option disabled: "disabled", value: ""  -------------
+            option value: "American Samoa"  (GMT-11:00) American Samoa
+            option value: "International Date Line West"  (GMT-11:00) International Date Line West
+            option value: "Midway Island"  (GMT-11:00) Midway Island
+            option value: "Tijuana"  (GMT-08:00) Tijuana
+            option value: "Chihuahua"  (GMT-07:00) Chihuahua
+            option value: "Mazatlan"  (GMT-07:00) Mazatlan
+            option value: "Central America"  (GMT-06:00) Central America
+            option value: "Guadalajara"  (GMT-06:00) Guadalajara
+            option value: "Mexico City"  (GMT-06:00) Mexico City
+            option value: "Monterrey"  (GMT-06:00) Monterrey
+      .form-group
+        label Street  Number
+        input.form-control placeholder: "Street  Number", type: "text", value: "5th Avenue 3053" 
+        .form-group
+          label City
+          input.form-control placeholder: "City", type: "text", value: "San Francisco" 
+          .form-group
+            label ZIP
+            input.form-control placeholder: "ZIP", type: "text", value: "3352" 
+            .form-group
+              label New password
+              input.form-control type: "password" 
+              .form-group
+                label Confirm new password
+                input.form-control type: "password" 
+                .form-group
+                  label Current password
+                  input.form-control type: "password" 
+                  .form-group.d-flex
+                    input.btn.btn-success.ml-auto type: "submit", value: "Save changes" 

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_support.html.erb

@@ -0,0 +1,76 @@
+<h5>SUPPORT</h5>
+<div class="container">
+  <div class="row mb-4">
+    <div class="col-12">
+      <div class="form-group">
+        <label for="exampleFormControlInput1" class="d-flex align-items-center"><h6 class="mr-auto">Search Knowledge Base</h6><p class="small text-muted m-0">2,121 articles</p></label>
+        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Type your question here...">
+      </div>
+    </div>
+  </div>
+  <div class="row mb-4">
+    <div class="col-12">
+      <div class="d-flex align-items-center">
+        <h6 class="mr-auto">Recent Support Forum Activity</h6>
+        <a href="javascript:" class="btn btn-link small m-0">Visit Forum &rarr;</a>
+      </div>
+      <table class='table table-responsive-sm'>
+        <thead>
+          <th>
+            Thread Title
+          </th>
+          <th>
+            Date Opened
+          </th>
+          <th>
+            Last Activity
+          </th>
+        </thead>
+        <tr>
+          <td>
+            <a href="javascript:">How do I install this on Windows?</a>
+          </td>
+          <td>
+            2 days ago
+          </td>
+          <td>
+            10 mins ago
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a href="javascript:">Error opening main screen...</a>
+          </td>
+          <td>
+            2 days ago
+          </td>
+          <td>
+            10 mins ago
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a href="javascript:">Colossus demands to know my location?</a>
+          </td>
+          <td>
+            2 days ago
+          </td>
+          <td>
+            10 mins ago
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a href="javascript:">Reticulating splines is taking too long!</a>
+          </td>
+          <td>
+            2 days ago
+          </td>
+          <td>
+            10 mins ago
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_support.html.haml

@@ -0,0 +1,50 @@
+%h5 SUPPORT
+.container
+  .row.mb-4
+    .col-12
+      .form-group
+        %label.d-flex.align-items-center{for: "exampleFormControlInput1"}
+          %h6.mr-auto Search Knowledge Base
+          %p.small.text-muted.m-0 2,121 articles
+        %input#exampleFormControlInput1.form-control{placeholder: "Type your question here...", type: "email"}/
+  .row.mb-4
+    .col-12
+      .d-flex.align-items-center
+        %h6.mr-auto Recent Support Forum Activity
+        %a.btn.btn-link.small.m-0{href: "javascript:"} Visit Forum →
+      %table.table.table-responsive-sm
+        %thead
+          %th
+            Thread Title
+          %th
+            Date Opened
+          %th
+            Last Activity
+        %tr
+          %td
+            %a{href: "javascript:"} How do I install this on Windows?
+          %td
+            2 days ago
+          %td
+            10 mins ago
+        %tr
+          %td
+            %a{href: "javascript:"} Error opening main screen...
+          %td
+            2 days ago
+          %td
+            10 mins ago
+        %tr
+          %td
+            %a{href: "javascript:"} Colossus demands to know my location?
+          %td
+            2 days ago
+          %td
+            10 mins ago
+        %tr
+          %td
+            %a{href: "javascript:"} Reticulating splines is taking too long!
+          %td
+            2 days ago
+          %td
+            10 mins ago

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_support.html.slim

@@ -0,0 +1,50 @@
+h5 SUPPORT
+.container
+  .row.mb-4
+    .col-12
+      .form-group
+        label.d-flex.align-items-center for: "exampleFormControlInput1" 
+          h6.mr-auto Search Knowledge Base
+          p.small.text-muted.m-0 2,121 articles
+        input#exampleFormControlInput1.form-control placeholder: "Type your question here...", type: "email" /
+  .row.mb-4
+    .col-12
+      .d-flex.align-items-center
+        h6.mr-auto Recent Support Forum Activity
+        a.btn.btn-link.small.m-0 href: "javascript:"  Visit Forum →
+      table.table.table-responsive-sm
+        thead
+          th
+            | Thread Title
+          th
+            | Date Opened
+          th
+            | Last Activity
+        tr
+          td
+            a href: "javascript:"  How do I install this on Windows?
+          td
+            | 2 days ago
+          td
+            | 10 mins ago
+        tr
+          td
+            a href: "javascript:"  Error opening main screen...
+          td
+            | 2 days ago
+          td
+            | 10 mins ago
+        tr
+          td
+            a href: "javascript:"  Colossus demands to know my location?
+          td
+            | 2 days ago
+          td
+            | 10 mins ago
+        tr
+          td
+            a href: "javascript:"  Reticulating splines is taking too long!
+          td
+            | 2 days ago
+          td
+            | 10 mins ago