Skip to content

Commit

Permalink
refactor: update icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@tymmesyde
tymmesyde committed Jun 9, 2023
1 parent bdf4a7e commit 50b1659
Show file tree
Hide file tree
Showing 76 changed files with 207 additions and 207 deletions.
4 changes: 2 additions & 2 deletions src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
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 Image = require('stremio/common/Image');
const styles = require('./styles');

const AddonDetails = ({ className, id, name, version, logo, description, types, transportUrl, official }) => {
const renderLogoFallback = React.useCallback(() => (
<Icon className={styles['icon']} icon={'ic_addons'} />
<Icon className={styles['icon']} name={'addons'} />
), []);
return (
<div className={classnames(className, styles['addon-details-container'])}>
Expand Down
2 changes: 1 addition & 1 deletion src/common/AddonDetailsModal/AddonDetails/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

.icon {
fill: @color-secondaryvariant1-light3;
color: @color-secondaryvariant1-light3;
}

.name-container {
Expand Down
10 changes: 5 additions & 5 deletions src/common/CONSTANTS.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
6 changes: 3 additions & 3 deletions src/common/Checkbox/Checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand All @@ -13,10 +13,10 @@ const Checkbox = React.forwardRef(({ className, checked, children, ...props }, r
{
checked ?
<svg className={styles['icon']} viewBox={'0 0 100 100'}>
<Icon x={'10'} y={'10'} width={'80'} height={'80'} icon={'ic_check'} />
<Icon x={'10'} y={'10'} width={'80'} height={'80'} name={'checkmark'} />
</svg>
:
<Icon className={styles['icon']} icon={'ic_box_empty'} />
<Icon className={styles['icon']} name={'ic_box_empty'} />
}
{children}
</Button>
Expand Down
4 changes: 2 additions & 2 deletions src/common/Checkbox/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
.checkbox-container {
&:global(.checked) {
.icon {
fill: @color-surface-light5;
color: @color-surface-light5;
background-color: @color-primaryvariant1;
}
}
Expand All @@ -14,6 +14,6 @@
display: block;
width: 1rem;
height: 1rem;
fill: @color-surface-light5;
color: @color-surface-light5;
}
}
10 changes: 5 additions & 5 deletions src/common/MainNavBars/MainNavBars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: 'settings', label: 'SETTINGS', icon: 'settings', href: '#/settings' },
{ id: 'addons', label: 'ADDONS', icon: 'addons', href: '#/addons' }
];

const MainNavBars = React.memo(({ className, route, query, children }) => {
Expand Down
6 changes: 3 additions & 3 deletions src/common/MetaItem/MetaItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -56,11 +56,11 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
const renderPosterFallback = React.useCallback(() => (
<Icon
className={styles['placeholder-icon']}
icon={ICON_FOR_TYPE.has(type) ? ICON_FOR_TYPE.get(type) : ICON_FOR_TYPE.get('other')}
name={ICON_FOR_TYPE.has(type) ? ICON_FOR_TYPE.get(type) : ICON_FOR_TYPE.get('other')}
/>
), [type]);
const renderMenuLabelContent = React.useCallback(() => (
<Icon className={styles['icon']} icon={'ic_more'} />
<Icon className={styles['icon']} name={'more-vertical'} />
), []);
return (
<Button title={name} href={href} {...filterInvalidDOMProps(props)} className={classnames(className, styles['meta-item-container'], styles['poster-shape-poster'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} onClick={metaItemOnClick}>
Expand Down
8 changes: 4 additions & 4 deletions src/common/MetaItem/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
flex: none;
width: 80%;
height: 50%;
fill: @color-background-light3-90;
color: @color-background-light3-90;
}
}

Expand All @@ -96,11 +96,11 @@
filter: drop-shadow(0 0 0.5rem @color-background);

.play-icon-circle-centered-background {
fill: @color-accent4-90;
color: @color-accent4-90;
}

.play-icon-circle-centered-icon {
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
}
}
Expand Down Expand Up @@ -149,7 +149,7 @@
display: block;
width: 100%;
height: 100%;
fill: @color-surface-light1-90;
color: @color-surface-light1-90;
}

.popup-menu-container {
Expand Down
4 changes: 2 additions & 2 deletions src/common/MetaPreview/ActionButton/ActionButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand All @@ -13,7 +13,7 @@ const ActionButton = ({ className, icon, label, ...props }) => {
{
typeof icon === 'string' && icon.length > 0 ?
<div className={styles['icon-container']}>
<Icon className={styles['icon']} icon={icon} />
<Icon className={styles['icon']} name={icon} />
</div>
:
null
Expand Down
2 changes: 1 addition & 1 deletion src/common/MetaPreview/ActionButton/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
display: block;
width: 100%;
height: 100%;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
}

Expand Down
12 changes: 6 additions & 6 deletions src/common/MetaPreview/MetaPreview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const UrlUtils = require('url');
const { useTranslation } = require('react-i18next');
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 ModalDialog = require('stremio/common/ModalDialog');
Expand Down Expand Up @@ -147,7 +147,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
target={'_blank'}
{...(compact ? { tabIndex: -1 } : null)}
>
<Icon className={styles['icon']} icon={'ic_imdbnoframe'} />
<Icon className={styles['icon']} name={'imdb'} />
<div className={styles['label']}>{linksGroups.get(CONSTANTS.IMDB_LINK_CATEGORY).label}</div>
</Button>
:
Expand Down Expand Up @@ -193,7 +193,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
typeof toggleInLibrary === 'function' ?
<ActionButton
className={styles['action-button']}
icon={inLibrary ? 'ic_removelib' : 'ic_addlib'}
icon={inLibrary ? 'remove-from-library' : 'add-to-library'}
label={inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}
tabIndex={compact ? -1 : 0}
onClick={toggleInLibrary}
Expand All @@ -205,7 +205,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
typeof trailerHref === 'string' ?
<ActionButton
className={styles['action-button']}
icon={'ic_movies'}
icon={'trailer'}
label={t('TRAILER')}
tabIndex={compact ? -1 : 0}
href={trailerHref}
Expand All @@ -217,7 +217,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
typeof showHref === 'string' && compact ?
<ActionButton
className={styles['action-button']}
icon={'ic_play'}
icon={'play'}
label={t('SHOW')}
tabIndex={compact ? -1 : 0}
href={showHref}
Expand All @@ -230,7 +230,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
<React.Fragment>
<ActionButton
className={styles['action-button']}
icon={'ic_share'}
icon={'share'}
label={t('CTX_SHARE')}
tabIndex={compact ? -1 : 0}
onClick={openShareModal}
Expand Down
2 changes: 1 addition & 1 deletion src/common/MetaPreview/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@
width: 3rem;
height: 1.1rem;
margin-right: 1rem;
fill: @color-surface-90;
color: @color-surface-90;
}

.label {
Expand Down
4 changes: 2 additions & 2 deletions src/common/MetaRow/MetaRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const ReactIs = require('react-is');
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 = require('stremio/common/Button');
const CONSTANTS = require('stremio/common/CONSTANTS');
const MetaRowPlaceholder = require('./MetaRowPlaceholder');
Expand All @@ -28,7 +28,7 @@ const MetaRow = ({ className, title, message, items, itemComponent, deepLinks })
deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ?
<Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover || deepLinks.library} tabIndex={-1}>
<div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
:
null
Expand Down
4 changes: 2 additions & 2 deletions src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = require('stremio/common/Button');
const CONSTANTS = require('stremio/common/CONSTANTS');
const styles = require('./styles');
Expand All @@ -21,7 +21,7 @@ const MetaRowPlaceholder = ({ className, title, deepLinks }) => {
deepLinks && typeof deepLinks.discover === 'string' ?
<Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover} tabIndex={-1}>
<div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
:
null
Expand Down
2 changes: 1 addition & 1 deletion src/common/MetaRow/MetaRowPlaceholder/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
flex: none;
height: 1.3rem;
margin-left: 0.5rem;
fill: var(--color-placeholder-text);
color: var(--color-placeholder-text);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/common/MetaRow/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
}

.icon {
fill: @color-secondaryvariant2-light2-90;
color: @color-secondaryvariant2-light2-90;
}
}

Expand All @@ -57,7 +57,7 @@
flex: none;
height: 1.3rem;
margin-left: 0.5rem;
fill: @color-secondaryvariant2-light1-90;
color: @color-secondaryvariant2-light1-90;
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/common/ModalDialog/ModalDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useRouteFocused, useModalsContainer } = require('stremio-router');
const Button = require('stremio/common/Button');
const Icon = require('@stremio/stremio-icons/dom');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Modal } = require('stremio-router');
const styles = require('./styles');

