upd secondary colour, page button call

src/backend/views/components/button.twig

@@ -6,6 +6,8 @@
     - name
     - style: primary, secondary or warning
     - size: small, default
+    - url: URL to navigate in case if button is the navigation link
+    - class: additional class for the button
 
   Usage example:
     {% include 'components/button.twig' with {label: 'Label', icon: 'check', style: 'secondary', size: 'default'} %}
@@ -22,7 +24,7 @@
 
 <{{tag}}
   {{ name is not empty ? 'name="' ~ name ~ '"': '' }}
-  class="{{mainClass}} {{mainClass}}--{{style|default('primary')}} {{mainClass}}--{{size|default('default')}} {{icon ? mainClass ~ '--with-icon' : ''}}"
+  class="{{ mainClass }} {{ mainClass }}--{{ style|default('primary') }} {{ mainClass }}--{{ size|default('default') }} {{ icon ? mainClass ~ '--with-icon' : '' }} {{ class ?? '' }}"
   {{ url is not empty ? 'href="' ~ url ~ '"' : '' }}
 >
   {% if icon %}

src/backend/views/pages/page.twig

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

src/frontend/styles/components/button.pcss

@@ -55,7 +55,6 @@
 
   &--secondary {
     background: var(--color-button-secondary);
-    color: var(--color-text-main);
 
     &:hover {
       background: var(--color-button-secondary-hover);

src/frontend/styles/vars.pcss

@@ -10,9 +10,9 @@
   --color-button-primary-hover: #2E7AE6;
   --color-button-primary-active: #296DCC;
 
-  --color-button-secondary: #F3F6F8;
-  --color-button-secondary-hover: #D9DCDE;
-  --color-button-secondary-active: #C0C3C4;
+  --color-button-secondary: #717682;
+  --color-button-secondary-hover: #5D6068;
+  --color-button-secondary-active: #4B4F5B;
 
   --color-button-warning: #EF5C5C;
   --color-button-warning-hover: #D65151;

src/frontend/svg/trash.svg

@@ -1,3 +1,3 @@
 <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"/>
+  <path d="M17.75 7h-3v-.75A2.25 2.25 0 0 0 12.5 4H11a2.25 2.25 0 0 0-2.25 2.25V7h-3a.75.75 0 0 0 0 1.5h.75l.75 8.25A2.25 2.25 0 0 0 9.5 19H14a2.25 2.25 0 0 0 2.25-2.25L17 8.5h.75a.75.75 0 1 0 0-1.5Zm-7.5-.75A.75.75 0 0 1 11 5.5h1.5a.75.75 0 0 1 .75.75V7h-3v-.75Zm4.5 10.5a.75.75 0 0 1-.75.75H9.5a.75.75 0 0 1-.75-.75L8 8.5h7.5l-.75 8.25Z"/>
 </svg>