Use mask to draw header bar

5 files changed, 10 insertions, 33 deletions

diff --git a/app/assets/images/app-header-backdrop.svg b/app/assets/images/app-header-backdrop.svg
new file mode 100644
index 0000000000..4c811518bf
--- /dev/null
+++ b/app/assets/images/app-header-backdrop.svg
@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>app-triangle-extended</title>
+    <desc>Mullvad VPN app</desc>
+    <rect x="0" y="12" width="100%" height="100%" rx="8" ry="8" />
+</svg>
\ No newline at end of file
diff --git a/app/assets/images/app-triangle-default-dark.svg b/app/assets/images/app-triangle-default-dark.svg
deleted file mode 100644
index 2585895c05..0000000000
--- a/app/assets/images/app-triangle-default-dark.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>app-triangle-extended</title>
-    <desc>Mullvad VPN app</desc>
-    <path fill="#192E45" d="M0,12 L30,12 L30,13 L0,13 L0,12 Z M0,12 C7.24137931,12 12.9310345,1.0135008e-16 15,0 C17.0689655,0 23.7931034,12 30,12 L0,12 Z" id="app-triangle-extended"></path>
-</svg>
\ No newline at end of file
diff --git a/app/assets/images/app-triangle-error.svg b/app/assets/images/app-triangle-error.svg
deleted file mode 100644
index 2914d7e389..0000000000
--- a/app/assets/images/app-triangle-error.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>app-triangle-extended</title>
-    <desc>Mullvad VPN app</desc>
-    <path fill="#D0021B" d="M0,12 L30,12 L30,13 L0,13 L0,12 Z M0,12 C7.24137931,12 12.9310345,1.0135008e-16 15,0 C17.0689655,0 23.7931034,12 30,12 L0,12 Z" id="app-triangle-extended"></path>
-</svg>
\ No newline at end of file
diff --git a/app/assets/images/app-triangle-success.svg b/app/assets/images/app-triangle-success.svg
deleted file mode 100644
index 711e99afd7..0000000000
--- a/app/assets/images/app-triangle-success.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>app-triangle-extended</title>
-    <desc>Mullvad VPN app</desc>
-    <path fill="#44AD4D" d="M0,12 L30,12 L30,13 L0,13 L0,12 Z M0,12 C7.24137931,12 12.9310345,1.0135008e-16 15,0 C17.0689655,0 23.7931034,12 30,12 L0,12 Z" id="app-triangle-extended"></path>
-</svg>
\ No newline at end of file
diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
index 44e50870ba..5e6f4386af 100644
--- a/app/components/HeaderBar.css
+++ b/app/components/HeaderBar.css
@@ -1,26 +1,13 @@
 .headerbar {
-  margin-top: 12px;
-  padding: 12px;
+  padding: 24px 12px 12px;
   background-color: #294D73;
-  border-radius: 8px 8px 0 0;
-  position: relative;
-}
-
-.headerbar:before {
-  display: block;
-  content: '';
-  width: 30px;
-  height: 13px;
-  margin: -12px 0 0 -15px;
-  position: absolute;
-  left: 50%;
-  top: 0%;
-  background-image: url(../assets/images/app-triangle.svg);
-  background-repeat: no-repeat;
+  -webkit-mask: 
+    url(../assets/images/app-triangle.svg) 50% 0% no-repeat, 
+    url(../assets/images/app-header-backdrop.svg) no-repeat;
 }
 
 .headerbar--hidden { 
-  padding: 12px 0 0 0;
+  padding: 24px 0 0 0;
 }
 
 .headerbar--style-defaultDark {