From 7230c1a5f136876c315266b370b6b34684e0fe51 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Jul 04 2018 00:36:34 +0000
Subject: restyle the new/edit issues pages


Fixes #3378

Signed-off-by: Ryan Lerch <rlerch@redhat.com>

---

diff --git a/pagure/static/pagure.css b/pagure/static/pagure.css
index 463fe02..b0287f4 100644
--- a/pagure/static/pagure.css
+++ b/pagure/static/pagure.css
@@ -861,3 +861,6 @@ a.nav-link.btn{
   color:#777;
   border:0;
 }
+
+ 
+
diff --git a/pagure/templates/new_issue.html b/pagure/templates/new_issue.html
index 9245c1e..9b72690 100644
--- a/pagure/templates/new_issue.html
+++ b/pagure/templates/new_issue.html
@@ -33,131 +33,174 @@
         issueid=issueid) }}" method="post"
         enctype="multipart/form-data">
   {% endif %}
+  {{form.csrf_token}}
   <div class="row">
+  {% if (g.repo_user and not type) or (g.repo_user and type == 'new') %}
+  <div class="col-12">
+    <h4 class="font-weight-bold mb-4">New Issue</h4>
+  </div>
   <div class="col-md-8">
-    <div class="card">
-      <div class="card-header">
-        {% if not type or type == 'new' %}
-        New issue
-        {% elif type and type == 'edit' %}
-        Edit issue #{{ issueid }}
-        {% endif %}
-      </div>
-      <div class="card-body">
-        {{ render_bootstrap_field(form.title, field_description="Gist of your issue") }}
+  {% else %}
+  <div class="col-md-8 mx-auto">
+      {% if not type or type == 'new' %}
+      <h4 class="font-weight-bold mb-4">New Issue</h4>
+      {% elif type and type == 'edit' %}
+      <h4 class="font-weight-bold mb-4">Edit Issue</h4>
+      {% endif %}
+  {% endif %}
+    <div>
         {% if type == 'edit' %}
-            {{ render_bootstrap_field(form.status, field_description="bug status") }}
+          {{ form.status(class_="hidden") }}
+          <div class="d-flex align-items-center">
+            <h4 class="mb-0 pr-1"><i class="fa fa-fw text-success fa-exclamation-circle"></i></h4>
+            <h4 class="text-success font-weight-bold mb-0 pr-1">#{{issue.id}}</h4>
         {% endif %}
-        {% if types %}
-        <fieldset class="form-group  ">
-          <strong><label for="status">Type</label></strong>
-          <select class="form-control custom-select" id="type" name="type">
-            {% for type in types %}
-              {% if type == 'default' %}
-                <option selected value="{{ type }}">{{ type }}</option>
-              {% else %}
-                <option value="{{ type }}">{{ type }}</option>
-              {% endif %}
-            {% endfor %}
-          </select>
-          <div>
-            <small class="text-muted">Ticket type</small>
+        {{ form.title(class_="form-control", placeholder="Issue Title", required="required")|safe }}
+        {% if form.title.errors %}
+        <span class="float-right text-danger">
+          <small>
+          {% for error in form.title.errors %}
+            {{ error }}&nbsp;
+          {% endfor %}
+          </small>
+        </span>
+        {% endif %}
+        {% if type == 'edit' %}
           </div>
-        </fieldset>
         {% endif %}
-        {{ render_bootstrap_field(form.private, field_description="Do you want to keep the issue private?") }}
-          <fieldset class="form-group">
-            <label for="issue_content"><strong>Description<span class="error">*</span></strong></label>
-            <small class="text-muted pull-xs-right">
-              <span class="btn btn-sm btn-secondary inactive"
-                aria-pressed="false" id="previewinmarkdown">Preview</span>
-            </small>
-            <textarea class="form-control" rows="8" id="issue_content" name="issue_content"
-                placeholder="Describe your issue">
-              {%- if issue %}{{ issue.content }}{%
-                  elif form.issue_content.data %}{{ form.issue_content.data }}{%
-                  elif default %}{{ default }}{%
-              endif -%}
-            </textarea>
-            <div>
 
