feat: update SharePrompt

This commit is contained in:
Tim 2024-01-26 11:26:26 +01:00
parent d0bee9a9c3
commit 87686dfad4
5 changed files with 20 additions and 31 deletions

13
package-lock.json generated
View file

@ -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",

View file

@ -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",

View file

@ -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;

View file

@ -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']}>

View file

@ -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);
}
}