diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx index 8e2fcf3cb0..04705c454d 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/VideoQuickTrim.tsx @@ -6,7 +6,8 @@ import React, { } from "react"; import { faPlay, - faPause + faPause, + faGripDots } from "@fortawesome/pro-solid-svg-icons" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { @@ -160,7 +161,9 @@ export default function VideoQuickTrim({ ) + "%"); } }} - /> + > + +
{/* END of Playbar */} diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss index b7d3a6ff51..fa11c0ee69 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss @@ -46,18 +46,28 @@ $playbar-height: 2rem; } .trimzone{ position: absolute; - top:0; - height: 2rem; + top:-1rem; + height: 3rem; background-color: #e66462; opacity: 0.8; - + outline: 0.125rem $white solid; + border-top: 1rem $white solid; + border-radius: 0.25rem 0.25rem 0.125rem 0.125rem; cursor: grab; + + display: flex; + justify-content: center; + + .fa-grip-dots { + margin-top: -1rem; + color: $panel-inner-border; + } } .playcursor{ position: absolute; top:0; width: 0.5rem; height: $playbar-height; - background-color: white; + background-color: $white; } } \ No newline at end of file