Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-07 02:09:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

conflicts resolved

Browse source
This commit is contained in:
nklhrstv 2020-03-10 17:52:15 +02:00
commit 27eefd9fdb
13 changed files with 364 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/App/styles.less
View file

@ -36,7 +36,7 @@
overflow: hidden;
word-break: break-word;
scrollbar-width: thin;
scrollbar-color: @color-secondary-light4-80 @color-background-dark3;
scrollbar-color: @color-secondaryvariant2-light1 @color-background-dark2;
}
::-webkit-scrollbar {
@ -44,11 +44,15 @@
}
::-webkit-scrollbar-thumb {
background-color: @color-secondary-light4-80;
background-color: @color-secondaryvariant2-light1;
&:hover {
background-color: @color-secondaryvariant2-light2;
}
}
::-webkit-scrollbar-track {
background-color: @color-background-dark3;
background-color: @color-background-dark2;
}
svg {

21
src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
View file

@ -20,21 +20,20 @@ const AddonDetails = ({ className, id, name, version, logo, description, types,
alt={' '}
renderFallback={renderLogoFallback}
/>
<span className={styles['name']}>{typeof name === 'string' && name.length > 0 ? name : id}</span>
<div className={styles['name-container']}>
<span className={styles['name']}>{typeof name === 'string' && name.length > 0 ? name : id}</span>
{
typeof version === 'string' && version.length > 0 ?
<span className={styles['version']}>v. {version}</span>
:
null
}
</div>
</div>
{
typeof description === 'string' && description.length > 0 ?
<div className={styles['section-container']}>
<span className={styles['section-header']}>{description}</span>
</div>
:
null
}
{
typeof version === 'string' && version.length > 0 ?
<div className={styles['section-container']}>
<span className={styles['section-header']}>Version: </span>
<span className={styles['section-label']}>{version}</span>
<span className={styles['section-label']}>{description}</span>
</div>
:
null

47
src/common/AddonDetailsModal/AddonDetails/styles.less
View file

@ -1,12 +1,18 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.addon-details-container {
.title-container {
display: flex;
flex-direction: row;
align-items: center;
.logo, .icon {
float: left;
width: 5rem;
height: 5rem;
margin-right: 1rem;
margin-right: 1.5rem;
padding: 0.5rem;
background-color: var(--color-backgrounddarker);
background-color: @color-background-dark5;
}
.logo {
@ -15,13 +21,34 @@
}
.icon {
fill: var(--color-surfacelighter);
fill: @color-secondaryvariant1-light3;
}
.name {
font-size: 2.4rem;
font-weight: 300;
line-height: 5rem;
.name-container {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
.name {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
margin-right: 0.5rem;
font-size: 1.6rem;
color: @color-background-dark5-90;
}
.version {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
margin-top: 0.5rem;
color: @color-background-dark5-60;
}
}
}
@ -29,12 +56,14 @@
margin-top: 1rem;
.section-header {
font-size: 1.2rem;
font-size: 1.1rem;
color: @color-background-dark5-90;
}
.section-label {
font-size: 1.2rem;
font-size: 1.1rem;
font-weight: 300;
color: @color-background-dark5-90;
&.transport-url-label {
user-select: text;

33
src/common/AddonDetailsModal/styles.less
View file

@ -1,10 +1,12 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
:import('~stremio/common/ModalDialog/styles.less') {
label: label;
}
.addon-details-modal-container {
.addon-details-container, .addon-details-message-container {
width: 60rem;
width: 40rem;
max-width: 100%;
}
@ -15,20 +17,29 @@
}
}
.cancel-button, .uninstall-button {
background-color: transparent;
outline-width: var(--focus-outline-size);
outline-offset: calc(-1 * var(--focus-outline-size));
outline-color: var(--color-surfacedarker);
outline-style: solid;
.uninstall-button, .cancel-button {
&:focus {
outline-color: @color-background-dark5;
}
}
&:hover, &:focus {
filter: none;
background: var(--color-surfacelight);
.cancel-button {
background-color: transparent;
&:hover {
background-color: @color-surface-light3;
}
.label {
color: var(--color-surfacedarker);
color: @color-surface-dark2;
}
}
.uninstall-button {
background-color: @color-accent2;
&:hover {
background-color: @color-accent2-light2;
}
}
}

20
src/common/ModalDialog/ModalDialog.js
View file

@ -54,17 +54,15 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
return (
<Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}>
<div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}>
<div className={styles['header-container']}>
{
typeof title === 'string' && title.length > 0 ?
<div className={styles['title-container']} title={title}>{title}</div>
:
null
}
<Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_x'} />
</Button>
</div>
<Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_x'} />
</Button>
{
typeof title === 'string' && title.length > 0 ?
<div className={styles['title-container']} title={title}>{title}</div>
:
null
}
<div className={styles['modal-dialog-content']}>
{children}
</div>

92
src/common/ModalDialog/styles.less
View file

@ -1,8 +1,10 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.modal-container {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-backgrounddark40);
background-color: @color-background-dark5-40;
.modal-dialog-container {
flex: none;
@ -10,57 +12,47 @@
flex-direction: column;
max-width: 80%;
max-height: 80%;
background-color: var(--color-surfacelighter);
background-color: @color-surface-light5;
.header-container {
.close-button-container {
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 0.2rem 0.2rem 0;
align-self: flex-end;
width: 2rem;
height: 2rem;
margin: 0.2rem 0.2rem 0 0;
padding: 0.5rem;
.title-container {
flex: 1;
align-self: center;
max-height: 2.4em;
padding: 0 0.5rem;
font-size: 1.2rem;
color: var(--color-backgrounddarker);
.icon {
display: block;
width: 100%;
height: 100%;
fill: @color-surface-dark1;
}
.close-button-container {
flex: none;
align-self: flex-start;
width: 2rem;
height: 2rem;
padding: 0.5rem;
&:hover, &:focus {
.icon {
display: block;
width: 100%;
height: 100%;
fill: var(--color-surfacedark);
}
&:hover, &:focus {
background-color: var(--color-surfacelight);
.icon {
fill: var(--color-surfacedarker);
}
}
&:focus {
outline-color: var(--color-surfacedark);
fill: @color-surface-light1;
}
}
&:focus {
outline-color: @color-background-dark5;
}
}
.title-container {
flex: 1 0 auto;
max-height: 2.4em;
margin: 0 2rem;
font-size: 1.2rem;
font-weight: 500;
color: @color-background-dark5-90;
}
.modal-dialog-content {
flex: 1;
align-self: stretch;
margin: 2rem 1rem 0;
margin: 1.5rem 1rem 0;
padding: 0 1rem;
overflow-y: auto;
@ -72,7 +64,7 @@
.buttons-container {
flex: none;
align-self: stretch;
margin: 1rem 2rem 0;
margin: 2rem 2rem 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@ -90,17 +82,15 @@
flex-direction: row;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: var(--color-signal5);
&:focus {
outline-width: calc(1.5 * var(--focus-outline-size));
outline-color: var(--color-surfacelighter);
outline-offset: calc(-2 * var(--focus-outline-size));
}
padding: 1.2rem;
background-color: @color-accent3;
&:hover {
filter: brightness(1.2);
background-color: @color-accent3-light2;
}
&:focus {
outline-color: @color-background-dark5;
}
&:not(:last-child) {
@ -112,7 +102,7 @@
width: 1.2rem;
height: 1.2rem;
margin-right: .5rem;
fill: var(--color-surfacelighter);
fill: @color-surface-light5;
}
.label {
@ -122,6 +112,6 @@
max-height: 3.6em;
font-size: 1.1rem;
text-align: center;
color: var(--color-surfacelighter);
color: @color-surface-light5;
}
}

2
src/common/SharePrompt/SharePrompt.js
View file

@ -25,7 +25,7 @@ const SharePrompt = ({ className, url }) => {
if (routeFocused && inputRef.current !== null) {
inputRef.current.select();
}
}, []);
}, [routeFocused]);
return (
<div className={classnames(className, styles['share-prompt-container'])}>
<div className={styles['buttons-container']}>

53
src/common/SharePrompt/styles.less
View file

@ -1,15 +1,12 @@
.share-prompt-container {
min-width: 18rem;
background: var(--color-surfacelighter);
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.share-prompt-container {
.buttons-container {
display: flex;
flex-direction: row;
.button-container {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 14rem;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
@ -20,20 +17,11 @@
margin-right: 1rem;
}
&:hover {
filter: brightness(1.2);
}
&:focus {
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
outline-offset: calc(-2 * var(--focus-outline-size));
}
.icon {
flex: none;
height: 1.2rem;
margin-right: 1rem;
fill: var(--color-surfacelighter);
fill: @color-surface-light5;
}
.label {
@ -41,9 +29,20 @@
flex-shrink: 1;
flex-basis: auto;
max-height: 2.4em;
font-size: 1.1rem;
font-weight: 500;
text-align: center;
color: var(--color-surfacelighter);
color: @color-surface-light5;
}
}
.facebook-button, .twitter-button {
&:hover {
filter: brightness(1.2);
}
&:focus {
outline-color: @color-background-dark5;
}
}
@ -60,15 +59,15 @@
display: flex;
flex-direction: row;
margin-top: 1rem;
border: thin solid var(--color-surface);
background-color: @color-surface-light2;
.url-text-input {
flex: 1;
align-self: stretch;
padding: 1rem;
color: var(--color-backgroundlighter);
font-size: 1.1rem;
text-align: center;
border-right: thin solid var(--color-surface);
color: @color-background-dark5;
}
.copy-button {
@ -79,16 +78,15 @@
align-items: center;
justify-content: center;
width: 8rem;
padding: 0.5rem;
background-color: var(--color-surface);
padding: 1rem;
background-color: @color-accent3;
&:hover {
filter: brightness(1.2);
background-color: @color-accent3-light2;
}
&:focus {
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
outline-offset: calc(-1.5 * var(--focus-outline-size));
outline-color: @color-background-dark5;
}
.icon {
@ -96,7 +94,7 @@
width: 1.2rem;
height: 1.2rem;
margin-right: 0.5rem;
fill: var(--color-surfacedarker);
fill: @color-surface-light5;
}
.label {
@ -104,7 +102,8 @@
flex-shrink: 1;
flex-basis: auto;
max-height: 2.4em;
color: var(--color-surfacedarker);
font-size: 1.1rem;
color: @color-surface-light5;
}
}
}

4
src/routes/Addons/Addon/Addon.js
View file

@ -85,9 +85,9 @@ const Addon = ({ className, id, name, version, logo, description, types, install
<Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} onClick={toggleButtonOnClick}>
<div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
</Button>
<Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={shareButtonOnClick}>
<Button className={styles['share-button-container']} title={'SHARE ADDON'} tabIndex={-1} onClick={shareButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_share'} />
<div className={styles['label']}>Share addon</div>
<div className={styles['label']}>SHARE ADDON</div>
</Button>
</div>
</Button>

59
src/routes/Addons/Addon/styles.less
View file

@ -1,16 +1,18 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.addon-container {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 1rem;
background-color: var(--color-backgroundlighter);
padding: 1.5rem;
background-color: @color-background;
cursor: inherit;
.logo-container {
flex: none;
width: 8rem;
height: 8rem;
background-color: var(--color-backgrounddarker);
width: 6rem;
height: 6rem;
background-color: @color-surface-light5;
.logo {
display: block;
@ -26,7 +28,7 @@
width: 100%;
height: 100%;
padding: 1rem;
fill: var(--color-surfacelighter);
fill: @color-secondaryvariant1-light3;
}
}
@ -47,7 +49,7 @@
padding: 0 0.5rem;
max-height: 3.6em;
font-size: 1.6rem;
color: var(--color-surfacelighter);
color: @color-surface-light5-90;
}
.version-container {
@ -57,7 +59,7 @@
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 2.4em;
color: var(--color-surfacelight);
color: @color-surface-light5-60;
}
.types-container {
@ -67,7 +69,7 @@
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 2.4em;
color: var(--color-surfacelight);
color: @color-surface-light5-40;
text-transform: capitalize;
}
@ -78,7 +80,7 @@
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 4.8em;
color: var(--color-surfacelight);
color: @color-surface-light5-90;
}
}
@ -91,7 +93,7 @@
flex-direction: row;
align-items: center;
justify-content: center;
height: 3.5rem;
height: 4rem;
padding: 0 1rem;
&:not(:first-child) {
@ -100,8 +102,8 @@
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
width: 2rem;
height: 2rem;
margin-right: 1rem;
}
@ -117,57 +119,48 @@
}
.install-button-container {
background-color: var(--color-signal5);
background-color: @color-accent3;
&:hover {
filter: brightness(1.2);
background-color: @color-accent3-light2;
}
.label {
color: var(--color-surfacelighter);
color: @color-surface-light5;
}
}
.uninstall-button-container {
outline-color: var(--color-surfacedark);
outline-color: @color-background-light3;
outline-style: solid;
&:hover {
outline-color: var(--color-surfacelight);
.label {
color: var(--color-surfacelight);
}
background-color: @color-background-light2;
}
.label {
color: var(--color-surfacedark);
color: @color-surface-light5-90;
}
}
.share-button-container {
outline-color: var(--color-secondarylighter);
outline-style: solid;
&:hover {
outline: none;
background: var(--color-secondarylight);
.icon {
fill: var(--color-surfacelighter);
fill: @color-secondaryvariant1-light1;
}
.label {
color: var(--color-surfacelighter);
text-decoration: underline;
color: @color-secondaryvariant1-light2;
}
}
.icon {
fill: var(--color-secondarylighter);
fill: @color-secondaryvariant1-dark1-60;
}
.label {
color: var(--color-secondarylighter);
color: @color-secondaryvariant1-90;
}
}
}

54
src/routes/Addons/Addons.js
View file

@ -2,7 +2,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const { useRouteFocused } = require('stremio-router');
const Icon = require('stremio-icons/dom');
const { AddonDetailsModal, Button, Multiselect, MainNavBars, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
const Addon = require('./Addon');
const useAddons = require('./useAddons');
const useSelectableInputs = require('./useSelectableInputs');
@ -64,15 +64,20 @@ const Addons = ({ urlParams, queryParams }) => {
const searchInputOnChange = React.useCallback((event) => {
setSearch(event.currentTarget.value);
}, []);
const [sharedTransportUrl, setSharedTransportUrl] = React.useState(null);
const clearSharedTransportUrl = React.useCallback(() => {
setSharedTransportUrl(null);
const [sharedAddon, setSharedAddon] = React.useState(null);
const renderLogoFallback = React.useMemo(() => () => {
return (
<Icon className={styles['icon']} icon={'ic_addons'} />
);
}, []);
const clearSharedAddon = React.useCallback(() => {
setSharedAddon(null);
}, []);
const onAddonShare = React.useCallback((event) => {
setSharedTransportUrl(event.dataset.transportUrl);
setSharedAddon(event.dataset.addon);
}, []);
const onAddonToggle = React.useCallback((event) => {
navigate({ detailsTransportUrl: event.dataset.transportUrl });
navigate({ detailsTransportUrl: event.dataset.addon.transportUrl });
}, [navigate]);
const closeAddonDetails = React.useCallback(() => {
navigate({ detailsTransportUrl: null });
@ -80,7 +85,7 @@ const Addons = ({ urlParams, queryParams }) => {
React.useLayoutEffect(() => {
closeAddAddonModal();
setSearch('');
clearSharedTransportUrl();
clearSharedAddon();
}, [urlParams, queryParams]);
return (
<MainNavBars className={styles['addons-container']} route={'addons'}>
@ -97,15 +102,16 @@ const Addons = ({ urlParams, queryParams }) => {
className={styles['select-input-container']}
/>
))}
<div className={styles['spacing']} />
<label className={styles['search-bar-container']}>
<Icon className={styles['icon']} icon={'ic_search'} />
<TextInput
className={styles['search-input']}
type={'text'}
placeholder={'Search addons...'}
placeholder={'Search addons'}
value={search}
onChange={searchInputOnChange}
/>
<Icon className={styles['icon']} icon={'ic_search'} />
</label>
</div>
{
@ -152,7 +158,7 @@ const Addons = ({ urlParams, queryParams }) => {
installed={addon.installed}
onToggle={onAddonToggle}
onShare={onAddonShare}
dataset={{ transportUrl: addon.transportUrl }}
dataset={{ addon }}
/>
))
}
@ -166,11 +172,12 @@ const Addons = ({ urlParams, queryParams }) => {
title={'Add addon'}
buttons={addAddonModalButtons}
onCloseRequest={closeAddAddonModal}>
<div className={styles['notice']}>You can add an addon via an external link, which will appear under Installed addons.</div>
<TextInput
ref={addAddonUrlInputRef}
className={styles['addon-url-input']}
type={'text'}
placeholder={'Paste url...'}
placeholder={'Paste addon URL'}
onSubmit={addAddonOnSubmit}
/>
</ModalDialog>
@ -178,14 +185,31 @@ const Addons = ({ urlParams, queryParams }) => {
null
}
{
typeof sharedTransportUrl === 'string' ?
sharedAddon !== null ?
<ModalDialog
className={styles['share-modal-container']}
title={'Share addon'}
onCloseRequest={clearSharedTransportUrl}>
title={'Share Addon'}
onCloseRequest={clearSharedAddon}>
<div className={styles['title-container']}>
<Image
className={styles['logo']}
src={sharedAddon.manifest.logo}
alt={' '}
renderFallback={renderLogoFallback}
/>
<div className={styles['name-container']}>
<span className={styles['name']}>{typeof sharedAddon.manifest.name === 'string' && sharedAddon.manifest.name.length > 0 ? sharedAddon.manifest.name : sharedAddon.manifest.id}</span>
{
typeof sharedAddon.manifest.version === 'string' && sharedAddon.manifest.version.length > 0 ?
<span className={styles['version']}>v. {sharedAddon.manifest.version}</span>
:
null
}
</div>
</div>
<SharePrompt
className={styles['share-prompt-container']}
url={sharedTransportUrl}
url={sharedAddon.transportUrl}
/>
</ModalDialog>
:

173
src/routes/Addons/styles.less
View file

@ -1,24 +1,33 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
:import('~stremio/common/Multiselect/styles.less') {
multiselect-menu-container: menu-container;
}
:import('~stremio/common/ModalDialog/styles.less') {
addon-modal-content: modal-dialog-content;
cancel-button-label: label;
}
.addons-container {
width: 100%;
height: 100%;
background-color: var(--color-background);
background-color: @color-background-dark2;
.addons-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-self: stretch;
.selectable-inputs-container {
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
padding: 1.5rem;
justify-content: space-between;
padding: 1.5rem 3rem;
overflow: visible;
.add-button-container {
@ -26,14 +35,19 @@
display: flex;
flex-direction: row;
align-items: center;
height: 3rem;
max-width: 15rem;
justify-content: center;
width: 10rem;
height: 3.5rem;
margin-right: 1.5rem;
padding: 0 1rem;
background-color: var(--color-signal5);
background-color: @color-accent3;
&:hover {
filter: brightness(1.2);
background-color: @color-accent3-light2;
}
&:focus {
outline-color: @color-surface-light5;
}
.icon {
@ -41,7 +55,7 @@
width: 1.2rem;
height: 1.2rem;
margin-right: 1rem;
fill: var(--color-surfacelighter);
fill: @color-surface-light5;
}
.add-button-label {
@ -50,7 +64,7 @@
flex-basis: auto;
max-height: 2.4em;
font-size: 1.1rem;
color: var(--color-surfacelighter);
color: @color-surface-light5;
}
}
@ -58,7 +72,7 @@
flex-grow: 0;
flex-shrink: 1;
flex-basis: 15rem;
height: 3rem;
height: 3.5rem;
margin-right: 1.5rem;
.multiselect-menu-container {
@ -67,40 +81,52 @@
}
}
.spacing {
flex: 1;
}
.search-bar-container {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 15rem;
flex-basis: 18rem;
display: flex;
flex-direction: row;
align-items: center;
height: 3rem;
height: 3.5rem;
padding: 0 1rem;
background-color: var(--color-backgroundlighter);
border-radius: 2.3rem;
border: var(--focus-outline-size) solid transparent;
background-color: @color-background;
cursor: text;
&:hover, &:focus-within {
filter: brightness(1.2);
background-color: @color-background-light2;
}
.icon {
flex: none;
width: 1.2rem;
height: 1.2rem;
margin-right: 1rem;
fill: var(--color-surfacelighter);
&:focus-within {
border: var(--focus-outline-size) solid @color-surface-light5;
}
.search-input {
flex: 1;
color: var(--color-surfacelighter);
margin-right: 1rem;
font-size: 1.1rem;
color: @color-surface-light5;
&::placeholder {
max-height: 1.2em;
opacity: 1;
color: var(--color-surfacelight);
color: @color-secondaryvariant1-light1-90;
}
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
fill: @color-secondaryvariant1;
}
}
}
@ -109,13 +135,13 @@
align-self: stretch;
padding: 0 1.5rem;
font-size: 2rem;
color: var(--color-surfacelighter);
color: @color-surface-light5;
}
.addons-list-container {
flex: 1;
align-self: stretch;
padding: 0 1.5rem;
padding: 0 3rem;
overflow-y: auto;
.addon {
@ -126,20 +152,105 @@
}
.add-addon-modal-container {
.addon-url-input {
width: 25rem;
padding: 0.5rem 1rem;
color: var(--color-surfacedark);
border: thin solid var(--color-surface);
.addon-modal-content {
width: 30rem;
.notice {
margin-bottom: 1.5rem;
font-size: 1rem;
color: @color-background-dark5-90;
}
.addon-url-input {
width: 100%;
padding: 1rem;
color: @color-surface-dark5;
outline: var(--focus-outline-size) solid @color-surface-light2;
outline-offset: calc(-1 * var(--focus-outline-size));
&:hover {
outline-color: @color-surface-light4;
}
&:focus {
outline-color: @color-background-dark5;
}
}
}
.cancel-button {
background-color: var(--color-surfacedark);
background-color: transparent;
&:hover {
background-color: @color-surface-light3;
}
&:focus {
outline-color: @color-background-dark5;
}
.cancel-button-label {
color: @color-surface-dark2;
}
}
}
.share-modal-container {
.share-prompt-container {
width: 25rem;
.addon-modal-content {
width: 30rem;
.title-container {
display: flex;
flex-direction: row;
align-items: center;
.logo, .icon {
float: left;
width: 5rem;
height: 5rem;
margin-right: 1.5rem;
padding: 0.5rem;
}
.logo {
object-fit: contain;
object-position: center;
}
.icon {
fill: @color-secondaryvariant1-light3;
}
.name-container {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
.name {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
margin-right: 0.5rem;
font-size: 1.6rem;
color: @color-background-dark5-90;
}
.version {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
margin-top: 0.5rem;
color: @color-background-dark5-60;
}
}
}
.share-prompt-container {
margin-top: 1rem;
}
}
}

2
src/routes/Intro/Intro.js
View file

@ -248,7 +248,7 @@ const Intro = ({ queryParams }) => {
const switchFormOnClick = React.useCallback(() => {
const nextQueryParams = new URLSearchParams(queryParams);
nextQueryParams.set('form', state.form === SIGNUP_FORM ? LOGIN_FORM : SIGNUP_FORM);
window.location.replace(`#/intro?${nextQueryParams}`);
window.location = `#/intro?${nextQueryParams}`;
}, [queryParams, state.form]);
React.useEffect(() => {
if ([LOGIN_FORM, SIGNUP_FORM].includes(queryParams.get('form'))) {