diff --git a/src/renderer/components/ScreenSharePicker.tsx b/src/renderer/components/ScreenSharePicker.tsx index c6aa2e7..0e8f16d 100644 --- a/src/renderer/components/ScreenSharePicker.tsx +++ b/src/renderer/components/ScreenSharePicker.tsx @@ -16,6 +16,7 @@ import { Select, Switch, Text, + Tooltip, UserStore, useState } from "@vencord/types/webpack/common"; @@ -187,26 +188,40 @@ function StreamSettings({ deps: [source.id] } ); - const [visible, setVisible] = useState(false); + const preview = ( +
+ stream preview; +
+ ); // the source's name is not properly being displayed return (
What you're streaming
- - - - - - stream preview - +
+ + + {({ onMouseEnter, onMouseLeave }) => ( +
+ Show Preview +
+ )} +
+ +
+
Stream Settings diff --git a/src/renderer/components/screenSharePicker.css b/src/renderer/components/screenSharePicker.css index d1215c2..8fff899 100644 --- a/src/renderer/components/screenSharePicker.css +++ b/src/renderer/components/screenSharePicker.css @@ -138,21 +138,13 @@ display: none; } -.vcd-screen-picker-preview-buttons { - display: flex; - flex-direction: row; - justify-content: space-between; - background-color: var(--background-secondary); - margin-bottom: 1em; -} - -.vcd-screen-picker-subtle-button { +.vcd-screen-picker-tooltip { background-color: transparent; - color: var(--primary-500); + color: var(--text-normal); font-weight: 500; font-size: 14px; - font-style: bold; - text-transform: uppercase; + display: flex; + justify-content: center; } .vcd-screen-picker-button{ @@ -161,21 +153,4 @@ font-weight: 500; font-size: 14px; border-radius: 3px; -} - -.fade-in { - animation-name: fade-in; - animation-duration: .25s; - animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); -} - - @keyframes fade-in { - 0% { - opacity: 0; - transform: scale(0, 0); -} -100% { - opacity: 1; - transform: scale(1, 1); - } } \ No newline at end of file