started styling the screenshare picker and added a change window button to the picker(not currently functional)

src/renderer/components/ScreenSharePicker.tsx

@@ -187,31 +187,27 @@ function StreamSettings({
             deps: [source.id]
         }
     );
-    const notVisible = false;
+    const [visible, setVisible] = useState(false);
-    function setVisible() {
-        return !notVisible;
-    }
     // the source's name is not properly being displayed
     return (
         <div>
             <Forms.FormTitle>What you're streaming</Forms.FormTitle>
-            <Switch
+            <section>
-                onChange={setVisible}
+                <Card className={"vcd-screen-picker-card vcd-screen-picker-preview-buttons"}>
-                value={notVisible ?? false}
+                    <button
-                className="vcd-screen-picker-audio vcd-screen-picker-preview-switch"
+                        className="vcd-screen-picker-subtle-button"
+                        onClick={() => {
+                            setVisible(!visible);
+                        }}
                     >
                         Show Preview
-            </Switch>
+                    </button>
-            <Card
+                    <button className="vcd-screen-picker-button">Change</button>
-                className={
-                    notVisible
-                        ? "vcd-screen-picker-card vcd-screen-picker-preview not-visible"
-                        : "vcd-screen-picker-card vcd-screen-picker-preview"
-                }
-            >
-                <img src={thumb} alt="stream preview" />
-                <Text variant="text-sm/normal">{source.name}</Text>
                 </Card>
+                <Card className={visible ? "vcd-screen-picker-card vcd-screen-picker-preview fade-in" : "not-visible"}>
+                    <img src={thumb} alt="stream preview" />
+                </Card>
+            </section>
             <Forms.FormTitle>Stream Settings</Forms.FormTitle>
             <Card className="vcd-screen-picker-card">
                 <div className="vcd-screen-picker-quality">

src/renderer/components/screenSharePicker.css

@@ -137,3 +137,45 @@
 .not-visible {
     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 {
+    background-color: transparent;
+    color: var(--primary-500);
+    font-weight: 500;
+    font-size: 14px;
+    font-style: bold;
+    text-transform: uppercase;
+}
+
+.vcd-screen-picker-button{
+    background-color: var(--primary-500);
+    color: var(--text-normal);
+    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);
+    }
+}