Add announcement banner and new logo

src/App.js

@@ -9,6 +9,7 @@ import SetupKeys from "./views/SetupKeys";
 import AddPeer from "./views/AddPeer";
 import AccessControl from "./views/AccessControl";
 import Activity from "./views/Activity";
+import Banner from "./components/Banner";
 
 function App() {
 
@@ -57,6 +58,7 @@ function App() {
             <>
 
                 {/*<div className='h-screen flex justify-center items-center bg-green-400'>*/}
+                <Banner/>
                 <Navbar toggle={toggle}/>
                 <div className="min-h-screen bg-white">
                     <Switch>

src/assets/bars.svg

@@ -1,5 +1,5 @@
 <svg width="135" height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill-opacity="0.8">
-    <rect y="10" width="15" height="120" rx="6" fill="#4D4D4D">
+    <rect y="10" width="15" height="120" rx="6" fill="#FF6600">
         <animate attributeName="height"
              begin="0.5s" dur="1s"
              values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
@@ -9,7 +9,7 @@
              values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
              repeatCount="indefinite" />
     </rect>
-    <rect x="30" y="10" width="15" height="120" rx="6" fill="#4D4D4D">
+    <rect x="30" y="10" width="15" height="120" rx="6" fill="#FF6600">
         <animate attributeName="height"
              begin="0.25s" dur="1s"
              values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
@@ -29,7 +29,7 @@
              values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
              repeatCount="indefinite" />
     </rect>
-    <rect x="90" y="10" width="15" height="120" rx="6" fill="#C8BEB7">
+    <rect x="90" y="10" width="15" height="120" rx="6" fill="#FF6600">
         <animate attributeName="height"
              begin="0.25s" dur="1s"
              values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
@@ -39,7 +39,7 @@
              values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
              repeatCount="indefinite" />
     </rect>
-    <rect x="120" y="10" width="15" height="120" rx="6" fill="#C8BEB7">
+    <rect x="120" y="10" width="15" height="120" rx="6" fill="#FF6600">
         <animate attributeName="height"
              begin="0.5s" dur="1s"
              values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"

src/components/Banner.js

@@ -0,0 +1,51 @@
+import { XIcon } from "@heroicons/react/outline";
+import { useState } from "react";
+
+export default function Banner() {
+	const [show, setShow] = useState(true);
+
+	const dismiss = () => {
+		setShow(false);
+	};
+
+	return show ? (
+		<div className="relative bg-indigo-300">
+			<div className="max-w-7xl mx-auto py-1 px-1 sm:px-6 lg:px-8">
+				<div className="pr-16 sm:text-center sm:px-16">
+					<p className="font-normal">
+						<span className="md:hidden">
+							Big news! Wiretrustee becomes <strong>netbird</strong>!
+						</span>
+						<span className="hidden md:inline">
+							Big news! Wiretrustee becomes <strong>netbird</strong>!
+						</span>
+						<span className="block sm:ml-2 sm:inline-block">
+							<a
+								href="https://blog.netbird.io/wiretrustee-becomes-netbird"
+								className="font-bold underline"
+								target="_blank"
+							>
+								{" "}
+								Learn more{" "}
+								<span aria-hidden="true">&rarr;</span>
+							</a>
+						</span>
+					</p>
+				</div>
+				<div className="absolute inset-y-0 right-0 pt-1 pr-1 flex items-start sm:pt-1 sm:pr-2 sm:items-start">
+					<button
+						type="button"
+						className="flex p-1 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-white"
+						onClick={dismiss}
+					>
+						<span className="sr-only">Dismiss</span>
+						<XIcon
+							className="h-4 w-4"
+							aria-hidden="true"
+						/>
+					</button>
+				</div>
+			</div>
+		</div>
+	) : null;
+}