-              {% if form.issue_content.errors %}
-              <span class="pull-xs-right text-danger">
-                <small>
-                {% for error in form.issue_content.errors %}
-                  {{ error }}&nbsp;
-                {% endfor %}
-                </small>
-              </span>
-              {% endif %}
-            </div>
-            <div id="preview">
-            </div>
-          </fieldset>
-        Attach file <input id="file-picker" type="file" name="filestream" accept="image/*" multiple>
+        <div class="card mt-2">       
+            <div class="card-header pb-0 pt-1 bg-light">
+              <div class="row">
+                <div class="col align-self-center">
+                </div>
+                <div class="col d-flex">
+                    {% if types %}
+                    {% if (types | length == 1 and not default) or (types | length > 1)%}
+                    <div class="btn-group ml-auto" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="">
+                        <button title="Issue Templates" type="button" class="btn btn-outline-secondary border-0 dropdown-toggle qr-btn" data-toggle="dropdown" aria-expanded="false">
+                          <span class="fa fa-list-ul"></span> <span class="caret"></span>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" style="position: absolute; transform: translate3d(-110px, 31px, 0px); top: 0px; left: 0px; will-change: transform;">
+                            <div class="dropdown-header">Issue Templates</div>
+                            {% for type in types %}
+                            <a href="javascript:void(0)" class="issue-template dropdown-item" data-value="{{type}}">{{type}}</a>
+                          {% endfor %}
+                          
+                        </div>
+                      </div>
+                      {% else %}
+                        {% set notemplates = True %}
+                      {% endif %}
+                      {% else %}
+                        {% set notemplates = True %}
+                      {% endif %}
+                        <ul class="nav nav-tabs {{'ml-auto' if notemplates}}">
+                          <li class="nav-item">
+                            <a class="nav-link" id="previewinmarkdown" href="javascript:void(0)">Preview</a>
+                          </li>
+                          <li class="nav-item">
+                            <a class="nav-link active" id="editinmarkdown" href="javascript:void(0)">Edit</a>
+                          </li>
+                        </ul>
 
-        <p class="buttons indent">
-          {% if not type or type == 'new' %}
-          <input type="submit" class="btn btn-primary" value="Create">
-          {% elif type and type == 'edit' %}
-          <input type="submit" class="btn btn-primary" value="Update">
-          {% endif %}
-          <input type="button" class="btn btn-secondary pull-md-right"
-            value="Cancel" onclick="history.back();">
-          {{ form.csrf_token }}
-          <a href="https://docs.pagure.org/pagure/usage/markdown.html"
-            target="_blank" rel="noopener noreferrer">Markdown Syntax</a>
-        </p>
+                  </div>
+              </div>
+            </div>
+            <div class="card-body">
+                      <textarea class="form-control" rows=8 id="issue_content" name="issue_content"
+                      placeholder="Enter your comment here" tabindex=1 required>
+                      {%- if issue %}{{ issue.content }}{%
+                        elif form.issue_content.data %}{{ form.issue_content.data }}{%
+                        elif default %}{{ default }}{%
+                    endif -%}
+                    </textarea>
+                    {% if form.issue_content.errors %}
+                    <span class="float-right text-danger">
+                      <small>
+                      {% for error in form.issue_content.errors %}
+                        {{ error }}&nbsp;
+                      {% endfor %}
+                      </small>
+                    </span>
+                    {% endif %}
+                      <div id="preview">
+                      </div>
+                      <div class="mt-2">
+                          <label class="custom-file comment-upload-browse font-size-09">
+                              <input type="file" id="file-picker" class="custom-file-input" name="file" accept="image/*" multiple tabindex=3>
+                              <span class="custom-file-control">
+                                <span>Browse to attach images or drag them into the comment field</span>
+                              </span>
+                          </label>
+                          <div id="progress" class="progress" style="display: none; height:22px">
+                            <div id="progress-bar" class="progress-bar" style="height:22px; line-height: 2em;">0%</div>
+                          </div>
+                      </div>
+              </div>
+              <div class="card-footer bg-light">
+                <div class="d-flex align-items-center">
+                  <small>Comments use <a href="https://docs.pagure.org/pagure/usage/markdown.html"
+                     target="_blank" rel="noopener noreferrer" class="notblue">Markdown Syntax</a></small>
+                  <div class="ml-auto form-check pt-2 mr-3" title="Private issue?">
+                          {{ form.private(class_="form-check-input") }}
+                          <label class="form-check-label pl-2" for="private">Private</label>
+                  </div>
+                  <div>
+                    <div class="btn-group">
+                      {% if not type or type == 'new' %}
+                      <input type="submit" class="btn btn-primary" value="Create Issue">
+                      {% elif type and type == 'edit' %}
+                      <input type="submit" class="btn btn-primary" value="Update Issue #{{issue.id}}">
+                      {% endif %}
+                    </div>
+                  </div>
+                </div>
+              </div>
+        </div>
       </div>
