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