submit bar

src/components/bars/PlayerBar/styles.scss

@@ -1,14 +1,8 @@
 .place {
   position: relative;
-  height: 64px;
+  height: $bar_height;
   flex: 0 1 500px;
   display: flex;
-
-  &:hover {
-    .seeker {
-      transform: translate(0, -64px);
-    }
-  }
 }
 
 .wrap {
@@ -22,7 +16,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 64px;
+  height: $bar_height;
   flex-direction: column;
   transform: translate(0, 0);
   z-index: 3;
@@ -30,18 +24,18 @@
 }
 
 .status {
-  flex: 0 0 64px;
+  flex: 0 0 $bar_height;
   display: flex;
   flex-direction: row;
   width: 100%;
   position: absolute;
   z-index: 1;
-  height: 64px;
+  height: $bar_height;
 }
 
 .playpause,
 .close {
-  flex: 0 0 48px;
+  flex: 0 0 $bar_height;
   display: flex;
   align-items: center;
   justify-content: center;

src/components/bars/SubmitBar/index.tsx

@@ -0,0 +1,39 @@
+import React, { FC, useCallback } from 'react';
+import { connect } from 'react-redux';
+import { Icon } from '~/components/input/Icon';
+import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import { DIALOGS } from '~/redux/modal/constants';
+
+import * as styles from './styles.scss';
+
+const mapStateToProps = null;
+const mapDispatchToProps = {
+  showDialog: MODAL_ACTIONS.modalShowDialog,
+};
+
+type IProps = typeof mapDispatchToProps & {};
+
+const SubmitBarUnconnected: FC<IProps> = ({ showDialog }) => {
+  const onOpenImageEditor = useCallback(() => showDialog(DIALOGS.EDITOR_IMAGE), [showDialog]);
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.panel}>
+        <div onClick={onOpenImageEditor}>
+          <Icon icon="image" />
+        </div>
+      </div>
+
+      <div className={styles.button}>
+        <Icon icon="plus" />
+      </div>
+    </div>
+  );
+};
+
+const SubmitBar = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SubmitBarUnconnected);
+
+export { SubmitBar };

src/components/bars/SubmitBar/styles.scss

@@ -0,0 +1,65 @@
+.wrap {
+  position: absolute;
+  right: -($bar_height + $gap);
+
+  &:hover {
+    .panel {
+      transform: translate(0, 0);
+    }
+  }
+
+  @include tablet {
+    position: relative;
+    right: 0;
+    margin-left: $gap;
+  }
+}
+
+.button {
+  background: $red_gradient;
+  width: $bar_height;
+  height: $bar_height;
+  border-radius: $bar_height / 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius $radius 0 0;
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+.panel {
+  background: lighten($content_bg, 4%);
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  padding-bottom: $bar_height;
+  border-radius: $radius $radius 0 0;
+  transform: translate(0, 100%);
+  transition: transform 250ms;
+
+  div {
+    @include outer_shadow;
+    height: $bar_height;
+    width: $bar_height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    svg {
+      width: 32px;
+      height: 32px;
+    }
+
+    &:first-child {
+      border-radius: $radius $radius 0 0;
+    }
+  }
+}