119/button styling

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;

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

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%
+  );
 }

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>
   )
 }

src/components/globals.css

@@ -53,14 +53,26 @@
 \*------------------------------------*/
 
 button {
-  all: unset;
+  border: none;
+  background: none;
+  text-align: left;
   cursor: pointer;
+  color: inherit;
+  font-size: inherit;
+  padding: 0;
+  margin: 0;
+  border-radius: inherit;
 }
 
 button:disabled {
   cursor: not-allowed;
 }
 
+button:focus {
+  outline-offset: 4px;
+  transition: none;
+}
+
 /*------------------------------------*\
   Components
 \*------------------------------------*/

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>
             ) : (

src/components/popup-components/PopupInfo/PopupInfo.css

@@ -4,8 +4,17 @@ body:has(.info-panel__active) {
 }
 
 button {
-  all: unset;
+  border: none;
+  background: none;
+  text-align: left;
   cursor: pointer;
+  color: inherit;
+  font-size: inherit;
+}
+
+button:focus {
+  outline-offset: 4px;
+  transition: none;
 }
 
 .info-panel__inactive {
@@ -73,9 +82,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;