From 8c0211d7bc74627a23e23aabfd3cbd85c8962d96 Mon Sep 17 00:00:00 2001
From: Tanya <fomina.tatianaaa@yandex.ru>
Date: Mon, 27 Jun 2022 20:06:56 +0800
Subject: [PATCH] [Fix] Several ui fixes  (#205)

* Fix sidebar

* Use squircle mask for header links

* Firefox mask-box-image fix
---
 src/backend/views/components/sidebar.twig   | 2 +-
 src/frontend/js/modules/sidebar.js          | 3 ++-
 src/frontend/styles/components/button.pcss  | 1 -
 src/frontend/styles/components/header.pcss  | 3 ++-
 src/frontend/styles/components/sidebar.pcss | 6 +++++-
 src/frontend/styles/vars.pcss               | 2 ++
 6 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/backend/views/components/sidebar.twig b/src/backend/views/components/sidebar.twig
index d452cc8..a735b89 100644
--- a/src/backend/views/components/sidebar.twig
+++ b/src/backend/views/components/sidebar.twig
@@ -5,7 +5,7 @@
     {{ svg('menu') }} Table of contents
   </div>
 
-  <aside class="docs-sidebar__content docs-sidebar__content--hidden">
+  <aside class="docs-sidebar__content docs-sidebar__content--invisible">
     {% for firstLevelPage in menu %}
       <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
         <a class="docs-sidebar__section-title-wrapper"
diff --git a/src/frontend/js/modules/sidebar.js b/src/frontend/js/modules/sidebar.js
index b64e675..dcb6d60 100644
--- a/src/frontend/js/modules/sidebar.js
+++ b/src/frontend/js/modules/sidebar.js
@@ -33,6 +33,7 @@ export default class Sidebar {
       sidebarToggler: 'docs-sidebar__toggler',
       sidebarContent: 'docs-sidebar__content',
       sidebarContentHidden: 'docs-sidebar__content--hidden',
+      sidebarContentInvisible: 'docs-sidebar__content--invisible',
     };
   }
 
@@ -173,6 +174,6 @@ export default class Sidebar {
    * @returns {void}
    */
   ready() {
-    this.nodes.sidebarContent.classList.remove(Sidebar.CSS.sidebarContentHidden);
+    this.nodes.sidebarContent.classList.remove(Sidebar.CSS.sidebarContentInvisible);
   }
 }
diff --git a/src/frontend/styles/components/button.pcss b/src/frontend/styles/components/button.pcss
index 5b887fb..68ed81e 100644
--- a/src/frontend/styles/components/button.pcss
+++ b/src/frontend/styles/components/button.pcss
@@ -12,7 +12,6 @@
   cursor: pointer;
   transition-property: background-color;
   transition-duration: 0.1s;
-  border-radius: 8px;
 
   @apply --squircle;
 
diff --git a/src/frontend/styles/components/header.pcss b/src/frontend/styles/components/header.pcss
index bd9c7b6..40be0ea 100644
--- a/src/frontend/styles/components/header.pcss
+++ b/src/frontend/styles/components/header.pcss
@@ -35,9 +35,10 @@
   &__menu-link {
     padding: 4px 10px;
     font-weight: 500;
-    border-radius: 8px;
     transition: background-color .13s;
 
+    @apply --squircle;
+
     &:hover {
       background-color: var(--color-link-hover);
     }
diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index 5747c70..2a455a4 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/src/frontend/styles/components/sidebar.pcss
@@ -25,6 +25,10 @@
     &--hidden {
       display: none;
     }
+
+    &--invisible {
+      visibility: hidden;
+    }
   }
 
 
@@ -58,7 +62,7 @@
   }
 
   &__section:not(:first-child) {
-    margin-top: 20px;
+    margin-top: 19px;
   }
 
   &__section-title {
diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss
index 4d4ebf0..ed96a46 100644
--- a/src/frontend/styles/vars.pcss
+++ b/src/frontend/styles/vars.pcss
@@ -78,6 +78,8 @@
   }
 
   --squircle {
+    border-radius: 8px;
+    
     @supports(-webkit-mask-box-image: url('')){
       border-radius: 0;
       -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;