-    </div>
   </div>
 
   {% if g.repo_user and not type or type == 'new' %}
   <div class="col-md-4">
-    <div class="card">
-      <div class="card-body">
+    <div class="mb-4">
+        <h5 class="d-flex align-items-center font-weight-bold border border-primary border-left-0 border-right-0 border-top-0">
+          <div class="py-2 text-semimuted text-uppercase font-size-09">Metadata</div>
+        </h5>
+
+        <fieldset class="form-group">
+            <label class="mb-1 pl-1 text-semimuted"> <i class="fa fa-fw fa-user-plus"></i> <strong>Assignee</strong></label>
+            <input class="form-control" name="assignee" id="assignee"
+              placeholder="username"
+              value="{{ request.form.assignee or '' }}" />
+        </fieldset>
 
         <fieldset class="form-group">
-          <label for="tag"><strong>Tags</strong></label>
+           <label class="mb-1 pl-1 text-semimuted"> <i class="fa fa-fw fa-tag"></i> <strong>Tags</strong></label>
            <input id="tag" class="form-control" type="text"
               placeholder="tag1, tag2" name="tag"
               title="comma separated list of tags"
               value="{{ request.form.tags or '' }}" />
         </fieldset>
 
+        {% if repo.priorities %}
         <fieldset class="form-group">
-          <label for="assignee"><strong>Assignee</strong></label>
-          <input class="form-control" name="assignee" id="assignee"
-            placeholder="username"
-            value="{{ request.form.assignee or '' }}" />
-        </fieldset>
-
-        {{ render_bootstrap_field(form.priority) }}
-        {{ render_bootstrap_field(form.milestone) }}
+            <label class="mb-1 pl-1 text-semimuted"> <i class="fa fa-fw fa-bolt"></i> <strong>Priority</strong></label>
+            {{form.priority}}
+         </fieldset>
+        {% endif %}
 
-      </div>
+        {% if repo.milestones %}
+        <fieldset class="form-group">
+            <label class="mb-1 pl-1 text-semimuted"> <i class="fa fa-fw fa-map-signs"></i> <strong>Milestone</strong></label>
+            {{form.milestone}}
+         </fieldset>
+        {% endif %}
     </div>
   </div>
   {% endif %}
   </div>
   </form>
-
-    {% if g.authenticated and g.repo_committer and type and type == 'edit' %}
-    <form method="post" class="pull-xs-right" action="{{
-        url_for('ui_ns.delete_issue',
-                repo=repo.name,
-                username=username,
-                namespace=repo.namespace,
-                issueid=issueid) }}">
-      <button class="btn btn-danger" type="submit"
-          onclick="return confirm('Are you sure to delete this ticket? \nThis is final and cannot be un-done.');"
-          title="Delete this ticket">
-        <span class="icon icon-trash blue"></span>
-        Delete issue
-      </button>
-      {{ form.csrf_token }}
-    </form>
-    {% endif %}
 {% endblock %}
 
 {% block jscripts %}
