Add basic top bar

[MAILPOET-3102]

assets/css/src/components/_top_bar.scss

@@ -0,0 +1,31 @@
+.top-bar {
+  align-items: center;
+  background-color: $color-white;
+  box-shadow:
+    0 -1px 0 0 $color-tertiary-light,
+    0 2px 4px 0 opacify($color-tertiary-light, .5);
+  display: flex;
+  flex-direction: row;
+  height: 64px;
+  justify-content: space-between;
+  margin: 0;
+  padding-left: $grid-gap;
+  padding-right: $grid-gap;
+}
+
+.top-bar-logo {
+  height: 24px;
+  object-fit: contain;
+  width: 80px;
+}
+
+.top-bar-beamer {
+  align-items: center;
+  background-color: $color-white;
+  border: solid 2px $color-tertiary-light;
+  border-radius: 4px;
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  width: 40px;
+}

assets/css/src/mailpoet-plugin.scss

@@ -57,6 +57,7 @@
 @import 'components/tags';
 @import 'components/template_box';
 @import 'components/tooltips';
+@import 'components/top_bar';
 @import 'components-plugin/automatic-emails';
 @import 'components-plugin/browser-preview';
 @import 'components-plugin/dynamic-segments';

assets/js/src/common/top_bar/_stories/top_bar_no_children.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TopBar } from '../top_bar';
+
+export default {
+  title: 'Top Bar/No Children',
+};
+
+export const TopBarWithoutChildren = () => (
+  <>
+    <div style={{
+      backgroundColor: '#bbb',
+      width: '100%',
+      position: 'fixed',
+      height: '100%',
+      top: '0px',
+      left: '0px',
+    }}
+    >
+      <TopBar />
+    </div>
+  </>
+);

assets/js/src/common/top_bar/beamer_icon.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const BeamerIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#071C6D" d="M18.2 11.286L12.525 7.33c-.318-.221-.731-.221-1.049 0l-5.675 3.956c-.302.211-.463.587-.411.964l.946 6.923c.066.488.464.849.935.849h3.783V22h1.892v-1.978h3.783c.471 0 .87-.361.936-.849l.946-6.923c.051-.377-.109-.753-.411-.964zM12 9.341l4.654 3.245-.745 5.458H8.091l-.745-5.458L12 9.341zM12 2l10 7.321-1.084 1.62L12 4.415l-8.916 6.526L2 9.321 12 2zM8.926 14.087c0 1.636 1.273 2.968 2.838 2.968 1.564 0 2.837-1.332 2.837-2.968 0-1.635-1.273-2.967-2.837-2.967-1.565 0-2.838 1.332-2.838 2.967zm3.783 0c0 .545-.424.99-.945.99-.522 0-.946-.445-.946-.99 0-.545.424-.989.946-.989.52 0 .945.444.945.99z" />
+  </svg>
+);

assets/js/src/common/top_bar/top_bar.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MailPoetLogo } from './mailpoet_logo';
+import { BeamerIcon } from './beamer_icon';
+
+export const TopBar = () => (
+  <div className="top-bar">
+    <div className="top-bar-logo">
+      <MailPoetLogo />
+    </div>
+    <div>
+      <div className="top-bar-beamer">
+        <BeamerIcon />
+      </div>
+    </div>
+  </div>
+);