Clean up the interface with nice buttons

templates/security/register.html.twig

@@ -1,5 +1,7 @@
 {% extends 'base/base.html.twig' %}
 
+{% block title %}Register{% endblock %}
+
 {% block body %}
     <h1 class="h3 mb-3 font-weight-normal">Register new user</h1>
     {{ form(registrationForm) }}

templates/snip/edit.html.twig

@@ -1,6 +1,18 @@
 {% extends 'base/base.html.twig' %}
 
+{% block title %}Edit {{ snip }}{% endblock %}
+
 {% block body %}
+    {% if snip.id %}
+        <a href="{{ path('snip_single', {snip: snip.id}) }}" class="btn btn-primary">
+            <i class="fa fa-arrow-left"></i>
+            Back
+        </a>
+    {% endif %}
+    <a href="{{ path('snip_index') }}" class="btn btn-info">
+        <i class="fa fa-list"></i>
+        Index
+    </a><br><br>
     <h2>Editing {{ snip }}</h2>
     {{ form(form) }}
 {% endblock %}

templates/snip/index.html.twig

@@ -1,8 +1,12 @@
 {% extends 'base/base.html.twig' %}
 
+{% block title %}My snippets{% endblock %}
+
 {% block body %}
-    <h1>Snippets</h1>
-    <a class="btn btn-primary" href="{{ path('snip_new') }}">Create a new Snip</a>
+    <h1>My snippets</h1>
+    <a class="btn btn-success" href="{{ path('snip_new') }}">
+        <i class="fa fa-plus"></i> Add
+    </a><br><br>
     <div class="list-group">
         {% for snip in snips %}
             <a class="list-group-item" href="{{ path('snip_single', {snip: snip.id}) }}">

templates/snip/single.html.twig

@@ -1,18 +1,27 @@
 {% extends 'base/base.html.twig' %}
 
+{% block title %}Snip {{ snip }}{% endblock %}
+
 {% block body %}
+    <a href="{{ path('snip_index') }}" class="btn btn-primary">
+        <i class="fa fa-arrow-left"></i> Back
+    </a>
+    {% if is_granted('edit', snip) %}
+        <a class="btn btn-warning" href="{{ path('snip_edit', {snip: snip.id}) }}">
+            <i class="fa fa-pencil" aria-hidden="true"></i> Edit
+        </a>
+    {% endif %}
+    <a href="{{ path('snip_raw', {snip: snip.id}) }}" class="btn btn-danger">
+        <i class="fa fa-eye"></i> Raw
+    </a>
+    <br><br>
     <div class="card" style="width: 100%;">
         <h4 class="card-header">
-            {% if is_granted('edit', snip) %}
-                <a class="btn btn-sm btn-outline-info" href="{{ path('snip_edit', {snip: snip.id}) }}">
-                    <i class="fa fa-pencil" aria-hidden="true"></i>
-                </a>
-            {% endif %}
             {{ include('snip/badge.html.twig', {snip: snip}) }}
             {{ snip }}
         </h4>
         <div class="card-body">
-            <p class="card-text">{{ content }}</p>
+            <p class="card-text">{{ content|nl2br }}</p>
         </div>
     </div>
 {% endblock %}