mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
feat: update SharePrompt
This commit is contained in:
parent
d0bee9a9c3
commit
87686dfad4
5 changed files with 20 additions and 31 deletions
13
package-lock.json
generated
13
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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']}>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue