diff --git a/src/common/AddonDetailsModal/AddonDetails/styles.less b/src/common/AddonDetailsModal/AddonDetails/styles.less
index 26c665a46..8d6fa7b80 100644
--- a/src/common/AddonDetailsModal/AddonDetails/styles.less
+++ b/src/common/AddonDetailsModal/AddonDetails/styles.less
@@ -14,7 +14,6 @@
height: 5rem;
margin-right: 1.5rem;
padding: 0.5rem;
- background-color: @color-background-dark5;
}
.logo {
@@ -23,7 +22,7 @@
}
.icon {
- fill: @color-secondaryvariant1-light3;
+ color: var(--primary-foreground-color);
}
.name-container {
@@ -41,7 +40,7 @@
flex-basis: auto;
margin-right: 0.5rem;
font-size: 1.6rem;
- color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
}
.version {
@@ -49,7 +48,7 @@
flex-shrink: 1;
flex-basis: auto;
margin-top: 0.5rem;
- color: @color-background-dark5-60;
+ color: var(--primary-foreground-color);
}
}
}
@@ -59,13 +58,13 @@
.section-header {
font-size: 1.1rem;
- color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
}
.section-label {
font-size: 1.1rem;
font-weight: 300;
- color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
&.transport-url-label {
user-select: text;
diff --git a/src/common/AddonDetailsModal/styles.less b/src/common/AddonDetailsModal/styles.less
index fa8c5b3be..1d4fde635 100644
--- a/src/common/AddonDetailsModal/styles.less
+++ b/src/common/AddonDetailsModal/styles.less
@@ -10,38 +10,24 @@
.addon-details-container, .addon-details-message-container {
width: 40rem;
max-width: 100%;
- }
-
- .install-button, .uninstall-button, .cancel-button {
- .label {
- font-size: 1.2rem;
- font-weight: 500;
- }
- }
-
- .uninstall-button, .cancel-button {
- &:focus {
- outline-color: @color-background-dark5;
- }
+ color: var(--primary-foreground-color);
}
.cancel-button {
background-color: transparent;
+ opacity: 0.3;
&:hover {
- background-color: @color-surface-light3;
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ opacity: 1;
}
- .label {
- color: @color-surface-dark2;
+ &:focus {
+ outline-color: var(--primary-foreground-color);
}
- }
- .uninstall-button {
- background-color: @color-accent2;
-
- &:hover {
- background-color: @color-accent2-light2;
+ .cancel-button-label {
+ color: var(--primary-foreground-color);
}
}
}
\ No newline at end of file
diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less
index e7b601729..6a26b3b7f 100644
--- a/src/common/Button/styles.less
+++ b/src/common/Button/styles.less
@@ -14,6 +14,6 @@
&:global(.disabled) {
pointer-events: none;
- opacity: 0.25;
+ opacity: 0.5;
}
}
\ No newline at end of file
diff --git a/src/common/CONSTANTS.js b/src/common/CONSTANTS.js
index 02098b76d..ac8c123de 100644
--- a/src/common/CONSTANTS.js
+++ b/src/common/CONSTANTS.js
@@ -2,7 +2,7 @@
const CHROMECAST_RECEIVER_APP_ID = '1634F54B';
const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250];
-const SUBTITLES_FONTS = ['Roboto', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace'];
+const SUBTITLES_FONTS = ['PlusJakartaSans', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace'];
const SEEK_TIME_DURATIONS = [5000, 10000, 15000, 20000, 25000, 30000];
const NEXT_VIDEO_POPUP_DURATIONS = [0, 5000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000];
const CATALOG_PREVIEW_SIZE = 10;
@@ -27,17 +27,17 @@ const TYPE_PRIORITIES = {
other: -Infinity
};
const ICON_FOR_TYPE = new Map([
- ['movie', 'ic_movies'],
- ['series', 'ic_series'],
- ['channel', 'ic_channels'],
- ['tv', 'ic_tv'],
+ ['movie', 'movies'],
+ ['series', 'series'],
+ ['channel', 'channels'],
+ ['tv', 'tv'],
['book', 'ic_book'],
['game', 'ic_games'],
['music', 'ic_music'],
['adult', 'ic_adult'],
['radio', 'ic_radio'],
['podcast', 'ic_podcast'],
- ['other', 'ic_movies'],
+ ['other', 'movies'],
]);
module.exports = {
diff --git a/src/common/Checkbox/Checkbox.js b/src/common/Checkbox/Checkbox.js
index bb9a8477d..a823ce488 100644
--- a/src/common/Checkbox/Checkbox.js
+++ b/src/common/Checkbox/Checkbox.js
@@ -3,21 +3,13 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
const Button = require('stremio/common/Button');
const styles = require('./styles');
const Checkbox = React.forwardRef(({ className, checked, children, ...props }, ref) => {
return (
);
diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less
index 5aebab00d..d8224db53 100644
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@@ -2,18 +2,43 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@height: 1.7rem;
+@width: 3.2rem;
+@thumb-margin: 0.5rem;
+
+@thumb-size: calc(@height - @thumb-margin);
+
.checkbox-container {
- &:global(.checked) {
- .icon {
- fill: @color-surface-light5;
- background-color: @color-primaryvariant1;
+ position: relative;
+
+ .toggle {
+ position: relative;
+ width: @width;
+ height: @height;
+ border-radius: @height;
+ background-color: var(--overlay-color);
+ transition: background-color 0.1s ease-in-out;
+
+ &::before {
+ content: "";
+ position: absolute;
+ height: @thumb-size;
+ width: @thumb-size;
+ top: calc(@thumb-margin / 2);
+ left: calc(@thumb-margin / 2);
+ border-radius: 50%;
+ background-color: var(--primary-foreground-color);
+ transition: transform 0.1s ease-in-out;
}
}
- .icon {
- display: block;
- width: 1rem;
- height: 1rem;
- fill: @color-surface-light5;
+ &:global(.checked) {
+ .toggle {
+ background-color: var(--secondary-accent-color);
+
+ &::before {
+ transform: translateX(calc(@width - @thumb-size - @thumb-margin));
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/common/MainNavBars/MainNavBars.js b/src/common/MainNavBars/MainNavBars.js
index 53f3175cc..542d68fe4 100644
--- a/src/common/MainNavBars/MainNavBars.js
+++ b/src/common/MainNavBars/MainNavBars.js
@@ -7,11 +7,11 @@ const { VerticalNavBar, HorizontalNavBar } = require('stremio/common/NavBar');
const styles = require('./styles');
const TABS = [
- { id: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
- { id: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
- { id: 'library', label: 'Library', icon: 'ic_library', href: '#/library' },
- { id: 'settings', label: 'SETTINGS', icon: 'ic_settings', href: '#/settings' },
- { id: 'addons', label: 'ADDONS', icon: 'ic_addons', href: '#/addons' }
+ { id: 'board', label: 'Board', icon: 'home', href: '#/' },
+ { id: 'discover', label: 'Discover', icon: 'discover', href: '#/discover' },
+ { id: 'library', label: 'Library', icon: 'library', href: '#/library' },
+ { id: 'addons', label: 'ADDONS', icon: 'addons', href: '#/addons' },
+ { id: 'settings', label: 'SETTINGS', icon: 'settings', href: '#/settings' },
];
const MainNavBars = React.memo(({ className, route, query, children }) => {
diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index d0c12df92..6a09435ce 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const filterInvalidDOMProps = require('filter-invalid-dom-props').default;
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const Image = require('stremio/common/Image');
const Multiselect = require('stremio/common/Multiselect');
@@ -56,11 +56,11 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
const renderPosterFallback = React.useCallback(() => (
), [type]);
const renderMenuLabelContent = React.useCallback(() => (
-
+
), []);
return (
{
typeof title === 'string' && title.length > 0 ?
@@ -78,7 +78,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
-
+
}
{children}
diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less
index 69a175573..31b44182a 100644
--- a/src/common/Multiselect/styles.less
+++ b/src/common/Multiselect/styles.less
@@ -11,16 +11,14 @@
display: flex;
flex-direction: row;
align-items: center;
- padding: 0 1rem;
- background-color: @color-background;
+ height: 2.75rem;
+ padding: 0 1.5rem;
+ border-radius: 2.75rem;
+ background-color: var(--overlay-color);
&:global(.active) {
- .label {
- color: @color-surface-light5-90;
- }
-
.icon {
- fill: @color-surface-light5-90;
+ transform: rotate(180deg);
}
}
@@ -28,7 +26,7 @@
flex: 1;
max-height: 2.4em;
font-weight: 500;
- color: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
}
.icon {
@@ -36,7 +34,8 @@
width: 1rem;
height: 1rem;
margin-left: 1rem;
- fill: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
+ opacity: 0.4;
}
.popup-menu-container {
@@ -51,7 +50,6 @@
flex-direction: row;
align-items: center;
padding: 1rem;
- background-color: @color-background;
&:global(.selected) {
.icon {
@@ -60,13 +58,13 @@
}
&:hover, &:focus {
- background-color: @color-background-light2;
+ background-color: var(--overlay-color);
}
.label {
flex: 1;
max-height: 4.8em;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.icon {
@@ -76,7 +74,8 @@
height: 0.5rem;
border-radius: 100%;
margin-left: 1rem;
- background-color: @color-accent3-90;
+ background-color: var(--secondary-accent-color);
+ opacity: 1;
}
}
diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
index e745d15c7..e1d6ee77a 100644
--- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
+++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const Image = require('stremio/common/Image');
const useFullscreen = require('stremio/common/useFullscreen');
@@ -19,7 +19,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
const renderNavMenuLabel = React.useCallback(({ ref, className, onClick, children, }) => (
), []);
@@ -28,7 +28,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
{
backButton ?
:
@@ -45,36 +45,36 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
:
null
}
-
{
searchBar ?
:
null
}
-
- {
- addonsButton ?
-
- :
- null
- }
- {
- fullscreenButton ?
-
- :
- null
- }
- {
- navMenu ?
-
- :
- null
- }
+
+ {
+ addonsButton ?
+
+ :
+ null
+ }
+ {
+ fullscreenButton ?
+
+ :
+ null
+ }
+ {
+ navMenu ?
+
+ :
+ null
+ }
+
);
});
diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
index 459e39ee2..6c8acdf00 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
@@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { useServices } = require('stremio/services');
const Button = require('stremio/common/Button');
const useFullscreen = require('stremio/common/useFullscreen');
@@ -50,34 +50,36 @@ const NavMenuContent = ({ onClick }) => {
`url('${require('/images/default_avatar.png')}')`
}}
/>
-
-
{profile.auth === null ? t('ANONYMOUS_USER') : profile.auth.user.email}
+
+
+
{profile.auth === null ? t('ANONYMOUS_USER') : profile.auth.user.email}
+
+
-
diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
index 45b6c8d34..8b58f3796 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
@@ -4,100 +4,94 @@
@import (reference) '~stremio/common/screen-sizes.less';
.nav-menu-container {
- width: 20rem;
+ width: 22rem;
max-height: calc(100vh - var(--horizontal-nav-bar-size));
overflow-y: auto;
- background-color: @color-background-dark1;
+ border-radius: var(--border-radius);
+ background-color: var(--modal-background-color);
.user-info-container {
- display: grid;
- height: 7rem;
- grid-template-columns: 7rem 1fr;
- grid-template-rows: 50% 50%;
- grid-template-areas:
- "avatar-area email-area"
- "avatar-area logout-button-area";
+ display: flex;
+ padding: 1.5rem 1rem;
.avatar-container {
- grid-area: avatar-area;
- padding: 1rem;
+ flex: none;
+ height: 4rem;
+ width: 4rem;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
+ background-color: var(--primary-foreground-color);
opacity: 0.9;
}
- .email-container {
- grid-area: email-area;
+ .user-info-details {
+ flex: auto;
display: flex;
- flex-direction: row;
- align-items: center;
- padding: 1rem 1rem 0 0;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 1rem;
- .email-label {
- flex: 1;
- max-height: 2.4em;
- color: @color-surface-light5-90;
- }
- }
+ .email-container {
+ flex: none;
+ margin-bottom: 0.5rem;
- .logout-button-container {
- grid-area: logout-button-area;
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: 0 1rem 1rem 0;
-
- &:hover, &:focus {
- outline: none;
-
- .logout-label {
- color: @color-surface-light5-90;
- text-decoration: underline;
+ .email-label {
+ flex: 1;
+ color: var(--primary-foreground-color);
}
}
- .logout-label {
- flex: 1;
- max-height: 2.4em;
- color: @color-surface-light3-90;
+ .logout-button-container {
+ flex: none;
+
+ &:hover, &:focus {
+ outline: none;
+
+ .logout-label {
+ text-decoration: underline;
+ }
+ }
+
+ .logout-label {
+ flex: 1;
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: var(--primary-foreground-color);
+ }
}
}
}
.nav-menu-section {
- border-top: thin solid @color-surface-light5-20;
+ border-top: thin solid var(--overlay-color);
.nav-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
height: 4rem;
+ padding: 0 1.5rem;
&:hover {
- background-color: @color-background-light2;
+ background-color: var(--overlay-color);
}
.icon {
flex: none;
- width: 1.4rem;
- height: 1.4rem;
- margin: 1.3rem;
- fill: @color-secondaryvariant2-light1-90;
+ width: 2rem;
+ height: 2rem;
+ margin-right: 1rem;
+ color: var(--primary-foreground-color);
+ opacity: 0.3;
}
.nav-menu-option-label {
flex: 1;
- max-height: 2.4em;
- padding-right: 1.3rem;
- color: @color-surface-light5-90;
-
- &:only-child {
- padding-left: 1.3rem;
- }
+ color: var(--primary-foreground-color);
}
}
}
diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
index 62e2fcc0b..742c7a692 100644
--- a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
+++ b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
@@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { useRouteFocused } = require('stremio-router');
const Button = require('stremio/common/Button');
const TextInput = require('stremio/common/TextInput');
@@ -60,7 +60,7 @@ const SearchBar = ({ className, query, active }) => {
{ t('SEARCH_OR_PASTE_LINK') }
);
diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less b/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
index d9d6f1a15..094e6de03 100644
--- a/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
@@ -3,16 +3,12 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.search-bar-container {
- --search-bar-size: calc(var(--horizontal-nav-bar-size) - 1.2rem);
+ --search-bar-size: 3.25rem;
display: flex;
flex-direction: row;
height: var(--search-bar-size);
border-radius: var(--search-bar-size);
- background-color: @color-background-light2;
-
- &:hover {
- background-color: @color-background-light3;
- }
+ background-color: var(--overlay-color);
.search-input {
flex: 1;
@@ -20,15 +16,16 @@
display: flex;
flex-direction: row;
align-items: center;
- padding: 0 0.5rem 0 1.5rem;
+ padding: 0 0.5rem 0 2rem;
font-weight: 500;
- color: @color-secondaryvariant1-light1;
+ color: var(--primary-foreground-color);
cursor: text;
&::placeholder, .placeholder-label {
max-height: 1.2em;
opacity: 1;
- color: @color-secondaryvariant1-light1-90;
+ color: var(--primary-foreground-color);
+ opacity: 0.6;
}
}
@@ -38,20 +35,15 @@
flex-direction: row;
justify-content: center;
align-items: center;
- width: var(--search-bar-size);
height: var(--search-bar-size);
-
- &:hover {
- .icon {
- fill: @color-secondaryvariant2-light1-90;
- }
- }
+ padding: 0 1.5rem;
.icon {
flex: none;
width: 1.7rem;
height: 1.7rem;
- fill: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
+ opacity: 0.6;
}
}
}
\ No newline at end of file
diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less
index 6577a408d..2be5ccf35 100644
--- a/src/common/NavBar/HorizontalNavBar/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/styles.less
@@ -7,9 +7,10 @@
display: flex;
flex-direction: row;
align-items: center;
+ justify-content: space-between;
height: var(--horizontal-nav-bar-size);
padding-right: 1rem;
- background-color: @color-background;
+ background-color: transparent;
overflow: visible;
.logo-container {
@@ -30,8 +31,8 @@
}
}
- .spacing {
- flex: 1 0 0;
+ .back-button-container {
+ margin-left: 1rem;
}
.title {
@@ -44,19 +45,18 @@
white-space: nowrap;
text-overflow: ellipsis;
color: @color-secondaryvariant2-light1-90;
-
- &+.spacing {
- display: none;
- }
}
.search-bar {
- flex: 2 0 9.5rem;
- max-width: 30rem;
+ height: 3.25rem;
+ width: 30rem;
+ }
- &+.spacing {
- max-width: 11rem;
- }
+ .buttons-container {
+ display: flex;
+ flex-direction: row;
+ gap: 0.5rem;
+ overflow: visible;
}
.button-container {
@@ -64,31 +64,27 @@
display: flex;
align-items: center;
justify-content: center;
- width: var(--horizontal-nav-bar-size);
- height: var(--horizontal-nav-bar-size);
-
- &.back-button-container {
- width: var(--vertical-nav-bar-size);
- height: var(--horizontal-nav-bar-size);
- }
-
- &:hover {
- background-color: @color-background-light2;
- }
-
- &:global(.active) {
- background-color: @color-background-light3;
-
- .icon {
- fill: @color-surface-light5-90;
- }
- }
+ width: 3.5rem;
+ height: 3.5rem;
+ border-radius: 0.75rem;
+ opacity: 0.4;
.icon {
flex: none;
- width: 1.7rem;
- height: 1.7rem;
- fill: @color-secondaryvariant2-light1-90;
+ width: 2rem;
+ height: 2rem;
+ color: var(--primary-foreground-color);
+ opacity: 0.6;
+ }
+
+ &:hover, &:global(.active) {
+ background-color: var(--overlay-color);
+ opacity: 1;
+
+ .icon {
+ color: var(--primary-foreground-color);
+ opacity: 0.8;
+ }
}
}
}
@@ -102,16 +98,12 @@
width: var(--horizontal-nav-bar-size);
}
- .search-bar {
- margin: 0 0.5rem;
- }
+ .button-container {
+ margin: 0 1rem;
- .spacing {
- display: none;
- }
-
- .button-container:not(.back-button-container):not(.menu-button-container) {
- display: none;
+ &:not(.back-button-container):not(.menu-button-container) {
+ display: none;
+ }
}
}
}
\ No newline at end of file
diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js b/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
index 44c37814b..7ecef38c6 100644
--- a/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
+++ b/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const Image = require('stremio/common/Image');
const styles = require('./styles');
@@ -11,7 +11,7 @@ const styles = require('./styles');
const NavTabButton = ({ className, logo, icon, label, href, selected, onClick }) => {
const renderLogoFallback = React.useCallback(() => (
typeof icon === 'string' && icon.length > 0 ?
-
+
:
null
), [icon]);
@@ -27,7 +27,7 @@ const NavTabButton = ({ className, logo, icon, label, href, selected, onClick })
/>
:
typeof icon === 'string' && icon.length > 0 ?
-
+
:
null
}
diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
index e0d8cde09..95ed91c35 100644
--- a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
+++ b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
@@ -1,50 +1,66 @@
// Copyright (C) 2017-2023 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
.nav-tab-button-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- background-color: @color-background-dark1;
+ background-color: transparent;
+ border-radius: 0.75rem;
&:hover {
- background-color: @color-background-light2;
+ background-color: var(--overlay-color);
+
+ .label {
+ opacity: 0.6;
+ }
}
&:global(.selected) {
- background-color: @color-secondaryvariant1-dark5;
-
- &:hover {
- background-color: @color-secondaryvariant1-dark4;
- }
-
.icon {
- fill: @color-surface-light5-90;
- }
-
- .label {
- color: @color-surface-light5-90;
+ opacity: 1;
+ color: var(--primary-accent-color);
}
}
.icon, .logo {
flex: none;
- width: 1.7rem;
- height: 1.7rem;
+ width: 2.2rem;
+ height: 2.2rem;
margin-bottom: 0.5rem;
- fill: @color-secondary-light5-90;
+ }
+
+ .icon {
+ color: var(--primary-foreground-color);
+ opacity: 0.2;
}
.label {
flex: none;
max-height: 2.4em;
padding: 0 0.2rem;
- font-size: 0.9rem;
+ font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.01rem;
text-align: center;
- color: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
+ opacity: 0;
+ }
+}
+
+@media only screen and (max-width: @minimum) {
+ .nav-tab-button-container {
+ .label {
+ opacity: 0.2;
+ }
+
+ &:global(.selected) {
+ .label {
+ opacity: 0.6;
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/common/NavBar/VerticalNavBar/styles.less b/src/common/NavBar/VerticalNavBar/styles.less
index 9fafe847c..99e59be93 100644
--- a/src/common/NavBar/VerticalNavBar/styles.less
+++ b/src/common/NavBar/VerticalNavBar/styles.less
@@ -4,8 +4,12 @@
@import (reference) '~stremio/common/screen-sizes.less';
.vertical-nav-bar-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
width: var(--vertical-nav-bar-size);
- background-color: @color-background-dark1;
+ background-color: transparent;
overflow-y: auto;
scrollbar-width: none;
@@ -14,8 +18,8 @@
}
.nav-tab-button {
- width: var(--vertical-nav-bar-size);
- height: var(--vertical-nav-bar-size);
+ width: calc(var(--vertical-nav-bar-size) - 1.5rem);
+ height: calc(var(--vertical-nav-bar-size) - 1.5rem);
&:first-child {
margin-top: 1rem;
@@ -29,11 +33,12 @@
@media only screen and (max-width: @minimum) {
.vertical-nav-bar-container {
- display: flex;
flex-direction: row;
justify-content: space-between;
+ gap: 0;
height: var(--vertical-nav-bar-size);
width: 100%;
+ padding: 0 1rem;
overflow-y: hidden;
overflow-x: auto;
diff --git a/src/common/PaginationInput/PaginationInput.js b/src/common/PaginationInput/PaginationInput.js
index 51322e0a3..41d740b3f 100644
--- a/src/common/PaginationInput/PaginationInput.js
+++ b/src/common/PaginationInput/PaginationInput.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const styles = require('./styles');
@@ -22,13 +22,13 @@ const PaginationInput = ({ className, label, dataset, onSelect, ...props }) => {
return (
);
diff --git a/src/common/PaginationInput/styles.less b/src/common/PaginationInput/styles.less
index dda5e4d04..ecf6c56a4 100644
--- a/src/common/PaginationInput/styles.less
+++ b/src/common/PaginationInput/styles.less
@@ -5,17 +5,18 @@
.pagination-input-container {
display: flex;
flex-direction: row;
+ border-radius: var(--border-radius);
.prev-button-container, .next-button-container {
flex: none;
display: flex;
align-items: center;
justify-content: center;
- background-color: @color-background;
+ background-color: var(--overlay-color);
.icon {
display: block;
- fill: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
}
}
@@ -25,7 +26,7 @@
display: flex;
align-items: center;
justify-content: center;
- background-color: @color-background-dark1;
+ background-color: var(--overlay-color);
.label {
flex: none;
@@ -35,7 +36,7 @@
text-overflow: ellipsis;
text-align: center;
font-weight: 500;
- color: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
}
}
}
\ No newline at end of file
diff --git a/src/common/Popup/styles.less b/src/common/Popup/styles.less
index 902fd550f..e81de9033 100644
--- a/src/common/Popup/styles.less
+++ b/src/common/Popup/styles.less
@@ -13,8 +13,10 @@
.menu-container {
position: absolute;
z-index: 1;
- overflow: visible;
+ overflow: hidden;
visibility: hidden;
+ border-radius: var(--border-radius);
+ background-color: var(--modal-background-color);
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20;
cursor: auto;
diff --git a/src/common/SearchBar/SearchBar.js b/src/common/SearchBar/SearchBar.js
index c61d1b482..3b7013aa0 100644
--- a/src/common/SearchBar/SearchBar.js
+++ b/src/common/SearchBar/SearchBar.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const TextInput = require('stremio/common/TextInput');
const SearchBarPlaceholder = require('./SearchBarPlaceholder');
const styles = require('./styles');
@@ -18,7 +18,7 @@ const SearchBar = ({ className, title, value, onChange }) => {
value={value}
onChange={onChange}
/>
-
+
);
};
diff --git a/src/common/SearchBar/SearchBarPlaceholder/SearchBarPlaceholder.js b/src/common/SearchBar/SearchBarPlaceholder/SearchBarPlaceholder.js
index db239fc1a..7c32edaf8 100644
--- a/src/common/SearchBar/SearchBarPlaceholder/SearchBarPlaceholder.js
+++ b/src/common/SearchBar/SearchBarPlaceholder/SearchBarPlaceholder.js
@@ -3,14 +3,14 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const styles = require('./styles');
const SearchBarPlaceholder = ({ className, title }) => {
return (
);
};
diff --git a/src/common/SearchBar/SearchBarPlaceholder/styles.less b/src/common/SearchBar/SearchBarPlaceholder/styles.less
index 8c177c49d..b27a8f0d8 100644
--- a/src/common/SearchBar/SearchBarPlaceholder/styles.less
+++ b/src/common/SearchBar/SearchBarPlaceholder/styles.less
@@ -22,6 +22,6 @@
flex: none;
width: 1.5rem;
height: 1.5rem;
- fill: var(--color-placeholder-background);
+ color: var(--color-placeholder-background);
}
}
\ No newline at end of file
diff --git a/src/common/SearchBar/styles.less b/src/common/SearchBar/styles.less
index 3df0451c8..265655970 100644
--- a/src/common/SearchBar/styles.less
+++ b/src/common/SearchBar/styles.less
@@ -6,31 +6,26 @@
display: flex;
flex-direction: row;
align-items: center;
- height: 3.5rem;
- padding: 0 1rem;
- border-radius: 3.5rem;
+ height: 3rem;
+ padding: 0 1.5rem;
+ border-radius: 3rem;
border: var(--focus-outline-size) solid transparent;
- background-color: @color-background;
+ background-color: var(--overlay-color);
cursor: text;
- &:hover, &:focus-within {
- background-color: @color-background-light1;
- }
-
&:focus-within {
- border: var(--focus-outline-size) solid @color-surface-light5;
+ border: var(--focus-outline-size) solid var(--primary-foreground-color);
}
.search-input {
flex: 1;
margin-right: 1rem;
- font-size: 1.1rem;
- color: @color-surface-light5;
+ font-size: 1rem;
+ color: var(--primary-foreground-color);
&::placeholder {
- max-height: 1.2em;
- opacity: 1;
- color: @color-secondaryvariant1-light1-90;
+ color: var(--primary-foreground-color);
+ opacity: 0.6;
}
}
@@ -38,6 +33,7 @@
flex: none;
width: 1.5rem;
height: 1.5rem;
- fill: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
+ opacity: 0.6;
}
}
\ No newline at end of file
diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 517dc09a9..685f19613 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const Button = require('stremio/common/Button');
@@ -44,11 +44,11 @@ const SharePrompt = ({ className, url }) => {
@@ -63,7 +63,7 @@ const SharePrompt = ({ className, url }) => {
tabIndex={-1}
/>
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 6e80043df..c9953be50 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -23,7 +23,7 @@
flex: none;
height: 1.2rem;
margin-right: 1rem;
- fill: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.label {
@@ -34,13 +34,15 @@
font-size: 1.1rem;
font-weight: 500;
text-align: center;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
}
.facebook-button, .twitter-button {
+ border-radius: var(--border-radius);
+
&:focus {
- outline-color: @color-background-dark5;
+ outline-color: var(--primary-foreground-color);
}
}
@@ -57,7 +59,8 @@
display: flex;
flex-direction: row;
margin-top: 1rem;
- background-color: @color-surface-light2;
+ border-radius: var(--border-radius);
+ background-color: var(--overlay-color);
.url-text-input {
flex: 1;
@@ -65,7 +68,7 @@
padding: 1rem;
font-size: 1.1rem;
text-align: center;
- color: @color-background-dark5;
+ color: var(--primary-foreground-color);
}
.copy-button {
@@ -77,14 +80,16 @@
justify-content: center;
width: 8rem;
padding: 1rem;
- background-color: @color-accent3;
+ border-radius: 0 var(--border-radius) var(--border-radius) 0;
+ background-color: var(--secondary-accent-color);
&:hover {
- background-color: @color-accent3-light1;
+ outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+ background-color: transparent;
}
&:focus {
- outline-color: @color-background-dark5;
+ outline-color: var(--primary-foreground-color);
}
.icon {
@@ -92,7 +97,7 @@
width: 1.2rem;
height: 1.2rem;
margin-right: 0.5rem;
- fill: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.label {
@@ -101,7 +106,7 @@
flex-basis: auto;
max-height: 2.4em;
font-size: 1.1rem;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
}
}
diff --git a/src/common/Slider/styles.less b/src/common/Slider/styles.less
index c55be563f..858543931 100644
--- a/src/common/Slider/styles.less
+++ b/src/common/Slider/styles.less
@@ -16,26 +16,9 @@ html.active-slider-within {
overflow: visible;
cursor: pointer;
- &:hover, &:global(.active) {
- .track-after {
- background-color: @color-primary-light5;
- }
- }
-
&:global(.disabled) {
pointer-events: none;
-
- .track {
- background-color: @color-surface-dark5;
- }
-
- .track-after {
- background-color: @color-surface;
- }
-
- .thumb {
- fill: @color-surface;
- }
+ opacity: 0.5;
}
.layer {
@@ -55,21 +38,24 @@ html.active-slider-within {
z-index: 0;
flex: 1;
height: var(--track-size);
- background-color: @color-surface-light5-20;
+ border-radius: var(--track-size);
+ background-color: var(--overlay-color);
}
.track-before {
z-index: 1;
flex: none;
height: var(--track-size);
- background-color: @color-surface-light5-10;
+ border-radius: var(--track-size);
+ background-color: var(--overlay-color);
}
.track-after {
z-index: 2;
flex: none;
height: var(--track-size);
- background-color: @color-primary-light3;
+ border-radius: var(--track-size);
+ background-color: var(--primary-foreground-color);
}
.thumb {
@@ -78,6 +64,6 @@ html.active-slider-within {
width: var(--thumb-size);
height: var(--thumb-size);
transform: translateX(-50%);
- fill: @color-surface-light5;
+ fill: var(--primary-foreground-color);
}
}
\ No newline at end of file
diff --git a/src/common/Toast/ToastItem/ToastItem.js b/src/common/Toast/ToastItem/ToastItem.js
index 39bafddfb..869aa224f 100644
--- a/src/common/Toast/ToastItem/ToastItem.js
+++ b/src/common/Toast/ToastItem/ToastItem.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const styles = require('./styles');
@@ -16,8 +16,8 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
}, [props.type]);
const icon = React.useMemo(() => {
return typeof props.icon === 'string' ? props.icon :
- type === 'success' ? 'ic_check' :
- type === 'error' ? 'ic_warning' :
+ type === 'success' ? 'checkmark' :
+ type === 'error' ? 'warning' :
null;
}, [type, props.icon]);
const toastOnClick = React.useCallback((event) => {
@@ -54,7 +54,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
{
typeof icon === 'string' && icon.length > 0 ?
-
+
:
null
@@ -74,7 +74,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
}
);
diff --git a/src/common/Toast/ToastItem/styles.less b/src/common/Toast/ToastItem/styles.less
index 756930ac6..05bf68ec8 100644
--- a/src/common/Toast/ToastItem/styles.less
+++ b/src/common/Toast/ToastItem/styles.less
@@ -18,7 +18,7 @@
background-color: @color-accent3;
.icon {
- fill: @color-surface-light5-90;
+ color: @color-surface-light5-90;
}
}
}
@@ -28,7 +28,7 @@
background-color: @color-accent2;
.icon {
- fill: @color-surface-light5-90;
+ color: @color-surface-light5-90;
}
}
}
@@ -43,7 +43,7 @@
display: block;
width: 100%;
height: 100%;
- fill: @color-background-dark5-90;
+ color: @color-background-dark5-90;
}
}
diff --git a/src/common/roboto.css b/src/common/roboto.css
deleted file mode 100644
index e451a2afa..000000000
--- a/src/common/roboto.css
+++ /dev/null
@@ -1,55 +0,0 @@
-@font-face {
- font-family: 'Roboto';
- font-style: italic;
- font-weight: 300;
- src: url('/fonts/Roboto-LightItalic.ttf') format('truetype');
-}
-
-@font-face {
- font-family: 'Roboto';
- font-style: italic;
- font-weight: 400;
- src: url('/fonts/Roboto-RegularItalic.ttf') format('truetype');
-}
-
-@font-face {
- font-family: 'Roboto';
- font-style: italic;
- font-weight: 500;
- src: url('/fonts/Roboto-MediumItalic.ttf') format('truetype');
-}
-
-@font-face {
- font-family: 'Roboto';
- font-style: italic;
- font-weight: 700;
- src: url('/fonts/Roboto-BoldItalic.ttf') format('truetype');
-}
-
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 300;
- src: url('/fonts/Roboto-Light.ttf') format('truetype');
-}
-
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 400;
- src: url('/fonts/Roboto-Regular.ttf') format('truetype');
-}
-
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 500;
- src: url('/fonts/Roboto-Medium.ttf') format('truetype');
-}
-
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 700;
- src: url('/fonts/Roboto-Bold.ttf') format('truetype');
-}
\ No newline at end of file
diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js
index 111519ec2..ae27dca51 100644
--- a/src/routes/Addons/Addon/Addon.js
+++ b/src/routes/Addons/Addon/Addon.js
@@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Image } = require('stremio/common');
const styles = require('./styles');
@@ -51,7 +51,7 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio
}
}, [onToggle, dataset]);
const renderLogoFallback = React.useCallback(() => (
-
+
), []);
return (
diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index f364bdce1..998baf53d 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -8,14 +8,14 @@
flex-direction: row;
align-items: flex-start;
padding: 1.5rem;
- background-color: @color-background;
+ border-radius: var(--border-radius);
+ background-color: var(--overlay-color);
cursor: inherit;
.logo-container {
flex: none;
- width: 6rem;
- height: 6rem;
- background-color: @color-background-light1;
+ width: 8rem;
+ height: 8rem;
.logo {
display: block;
@@ -31,7 +31,7 @@
width: 100%;
height: 100%;
padding: 1rem;
- fill: @color-secondaryvariant1-light3;
+ color: var(--primary-foreground-color);
}
}
@@ -52,7 +52,7 @@
padding: 0 0.5rem;
max-height: 3.6em;
font-size: 1.6rem;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.version-container {
@@ -62,7 +62,8 @@
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 2.4em;
- color: @color-surface-light5-60;
+ color: var(--primary-foreground-color);
+ opacity: 0.6;
}
.types-container {
@@ -72,8 +73,9 @@
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 2.4em;
- color: @color-surface-light5-40;
+ color: var(--primary-foreground-color);
text-transform: capitalize;
+ opacity: 0.4;
}
.description-container {
@@ -83,7 +85,7 @@
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 4.8em;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
}
@@ -109,8 +111,9 @@
align-items: center;
justify-content: center;
gap: 1rem;
- height: 4rem;
+ height: 3.5rem;
padding: 0 1rem;
+ border-radius: 4rem;
.icon {
flex: none;
@@ -123,68 +126,70 @@
flex-shrink: 1;
flex-basis: auto;
max-height: 2.4em;
- font-size: 1.2rem;
- font-weight: 500;
+ font-size: 1.1rem;
+ font-weight: 700;
text-align: center;
}
}
.install-button-container {
- background-color: @color-accent3;
+ background-color: var(--secondary-accent-color);
&:hover {
- background-color: @color-accent3-light2;
+ outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+ background-color: transparent;
}
.label {
- color: @color-surface-light5;
+ color: var(--primary-foreground-color)
}
}
.configure-button-container {
flex: none;
- background-color: @color-accent3;
+ background-color: var(--secondary-accent-color);
&:hover {
- background-color: @color-accent3-light2;
+ outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+ background-color: transparent;
}
.icon {
- fill: @color-surface-light5;
+ color: var(--primary-foreground-color)
}
}
.uninstall-button-container {
- outline-color: @color-background-light3;
+ outline-color: var(--primary-foreground-color);
outline-style: solid;
+ opacity: 0.3;
&:hover {
- background-color: @color-background-light2;
+ opacity: 1;
}
.label {
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
}
.share-button-container {
- &:hover {
- .icon {
- fill: @color-secondaryvariant1-light1;
- }
+ opacity: 0.9;
+ &:hover {
.label {
text-decoration: underline;
- color: @color-secondaryvariant1-light2;
}
}
.icon {
- fill: @color-secondaryvariant1-dark1-60;
+ height: 1.5rem;
+ width: 1.5rem;
+ color: var(--primary-foreground-color);
}
.label {
- color: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
}
}
}
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 31f823a1f..c4c99173a 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SearchBar, SharePrompt, ModalDialog, useBinaryState, withCoreSuspender } = require('stremio/common');
const Addon = require('./Addon');
const useInstalledAddons = require('./useInstalledAddons');
@@ -72,7 +72,7 @@ const Addons = ({ urlParams, queryParams }) => {
);
}, [search]);
const renderLogoFallback = React.useCallback(() => (
-
+
), []);
React.useLayoutEffect(() => {
closeAddAddonModal();
@@ -83,10 +83,6 @@ const Addons = ({ urlParams, queryParams }) => {
-
{selectInputs.map((selectInput, index) => (
{
/>
))}
+
{
onChange={searchInputOnChange}
/>
{
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index f4f9d57f3..2f485c221 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -24,7 +24,7 @@
.addons-container {
width: 100%;
height: 100%;
- background-color: @color-background-dark2;
+ background-color: transparent;
.addons-content {
width: 100%;
@@ -48,26 +48,27 @@
flex-direction: row;
align-items: center;
justify-content: center;
- width: 10rem;
- height: 3.5rem;
+ height: 3rem;
margin-right: 1.5rem;
- padding: 0 1rem;
- background-color: @color-accent3;
+ padding: 0 1.5rem;
+ border-radius: 3rem;
+ background-color: var(--secondary-accent-color);
&:hover {
- background-color: @color-accent3-light2;
+ outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+ background-color: transparent;
}
&:focus {
- outline-color: @color-surface-light5;
+ outline-color: var(--primary-foreground-color);
}
.icon {
flex: none;
width: 1.2rem;
height: 1.2rem;
- margin-right: 1rem;
- fill: @color-surface-light5;
+ margin-right: 0.5rem;
+ color: var(--primary-foreground-color);
}
.add-button-label {
@@ -75,8 +76,9 @@
flex-shrink: 1;
flex-basis: auto;
max-height: 2.4em;
- font-size: 1.1rem;
- color: @color-surface-light5;
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--primary-foreground-color);
}
}
@@ -84,7 +86,6 @@
flex-grow: 0;
flex-shrink: 1;
flex-basis: 15rem;
- height: 3.5rem;
margin-right: 1.5rem;
.multiselect-menu-container {
@@ -108,15 +109,16 @@
display: none;
align-items: center;
justify-content: center;
- width: 3.5rem;
- height: 3.5rem;
- background-color: @color-background;
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--border-radius);
+ background-color: var(--overlay-color);
.filter-icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
- fill: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
}
}
}
@@ -126,7 +128,7 @@
align-self: stretch;
padding: 0 1.5rem;
font-size: 2rem;
- color: @color-surface-light5;
+ color: var(--primary-foreground-color);
}
.addons-list-container {
@@ -152,7 +154,7 @@
overflow: visible;
.select-input-container {
- height: 3.5rem;
+ height: 3rem;
&:not(:last-child) {
margin-bottom: 1rem;
@@ -169,39 +171,43 @@
.notice {
margin-bottom: 1.5rem;
font-size: 1rem;
- color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
}
.addon-url-input {
width: 100%;
padding: 1rem;
- color: @color-surface-dark5;
- outline: var(--focus-outline-size) solid @color-surface-light2;
+ color: var(--primary-foreground-color);
+ border-radius: var(--border-radius);
+ background-color: var(--overlay-color);
+ outline: var(--focus-outline-size) solid var(--overlay-color);
outline-offset: calc(-1 * var(--focus-outline-size));
&:hover {
- outline-color: @color-surface-light4;
+ outline-color: var(--primary-foreground-color);
}
&:focus {
- outline-color: @color-background-dark5;
+ outline-color: var(--primary-foreground-color);
}
}
}
.cancel-button {
background-color: transparent;
+ opacity: 0.3;
&:hover {
- background-color: @color-surface-light3;
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ opacity: 1;
}
&:focus {
- outline-color: @color-background-dark5;
+ outline-color: var(--primary-foreground-color);
}
.cancel-button-label {
- color: @color-surface-dark2;
+ color: var(--primary-foreground-color);
}
}
}
@@ -229,7 +235,7 @@
}
.icon {
- fill: @color-secondaryvariant1-light3;
+ color: var(--primary-foreground-color);
}
.name-container {
@@ -247,7 +253,7 @@
flex-basis: auto;
margin-right: 0.5rem;
font-size: 1.6rem;
- color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
}
.version {
@@ -255,7 +261,7 @@
flex-shrink: 1;
flex-basis: auto;
margin-top: 0.5rem;
- color: @color-background-dark5-60;
+ color: var(--primary-foreground-color);
}
}
}
@@ -271,11 +277,10 @@
.addons-content {
.selectable-inputs-container {
.add-button-container {
+ z-index: 1;
position: fixed;
right: 0;
bottom: calc(3rem + var(--horizontal-nav-bar-size));
- box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
- 0 1.1rem 0.85rem @color-background-dark5-20;
}
.select-input-container {
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 4d60713cd..b949d8689 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -20,15 +20,17 @@
.board-content-container {
flex: 1;
align-self: stretch;
- background-color: @color-background-dark2;
+ background: transparent;
.board-content {
width: 100%;
height: 100%;
+ padding: 0 1rem;
overflow-y: auto;
.board-row {
- margin: 4rem 2rem;
+ margin-top: 1rem;
+ margin-bottom: 2rem;
}
}
}
@@ -43,7 +45,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+10) {
display: none;
@@ -51,7 +53,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+9) {
display: none;
@@ -67,7 +69,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+9) {
display: none;
@@ -75,7 +77,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
display: none;
@@ -91,7 +93,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
display: none;
@@ -99,7 +101,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
display: none;
@@ -115,7 +117,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
display: none;
@@ -123,7 +125,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
@@ -139,7 +141,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
@@ -147,7 +149,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+5) {
display: none;
@@ -163,7 +165,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+5) {
display: none;
@@ -171,7 +173,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+4) {
display: none;
@@ -199,7 +201,7 @@
height: calc(100% - 4rem);
.board-row {
- margin: 2rem 1rem;
+ margin-bottom: 1.5rem;
}
.board-row-poster, .board-row-square, .continue-watching-row {
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index a7fa51ba6..d27c976cf 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { useServices } = require('stremio/services');
const { AddonDetailsModal, DelayedRenderer, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
const useDiscover = require('./useDiscover');
@@ -98,7 +98,7 @@ const Discover = ({ urlParams, queryParams }) => {
/>
))}
{
@@ -148,7 +148,7 @@ const Discover = ({ urlParams, queryParams }) => {
name={metaItem.name}
poster={metaItem.poster}
posterShape={metaItem.posterShape}
- playIcon={selectedMetaItemIndex === index}
+ playname={selectedMetaItemIndex === index}
deepLinks={metaItem.deepLinks}
data-index={index}
onClick={metaItemOnClick}
@@ -169,8 +169,8 @@ const Discover = ({ urlParams, queryParams }) => {
releaseInfo={selectedMetaItem.releaseInfo}
released={selectedMetaItem.released}
description={selectedMetaItem.description}
- deepLinks={selectedMetaItem.deepLinks}
links={selectedMetaItem.links}
+ deepLinks={selectedMetaItem.deepLinks}
trailerStreams={selectedMetaItem.trailerStreams}
inLibrary={selectedMetaItem.inLibrary}
toggleInLibrary={selectedMetaItem.inLibrary ? removeFromLibrary : addToLibrary}
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index 50c4716c2..e0b6706d3 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -26,7 +26,7 @@
.discover-container {
width: 100%;
height: 100%;
- background-color: @color-background-dark2;
+ background-color: transparent;
.discover-content {
width: 100%;
@@ -50,7 +50,6 @@
.select-input {
flex: 0 1 15rem;
- height: 3.5rem;
&:not(:first-child) {
margin-left: 1.5rem;
@@ -75,16 +74,16 @@
display: none;
align-items: center;
justify-content: center;
- width: 3.5rem;
- height: 3.5rem;
- margin-left: 1.5rem;
- background-color: @color-background;
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--border-radius);
+ background-color: var(--overlay-color);
.filter-icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
- fill: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
}
}
}
@@ -103,7 +102,7 @@
margin-bottom: 1rem;
font-size: 1.4rem;
text-align: center;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.install-button {
@@ -111,17 +110,22 @@
min-width: 10rem;
max-width: 15rem;
padding: 1rem;
- background-color: @color-accent3;
+ background-color: var(--secondary-accent-color);
&:hover {
- background-color: @color-accent3-light1;
+ outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+ background-color: transparent;
+ }
+
+ &:focus {
+ outline-color: var(--primary-foreground-color);
}
.label {
max-height: 2.4em;
font-weight: 500;
text-align: center;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
}
}
@@ -151,9 +155,10 @@
.message-label {
flex: none;
- font-size: 2.5rem;
+ font-size: 2rem;
+ font-weight: 400;
text-align: center;
- color: @color-secondaryvariant2-light1-90;
+ color: var(--primary-foreground-color);
}
}
@@ -174,18 +179,21 @@
.poster-container {
padding-bottom: calc(100% * var(--poster-shape-ratio));
background-color: var(--color-placeholder-background);
+ border-radius: var(--border-radius);
}
.title-bar-container {
display: flex;
flex-direction: row;
align-items: center;
+ justify-content: center;
height: 2.8rem;
.title-label {
flex: none;
width: 60%;
height: 1.2rem;
+ border-radius: var(--border-radius);
background-color: var(--color-placeholder-background);
}
}
@@ -196,8 +204,10 @@
.meta-preview-container {
flex: none;
align-self: stretch;
- width: 28rem;
- background-color: @color-background-dark3;
+ width: 29rem;
+ padding: 2rem 2.5rem;
+ border-radius: var(--border-radius) 0 0 var(--border-radius);
+ background-color: var(--modal-background-color);
}
}
}
@@ -225,47 +235,6 @@
}
}
-.multiselect-modal-container {
- .multiselect-menu-container {
- width: 15rem;
- max-height: calc(3.2rem * 7);
- overflow-y: auto;
- scrollbar-color: @color-surface-light1 @color-surface-light4;
-
- ::-webkit-scrollbar-thumb {
- background-color: @color-surface-light1;
-
- &:hover {
- background-color: @color-surface-light2;
- }
- }
-
- ::-webkit-scrollbar-track {
- background-color: @color-surface-light4;
- }
-
- .multiselect-option-container {
- background: none;
-
- &:hover, &:focus {
- background-color: @color-surface-light3;
- }
-
- &:focus {
- outline-color: @color-background-dark2;
- }
-
- .multiselect-label {
- color: @color-background-dark2-90;
- }
-
- .multiselect-icon {
- fill: @color-background-dark2-90;
- }
- }
- }
-}
-
@media only screen and (min-width: @xxlarge) {
.discover-container {
.discover-content {
@@ -392,7 +361,7 @@
justify-content: space-between;
.select-input {
- &:nth-child(n+3) {
+ &:nth-child(n+2) {
display: none;
&~.filter-container {
diff --git a/src/routes/Intro/ConsentCheckbox/styles.less b/src/routes/Intro/ConsentCheckbox/styles.less
index de99038b5..2bf136924 100644
--- a/src/routes/Intro/ConsentCheckbox/styles.less
+++ b/src/routes/Intro/ConsentCheckbox/styles.less
@@ -10,29 +10,30 @@
display: flex;
flex-direction: row;
align-items: center;
- padding: 0.5rem 1rem;
+ padding: 0.5rem 0;
+ border-radius: var(--border-radius);
&:focus {
outline: none;
- background-color: @color-surface-light5-20;
+ background-color: var(--overlay-color);
}
- .checkbox-icon {
- flex: none;
- width: 1.2rem;
- height: 1.2rem;
- fill: @color-surface-dark5;
+ &:global(.checked) {
+ .label {
+ opacity: 1;
+ }
}
.label {
flex: 1;
- margin-left: 0.5rem;
+ margin-left: 1rem;
font-size: 0.9rem;
- color: @color-surface-90;
+ color: var(--primary-foreground-color);
+ opacity: 0.6;
.link {
font-size: 0.9rem;
- color: @color-surface-light5-90;
+ color: var(--primary-accent-color);
&:hover {
text-decoration: underline;
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 92dc3db5d..908499a8b 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { Modal, useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { Button, Image, useBinaryState } = require('stremio/common');
@@ -274,111 +274,121 @@ const Intro = ({ queryParams }) => {
}, [routeFocused]);
return (
-
+
+
-
-
+
+
+
+ Freedom to Stream
+
+
+ All the Video Content You Enjoy in One Place
+
+
+
+
+
+
+ {
+ state.form === SIGNUP_FORM ?
+
+
+
+
+
+
+ :
+
+
+
+ }
+ {
+ state.error.length > 0 ?
+
{state.error}
+ :
+ null
+ }
+
+
+
+
+ {
+ state.form === SIGNUP_FORM ?
+
+ :
+ null
+ }
+ {
+ state.form === LOGIN_FORM ?
+
+ :
+ null
+ }
+ {
+ state.form === SIGNUP_FORM ?
+
+ :
+ null
+ }
-
- {
- state.form === SIGNUP_FORM ?
-
- :
- null
- }
-
-
- {
- state.form === SIGNUP_FORM ?
-
-
-
-
-
-
- :
-
-
-
- }
- {
- state.error.length > 0 ?
-
{state.error}
- :
- null
- }
-
- {
- state.form === SIGNUP_FORM ?
-
- :
- null
- }
- {
- state.form === LOGIN_FORM ?
-
- :
- null
- }
{
passwordRestModalOpen ?
@@ -390,7 +400,7 @@ const Intro = ({ queryParams }) => {
loaderModalOpen ?
diff --git a/src/routes/Intro/PasswordResetModal/styles.less b/src/routes/Intro/PasswordResetModal/styles.less
index 4f9cdf2c3..9a84b79c0 100644
--- a/src/routes/Intro/PasswordResetModal/styles.less
+++ b/src/routes/Intro/PasswordResetModal/styles.less
@@ -15,16 +15,13 @@
.credentials-text-input {
width: 100%;
padding: 1rem;
- color: @color-surface-dark5;
- outline: var(--focus-outline-size) solid @color-surface-light2-90;
+ border-radius: var(--border-radius);
outline-offset: calc(-1 * var(--focus-outline-size));
-
- &:hover {
- outline-color: @color-surface-light4-90;
- }
-
- &:focus {
- outline-color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
+ background: var(--overlay-color);
+
+ &:hover, &:focus {
+ outline: var(--focus-outline-size) solid var(--overlay-color);
}
}
}
@@ -39,16 +36,12 @@
.cancel-button {
background-color: transparent;
- &:hover {
- background-color: @color-surface-light3;
- }
-
- &:focus {
- outline-color: @color-background-dark5-90;
+ &:hover, &:focus {
+ outline-color: var(--primary-foreground-color);
}
.cancel-button-label {
- color: @color-surface-dark4-90;
+ color: var(--primary-foreground-color);
}
}
}
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index 138f73e0b..1b1200a7c 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -4,62 +4,92 @@
@import (reference) '~stremio/common/screen-sizes.less';
.intro-container {
+ position: relative;
display: flex;
- flex-direction: row;
+ flex-direction: column;
+ align-items: center;
justify-content: center;
- width: 100%;
height: 100%;
- background:
- linear-gradient(@color-background-dark3-80, @color-background-dark3-80),
- url('/images/intro_background.jpg');
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- background-origin: border-box;
overflow-y: auto;
- .form-container {
+ .background-container {
+ z-index: -1;
+ position: fixed;
+ top: -1rem;
+ bottom: -1rem;
+ left: -1rem;
+ right: -1rem;
+ background: url('/images/background_1.svg'), url('/images/background_2.svg');
+ background-color: var(--primary-background-color);
+ background-position: bottom left, top right;
+ background-size: 53%, 54%;
+ background-repeat: no-repeat;
+ filter: blur(6rem);
+ }
+
+ .heading-container {
flex: none;
- width: 28rem;
- margin: auto;
- padding: 2rem 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 5rem;
.logo-container {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
+ flex: none;
margin-bottom: 3rem;
.logo {
- flex: none;
- width: 4rem;
- height: 4rem;
- margin-right: 1rem;
+ height: 5rem;
opacity: 0.9;
}
-
- .name {
- flex: none;
- width: 8rem;
- height: 4rem;
- fill: @color-surface-dark4-90;
- }
}
+ .title-container, .slogan-container {
+ color: var(--primary-foreground-color);
+ }
+
+ .title-container {
+ font-size: 3rem;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ }
+
+ .slogan-container {
+ font-size: 1.5rem;
+ font-weight: 400;
+ text-transform: lowercase;
+ opacity: 0.6;
+
+ &::first-letter {
+ text-transform: uppercase;
+ }
+ }
+ }
+
+ .content-container {
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: center;
+ width: 100%;
+
.form-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
- padding: 0.5rem 1rem;
+ height: 4rem;
+ border-radius: 3.5rem;
+ padding: 0 1rem;
.icon {
flex: none;
- width: 1rem;
height: 2rem;
+ width: 2rem;
margin-right: 1rem;
- fill: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.label {
@@ -67,130 +97,92 @@
flex-shrink: 1;
flex-basis: auto;
font-size: 1.1rem;
- font-weight: 500;
- color: @color-surface-light5-90;
+ font-weight: 700;
+ color: var(--primary-foreground-color);
text-align: center;
}
}
- .facebook-button {
- min-height: 4.5rem;
- margin: 1rem 0;
- background: var(--color-facebook);
-
- .label {
- font-size: 1.2rem;
- }
- }
-
- .login-form-button {
- display: block;
- margin: 1rem 0;
- text-align: center;
- color: @color-surface-dark2-90;
-
- &:hover {
- .login-label {
- text-decoration: underline;
- }
- }
-
- &:focus {
- outline: none;
- background-color: @color-surface-light5-20;
- }
-
- .login-label {
- font-weight: 500;
- color: @color-accent4-light1-90;
- }
- }
-
- .credentials-text-input {
- display: block;
- width: 100%;
- margin: 1rem 0;
- padding: 1rem;
- border-bottom: thin solid @color-surface-90;
- color: @color-surface-light5;
-
- &:hover {
- background-color: @color-surface-light5-20;
- }
-
- &:focus {
- border-bottom-color: @color-secondaryvariant2-light1-90;
-
- &::placeholder {
- color: @color-secondaryvariant2-light1-90;
- }
- }
-
- &::placeholder {
- color: @color-surface-dark2-90;
- }
- }
-
- .forgot-password-link-container {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- margin: 1rem 0;
- text-align: right;
-
- .forgot-password-link {
- flex-grow: 0;
- flex-shrink: 1;
- flex-basis: auto;
- padding: 0.5rem 1rem;
- color: @color-surface-light3-90;
-
- &:hover {
- text-decoration: underline;
- color: @color-secondaryvariant2-light1-90;
- }
-
- &:focus {
- outline: none;
- background-color: @color-surface-light5-20;
- }
- }
- }
-
- .error-message {
- margin: 1rem 0;
- padding: 0 1rem;
- text-align: center;
- color: @color-accent5-90;
- }
-
- .submit-button {
- min-height: 4rem;
- margin: 1rem 0;
- background-color: @color-accent3;
-
- &:hover {
- background-color: @color-accent3-light1;
- }
-
- .label {
- font-size: 1.2rem;
- }
- }
-
- .guest-login-button, .signup-form-button {
+ .submit-button, .guest-login-button, .signup-form-button, .login-form-button {
margin-top: 1rem;
- padding: 1rem;
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ background-color: transparent;
+
+ .label {
+ color: var(--primary-foreground-color);
+ }
&:hover {
+ background-color: var(--primary-foreground-color);
+
.label {
- text-decoration: underline;
+ color: var(--secondary-foreground-color);
+ }
+ }
+ }
+
+ .form-container {
+ flex: none;
+ position: relative;
+ width: 22rem;
+ margin-right: 2rem;
+
+ .credentials-text-input {
+ display: block;
+ width: 100%;
+ margin-bottom: 1rem;
+ padding: 1rem;
+ border-radius: var(--border-radius);
+ outline-offset: calc(-1 * var(--focus-outline-size));
+ color: var(--primary-foreground-color);
+ background: var(--overlay-color);
+
+ &:hover, &:focus {
+ outline: var(--focus-outline-size) solid var(--overlay-color);
}
}
- &:focus {
- outline: none;
- background-color: @color-surface-light5-20;
+ .forgot-password-link-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ margin: 1rem 0;
+ text-align: right;
+
+ .forgot-password-link {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ padding: 0.5rem 1rem;
+ color: var(--primary-foreground-color);
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .error-message {
+ margin: 1rem 0;
+ padding: 0 1rem;
+ text-align: center;
+ color: var(--tertiary-accent-color);
+ }
+ }
+
+ .options-container {
+ flex: none;
+ position: relative;
+ width: 22rem;
+ margin-left: 2rem;
+
+ .facebook-button {
+ background: var(--color-facebook);
+
+ &:hover, &:focus {
+ outline: var(--focus-outline-size) solid var(--color-facebook);
+ background-color: transparent;
+ }
}
}
}
@@ -209,7 +201,8 @@
align-items: center;
justify-content: center;
padding: 2rem;
- background-color: @color-surface-light5;
+ border-radius: var(--border-radius);
+ background-color: var(--modal-background-color);
@keyframes flash {
0% {
@@ -226,13 +219,13 @@
width: 5rem;
height: 5rem;
margin-bottom: 1rem;
- fill: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
animation: 1s linear infinite alternate flash;
}
.label {
- font-size: 2rem;
- color: @color-background-dark5-90;
+ font-size: 1.5rem;
+ color: var(--primary-foreground-color);
animation: 1s linear infinite alternate flash;
}
}
@@ -240,10 +233,39 @@
@media only screen and (max-width: @minimum) {
.intro-container {
- .form-container {
- flex: 0 1 auto;
- width: 100%;
- padding: 2rem 1.5rem;
+ justify-content: initial;
+ padding: 3rem 1.5rem;
+
+ .heading-container {
+ align-items: flex-start;
+ margin-bottom: 4rem;
+
+ .logo-container {
+ .logo {
+ height: 4rem;
+ }
+ }
+
+ .title-container {
+ font-size: 2.5rem;
+ }
+
+ .slogan-container {
+ font-size: 1.5rem;
+ }
+ }
+
+ .content-container {
+ flex-direction: column-reverse;
+
+ .form-container, .options-container {
+ width: 100%;
+ margin: 0;
+ }
+
+ .options-container {
+ margin-bottom: 4rem;
+ }
}
}
}
\ No newline at end of file
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index f739c8389..1479c9c5d 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const NotFound = require('stremio/routes/NotFound');
const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState, withCoreSuspender } = require('stremio/common');
const useLibrary = require('./useLibrary');
@@ -61,10 +61,10 @@ const Library = ({ model, urlParams, queryParams }) => {
paginationInput !== null ?
:
-
+ null
}
:
@@ -78,10 +78,10 @@ const Library = ({ model, urlParams, queryParams }) => {
src={require('/images/anonymous.png')}
alt={' '}
/>
+
Library is only available for logged in users!
-
Library is only available for logged in users!