From 33e5769b6371533bdf1f579bd506fde0f8dafe4e Mon Sep 17 00:00:00 2001
From: Ivan Vasilev <875116+konclave@users.noreply.github.com>
Date: Thu, 7 Nov 2024 10:01:55 +0100
Subject: [PATCH 1/9] feat: improve the global navigation button

The button was hidden by the block with menu on the short screens.
The height of the button was quite small.
I've increased it and made the active area a square.
---
 src/components/layout/header/header.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx
index 17f27d02..2beb2146 100644
--- a/src/components/layout/header/header.tsx
+++ b/src/components/layout/header/header.tsx
@@ -77,21 +77,22 @@ const SiteTitle = styled(Link)<{ $lightTheme: boolean }>`
 const SiteMenu = styled.button<{ $lightTheme: boolean }>`
   all: unset;
   cursor: pointer;
-  z-index: ${FLYOUT_Z_INDEX};
+  z-index: ${FLYOUT_Z_INDEX + 1};
 
+  display: grid;
+  place-items: center;
   /**
    * to make it simpler to click (especially on mobile),
    * we make the button extra large
    */
-  height: 16px;
-  width: 35px;
-  text-align: right;
-  margin-right: -${() => GRID_GAP_MOBILE};
-  padding-right: ${() => GRID_GAP_MOBILE};
-
+  height: calc(12px + ${() => GRID_GAP_MOBILE});
+  width: calc(12px + ${() => GRID_GAP_MOBILE});
+  transform: translate(calc(${() => GRID_GAP_MOBILE} / 2), calc(-1 * ${() => GRID_GAP_MOBILE} / 2));
+  
   ${up('md')} {
-    margin-right: -${() => GRID_GAP_DESKTOP};
-    padding-right: ${() => GRID_GAP_DESKTOP};
+    height: calc(12px + ${() => GRID_GAP_DESKTOP});
+    width: calc(12px + ${() => GRID_GAP_DESKTOP});
+    transform: translate(calc(${() => GRID_GAP_DESKTOP} / 2), calc(-1 * ${() => GRID_GAP_DESKTOP} / 2));
   }
 
   .bar {

From 881293af35bf7b2ac7febd8ab1afc215a3bc2a59 Mon Sep 17 00:00:00 2001
From: Ivan Vasilev <875116+konclave@users.noreply.github.com>
Date: Thu, 7 Nov 2024 10:24:46 +0100
Subject: [PATCH 2/9] feat: set burger icon the same size as cross icon

and remove positioning styles that should be applied by the container
---
 .../legacy/icons/header-icons/burger-menu.tsx    | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/legacy/icons/header-icons/burger-menu.tsx b/src/components/legacy/icons/header-icons/burger-menu.tsx
index 687999a8..256fc9d8 100644
--- a/src/components/legacy/icons/header-icons/burger-menu.tsx
+++ b/src/components/legacy/icons/header-icons/burger-menu.tsx
@@ -21,22 +21,16 @@ export const BurgerMenu = ({
 };
 
 const Wrapper = styled.div<{ $transition: boolean }>`
+  height: 12px;
+  width: 12px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  padding: 3px 0px;
-
-  margin-right: -${() => GRID_GAP_MOBILE};
-  padding-right: ${() => GRID_GAP_MOBILE};
-
-  ${up('md')} {
-    margin-right: -${() => GRID_GAP_DESKTOP};
-    padding-right: ${() => GRID_GAP_DESKTOP};
-  }
-
+  justify-content: center;
+  gap: 2px;
+  
   .bar {
     height: 2px;
-    margin-bottom: 2px;
     background-color: white;
     border-radius: 2px;
   }

From 6349acf405e7b9940f7c7c8c9b8a78752c58b1ad Mon Sep 17 00:00:00 2001
From: Ivan Vasilev <875116+konclave@users.noreply.github.com>
Date: Thu, 7 Nov 2024 10:38:13 +0100
Subject: [PATCH 3/9] chore: remove unused imports

---
 src/components/legacy/icons/header-icons/burger-menu.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/legacy/icons/header-icons/burger-menu.tsx b/src/components/legacy/icons/header-icons/burger-menu.tsx
index 256fc9d8..9fb41673 100644
--- a/src/components/legacy/icons/header-icons/burger-menu.tsx
+++ b/src/components/legacy/icons/header-icons/burger-menu.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
-import { GRID_GAP_DESKTOP, GRID_GAP_MOBILE } from '../../../layout/theme';
-import { up } from '../../../support/breakpoint';
 
 interface BurgerMenuProps {
   transition: boolean;
   setHoverTransition: () => void;
 }
+
 export const BurgerMenu = ({
   transition,
   setHoverTransition,

From 0c3a7f18c3bc1f27ad3ba24045dec55c4eb8e2a1 Mon Sep 17 00:00:00 2001
From: Ivan Vasilev <875116+konclave@users.noreply.github.com>
Date: Thu, 7 Nov 2024 10:55:01 +0100
Subject: [PATCH 4/9] fix: button vertical position

---
 src/components/layout/header/header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx
index 2beb2146..fca8795b 100644
--- a/src/components/layout/header/header.tsx
+++ b/src/components/layout/header/header.tsx
@@ -87,12 +87,12 @@ const SiteMenu = styled.button<{ $lightTheme: boolean }>`
    */
   height: calc(12px + ${() => GRID_GAP_MOBILE});
   width: calc(12px + ${() => GRID_GAP_MOBILE});
-  transform: translate(calc(${() => GRID_GAP_MOBILE} / 2), calc(-1 * ${() => GRID_GAP_MOBILE} / 2));
+  transformY: translate(calc(${() => GRID_GAP_MOBILE} / 2));
   
   ${up('md')} {
     height: calc(12px + ${() => GRID_GAP_DESKTOP});
     width: calc(12px + ${() => GRID_GAP_DESKTOP});
-    transform: translate(calc(${() => GRID_GAP_DESKTOP} / 2), calc(-1 * ${() => GRID_GAP_DESKTOP} / 2));
+    transform: translateY(calc(${() => GRID_GAP_DESKTOP} / 2));
   }
 
   .bar {

From 5f199f98b2fcd6b1a7583f7a056fe411e1d88006 Mon Sep 17 00:00:00 2001
From: Ivan Vasilev <875116+konclave@users.noreply.github.com>
Date: Thu, 7 Nov 2024 11:03:03 +0100
Subject: [PATCH 5/9] chore: set prettier log level to debug

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2b715854..abc96cc1 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "format": "prettier \"**/*.{tsx,ts,md}\" --write",
     "test:types": "tsc --noEmit",
     "test:lint": "eslint \"**/*.{tsx,ts}\"",
-    "test:format": "prettier \"**/*.{tsx,ts,md}\" --check",
+    "test:format": "prettier \"**/*.{tsx,ts,md}\" --check --log-level=debug",
     "postinstall": "husky install",
     "precommit": "lint-staged"
   },

From 4270d73495a1019c99566ceaa9759d1bf32bf317 Mon Sep 17 00:00:00 2001
From: Ivan Vasilev <875116+konclave@users.noreply.github.com>
Date: Thu, 7 Nov 2024 11:10:19 +0100
Subject: [PATCH 6/9] chore: use debug check for prettier

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index abc96cc1..9f87b8dd 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "format": "prettier \"**/*.{tsx,ts,md}\" --write",
     "test:types": "tsc --noEmit",
     "test:lint": "eslint \"**/*.{tsx,ts}\"",
-    "test:format": "prettier \"**/*.{tsx,ts,md}\" --check --log-level=debug",
+    "test:format": "prettier \"**/*.{tsx,ts,md}\" --check --debug-check",
     "postinstall": "husky install",
     "precommit": "lint-staged"
   },

From 67268d3e68666821a53d8d587b15d907ee14d8d3 Mon Sep 17 00:00:00 2001
From: Ivan Vasilev <875116+konclave@users.noreply.github.com>
Date: Thu, 7 Nov 2024 11:18:48 +0100
Subject: [PATCH 7/9] chore: revert prettier additional args

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9f87b8dd..2b715854 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "format": "prettier \"**/*.{tsx,ts,md}\" --write",
     "test:types": "tsc --noEmit",
     "test:lint": "eslint \"**/*.{tsx,ts}\"",
-    "test:format": "prettier \"**/*.{tsx,ts,md}\" --check --debug-check",
+    "test:format": "prettier \"**/*.{tsx,ts,md}\" --check",
     "postinstall": "husky install",
     "precommit": "lint-staged"
   },

