Properly rewrote modal UI/UX (not complete)

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 = (
+        <div className="vcd-screen-picker-preview">
+            <img src={thumb} alt="stream preview" />;
+        </div>
+    );
     // the source's name is not properly being displayed
     return (
         <div>
             <Forms.FormTitle>What you're streaming</Forms.FormTitle>
             <section>
-                <Card className={"vcd-screen-picker-card vcd-screen-picker-preview-buttons"}>
+                <div className="vcd-screen-picker-tooltip">
-                    <button
+                    <Card className={"vcd-screen-picker-card"}>
-                        className="vcd-screen-picker-subtle-button"
+                        <Tooltip text={preview}>
-                        onClick={() => {
+                            {({ onMouseEnter, onMouseLeave }) => (
-                            setVisible(!visible);
+                                <div
-                        }}
+                                    className="vcd-screen-picker-tooltip"
-                    >
+                                    onMouseEnter={onMouseEnter}
-                        Show Preview
+                                    onMouseLeave={onMouseLeave}
-                    </button>
+                                >
-                    <button className="vcd-screen-picker-button">Change</button>
+                                    Show Preview
-                </Card>
+                                </div>
-                <Card className={visible ? "vcd-screen-picker-card vcd-screen-picker-preview fade-in" : "not-visible"}>
+                            )}
-                    <img src={thumb} alt="stream preview" />
+                        </Tooltip>
-                </Card>
+                        <Button
+                            color={Button.Colors.TRANSPARENT}
+                            className="vcd-screen-picker-startbuttons"
+                            onClick={() => {
+                                navigator.mediaDevices.getDisplayMedia();
+                            }}
+                        >
+                            Go Back
+                        </Button>
+                    </Card>
+                </div>
             </section>
             <Forms.FormTitle>Stream Settings</Forms.FormTitle>
             <Card className="vcd-screen-picker-card">

src/renderer/components/screenSharePicker.css

@@ -138,21 +138,13 @@
     display: none;
 }
 
-.vcd-screen-picker-preview-buttons {
+.vcd-screen-picker-tooltip {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    background-color: var(--background-secondary);
-    margin-bottom: 1em;
-}
-
-.vcd-screen-picker-subtle-button {
     background-color: transparent;
-    color: var(--primary-500);
+    color: var(--text-normal);
     font-weight: 500;
     font-size: 14px;
-    font-style: bold;
+    display: flex;
-    text-transform: uppercase;
+    justify-content: center;
 }
 
 .vcd-screen-picker-button{
@@ -162,20 +154,3 @@
     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);
-    }
-}