@@ -221,7 +264,7 @@ $(document).ready(function() {
   var json_url = '{{ url_for("static", filename="vendor/emojione/emoji_strategy.json") }}';
   emoji_complete(json_url, folder);
 
-  $("#type").on("change", function() {
+  $(".issue-template").on("click", function() {
     if ( !confirm('Do you want to load the new template?')){
       return false;
     }
@@ -278,9 +321,9 @@ $(document).ready(function() {
 
 $(function() {
   $( "#preview" ).hide();
+
   $( "#previewinmarkdown" ).click(
     function(event, ui) {
-      if ($( "#previewinmarkdown" ).hasClass("inactive")){
         var _text = $( "#issue_content" ).val();
         var _url = "{{ url_for('ui_ns.markdown_preview',
                         repo=repo.name,
@@ -297,8 +340,8 @@ $(function() {
           success: function(res) {
             var preview = emojione.toImage(res);
             $( "#preview" ).html(preview);
-            $( "#previewinmarkdown" ).removeClass("inactive");
-            $( "#previewinmarkdown" ).addClass("active");
+            $( "#previewinmarkdown" ).toggleClass("active");
+            $( "#editinmarkdown" ).toggleClass("active");
             $( "#issue_content" ).hide();
             $( "#preview" ).show();
           },
@@ -307,12 +350,15 @@ $(function() {
           }
         });
         return false;
-      } else if ($( "#previewinmarkdown" ).hasClass("active")){
-        $( "#previewinmarkdown" ).addClass("inactive");
-        $( "#previewinmarkdown" ).removeClass("active");
-        $( "#issue_content" ).show();
-        $( "#preview" ).hide();
-      }
+    }
+  );
+
+  $( "#editinmarkdown" ).click(
+    function(event, ui) {
+      $( "#editinmarkdown" ).toggleClass("active");
+      $( "#previewinmarkdown" ).toggleClass("active");
+      $( "#issue_content" ).show();
+      $( "#preview" ).hide();
     }
   );
 });
diff --git a/tests/test_pagure_flask_ui_issues.py b/tests/test_pagure_flask_ui_issues.py
index 83c6855..3274747 100644
--- a/tests/test_pagure_flask_ui_issues.py
+++ b/tests/test_pagure_flask_ui_issues.py
@@ -67,7 +67,7 @@ class PagureFlaskIssuestests(tests.Modeltests):
             output = self.app.get('/test/new_issue')
             self.assertEqual(output.status_code, 200)
             self.assertIn(
-                '<div class="card-header">\n        New issue',
+                'New Issue',
                 output.get_data(as_text=True))
 
             csrf_token = self.get_csrf(output=output)
@@ -80,7 +80,7 @@ class PagureFlaskIssuestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n        New issue',
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n',
                 output_text)
             self.assertEqual(output_text.count(
                 'This field is required.'), 2)
@@ -90,7 +90,7 @@ class PagureFlaskIssuestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n        New issue',
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n',
                 output_text)
             self.assertEqual(output_text.count(
                 'This field is required.'), 1)
@@ -101,7 +101,7 @@ class PagureFlaskIssuestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n        New issue',
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n',
                 output_text)
             self.assertEqual(output_text.count(
                 'This field is required.'),
@@ -164,7 +164,7 @@ class PagureFlaskIssuestests(tests.Modeltests):
             output = self.app.get('/test/new_issue')
             self.assertEqual(output.status_code, 200)
             self.assertIn(
-                '<div class="card-header">\n        New issue',
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n',
                 output.get_data(as_text=True))
 
             csrf_token = self.get_csrf()
@@ -255,7 +255,7 @@ class PagureFlaskIssuestests(tests.Modeltests):
             output = self.app.get('/somenamespace/test3/new_issue')
             self.assertEqual(output.status_code, 200)
             self.assertTrue(
-                '<div class="card-header">\n        New issue'
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n'
                 in output.get_data(as_text=True))
 
             csrf_token = self.get_csrf()
@@ -309,7 +309,7 @@ class PagureFlaskIssuestests(tests.Modeltests):
             output = self.app.get('/test/new_issue')
             self.assertEqual(output.status_code, 200)
             self.assertTrue(
-                '<div class="card-header">\n        New issue'
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n'
                 in output.get_data(as_text=True))
 
             csrf_token = self.get_csrf()
@@ -374,7 +374,7 @@ class PagureFlaskIssuestests(tests.Modeltests):
             output = self.app.get('/somenamespace/test3/new_issue')
             self.assertEqual(output.status_code, 200)
             self.assertTrue(
-                '<div class="card-header">\n        New issue'
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n'
                 in output.get_data(as_text=True))
 
             csrf_token = self.get_csrf()
@@ -438,13 +438,13 @@ class PagureFlaskIssuestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n        New issue',
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n',
                 output_text)
             self.assertIn(
-                '<label for="tag"><strong>Tags</strong></label>',
+                '<strong>Tags</strong>',
                 output_text)
             self.assertIn(
-                '<label for="assignee"><strong>Assignee</strong></label>',
+                '<strong>Assignee</strong>',
                 output_text)
 
     def test_new_issue_metadata_not_user(self):
@@ -464,13 +464,13 @@ class PagureFlaskIssuestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n        New issue',
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n',
                 output_text)
             self.assertNotIn(
-                '<label for="tag"><strong>Tags</strong></label>',
+                '<strong>Tags</strong>',
                 output_text)
             self.assertNotIn(
-                '<label for="assignee"><strong>Assignee</strong></label>',
+                '<strong>Assignee</strong>',
                 output_text)
 
     @patch('pagure.lib.git.update_git', MagicMock(return_value=True))
@@ -498,13 +498,13 @@ class PagureFlaskIssuestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n        New issue',
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n',
                 output_text)
             self.assertIn(
-                '<label for="tag"><strong>Tags</strong></label>',
+                '<strong>Tags</strong>',
                 output_text)
             self.assertIn(
-                '<label for="assignee"><strong>Assignee</strong></label>',
+                '<strong>Assignee</strong>',
                 output_text)
 
             csrf_token = self.get_csrf(output=output)
@@ -568,13 +568,13 @@ class PagureFlaskIssuestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n        New issue',
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n',
                 output_text)
             self.assertNotIn(
-                '<label for="tag"><strong>Tags</strong></label>',
+                '<strong>Tags</strong>',
                 output_text)
             self.assertNotIn(
-                '<label for="assignee"><strong>Assignee</strong></label>',
+                '<strong>Assignee</strong>',
                 output_text)
 
             csrf_token = self.get_csrf(output=output)
@@ -2626,8 +2626,7 @@ class PagureFlaskIssuestests(tests.Modeltests):
             output = self.app.get('/test/issue/1/edit')
             self.assertEqual(output.status_code, 200)
             self.assertTrue(
-                '<div class="card-header">\n        Edit '
-                'issue #1\n      </div>' in output.get_data(as_text=True))
+                'Edit Issue' in output.get_data(as_text=True))
 
             csrf_token = self.get_csrf(output=output)
 
@@ -2639,14 +2638,9 @@ class PagureFlaskIssuestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertTrue(
-                '<div class="card-header">\n        Edit '
-                'issue #1\n      </div>' in output_text)
+                'Edit Issue' in output_text)
             self.assertEqual(output_text.count(
-                '<small>\n            This field is required.&nbsp;\n'
-                '          </small>'), 1)
-            self.assertEqual(output_text.count(
-                '<small>\n            Not a valid choice&nbsp;'
-                '\n          </small>'), 1)
+                'This field is required.'), 1)
 
             data['status'] = 'Open'
             data['title'] = 'Test issue #1'
