Revert "major changes to the UI/UX of the screenshare modal"

This reverts commit 6bb5f8a1a6.

src/renderer/components/ScreenSharePicker.tsx

@@ -16,7 +16,6 @@ import {
     Select,
     Switch,
     Text,
-    Tooltip,
     UserStore,
     useState
 } from "@vencord/types/webpack/common";
@@ -188,31 +187,26 @@ function StreamSettings({
             deps: [source.id]
         }
     );
-    const preview = (
+    const [visible, setVisible] = useState(false);
-        <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>
-                <div className="vcd-screen-picker-tooltip">
+                <Card className={"vcd-screen-picker-card vcd-screen-picker-preview-buttons"}>
-                    <Card className={"vcd-screen-picker-card"}>
+                    <button
-                        <Tooltip text={preview}>
+                        className="vcd-screen-picker-subtle-button"
-                            {({ onMouseEnter, onMouseLeave }) => (
+                        onClick={() => {
-                                <div
+                            setVisible(!visible);
-                                    className="vcd-screen-picker-tooltip"
+                        }}
-                                    onMouseEnter={onMouseEnter}
-                                    onMouseLeave={onMouseLeave}
                     >
                         Show Preview
-                                </div>
+                    </button>
-                            )}
+                    <button className="vcd-screen-picker-button">Change</button>
-                        </Tooltip>
+                </Card>
+                <Card className={visible ? "vcd-screen-picker-card vcd-screen-picker-preview fade-in" : "not-visible"}>
+                    <img src={thumb} alt="stream preview" />
                 </Card>
-                </div>
             </section>
             <Forms.FormTitle>Stream Settings</Forms.FormTitle>
             <Card className="vcd-screen-picker-card">
@@ -415,19 +409,7 @@ function ModalComponent({
             </Modals.ModalContent>
 
             <Modals.ModalFooter className="vcd-screen-picker-footer">
-                <div className="vcd-screen-picker-footerbuttons">
                 <Button
-                        color={Button.Colors.TRANSPARENT}
-                        className="vcd-screen-picker-startbuttons"
-                        onClick={() => {
-                            close();
-                            navigator.mediaDevices.getDisplayMedia();
-                        }}
-                    >
-                        Go Back
-                    </Button>
-                    <Button
-                        className="vcd-screen-picker-startbuttons"
                     disabled={!selected}
                     onClick={() => {
                         currentSettings = settings;
@@ -499,12 +481,8 @@ function ModalComponent({
 
                                     // changing stream quality description
                                     conn.videoStreamParameters[0].maxFrameRate = Number(settings.fps);
-                                        conn.videoStreamParameters[0].maxResolution.height = Number(
+                                    conn.videoStreamParameters[0].maxResolution.height = Number(settings.resolution);
-                                            settings.resolution
+                                    conn.videoStreamParameters[0].maxResolution.width = Math.round(height * (16 / 9));
-                                        );
-                                        conn.videoStreamParameters[0].maxResolution.width = Math.round(
-                                            height * (16 / 9)
-                                        );
                                 }, 100);
                             }
                         } catch {
@@ -516,8 +494,7 @@ function ModalComponent({
                 >
                     Go Live
                 </Button>
-                </div>
+
-                <div className="vcd-screen-picker-cancel">
                 {selected && !skipPicker ? (
                     <Button color={Button.Colors.TRANSPARENT} onClick={() => setSelected(void 0)}>
                         Back
@@ -527,7 +504,6 @@ function ModalComponent({
                         Cancel
                     </Button>
                 )}
-                </div>
             </Modals.ModalFooter>
         </Modals.ModalRoot>
     );

src/renderer/components/screenSharePicker.css

@@ -8,7 +8,6 @@
 
 .vcd-screen-picker-footer {
     display: flex;
-    justify-content: space-between;
     gap: 1em;
 }
 
@@ -53,16 +52,17 @@
     box-sizing: border-box;
 }
 
+.vcd-screen-picker-preview img {
+    width: 100%;
+    margin-bottom: 0.5em;
+}
+
 .vcd-screen-picker-preview {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     margin-bottom: 1em;
-    top: 105%;
-}
-
-.vcd-screen-picker-preview img {
-    width: 50%;
 }
 
 .vcd-screen-picker-radio input {
@@ -130,17 +130,29 @@
     font-weight: 400;
 }
 
+.vcd-screen-picker-preview-switch {
+    margin-top: 1em;
+}
+
 .not-visible {
     display: none;
 }
 
-.vcd-screen-picker-tooltip {
+.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 {
     background-color: transparent;
-    color: var(--text-normal);
+    color: var(--primary-500);
     font-weight: 500;
     font-size: 14px;
-    display: flex;
+    font-style: bold;
-    justify-content: center;
+    text-transform: uppercase;
 }
 
 .vcd-screen-picker-button{
@@ -151,23 +163,19 @@
     border-radius: 3px;
 }
 
-.vcd-screen-picker-cancel {
+.fade-in { 
-    display: flex;
+    animation-name: fade-in; 
-    flex-wrap: nowrap;
+    animation-duration: .25s;
-    flex-direction: row;
+    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
-    justify-content: space-around;
 }
   
-.vcd-screen-picker-startbuttons {
+  @keyframes fade-in {
-    margin-left: 0.5em;
+  0% {
-    margin-right: 0.5em;
+    opacity: 0;
+    transform: scale(0, 0);
+}
+100% {
+    opacity: 1;
+    transform: scale(1, 1);
     }
-
-.vcd-screen-picker-footerbuttons {
-    box-sizing: border-box;
-    margin-left: none;
-    justify-content: space-between;
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
 }