Replace old buttons with the new ones

src/backend/views/components/button.twig

@@ -13,7 +13,7 @@
 
 {% set mainClass = 'docs-button' %}
 
-<button name={{ name }} class="{{mainClass}} {{mainClass}}--{{style|default('primary')}} {{mainClass}}--{{size|default('default')}} {{icon ? mainClass ~ '--with-icon' : ''}}">
+<button name="{{ name }}" class="{{mainClass}} {{mainClass}}--{{style|default('primary')}} {{mainClass}}--{{size|default('default')}} {{icon ? mainClass ~ '--with-icon' : ''}}">
   {% if icon %}
     <div class="{{mainClass}}__icon">
       {{ svg(icon) }}

src/backend/views/pages/form.twig

@@ -56,12 +56,13 @@
     <div class="writing-editor">
       <div id="editorjs"></div>
     </div>
-    <div class="writing-buttons">
-      <span class="writing-header__save" name="js-submit-save">Save</span>
 
+    <div class="writing-buttons">
+      {% include 'components/button.twig' with {label: 'Save changes', name: 'js-submit-save', icon: 'checklist'} %}
       {% if page._id is not empty %}
-        <span class="writing-buttons__remove" name="js-submit-remove">Remove</span>
+          {% include 'components/button.twig' with {label: 'Delete doc', name: 'js-submit-remove', icon: 'bin', style: 'warning'} %}
       {% endif %}
     </div>
+
   </section>
 {% endblock %}

src/backend/views/pages/page.twig

@@ -18,12 +18,12 @@
       {% endif %}
       <time class="page__header-time">
         Last edit {{ (page.body.time / 1000)  | date("M d Y") }}
-        {% if isAuthorized == true %}
-          <a href="/page/edit/{{ page._id }}" class="page__header-button">
-            Edit
-          </a>
-        {% endif %}
       </time>
+      {% if isAuthorized == true %}
+        <a href="/page/edit/{{ page._id }}" class="page__header-button">
+          {% include 'components/button.twig' with {label: 'Edit', icon: 'edit', size: 'small'} %}
+        </a>
+      {% endif %}
     </header>
     <h1 class="page__title">
       {{ page.title }}

src/frontend/styles/components/page.pcss

@@ -5,6 +5,7 @@
 
   &__header {
     display: flex;
+    align-items: center;
     color: var(--color-text-second);
 
     @media (--mobile) {
@@ -40,11 +41,9 @@
     }
 
     &-button {
-      @apply --button;
-      @apply --button-primary;
-      padding: 5px 10px;
-      font-size: 13px;
-      margin-left: 10px;
+      margin-left: 20px;
+      display: inline-block;
+      text-decoration: none;
     }
   }
 

src/frontend/styles/components/writing.pcss

@@ -31,9 +31,10 @@
 }
 
 .writing-buttons {
-  &__remove {
-    @apply --button;
-    @apply --button-danger;
+  display: flex;
+
+  button:not(:last-child) {
+    margin-right: 20px;
   }
 }
 

src/frontend/svg/edit.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_158_570)">
+<path d="M15.4165 6.74985C15.5697 6.59664 15.7516 6.47511 15.9518 6.39219C16.152 6.30928 16.3665 6.2666 16.5832 6.2666C16.7998 6.2666 17.0144 6.30928 17.2146 6.39219C17.4147 6.47511 17.5966 6.59664 17.7498 6.74985C17.903 6.90306 18.0246 7.08494 18.1075 7.28512C18.1904 7.4853 18.2331 7.69985 18.2331 7.91652C18.2331 8.13319 18.1904 8.34774 18.1075 8.54791C18.0246 8.74809 17.903 8.92998 17.7498 9.08318L9.87484 16.9582L6.6665 17.8332L7.5415 14.6249L15.4165 6.74985Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_158_570">
+<rect width="14" height="14" fill="currentColor" transform="translate(5.5 5)"/>
+</clipPath>
+</defs>
+</svg>