chore: increase toolbar buttons size

On small screen, they was too small I think. I also change some
styles like focus state to keep consistency between all elements in
toolbar. Also, I was not fan of the rotate effect.

10 files changed, 114 insertions, 147 deletions

diff --git a/src/assets/images/icon-close.svg b/src/assets/images/icon-close.svg
index f108234..7490e7d 100644
--- a/src/assets/images/icon-close.svg
+++ b/src/assets/images/icon-close.svg
@@ -17,7 +17,7 @@
      id="namedview6"
      inkscape:zoom="2.729418"
      inkscape:cx="-18.318924"
-     inkscape:cy="74.374829"
+     inkscape:cy="74.37483"
      inkscape:window-width="1920"
      inkscape:window-height="1019"
      inkscape:window-x="0"
@@ -34,9 +34,9 @@
   <path
      id="rect843"
      style="fill:#1d8fc9;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-     d="m 3.6465459,3.6465457 c 2.8785908,-2.87859094 7.5134341,-2.87859094 10.3920251,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465449,14.038571 C 0.76795398,11.15998 0.76795398,6.5251366 3.6465459,3.6465457 Z" />
+     d="m 3.6465461,3.6465455 c 2.8785908,-2.87859092 7.5134339,-2.87859092 10.3920249,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465451,14.038571 C 0.76795421,11.15998 0.76795421,6.5251364 3.6465461,3.6465455 Z" />
   <path
      id="rect843-3"
      style="fill:#1d8fc9;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-     d="m 96.353453,3.6465462 c 2.878592,2.8785909 2.878592,7.5134348 0,10.3920258 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134339,2.878587 -10.3920248,0 -2.87859087,-2.878597 -2.87858988,-7.513442 -10e-7,-10.392029 L 85.961428,3.6465462 c 2.878591,-2.87859099 7.513434,-2.87859099 10.392025,0 z" />
