From 87686dfad40cb9686100d52f373b6bd06e3bcf61 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Fri, 26 Jan 2024 11:26:26 +0100
Subject: [PATCH] feat: update SharePrompt

---
 package-lock.json                     | 13 ++++---------
 package.json                          |  2 +-
 src/App/styles.less                   |  3 ++-
 src/common/SharePrompt/SharePrompt.js |  9 +++++----
 src/common/SharePrompt/styles.less    | 24 ++++++++----------------
 5 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ef49d69de..a91a30d12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
                 "@sentry/browser": "6.13.3",
                 "@stremio/stremio-colors": "5.0.1",
                 "@stremio/stremio-core-web": "0.46.0",
-                "@stremio/stremio-icons": "5.0.0-beta.3",
+                "@stremio/stremio-icons": "5.2.0",
                 "@stremio/stremio-video": "0.0.30",
                 "a-color-picker": "1.2.1",
                 "bowser": "2.11.0",
@@ -2976,14 +2976,9 @@
             }
         },
         "node_modules/@stremio/stremio-icons": {
-            "version": "5.0.0-beta.3",
-            "license": "MIT",
-            "workspaces": [
-                "react",
-                "react-native",
-                "solid",
-                "angularjs"
-            ]
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.2.0.tgz",
+            "integrity": "sha512-rABlPBTFF17QcSm/4IizVoE/jh+REt+waqA0RvIxuGjQppXlvj7CalqVvTam0CC2wgY00zNG1v/9kVHUDVzo4Q=="
         },
         "node_modules/@stremio/stremio-video": {
             "version": "0.0.30",
diff --git a/package.json b/package.json
index 1770582b7..1d5a343c5 100755
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "@sentry/browser": "6.13.3",
         "@stremio/stremio-colors": "5.0.1",
         "@stremio/stremio-core-web": "0.46.0",
-        "@stremio/stremio-icons": "5.0.0-beta.3",
+        "@stremio/stremio-icons": "5.2.0",
         "@stremio/stremio-video": "0.0.30",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
diff --git a/src/App/styles.less b/src/App/styles.less
index 95566c9a8..d0bfc6bd5 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -21,7 +21,8 @@
     --vertical-nav-bar-size: 6rem;
     --focus-outline-size: 2px;
     --color-facebook: #1877F1;
-    --color-twitter: #1DA1F2;
+    --color-x: #000000;
+    --color-reddit: #FF4500;
     --color-imdb: #f5c518;
     --color-trakt: #ED2224;
     --color-placeholder: #60606080;
diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 685f19613..a1b889058 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -45,11 +45,12 @@ const SharePrompt = ({ className, url }) => {
             <div className={styles['buttons-container']}>
                 <Button className={classnames(styles['button-container'], styles['facebook-button'])} title={'Facebook'} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
                     <Icon className={styles['icon']} name={'facebook'} />
-                    <div className={styles['label']}>Facebook</div>
                 </Button>
-                <Button className={classnames(styles['button-container'], styles['twitter-button'])} title={'Twitter'} href={`https://twitter.com/home?status=${url}`} target={'_blank'}>
-                    <Icon className={styles['icon']} name={'ic_twitter'} />
-                    <div className={styles['label']}>Twitter</div>
+                <Button className={classnames(styles['button-container'], styles['x-button'])} title={'X (Twitter)'} href={`https://twitter.com/intent/tweet?text=${url}`} target={'_blank'}>
+                    <Icon className={styles['icon']} name={'x'} />
+                </Button>
+                <Button className={classnames(styles['button-container'], styles['reddit-button'])} title={'Reddit'} href={`https://www.reddit.com/submit?url=${url}`} target={'_blank'}>
+                    <Icon className={styles['icon']} name={'reddit'} />
                 </Button>
             </div>
             <div className={styles['url-container']}>
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index c9953be50..0a95778f2 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -21,24 +21,12 @@
 
             .icon {
                 flex: none;
-                height: 1.2rem;
-                margin-right: 1rem;
-                color: var(--primary-foreground-color);
-            }
-
-            .label {
-                flex-grow: 0;
-                flex-shrink: 1;
-                flex-basis: auto;
-                max-height: 2.4em;
-                font-size: 1.1rem;
-                font-weight: 500;
-                text-align: center;
+                height: 1.5rem;
                 color: var(--primary-foreground-color);
             }
         }
 
-        .facebook-button, .twitter-button {
+        .facebook-button, .x-button, .reddit-button {
             border-radius: var(--border-radius);
 
             &:focus {
@@ -50,8 +38,12 @@
             background-color: var(--color-facebook);
         }
 
-        .twitter-button {
-            background-color: var(--color-twitter);
+        .x-button {
+            background-color: var(--color-x);
+        }
+
+        .reddit-button {
+            background-color: var(--color-reddit);
         }
     }