From 209f0ad2fd1882149f096a69892d4dcb6536e26e Mon Sep 17 00:00:00 2001
From: Mike Shanks <mike@budibase.com>
Date: Thu, 13 May 2021 09:41:40 +0100
Subject: [PATCH] deprecation warning styling

---
 packages/builder/src/pages/_layout.svelte | 66 +++++++++++++++++++----
 1 file changed, 55 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index 169675ae98..1b7ac55556 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -18,14 +18,17 @@
   
   <div class="deprecation-inner">
     <div class="deprecation-text">
-      From the 25th of May, Budibase is moving to a self-hosted web experience in the browser. We will cease development on the current Electron based desktop builder.
+      From the 25th of May, Budibase is moving to a self-hosted web experience in the browser.<br/> 
+      We will cease development on the current Electron based desktop builder.
     </div>
 
-    <div class="deprecation-close">
+    <div class="deprecation-actions">
+
       <a href="https://github.com/Budibase/budibase/discussions/1487" target="_blank">read more</a>
-      <Button secondary small on:click={() => deprecationWarning = false}>
+
+      <button on:click={() => deprecationWarning = false}>
         Close
-      </Button>
+      </button>
     </div>
   </div>
   
@@ -72,7 +75,7 @@
 
   .deprecation-root {
     padding: 20px;
-    background-color: var(--red);
+    background-color: var(--yellow-light);
     display: flex;
     justify-content: center;
   }
@@ -85,18 +88,59 @@
 
   .deprecation-text {
     flex: 1 1 auto;
-    color: white;
-    font-size: 1.1em;
+    color: black;
     text-align: center;
   }
 
-  .deprecation-close {
-    padding-left: 20px;
+  .deprecation-actions {
     flex: 0 0 auto;
+    padding-left: 40px;
   }
 
-  .deprecation-close > a {
-    margin-right: 20px;
+  .deprecation-actions > a {
+    color: white;
+    border-color: black;
+    background-color: black;
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-xs) var(--spacing-m);
+    font-family: var(--font-sans);
+    cursor: pointer;
+    font-weight: 600;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: var(--border-radius-s);
+    transition: all 0.2s ease 0s;
+    display: inline-flex;
+    text-rendering: optimizeLegibility;
+    text-decoration: none;
+    min-width: auto;
+    outline: none;
+    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
+    -webkit-box-align: center;
+    user-select: none;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    border-width: 2px;
+    border-style: solid;
+  }
+
+  .deprecation-actions > a:hover {
+    background-color: white;
+    color: black;
+  }
+
+  .deprecation-actions > button {
+    border-style: none;
+    background-color: rgba(0,0,0,0);
+    color: rgb(117, 117, 117);
+    cursor: pointer;
+    margin-left: 10px;
+  }
+
+  .deprecation-actions > button:hover {
+    color: black;
   }
 
   .root {