From 1bb8a806aa5f3ea0014b8b28bf2a16943b1d2eb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Wed, 11 Sep 2024 17:24:30 +0200
Subject: [PATCH] Refactor header to use clip-path

---
 src/components/Header.svelte            | 52 ++++++++++++++++++-------
 src/components/Header/Background.svelte | 52 -------------------------
 2 files changed, 37 insertions(+), 67 deletions(-)
 delete mode 100644 src/components/Header/Background.svelte

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 846fde550..5dc81f810 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Background from "./Header/Background.svelte";
   import Border from "./Border.svelte";
   import Icon from "./Icon.svelte";
   import Popover from "./Popover.svelte";
@@ -7,11 +6,8 @@
 </script>
 
 <style>
-  .flex-item {
-    display: flex;
-    align-items: center;
-  }
-  header {
+  .header {
+    margin: 0 0.5rem;
     padding: 0 0.5rem;
     gap: 0.25rem;
     height: 3rem;
@@ -25,17 +21,44 @@
     gap: 0.5rem;
     padding: 0 0.5rem;
   }
-
   .navigation :global(svg:hover) {
     display: flex;
     color: var(--color-fill-secondary);
   }
+  .bottom-pixel-corners {
+    position: absolute;
+    top: 0;
+    left: 0.5rem;
+    right: 0.5rem;
+    height: 3rem;
+    z-index: -1;
+
+    background-color: var(--color-background-float);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 6px),
+      calc(100% - 2px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 4px),
+      calc(100% - 4px) calc(100% - 2px),
+      calc(100% - 6px) calc(100% - 2px),
+      calc(100% - 6px) 100%,
+      6px 100%,
+      6px calc(100% - 2px),
+      4px calc(100% - 2px),
+      4px calc(100% - 4px),
+      2px calc(100% - 4px),
+      2px calc(100% - 6px),
+      0 calc(100% - 6px)
+    );
+  }
 </style>
 
-<header class="flex-item">
-  <div class="wrapper flex-item">
-    <div class="wrapper-left flex-item">
-      <div class="flex-item navigation" style:gap="0.5rem">
+<div class="header global-flex">
+  <div class="wrapper global-flex">
+    <div class="wrapper-left global-flex">
+      <div class="global-flex navigation" style:gap="0.5rem">
         <Icon
           name="arrow-left"
           onclick={() => {
@@ -52,7 +75,7 @@
 
     <slot name="center" />
 
-    <div class="flex-item" style:gap="0.5rem">
+    <div class="global-flex" style:gap="0.5rem">
       <Border variant="ghost" stylePadding="0 0.5rem" styleHeight="32px">
         <Icon name="offline" />
         <span class="txt-small txt-semibold">Offline</span>
@@ -75,6 +98,5 @@
       </Popover>
     </div>
   </div>
-
-  <Background />
-</header>
+  <div class="bottom-pixel-corners"></div>
+</div>
diff --git a/src/components/Header/Background.svelte b/src/components/Header/Background.svelte
deleted file mode 100644
index f3ac1e6ff..000000000
--- a/src/components/Header/Background.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-</script>
-
-<style>
-  .container {
-    height: 3rem;
-    z-index: -1;
-    position: absolute;
-    top: 0;
-    left: 0.5rem;
-    right: 0.5rem;
-    display: grid;
-    grid-template-columns: repeat(3, 2px) auto repeat(3, 2px);
-    grid-template-rows: auto repeat(3, 2px);
-  }
-  .bg {
-    background-color: var(--color-background-float);
-  }
-</style>
-
-<div class="container">
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div></div>
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div></div>
-
-  <div></div>
-  <div></div>
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div class="bg"></div>
-  <div></div>
-  <div></div>
-
-  <div></div>
-  <div></div>
-  <div></div>
-  <div class="bg"></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>