From d050bca2b2d0ee3b2cd4c13be5b8d73197b6fae7 Mon Sep 17 00:00:00 2001
From: Ivan Vasilev <875116+konclave@users.noreply.github.com>
Date: Thu, 7 Nov 2024 11:35:37 +0100
Subject: [PATCH 8/9] chore: prettier format

---
 src/components/legacy/icons/header-icons/burger-menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/legacy/icons/header-icons/burger-menu.tsx b/src/components/legacy/icons/header-icons/burger-menu.tsx
index 9fb41673..fef9d45a 100644
--- a/src/components/legacy/icons/header-icons/burger-menu.tsx
+++ b/src/components/legacy/icons/header-icons/burger-menu.tsx
@@ -27,7 +27,7 @@ const Wrapper = styled.div<{ $transition: boolean }>`
   align-items: flex-end;
   justify-content: center;
   gap: 2px;
-  
+
   .bar {
     height: 2px;
     background-color: white;

From 62d6af4576544bc72175458313cbd78ca5a0c3a1 Mon Sep 17 00:00:00 2001
From: Ivan Vasilev <875116+konclave@users.noreply.github.com>
Date: Thu, 7 Nov 2024 11:36:44 +0100
Subject: [PATCH 9/9] chore: format code

---
 src/components/layout/header/header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx
index fca8795b..6f18582e 100644
--- a/src/components/layout/header/header.tsx
+++ b/src/components/layout/header/header.tsx
@@ -87,8 +87,8 @@ const SiteMenu = styled.button<{ $lightTheme: boolean }>`
    */
   height: calc(12px + ${() => GRID_GAP_MOBILE});
   width: calc(12px + ${() => GRID_GAP_MOBILE});
-  transformY: translate(calc(${() => GRID_GAP_MOBILE} / 2));
-  
+  transform: translateY(calc(${() => GRID_GAP_MOBILE} / 2));
+
   ${up('md')} {
     height: calc(12px + ${() => GRID_GAP_DESKTOP});
     width: calc(12px + ${() => GRID_GAP_DESKTOP});