Expand Down Expand Up @@ -60,7 +60,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
<Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}>
<div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}>
<Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_x'} />
<Icon className={styles['icon']} name={'close'} />
</Button>
{
typeof title === 'string' && title.length > 0 ?
Expand All @@ -78,7 +78,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
<Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
<Icon className={styles['icon']} name={icon} />
:
null
}
Expand Down
6 changes: 3 additions & 3 deletions src/common/ModalDialog/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@
display: block;
width: 100%;
height: 100%;
fill: @color-surface-dark1-90;
color: @color-surface-dark1-90;
}

&:hover, &:focus {
.icon {
fill: @color-surface-light1-90;
color: @color-surface-light1-90;
}
}

Expand Down Expand Up @@ -105,7 +105,7 @@
width: 1.2rem;
height: 1.2rem;
margin-right: .5rem;
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}

.label {
Expand Down
4 changes: 2 additions & 2 deletions src/common/Multiselect/Multiselect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 Popup = require('stremio/common/Popup');
const ModalDialog = require('stremio/common/ModalDialog');
Expand Down Expand Up @@ -104,7 +104,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
title
}
</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_down'} />
<Icon className={styles['icon']} name={'caret-down'} />
</React.Fragment>
}
{children}
Expand Down
4 changes: 2 additions & 2 deletions src/common/Multiselect/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
}

.icon {
fill: @color-surface-light5-90;
color: @color-surface-light5-90;
}
}

Expand All @@ -36,7 +36,7 @@
width: 1rem;
height: 1rem;
margin-left: 1rem;
fill: @color-secondaryvariant1-90;
color: @color-secondaryvariant1-90;
}

.popup-menu-container {
Expand Down
Loading

0 comments on commit 50b1659

Please sign in to comment.