From ccd352fbd27d34665c6dddc164cfdcfe802136a7 Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Fri, 20 May 2022 19:44:37 +0300
Subject: [PATCH] icons and button component updated

---
 src/backend/views/components/button.twig   | 20 +++++++++++++++-----
 src/backend/views/components/header.twig   |  6 ++----
 src/backend/views/pages/form.twig          |  2 +-
 src/frontend/styles/components/button.pcss | 22 ++++++++++------------
 src/frontend/styles/components/header.pcss | 22 ++++++++++------------
 src/frontend/styles/main.pcss              |  9 +++++++++
 src/frontend/svg/check.svg                 |  6 +++---
 src/frontend/svg/pencil.svg                |  6 +++---
 src/frontend/svg/plus.svg                  |  6 +++---
 src/frontend/svg/trash.svg                 |  6 +++---
 10 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/src/backend/views/components/button.twig b/src/backend/views/components/button.twig
index a7783f2..19b0e5c 100644
--- a/src/backend/views/components/button.twig
+++ b/src/backend/views/components/button.twig
@@ -13,13 +13,23 @@
 
 {% set mainClass = 'docs-button' %}
 
-<button name="{{ name }}" class="{{mainClass}} {{mainClass}}--{{style|default('primary')}} {{mainClass}}--{{size|default('default')}} {{icon ? mainClass ~ '--with-icon' : ''}}">
+
+{% set tag = 'button' %}
+
+{% if url is not empty %}
+  {% set tag = 'a' %}
+{% endif %}
+
+<{{tag}}
+  {{ name is not empty ? 'name="' ~ name ~ '"': '' }}
+  class="{{mainClass}} {{mainClass}}--{{style|default('primary')}} {{mainClass}}--{{size|default('default')}} {{icon ? mainClass ~ '--with-icon' : ''}}"
+  {{ url is not empty ? 'href="' ~ url ~ '"' : '' }}
+>
   {% if icon %}
     <div class="{{mainClass}}__icon">
       {{ svg(icon) }}
     </div>
   {% endif %}
-  <span>
-    {{ label }}
-  </span>
-</button>
\ No newline at end of file
+
+  {{ label }}
+</{{tag}}>
diff --git a/src/backend/views/components/header.twig b/src/backend/views/components/header.twig
index 9c0a0ee..3707906 100644
--- a/src/backend/views/components/header.twig
+++ b/src/backend/views/components/header.twig
@@ -5,14 +5,12 @@
   <ul class="docs-header__menu">
     {% if isAuthorized == true %}
       <li class="docs-header__menu-add">
-          <a href="/page/new">
-             {% include 'components/button.twig' with {label: 'Add page', icon: 'plus', size: 'small'} %}
-          </a>
+        {% include 'components/button.twig' with {label: 'Add page', icon: 'plus', size: 'small', url: '/page/new'} %}
       </li>
     {% endif %}
     {% for option in config.menu %}
       <li>
-        <a
+        <a class="docs-header__menu-link"
           {% if option.uri %}
             href="{{ option.uri }}"
           {% else %}
diff --git a/src/backend/views/pages/form.twig b/src/backend/views/pages/form.twig
index d74382c..0ce5a9e 100644
--- a/src/backend/views/pages/form.twig
+++ b/src/backend/views/pages/form.twig
@@ -2,7 +2,7 @@
 
 {% block body %}
   <style>
