From b9b336126a7c04e7a49d7b2c73b17e0ccd45a99b Mon Sep 17 00:00:00 2001
From: kaitlynkittyy <kaitlynyaadev@kaitlynyaa.dev>
Date: Wed, 10 Apr 2024 23:34:54 -0400
Subject: [PATCH] started styling the screenshare picker and added a change
 window button to the picker(not currently functional)

---
 src/renderer/components/ScreenSharePicker.tsx | 38 ++++++++---------
 src/renderer/components/screenSharePicker.css | 42 +++++++++++++++++++
 2 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/src/renderer/components/ScreenSharePicker.tsx b/src/renderer/components/ScreenSharePicker.tsx
index 18dc511..0a314af 100644
--- a/src/renderer/components/ScreenSharePicker.tsx
+++ b/src/renderer/components/ScreenSharePicker.tsx
@@ -187,31 +187,27 @@ function StreamSettings({
             deps: [source.id]
         }
     );
-    const notVisible = false;
-    function setVisible() {
-        return !notVisible;
-    }
+    const [visible, setVisible] = useState(false);
     // the source's name is not properly being displayed
     return (
         <div>
             <Forms.FormTitle>What you're streaming</Forms.FormTitle>
-            <Switch
-                onChange={setVisible}
-                value={notVisible ?? false}
-                className="vcd-screen-picker-audio vcd-screen-picker-preview-switch"
-            >
-                Show Preview
-            </Switch>
-            <Card
-                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>
+            <section>
+                <Card className={"vcd-screen-picker-card vcd-screen-picker-preview-buttons"}>
+                    <button
+                        className="vcd-screen-picker-subtle-button"
+                        onClick={() => {
+                            setVisible(!visible);
+                        }}
+                    >
+                        Show Preview
+                    </button>
+                    <button className="vcd-screen-picker-button">Change</button>
+                </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">
diff --git a/src/renderer/components/screenSharePicker.css b/src/renderer/components/screenSharePicker.css
index 1ef60f2..d1215c2 100644
--- a/src/renderer/components/screenSharePicker.css
+++ b/src/renderer/components/screenSharePicker.css
@@ -136,4 +136,46 @@
 
 .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);
+    }
 }
\ No newline at end of file