mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-21 11:42: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",
|
"@sentry/browser": "6.13.3",
|
||||||
"@stremio/stremio-colors": "5.0.1",
|
"@stremio/stremio-colors": "5.0.1",
|
||||||
"@stremio/stremio-core-web": "0.46.0",
|
"@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",
|
"@stremio/stremio-video": "0.0.30",
|
||||||
"a-color-picker": "1.2.1",
|
"a-color-picker": "1.2.1",
|
||||||
"bowser": "2.11.0",
|
"bowser": "2.11.0",
|
||||||
|
|
@ -2976,14 +2976,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@stremio/stremio-icons": {
|
"node_modules/@stremio/stremio-icons": {
|
||||||
"version": "5.0.0-beta.3",
|
"version": "5.2.0",
|
||||||
"license": "MIT",
|
"resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.2.0.tgz",
|
||||||
"workspaces": [
|
"integrity": "sha512-rABlPBTFF17QcSm/4IizVoE/jh+REt+waqA0RvIxuGjQppXlvj7CalqVvTam0CC2wgY00zNG1v/9kVHUDVzo4Q=="
|
||||||
"react",
|
|
||||||
"react-native",
|
|
||||||
"solid",
|
|
||||||
"angularjs"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"node_modules/@stremio/stremio-video": {
|
"node_modules/@stremio/stremio-video": {
|
||||||
"version": "0.0.30",
|
"version": "0.0.30",
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
"@sentry/browser": "6.13.3",
|
"@sentry/browser": "6.13.3",
|
||||||
"@stremio/stremio-colors": "5.0.1",
|
"@stremio/stremio-colors": "5.0.1",
|
||||||
"@stremio/stremio-core-web": "0.46.0",
|
"@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",
|
"@stremio/stremio-video": "0.0.30",
|
||||||
"a-color-picker": "1.2.1",
|
"a-color-picker": "1.2.1",
|
||||||
"bowser": "2.11.0",
|
"bowser": "2.11.0",
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,8 @@
|
||||||
--vertical-nav-bar-size: 6rem;
|
--vertical-nav-bar-size: 6rem;
|
||||||
--focus-outline-size: 2px;
|
--focus-outline-size: 2px;
|
||||||
--color-facebook: #1877F1;
|
--color-facebook: #1877F1;
|
||||||
--color-twitter: #1DA1F2;
|
--color-x: #000000;
|
||||||
|
--color-reddit: #FF4500;
|
||||||
--color-imdb: #f5c518;
|
--color-imdb: #f5c518;
|
||||||
--color-trakt: #ED2224;
|
--color-trakt: #ED2224;
|
||||||
--color-placeholder: #60606080;
|
--color-placeholder: #60606080;
|
||||||
|
|
|
||||||
|
|
@ -45,11 +45,12 @@ const SharePrompt = ({ className, url }) => {
|
||||||
<div className={styles['buttons-container']}>
|
<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'}>
|
<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'} />
|
<Icon className={styles['icon']} name={'facebook'} />
|
||||||
<div className={styles['label']}>Facebook</div>
|
|
||||||
</Button>
|
</Button>
|
||||||
<Button className={classnames(styles['button-container'], styles['twitter-button'])} title={'Twitter'} href={`https://twitter.com/home?status=${url}`} target={'_blank'}>
|
<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={'ic_twitter'} />
|
<Icon className={styles['icon']} name={'x'} />
|
||||||
<div className={styles['label']}>Twitter</div>
|
</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>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles['url-container']}>
|
<div className={styles['url-container']}>
|
||||||
|
|
|
||||||
|
|
@ -21,24 +21,12 @@
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
flex: none;
|
flex: none;
|
||||||
height: 1.2rem;
|
height: 1.5rem;
|
||||||
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;
|
|
||||||
color: var(--primary-foreground-color);
|
color: var(--primary-foreground-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.facebook-button, .twitter-button {
|
.facebook-button, .x-button, .reddit-button {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|
@ -50,8 +38,12 @@
|
||||||
background-color: var(--color-facebook);
|
background-color: var(--color-facebook);
|
||||||
}
|
}
|
||||||
|
|
||||||
.twitter-button {
|
.x-button {
|
||||||
background-color: var(--color-twitter);
|
background-color: var(--color-x);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reddit-button {
|
||||||
|
background-color: var(--color-reddit);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue