diff --git a/assets/css/src/components/_top_bar.scss b/assets/css/src/components/_top_bar.scss new file mode 100644 index 0000000000..5764916219 --- /dev/null +++ b/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; +} diff --git a/assets/css/src/mailpoet-plugin.scss b/assets/css/src/mailpoet-plugin.scss index 42b225d333..43a460f56c 100644 --- a/assets/css/src/mailpoet-plugin.scss +++ b/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'; diff --git a/assets/js/src/common/top_bar/_stories/top_bar_no_children.tsx b/assets/js/src/common/top_bar/_stories/top_bar_no_children.tsx new file mode 100644 index 0000000000..bdaef148a7 --- /dev/null +++ b/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 = () => ( + <> +
+ +
+ +); diff --git a/assets/js/src/common/top_bar/beamer_icon.tsx b/assets/js/src/common/top_bar/beamer_icon.tsx new file mode 100644 index 0000000000..b2d4ec13eb --- /dev/null +++ b/assets/js/src/common/top_bar/beamer_icon.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export const BeamerIcon = () => ( + + + +); diff --git a/assets/js/src/common/top_bar/mailpoet_logo.tsx b/assets/js/src/common/top_bar/mailpoet_logo.tsx new file mode 100644 index 0000000000..c112952de4 --- /dev/null +++ b/assets/js/src/common/top_bar/mailpoet_logo.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export const MailPoetLogo = () => ( + + + +); diff --git a/assets/js/src/common/top_bar/top_bar.tsx b/assets/js/src/common/top_bar/top_bar.tsx new file mode 100644 index 0000000000..c64e49ac2a --- /dev/null +++ b/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 = () => ( +
+
+ +
+
+
+ +
+
+
+);