From d5f75fbe9f80ce691f2cf2f7ec9cac415a041bff Mon Sep 17 00:00:00 2001
From: Tanya Fomina <fomina.tatianaaa@yandex.ru>
Date: Wed, 11 May 2022 22:56:29 +0800
Subject: [PATCH] Replace old buttons with the new ones

---
 src/backend/views/components/button.twig    |  2 +-
 src/backend/views/pages/form.twig           |  7 ++++---
 src/backend/views/pages/page.twig           | 10 +++++-----
 src/frontend/styles/components/page.pcss    |  9 ++++-----
 src/frontend/styles/components/writing.pcss |  7 ++++---
 src/frontend/svg/edit.svg                   | 10 ++++++++++
 6 files changed, 28 insertions(+), 17 deletions(-)
 create mode 100644 src/frontend/svg/edit.svg

diff --git a/src/backend/views/components/button.twig b/src/backend/views/components/button.twig
index 7c8bc0c..6259776 100644
--- a/src/backend/views/components/button.twig
+++ b/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) }}
diff --git a/src/backend/views/pages/form.twig b/src/backend/views/pages/form.twig
index 2e3bc13..a1fce2f 100644
--- a/src/backend/views/pages/form.twig
+++ b/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 %}
diff --git a/src/backend/views/pages/page.twig b/src/backend/views/pages/page.twig
index b58f92c..99ba1fd 100644
--- a/src/backend/views/pages/page.twig
+++ b/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 }}
diff --git a/src/frontend/styles/components/page.pcss b/src/frontend/styles/components/page.pcss
index 9bd73aa..c01c398 100644
--- a/src/frontend/styles/components/page.pcss
+++ b/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;
     }
   }
 
diff --git a/src/frontend/styles/components/writing.pcss b/src/frontend/styles/components/writing.pcss
index 0a4686a..c7ccebf 100644
--- a/src/frontend/styles/components/writing.pcss
+++ b/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;
   }
 }
 
diff --git a/src/frontend/svg/edit.svg b/src/frontend/svg/edit.svg
new file mode 100644
index 0000000..abe5141
--- /dev/null
+++ b/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>