-    .docs-header__button {
+    .docs-header__menu-add {
       visibility: hidden;
     }
   </style>
diff --git a/src/frontend/styles/components/button.pcss b/src/frontend/styles/components/button.pcss
index 50ba966..3be0a9b 100644
--- a/src/frontend/styles/components/button.pcss
+++ b/src/frontend/styles/components/button.pcss
@@ -1,6 +1,7 @@
 .docs-button {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   height: var(--height);
   padding-left: 12px;
   padding-right: 12px;
@@ -19,11 +20,14 @@
   }
 
   &__icon {
-    margin-right: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 4px;
 
     svg {
-      width: 18px;
-      height: 18px;
+      width: 24px;
+      height: 24px;
       display: block;
     }
   }
@@ -34,13 +38,7 @@
 
   &--small {
     --height: 32px;
-
-    .docs-button__icon {
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
+    padding-right: 8px;
   }
 
   &--primary {
@@ -81,6 +79,6 @@
   }
 
   &--with-icon {
-    padding-left: 10px;
+    padding-left: 8px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/styles/components/header.pcss b/src/frontend/styles/components/header.pcss
index 4d69749..f0f49ea 100644
--- a/src/frontend/styles/components/header.pcss
+++ b/src/frontend/styles/components/header.pcss
@@ -12,9 +12,9 @@
     line-height: 40px;
   }
 
-  a {
+  &__menu-link,
+  &__logo {
     display: inline-block;
-    text-decoration: none;
   }
 
   &__logo {
@@ -55,24 +55,22 @@
       a {
         @media (--mobile) {
           font-size: 0;
-          padding: 8px;
+          padding: 0 4px;
+          margin-right: 0;
+        }
+      }
+
+      .docs-button__icon {
+        @media (--mobile) {
           margin-right: 0;
         }
       }
     }
 
-    a:not(.docs-header__button) {
-      color: inherit;
-
+    &-link {
       &:hover {
         color: var(--color-link-active);
       }
     }
   }
-
-  &__button {
-    @apply --button;
-    @apply --button-primary;
-    margin: auto 30px auto auto;
-  }
 }
diff --git a/src/frontend/styles/main.pcss b/src/frontend/styles/main.pcss
index 82cf7d7..29c7df5 100644
--- a/src/frontend/styles/main.pcss
+++ b/src/frontend/styles/main.pcss
@@ -16,3 +16,12 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+svg {
+  fill: currentColor;
+}
+
+a {
+  text-decoration: none;
+  color: inherit
+}
diff --git a/src/frontend/svg/check.svg b/src/frontend/svg/check.svg
index 6949d08..0f95aab 100644
--- a/src/frontend/svg/check.svg
+++ b/src/frontend/svg/check.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-</svg>
\ No newline at end of file
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.374 7.293a1 1 0 0 1 0 1.414L11.04 16.04a1 1 0 0 1-1.414 0l-3.333-3.333a1 1 0 1 1 1.414-1.414l2.626 2.626 6.627-6.626a1 1 0 0 1 1.414 0Z"/>
+</svg>
diff --git a/src/frontend/svg/pencil.svg b/src/frontend/svg/pencil.svg
index 689572a..cd7a4c1 100644
--- a/src/frontend/svg/pencil.svg
+++ b/src/frontend/svg/pencil.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-</svg>
\ No newline at end of file
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.917 6.75a.9.9 0 0 0-.637.264l-7.734 7.734-.477 1.75 1.75-.478 7.734-7.734a.899.899 0 0 0-.636-1.536Zm-.919-1.317a2.4 2.4 0 0 1 2.616 3.914l-7.875 7.875a.75.75 0 0 1-.333.193l-3.209.875a.75.75 0 0 1-.92-.92l.874-3.21a.75.75 0 0 1 .194-.332l7.875-7.875a2.4 2.4 0 0 1 .778-.52Z"/>
+</svg>
diff --git a/src/frontend/svg/plus.svg b/src/frontend/svg/plus.svg
index 5681170..de5b3d0 100644
--- a/src/frontend/svg/plus.svg
+++ b/src/frontend/svg/plus.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-</svg>
\ No newline at end of file
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 5a1 1 0 0 0-1 1v5H6a1 1 0 1 0 0 2h5v5a1 1 0 1 0 2 0v-5h5a1 1 0 1 0 0-2h-5V6a1 1 0 0 0-1-1Z"/>
+</svg>
diff --git a/src/frontend/svg/trash.svg b/src/frontend/svg/trash.svg
index 5789835..ae7f535 100644
--- a/src/frontend/svg/trash.svg
+++ b/src/frontend/svg/trash.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-</svg>
\ No newline at end of file
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.75 8h-3v-.75A2.25 2.25 0 0 0 12.5 5H11a2.25 2.25 0 0 0-2.25 2.25V8h-3a.75.75 0 0 0 0 1.5h.75l.75 8.25A2.25 2.25 0 0 0 9.5 20H14a2.25 2.25 0 0 0 2.25-2.25L17 9.5h.75a.75.75 0 1 0 0-1.5Zm-7.5-.75A.75.75 0 0 1 11 6.5h1.5a.75.75 0 0 1 .75.75V8h-3v-.75Zm4.5 10.5a.75.75 0 0 1-.75.75H9.5a.75.75 0 0 1-.75-.75L8 9.5h7.5l-.75 8.25Z"/>
+</svg>