@@ -2654,14 +2648,11 @@ class PagureFlaskIssuestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertTrue(
-                '<div class="card-header">\n        Edit '
-                'issue #1\n      </div>' in output_text)
+                'Edit Issue' in output_text)
             self.assertEqual(output_text.count(
-                '<small>\n            This field is required.&nbsp;\n'
-                '          </small>'), 0)
+                'This field is required.'), 0)
             self.assertEqual(output_text.count(
-                '<small>\n            Not a valid choice&nbsp;'
-                '\n          </small>'), 0)
+                'Not a valid choice'), 0)
 
             data['csrf_token'] = csrf_token
             output = self.app.post(
@@ -2716,8 +2707,7 @@ class PagureFlaskIssuestests(tests.Modeltests):
             output = self.app.get('/test/issue/1/edit')
             self.assertEqual(output.status_code, 200)
             self.assertTrue(
-                '<div class="card-header">\n        Edit '
-                'issue #1\n      </div>' in output.get_data(as_text=True))
+                'Edit Issue' in output.get_data(as_text=True))
 
             csrf_token = self.get_csrf(output=output)
 
diff --git a/tests/test_pagure_flask_ui_issues_templates.py b/tests/test_pagure_flask_ui_issues_templates.py
index ea1a544..b3e6e3e 100644
--- a/tests/test_pagure_flask_ui_issues_templates.py
+++ b/tests/test_pagure_flask_ui_issues_templates.py
@@ -145,13 +145,10 @@ class PagureFlaskIssuestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n        New issue',
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n',
                 output_text)
             self.assertNotIn(
-                '<strong><label for="status">Type</label></strong>',
-                output_text)
-            self.assertNotIn(
-                '<select class="form-control c-select" id="type" name="type">',
+                'Issue Templates',
                 output_text)
 
     def test_new_issue_w_template(self):
