From ff13d7f09d51c2911c00b7e35919235662759258 Mon Sep 17 00:00:00 2001
From: Nich Galzin <nichgalzin@gmail.com>
Date: Tue, 12 Nov 2024 13:08:50 +0000
Subject: [PATCH 01/10] style: cleans up styling for back button

Relates #119
---
 src/components/BackButton/BackButton.css | 5 ++---
 src/components/BackButton/BackButton.tsx | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/BackButton/BackButton.css b/src/components/BackButton/BackButton.css
index 51926a09..85a958ec 100644
--- a/src/components/BackButton/BackButton.css
+++ b/src/components/BackButton/BackButton.css
@@ -1,10 +1,9 @@
 .back-button {
-  width: 25px;
-  height: 5px;
+    width: 45px;
+    height: 25px;
   background-color: var(--base);
   cursor: pointer;
   padding: 0;
-  line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx
index 8f5c93cf..2a1194ba 100644
--- a/src/components/BackButton/BackButton.tsx
+++ b/src/components/BackButton/BackButton.tsx
@@ -12,7 +12,7 @@ export default function BackButton({
 
   return (
     <button
-      className={`back-button text-xl content-box ${className}`}
+      className={`back-button content-box ${className}`}
       onClick={() => navigateTo(previousPage)}
     >
       <svg

From 4d5a07bbace767f260aac0451c9154c33ac78459 Mon Sep 17 00:00:00 2001
From: Nich Galzin <nichgalzin@gmail.com>
Date: Tue, 12 Nov 2024 13:09:28 +0000
Subject: [PATCH 02/10] style: only resets logical button styling for
 accessiblity purposes

Relates #119
---
 src/components/globals.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/globals.css b/src/components/globals.css
index ca63fd26..2ab2efbd 100644
--- a/src/components/globals.css
+++ b/src/components/globals.css
@@ -53,8 +53,12 @@
 \*------------------------------------*/
 
 button {
-  all: unset;
+  border: none;
+  background: none;
+  text-align: left;
   cursor: pointer;
+  color: inherit;
+  font-size: inherit;
 }
 
 button:disabled {

From 89e4770f298db1309e2d21dab48768dc3620a151 Mon Sep 17 00:00:00 2001
From: Nich Galzin <nichgalzin@gmail.com>
Date: Tue, 12 Nov 2024 13:09:38 +0000
Subject: [PATCH 03/10] style: cleans up styling for back button

Relates #119
---
 src/components/popup-components/PopupInfo/PopupInfo.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/popup-components/PopupInfo/PopupInfo.css b/src/components/popup-components/PopupInfo/PopupInfo.css
index a68c03bf..0c8ab911 100644
--- a/src/components/popup-components/PopupInfo/PopupInfo.css
+++ b/src/components/popup-components/PopupInfo/PopupInfo.css
@@ -4,8 +4,12 @@ body:has(.info-panel__active) {
 }
 
 button {
-  all: unset;
+  border: none;
+  background: none;
+  text-align: left;
   cursor: pointer;
+  color: inherit;
+  font-size: inherit;
 }
 
 .info-panel__inactive {
@@ -73,9 +77,7 @@ button {
   background-color: #fff;
   border: 1px solid #fff;
   border-radius: 5px;
-  cursor: pointer;
   padding: 0;
-  line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;

From 6be4a99d348d572a325d98c39ace95fc64521e7d Mon Sep 17 00:00:00 2001
From: Nich Galzin <nichgalzin@gmail.com>
Date: Tue, 12 Nov 2024 16:25:27 +0000
Subject: [PATCH 04/10] style: adds to universal reset to fix styling issue

Relates #119
---
 src/components/globals.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/globals.css b/src/components/globals.css
index 2ab2efbd..c6b458b1 100644
--- a/src/components/globals.css
+++ b/src/components/globals.css
@@ -59,6 +59,9 @@ button {
   cursor: pointer;
   color: inherit;
   font-size: inherit;
+  padding: 0;
+  margin: 0;
+  border-radius: inherit;
 }
 
 button:disabled {

From 8169daf5dad1cfa75744eaa3302307b57dea6b32 Mon Sep 17 00:00:00 2001
From: Nich Galzin <nichgalzin@gmail.com>
Date: Tue, 12 Nov 2024 16:26:28 +0000
Subject: [PATCH 05/10] refactor: removes spare div wrapper

Relates #119
---
 .../page-components/FavouritesPage/FavouritesPage.tsx        | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/page-components/FavouritesPage/FavouritesPage.tsx b/src/components/page-components/FavouritesPage/FavouritesPage.tsx
index 827de971..48ae4a7b 100644
--- a/src/components/page-components/FavouritesPage/FavouritesPage.tsx
+++ b/src/components/page-components/FavouritesPage/FavouritesPage.tsx
@@ -131,15 +131,16 @@ export default function FavouritesPage() {
             {favouritesList.length > 0 ? (
               <div className="favourites-page--favourites-grid">
                 {favouritesList.map(favourite => (
-                  <div key={favourite.id}>
+                  <>
                     <PopupCard
                       popup={favourite}
                       isEditing={isEditing}
+                      key={favourite.id}
                       removeButtonHandler={() =>
                         handlePopupRemove(favourite.id)
                       }
                     />
-                  </div>
+                  </>
                 ))}
               </div>
             ) : (

From 20ab881d4575e4085cbca5c840485bcec423c53e Mon Sep 17 00:00:00 2001
From: Nich Galzin <nichgalzin@gmail.com>
Date: Tue, 12 Nov 2024 16:27:03 +0000
Subject: [PATCH 06/10] refactor: html fix to avoid nested button error

Relates #119
---
 src/components/PopupCard/PopupCard.tsx | 44 ++++++++------------------
 1 file changed, 14 insertions(+), 30 deletions(-)

diff --git a/src/components/PopupCard/PopupCard.tsx b/src/components/PopupCard/PopupCard.tsx
index f7241bbc..631adafd 100644
--- a/src/components/PopupCard/PopupCard.tsx
+++ b/src/components/PopupCard/PopupCard.tsx
@@ -46,41 +46,25 @@ export default function PopupCard({
   }
 
   return (
-    <button onClick={handlePopup}>
-      <div
-        className={`${isEditing ? "popup-card__editing" : ""} popup-card shadow`}
-      >
+    <div
+      className={`${isEditing ? "popup-card__editing" : ""} popup-card shadow`}
+    >
+      {isEditing && (
+        <button
+          className="close-button--container"
+          onClick={removeButtonHandler}
+        >
+          <div className="popup-card--remove-button"></div>
+        </button>
+      )}
+      <button onClick={handlePopup}>
         <img
           className="popup-card--image"
           src={sourceString}
           alt={popup.work_title}
           onError={setToDefault}
         />
-        {isEditing && (
-          <button
-            onClick={removeButtonHandler}
-            className="popup-card--remove-button"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              version="1.1"
-              width="50"
-              height="50"
-              viewBox="0 0 5 250"
-              fill="var(--base)"
-            >
-              <path
-                d="M 13.4 88.492 L 1.508 76.6 c -2.011 -2.011 -2.011 -5.271 0 -7.282 L 69.318 1.508 c 2.011 -2.011 5.271 -2.011 7.282 0 L 88.492 13.4 c 2.011 2.011 2.011 5.271 0 7.282 L 20.682 88.492 C 18.671 90.503 15.411 90.503 13.4 88.492 z"
-                transform=" matrix(1 0 0 1 0 0) "
-              />
-              <path
-                d="M 69.318 88.492 L 1.508 20.682 c -2.011 -2.011 -2.011 -5.271 0 -7.282 L 13.4 1.508 c 2.011 -2.011 5.271 -2.011 7.282 0 l 67.809 67.809 c 2.011 2.011 2.011 5.271 0 7.282 L 76.6 88.492 C 74.589 90.503 71.329 90.503 69.318 88.492 z"
-                transform=" matrix(1 0 0 1 0 0) "
-              />
-            </svg>
-          </button>
-        )}
-      </div>
-    </button>
+      </button>
+    </div>
   )
 }

From af2657d5c0c2300433a40ed6660aeb37d7c3466e Mon Sep 17 00:00:00 2001
From: Nich Galzin <nichgalzin@gmail.com>
Date: Tue, 12 Nov 2024 16:27:36 +0000
Subject: [PATCH 07/10] style: style and visibility fixes for remove favourites
 button

Relates #119
---
 src/components/PopupCard/PopupCard.css | 32 ++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/PopupCard/PopupCard.css b/src/components/PopupCard/PopupCard.css
index d1457a85..b218d39d 100644
--- a/src/components/PopupCard/PopupCard.css
+++ b/src/components/PopupCard/PopupCard.css
@@ -22,9 +22,37 @@
   border: 2px solid var(--highlight);
 }
 
-.popup-card--remove-button {
-  color: var(--base);
+.close-button--container {
   position: absolute;
+  background-color: rgba(96, 96, 96, 0.6);
+  padding: 3px;
   top: 10px;
   right: 10px;
+  z-index: 1;
+  border-radius: 7px;
+}
+
+.popup-card--remove-button {
+  color: var(--base);
+  background-color: var(--base);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20px;
+  width: 20px;
+  z-index: 2;
+  clip-path: polygon(
+    20% 0%,
+    0% 20%,
+    30% 50%,
+    0% 80%,
+    20% 100%,
+    50% 70%,
+    80% 100%,
+    100% 80%,
+    70% 50%,
+    100% 20%,
+    80% 0%,
+    50% 30%
+  );
 }

From bd0a74554a84a3cc3e41ed504b0d8011fce47ddf Mon Sep 17 00:00:00 2001
From: Nich Galzin <nichgalzin@gmail.com>
Date: Tue, 12 Nov 2024 16:43:56 +0000
Subject: [PATCH 08/10] style: adds outline offset to make focus state more
 accessible and clear

Relates #119
---
 src/components/globals.css                              | 5 +++++
 src/components/popup-components/PopupInfo/PopupInfo.css | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/components/globals.css b/src/components/globals.css
index c6b458b1..f6c171fb 100644
--- a/src/components/globals.css
+++ b/src/components/globals.css
@@ -68,6 +68,11 @@ button:disabled {
   cursor: not-allowed;
 }
 
+button:focus {
+  outline-offset: 4px;
+  transition: none;
+}
+
 /*------------------------------------*\
   Components
 \*------------------------------------*/
diff --git a/src/components/popup-components/PopupInfo/PopupInfo.css b/src/components/popup-components/PopupInfo/PopupInfo.css
index 0c8ab911..a2019077 100644
--- a/src/components/popup-components/PopupInfo/PopupInfo.css
+++ b/src/components/popup-components/PopupInfo/PopupInfo.css
@@ -12,6 +12,11 @@ button {
   font-size: inherit;
 }
 
+button:focus {
+  outline-offset: 4px;
+  transition: none;
+}
+
 .info-panel__inactive {
   display: none;
   transform: translateX(200%);

From 4337b3ca997eb2d4a49dfbbcf9974cce047f46bf Mon Sep 17 00:00:00 2001
From: Nich Galzin <nichgalzin@gmail.com>
Date: Wed, 13 Nov 2024 11:51:29 +0000
Subject: [PATCH 09/10] style: removes transition none to fix burger menu
 button animation

Relates #119
---
 src/components/globals.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/globals.css b/src/components/globals.css
index f6c171fb..9d0455ac 100644
--- a/src/components/globals.css
+++ b/src/components/globals.css
@@ -70,7 +70,6 @@ button:disabled {
 
 button:focus {
   outline-offset: 4px;
-  transition: none;
 }
 
 /*------------------------------------*\

From e8128327bc6983a4b01fdeb75619d94763e68c9f Mon Sep 17 00:00:00 2001
From: Nich Galzin <nichgalzin@gmail.com>
Date: Wed, 13 Nov 2024 11:52:14 +0000
Subject: [PATCH 10/10] style: corrects z-index and transitions only transform
 to fix focus state being animtated

Relates 119
---
 src/components/BurgerMenu/BurgerMenu.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/BurgerMenu/BurgerMenu.css b/src/components/BurgerMenu/BurgerMenu.css
index cb188d5f..d8515797 100644
--- a/src/components/BurgerMenu/BurgerMenu.css
+++ b/src/components/BurgerMenu/BurgerMenu.css
@@ -16,21 +16,21 @@
 }
 
 .burger--logo {
-  z-index: 2;
-  transition: all 0.3s ease-in-out;
+  z-index: 3;
+  transition: transform 0.3s ease-in-out;
 }
 
 .burger--logo * {
-  transition: all 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
 }
 
 .burger--logo__active {
-  transition: all 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
   transform: rotate(180deg) translate(15%, -13%);
 }
 
 .burger--logo__active * {
-  transition: all 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
 }
 
 .burger--logo__active rect:nth-child(1) {
@@ -53,7 +53,7 @@
   top: 0;
   left: 0;
   transition: all 0.5s ease-out;
-  z-index: 1;
+  z-index: 2;
 }
 
 .burger--modal__inactive {