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

View file

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

View file

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

View file

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

View file

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