+     d="m 96.353453,3.646546 c 2.878592,2.8785909 2.878592,7.513435 0,10.392026 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134337,2.878587 -10.3920246,0 -2.87859084,-2.878597 -2.87858985,-7.513442 -1e-6,-10.392029 L 85.961428,3.646546 c 2.878591,-2.87859097 7.513434,-2.87859097 10.392025,0 z" />
 </svg>
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index fca8013..2a6daca 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -1,5 +1,6 @@
 @use "@styles/abstracts/functions" as fun;
 @use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
 
 .btn {
   display: block;
@@ -176,19 +177,28 @@
 }
 
 .toolbar {
-  display: block;
-  width: var(--btn-size);
-  height: var(--btn-size);
-  padding: 0;
+  --draw-border-thickness: #{fun.convert-px(5)};
+  --icon-size: 100%;
+
+  display: flex;
+  flex-flow: row nowrap;
+  place-items: center;
+  width: var(--btn-size, 100%);
+  height: var(--btn-size, 100%);
+  padding: var(--spacing-2xs);
   background: none;
   border: none;
   font-size: var(--font-size-md);
 
+  &:hover,
   &:focus {
-    outline: var(--color-primary-light) solid fun.convert-px(3);
+    --draw-border-color1: var(--color-primary-light);
+    --draw-border-color2: var(--color-primary-lighter);
+
+    @extend %draw-borders;
   }
 
-  @include mix.media("screen") {
+  /*   @include mix.media("screen") {
     @include mix.dimensions("md") {
       &:hover,
       &:focus {
@@ -196,7 +206,7 @@
         transition: all 0.8s ease-in-out 0s;
       }
     }
-  }
+  } */
 }
 
 .icon {
@@ -213,8 +223,8 @@
 .back {
   display: flex;
   place-content: center;
-  width: var(--btn-size);
-  height: var(--btn-size);
+  width: var(--icon-size);
+  height: var(--icon-size);
   position: absolute;
   top: 0;
   right: 0;
diff --git a/src/components/Icons/Close/Close.tsx b/src/components/Icons/Close/Close.tsx
index 0e7dab7..12214de 100644
--- a/src/components/Icons/Close/Close.tsx
+++ b/src/components/Icons/Close/Close.tsx
@@ -9,11 +9,11 @@ const CloseIcon = () => {
     >
       <path
         className={styles.line}
-        d="m 3.6465459,3.6465457 c 2.8785908,-2.87859094 7.5134341,-2.87859094 10.3920251,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465449,14.038571 C 0.76795398,11.15998 0.76795398,6.5251366 3.6465459,3.6465457 Z"
+        d="m 3.6465461,3.6465455 c 2.8785908,-2.87859092 7.5134339,-2.87859092 10.3920249,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465451,14.038571 C 0.76795421,11.15998 0.76795421,6.5251364 3.6465461,3.6465455 Z"
       />
       <path
         className={styles.line}
-        d="m 96.353453,3.6465462 c 2.878592,2.8785909 2.878592,7.5134348 0,10.3920258 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134339,2.878587 -10.3920248,0 -2.87859087,-2.878597 -2.87858988,-7.513442 -10e-7,-10.392029 L 85.961428,3.6465462 c 2.878591,-2.87859099 7.513434,-2.87859099 10.392025,0 z"
+        d="m 96.353453,3.646546 c 2.878592,2.8785909 2.878592,7.513435 0,10.392026 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134337,2.878587 -10.3920246,0 -2.87859084,-2.878597 -2.87858985,-7.513442 -1e-6,-10.392029 L 85.961428,3.646546 c 2.878591,-2.87859097 7.513434,-2.87859097 10.392025,0 z"
       />
     </svg>
   );
diff --git a/src/components/Icons/Hamburger/Hamburger.module.scss b/src/components/Icons/Hamburger/Hamburger.module.scss
index f38df4e..9965c5e 100644
--- a/src/components/Icons/Hamburger/Hamburger.module.scss
+++ b/src/components/Icons/Hamburger/Hamburger.module.scss
@@ -2,6 +2,7 @@
 
 .icon {
   position: relative;
+  width: 100%;
 
   &,
   &::before,
@@ -15,7 +16,6 @@
     border: fun.convert-px(1) solid var(--color-primary-darker);
     border-radius: fun.convert-px(3);
     display: block;
-    width: var(--btn-size, fun.convert-px(50));
     height: fun.convert-px(7);
     margin: auto;
     transition: all 0.25s ease-in-out 0s, transform 0.4s ease-in 0s;
@@ -26,6 +26,7 @@
     content: "";
     position: absolute;
     left: fun.convert-px(-1);
+    right: fun.convert-px(-1);
   }
 
   &::before {
diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
index 0d0d6c0..3ced245 100644
--- a/src/components/MainNav/MainNav.module.scss
+++ b/src/components/MainNav/MainNav.module.scss
@@ -3,13 +3,13 @@
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
-  --icon-size: #{fun.convert-px(25)};
+  --icon-size: #{fun.convert-px(30)};
 
   display: flex;
   flex-flow: column nowrap;
-  place-items: center;
+  align-items: center;
   height: var(--btn-size);
-  width: var(--btn-size);
+  width: calc(var(--btn-size) * 1.2);
   background: var(--color-bg);
   position: relative;
 
@@ -19,8 +19,6 @@
     }
 
     @include mix.dimensions("md") {
-      --icon-size: #{fun.convert-px(30)};
-
       width: unset;
       height: unset;
     }
@@ -28,17 +26,22 @@
 }
 
 .label {
+  --draw-border-thickness: #{fun.convert-px(5)};
+  --draw-border-color1: var(--color-primary-light);
+  --draw-border-color2: var(--color-primary-lighter);
+
+  flex: 1;
   display: flex;
   flex-flow: column nowrap;
   width: 100%;
-  height: 100%;
+  padding: var(--spacing-2xs);
 
   &:hover {
     span,
     span::before,
     span::after {
       background: var(--color-primary-lighter);
-      box-shadow: 2px 2px 0 0 var(--color-shadow);
+      box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-shadow);
     }
   }
 
@@ -54,7 +57,7 @@
 
   // centered checkbox = btn-size - approximated checkbox size / 2
   top: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2);
-  left: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2);
+  left: calc(((var(--btn-size) * 1.2) - #{fun.convert-px(14)}) / 2);
   opacity: 0;
   cursor: pointer;
 
@@ -64,14 +67,14 @@
       span::before,
       span::after {
         background: var(--color-primary-lighter);
-        box-shadow: 2px 2px 0 0 var(--color-shadow);
+        box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-shadow);
       }
     }
   }
 
   &:focus {
     ~ .label {
-      outline: var(--color-primary-light) solid fun.convert-px(3);
+      @extend %draw-borders;
     }
   }
 
@@ -141,7 +144,9 @@
 }
 
 .link {
-  --draw-border-width: #{fun.convert-px(4)};
+  --draw-border-thickness: #{fun.convert-px(4)};
+  --draw-border-color1: var(--color-primary-light);
+  --draw-border-color2: var(--color-primary-lighter);
 
   display: block;
   min-width: fun.convert-px(85);
@@ -163,35 +168,7 @@
 
   &:hover,
   &:focus {
-    background-image: linear-gradient(
-        to right,
-        var(--color-primary-lighter),
-        var(--color-primary-light)
-      ),
-      linear-gradient(
-        to bottom,
-        var(--color-primary-light),
-        var(--color-primary-lighter)
-      ),
-      linear-gradient(
-        to left,
-        var(--color-primary-lighter),
-        var(--color-primary-light)
-      ),
-      linear-gradient(
-        to top,
-        var(--color-primary-light),
-        var(--color-primary-lighter)
-      );
-    background-position: top left, top right, bottom right, bottom left;
-    background-size: 100% var(--draw-border-width),
-      var(--draw-border-width) 100%, 100% var(--draw-border-width),
-      var(--draw-border-width) 100%;
-    color: var(--color-primary-light);
-
-    :global {
-      animation: draw-borders 0.8s linear 1 0s;
-    }
+    @extend %draw-borders;
   }
 
   &:focus {
@@ -199,27 +176,10 @@
   }
 
   &:active {
-    background-image: linear-gradient(
-        to right,
-        var(--color-primary-light),
-        var(--color-primary-dark)
-      ),
-      linear-gradient(
-        to bottom,
-        var(--color-primary-dark),
-        var(--color-primary-light)
-      ),
-      linear-gradient(
-        to left,
-        var(--color-primary-light),
-        var(--color-primary-dark)
-      ),
-      linear-gradient(
-        to top,
-        var(--color-primary-dark),
-        var(--color-primary-light)
-      );
-    background-position: top left, top right, bottom right, bottom left;
+    --draw-border-color1: var(--color-primary-dark);
+    --draw-border-color2: var(--color-primary-light);
+
+    @extend %draw-borders;
   }
 
   &.current {
@@ -232,58 +192,23 @@
       ),
       linear-gradient(to top, transparent, transparent);
     background-position: top left, top right, bottom center, bottom left;
-    background-size: 0% var(--draw-border-width), var(--draw-border-width) 0%,
-      60% var(--draw-border-width), var(--draw-border-width) 0%;
-    transition: all 0.3s linear 0s;
+    background-size: 0% var(--draw-border-thickness),
+      var(--draw-border-thickness) 0%, 60% var(--draw-border-thickness),
+      var(--draw-border-thickness) 0%;
 
     &:hover,
     &:focus {
-      background-image: linear-gradient(
-          to right,
-          var(--color-primary-lighter),
-          var(--color-primary-light)
-        ),
-        linear-gradient(
-          to bottom,
-          var(--color-primary-light),
-          var(--color-primary-lighter)
-        ),
-        linear-gradient(
-          to left,
-          var(--color-primary-lighter),
-          var(--color-primary-light)
-        ),
-        linear-gradient(
-          to top,
-          var(--color-primary-light),
-          var(--color-primary-lighter)
-        );
-      background-size: 100% var(--draw-border-width),
-        var(--draw-border-width) 100%, 100% var(--draw-border-width),
-        var(--draw-border-width) 100%;
+      --draw-border-color1: var(--color-primary-light);
+      --draw-border-color2: var(--color-primary-lighter);
+
+      @extend %draw-borders;
     }
 
     &:active {
-      background-image: linear-gradient(
-          to right,
-          var(--color-primary-light),
-          var(--color-primary-dark)
-        ),
-        linear-gradient(
-          to bottom,
-          var(--color-primary-dark),
-          var(--color-primary-light)
-        ),
-        linear-gradient(
-          to left,
-          var(--color-primary-light),
-          var(--color-primary-dark)
-        ),
-        linear-gradient(
-          to top,
-          var(--color-primary-dark),
-          var(--color-primary-light)
-        );
+      --draw-border-color1: var(--color-primary-dark);
+      --draw-border-color2: var(--color-primary-light);
+
+      @extend %draw-borders;
     }
   }
 }
diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
index 408d769..debb3b7 100644
--- a/src/components/Toolbar/Toolbar.module.scss
+++ b/src/components/Toolbar/Toolbar.module.scss
@@ -2,7 +2,7 @@
 @use "@styles/abstracts/mixins" as mix;
 
 .wrapper {
-  --btn-size: #{fun.convert-px(50)};
+  --btn-size: #{fun.convert-px(60)};
 
   display: flex;
   flex-flow: row wrap;
diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss
index 5ee6cea..d1c0a7a 100644
--- a/src/styles/abstracts/_placeholders.scss
+++ b/src/styles/abstracts/_placeholders.scss
@@ -1,2 +1,3 @@
+@forward "./placeholders/animations";
 @forward "./placeholders/clearfix";
 @forward "./placeholders/list";
diff --git a/src/styles/abstracts/placeholders/_animations.scss b/src/styles/abstracts/placeholders/_animations.scss
new file mode 100644
index 0000000..84ca419
--- /dev/null
+++ b/src/styles/abstracts/placeholders/_animations.scss
@@ -0,0 +1,33 @@
+/// Draw borders around an element.
+%draw-borders {
+  background-image: linear-gradient(
+      to right,
+      var(--draw-border-color2),
+      var(--draw-border-color1)
+    ),
+    linear-gradient(
+      to bottom,
+      var(--draw-border-color1),
+      var(--draw-border-color2)
+    ),
+    linear-gradient(
+      to left,
+      var(--draw-border-color2),
+      var(--draw-border-color1)
+    ),
+    linear-gradient(
+      to top,
+      var(--draw-border-color1),
+      var(--draw-border-color2)
+    );
+  background-position: top left, top right, bottom right, bottom left;
+  background-repeat: no-repeat;
+  background-size: 100% var(--draw-border-thickness),
+    var(--draw-border-thickness) 100%, 100% var(--draw-border-thickness),
+    var(--draw-border-thickness) 100%;
+  color: var(--draw-border-color1);
+
+  :global {
+    animation: draw-borders 0.8s linear 1 0s;
+  }
+}
diff --git a/src/styles/base/_animations.scss b/src/styles/base/_animations.scss
index 7dc0d25..3e8f6f2 100644
--- a/src/styles/base/_animations.scss
+++ b/src/styles/base/_animations.scss
@@ -17,42 +17,39 @@
 @keyframes draw-borders {
   0% {
     background-position: top left, top right, bottom right, bottom left;
-    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%,
-      0% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%;
+    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%,
+      0% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%;
   }
 
   25% {
-    background-position: top left, top right, bottom right, bottom left;
-    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%,
-      100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%;
+    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%,
+      100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%;
   }
 
   50% {
-    background-position: top left, top right, bottom right, bottom left;
-    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%,
-      100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 100%;
+    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%,
+      100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 100%;
   }
 
   75% {
-    background-position: top left, top right, bottom right, bottom left;
-    background-size: 100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%,
-      100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 100%;
+    background-size: 100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%,
+      100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 100%;
   }
 
   100% {
     background-position: top left, top right, bottom right, bottom left;
-    background-size: 100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 100%,
-      100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 100%;
+    background-size: 100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 100%,
+      100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 100%;
   }
 }
 
diff --git a/src/styles/base/_spacings.scss b/src/styles/base/_spacings.scss
index 7c71445..08c3c3f 100644
--- a/src/styles/base/_spacings.scss
+++ b/src/styles/base/_spacings.scss
@@ -24,7 +24,7 @@
   --spacing-xl: clamp(#{var.spacing("lg")}, 1ex + 4vw, #{var.spacing("xl")});
   --spacing-2xl: clamp(#{var.spacing("xl")}, 1ex + 5vw, #{var.spacing("2xl")});
   --spacing-3xl: clamp(#{var.spacing("2xl")}, 1ex + 6vw, #{var.spacing("3xl")});
-  --toolbar-size: #{fun.convert-px(60)};
+  --toolbar-size: #{fun.convert-px(65)};
 }
 
 @include mix.media("screen") {