fix: Screenshare UI for non-linux systems (Vencord#568)

cootshk · May 5, 2024 · ac35f81 · ac35f81
1 parent 0623a71
commit ac35f81
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/src/renderer/components/ScreenSharePicker.tsx b/src/renderer/components/ScreenSharePicker.tsx
@@ -193,11 +193,15 @@ function StreamSettings({
     );
 
     return (
-        <div className="vcd-screen-picker-settings-grid">
+        <div className={isLinux ? "vcd-screen-picker-settings-grid" : ""}>
             <div>
                 <Forms.FormTitle>What you're streaming</Forms.FormTitle>
                 <Card className="vcd-screen-picker-card vcd-screen-picker-preview">
-                    <img src={thumb} alt="" />
+                    <img
+                        src={thumb}
+                        alt=""
+                        className={isLinux ? "vcd-screen-picker-preview-img-linux" : "vcd-screen-picker-preview-img"}
+                    />
                     <Text variant="text-sm/normal">{source.name}</Text>
                 </Card>
 
@@ -283,23 +287,22 @@ function StreamSettings({
                                     </p>
                                 </div>
                             </div>
+                            {isWindows && (
+                                <Switch
+                                    value={settings.audio}
+                                    onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
+                                    hideBorder
+                                    className="vcd-screen-picker-audio"
+                                >
+                                    Stream With Audio
+                                </Switch>
+                            )}
                         </section>
                     </div>
                 </Card>
             </div>
 
             <div>
-                {isWindows && (
-                    <Switch
-                        value={settings.audio}
-                        onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
-                        hideBorder
-                        className="vcd-screen-picker-audio"
-                    >
-                        Stream With Audio
-                    </Switch>
-                )}
-
                 {isLinux && (
                     <AudioSourcePickerLinux
                         audioSource={settings.audioSource}

diff --git a/src/renderer/components/screenSharePicker.css b/src/renderer/components/screenSharePicker.css
@@ -17,7 +17,7 @@
     grid-template-columns: 1fr 1fr;
 }
 
-.vcd-screen-picker-settings-grid > div {
+.vcd-screen-picker-settings-grid>div {
     display: flex;
     flex-direction: column;
 }
@@ -67,11 +67,16 @@
     box-sizing: border-box;
 }
 
-.vcd-screen-picker-preview img {
+.vcd-screen-picker-preview-img-linux {
     width: 100%;
     margin-bottom: 0.5em;
 }
 
+.vcd-screen-picker-preview-img {
+    width: 90%;
+    margin-bottom: 0.5em;
+}
+
 .vcd-screen-picker-preview {
     display: flex;
     flex-direction: column;