@@ -163,22 +160,19 @@ class PagureFlaskIssuestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n        New issue',
-                output_text)
-            self.assertIn(
-                '<strong><label for="status">Type</label></strong>',
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n',
                 output_text)
             self.assertIn(
-                '<select class="form-control custom-select" id="type" name="type">',
+                'Issue Templates',
                 output_text)
             self.assertIn(
-                '<option value="RFE">RFE</option>',
+                '<a href="javascript:void(0)" class="issue-template dropdown-item" data-value="RFE">RFE</a>',
                 output_text)
             self.assertIn(
-                '<option value="2018-bid">2018-bid</option>',
+                '<a href="javascript:void(0)" class="issue-template dropdown-item" data-value="2018-bid">2018-bid</a>',
                 output_text)
             self.assertIn(
-                '<option selected value="default">default</option>',
+                '<a href="javascript:void(0)" class="issue-template dropdown-item" data-value="default">default</a>',
                 output_text)
 
     def test_get_ticket_template_no_csrf(self):
diff --git a/tests/test_pagure_flask_ui_priorities.py b/tests/test_pagure_flask_ui_priorities.py
index afc55b9..214aeb2 100644
--- a/tests/test_pagure_flask_ui_priorities.py
+++ b/tests/test_pagure_flask_ui_priorities.py
@@ -55,7 +55,7 @@ class PagureFlaskPrioritiestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertTrue(
-                '<div class="card-header">\n        New issue'
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n'
                 in output_text)
 
             csrf_token = output_text.split(
@@ -108,7 +108,7 @@ class PagureFlaskPrioritiestests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertTrue(
-                '<div class="card-header">\n        New issue'
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n'
                 in output_text)
 
             csrf_token = output_text.split(
diff --git a/tests/test_pagure_flask_ui_roadmap.py b/tests/test_pagure_flask_ui_roadmap.py
index 3f7b387..d7cd731 100644
--- a/tests/test_pagure_flask_ui_roadmap.py
+++ b/tests/test_pagure_flask_ui_roadmap.py
@@ -55,7 +55,7 @@ class PagureFlaskRoadmaptests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertTrue(
-                '<div class="card-header">\n        New issue'
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n'
                 in output_text)
 
             csrf_token = output_text.split(
@@ -106,7 +106,7 @@ class PagureFlaskRoadmaptests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertTrue(
-                '<div class="card-header">\n        New issue'
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n'
                 in output_text)
 
             csrf_token = output_text.split(
@@ -427,7 +427,7 @@ class PagureFlaskRoadmaptests(tests.Modeltests):
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertTrue(
-                '<div class="card-header">\n        New issue'
+                '<h4 class="font-weight-bold mb-4">New Issue</h4>\n'
                 in output_text)
 
             csrf_token = output_text.split(