From b3ca3de8ab24ff9785b1bf7acc86d3bf9ab8c149 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 2 Jan 2019 10:59:39 +0200
Subject: [PATCH 01/20] video fixes

---
 src/routes/Detail/VideosList/Video/Video.js   |  6 ++--
 .../Detail/VideosList/Video/styles.less       | 36 ++++++++-----------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/routes/Detail/VideosList/Video/Video.js b/src/routes/Detail/VideosList/Video/Video.js
index e516fbf31..1c62a020f 100644
--- a/src/routes/Detail/VideosList/Video/Video.js
+++ b/src/routes/Detail/VideosList/Video/Video.js
@@ -87,7 +87,7 @@ const renderProgress = (progress) => {
 
 const Video = (props) => {
     return (
-        <div onClick={props.onVideoClicked} className={classnames(styles['video-container'], props.className)}>
+        <div className={classnames(styles['video-container'], props.className)} data-id={props.id} onClick={props.onClick}>
             <div className={styles['flex-row-container']}>
                 {renderPoster(props.poster)}
                 <div className={styles['info-container']}>
@@ -106,14 +106,16 @@ const Video = (props) => {
 
 Video.propTypes = {
     className: PropTypes.string,
+    id: PropTypes.string.isRequired,
     poster: PropTypes.string.isRequired,
     episode: PropTypes.number.isRequired,
+    season: PropTypes.number.isRequired,
     title: PropTypes.string.isRequired,
     released: PropTypes.instanceOf(Date).isRequired,
     isWatched: PropTypes.bool.isRequired,
     isUpcoming: PropTypes.bool.isRequired,
     progress: PropTypes.number.isRequired,
-    onVideoClicked: PropTypes.func
+    onClick: PropTypes.func
 };
 Video.defaultProps = {
     poster: '',
diff --git a/src/routes/Detail/VideosList/Video/styles.less b/src/routes/Detail/VideosList/Video/styles.less
index 1c4b6719a..0da43ffe0 100644
--- a/src/routes/Detail/VideosList/Video/styles.less
+++ b/src/routes/Detail/VideosList/Video/styles.less
@@ -1,15 +1,6 @@
-.video-container {
-    --video-width: 360px;
-    --spacing: 8px;
-    --title-font-size: 12px;
-    --released-date-font-size: 11px;
-    --label-font-size: 10px;
-    --label-border-width: 2px;
-}
-
 .video-container {
     width: var(--video-width);
-    background-color: var(--color-backgroundlight);
+    background-color: var(--color-surfacedarker60);
 
     .flex-row-container {
         display: flex;
@@ -18,7 +9,7 @@
 
         .poster-container {
             flex: 1;
-            margin: var(--spacing) 0 var(--spacing) var(--spacing);
+            margin: var(--video-spacing) 0 var(--video-spacing) var(--video-spacing);
 
             .poster {
                 display: block;
@@ -41,20 +32,21 @@
         .info-container {
             flex: 3;
             min-height: calc(0.2 * var(--video-width));
-            padding: var(--spacing);
+            padding: var(--video-spacing);
             display: flex;
             flex-direction: column;
             justify-content: center;
 
             .title {
-                font-size: var(--title-font-size);
+                font-size: var(--video-title-font-size);
+                line-height: 1.2em;
                 color: var(--color-surfacelighter);
                 word-break: break-all; //Firefox doesn't support { break-word }
                 word-break: break-word;
             }
 
             .released-date {
-                font-size: var(--released-date-font-size);
+                font-size: var(--video-released-date-font-size);
                 color: var(--color-surface);
             }
 
@@ -62,17 +54,17 @@
                 display: flex;
 
                 .upcoming-label, .watched-label {
-                    font-size: var(--label-font-size);
-                    font-weight: 600;
+                    font-size: var(--video-label-font-size);
+                    font-weight: 500;
                     line-height: 1.5;
-                    border-width: var(--label-border-width);
+                    border-width: var(--video-label-border-width);
                     border-style: solid;
                     padding: 0 0.6em;
                     color: var(--color-surfacelighter);
                 }
 
                 .upcoming-label {
-                    margin-right: var(--spacing);
+                    margin-right: var(--video-spacing);
                     border-color: var(--color-signal5);
                 }
 
@@ -82,7 +74,7 @@
             }
 
             >:not(:last-child) {
-                margin-bottom: calc(0.5 * var(--spacing));
+                margin-bottom: calc(0.5 * var(--video-spacing));
             }
         }
 
@@ -90,7 +82,7 @@
             width: calc(0.07 * var(--video-width));
             display: flex;
             align-items: center;
-            padding: var(--spacing) var(--spacing) var(--spacing) 0;
+            padding: var(--video-spacing) var(--video-spacing) var(--video-spacing) 0;
 
             .arrow {
                 width: 100%;
@@ -100,7 +92,7 @@
     }
 
     .progress-container {
-        height: calc(0.5 * var(--spacing));
+        height: calc(0.5 * var(--video-spacing));
         background-color: var(--color-primarydark);
 
         .progress {
@@ -111,6 +103,6 @@
 
     &:hover {
         cursor: pointer;
-        background-color: var(--color-surfacelighter20);
+        background-color: var(--color-surfacedarker);
     }
 }
\ No newline at end of file

From 06af08c424083374515500f931a0978c8e830b62 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 2 Jan 2019 11:03:25 +0200
Subject: [PATCH 02/20] popup imported

---
 src/routes/Detail/VideosList/VideosList.js | 44 ++++++++++----
 src/routes/Detail/VideosList/styles.less   | 68 +++++++++++++++++-----
 2 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/src/routes/Detail/VideosList/VideosList.js b/src/routes/Detail/VideosList/VideosList.js
index 3cc1be171..6498cf154 100644
--- a/src/routes/Detail/VideosList/VideosList.js
+++ b/src/routes/Detail/VideosList/VideosList.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Icon from 'stremio-icons/dom';
+import { Popup } from 'stremio-common';
 import Video from './Video';
 import styles from './styles';
 
@@ -8,16 +10,19 @@ class VideosList extends Component {
     constructor(props) {
         super(props);
 
+        this.seasonsPopupRef = React.createRef();
         this.seasons = this.props.videos.map((video) => video.season)
             .filter((season, index, seasons) => seasons.indexOf(season) === index);
 
         this.state = {
-            selectedSeason: this.seasons[0]
+            selectedSeason: this.seasons[0],
+            selectedVideoId: 0
         }
     }
 
     changeSeason = (event) => {
-        this.setState({ selectedSeason: parseInt(event.target.value) });
+        this.setState({ selectedSeason: parseInt(event.currentTarget.dataset.season) });
+        this.seasonsPopupRef.current && this.seasonsPopupRef.current.close();
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -34,20 +39,35 @@ class VideosList extends Component {
         this.setState({ selectedSeason: this.seasons[nextSeasonIndex] });
     }
 
+    onClick = (event) => {
+        this.setState({ selectedVideoId: event.currentTarget.dataset.id });
+        console.log(event.currentTarget.dataset.id);
+    }
+
     render() {
         return (
-            <div className={styles['videos-list-container']}>
+            <div className={classnames(styles['videos-list-container'], this.props.className)}>
                 <div className={styles['seasons-bar']}>
                     <div className={styles['button-container']} onClick={this.onPrevButtonClicked}>
                         <Icon className={styles['button-icon']} icon={'ic_arrow_left'} />
                     </div>
-                    <select value={this.state.selectedSeason} onChange={this.changeSeason}>
-                        {this.seasons.map((season) =>
-                            <option key={season} value={season}>
-                                {season}
-                            </option>
-                        )}
-                    </select>
+                    <Popup ref={this.seasonsPopupRef} className={styles['popup-container']} border={true}>
+                        <Popup.Label>
+                            <div className={styles['control-bar-button']}>
+                                S {this.state.selectedSeason}
+                                <Icon className={styles['icon']} icon={'ic_arrow_down'} />
+                            </div>
+                        </Popup.Label>
+                        <Popup.Menu>
+                            <div className={styles['popup-content']}>
+                                {this.seasons.map((season) =>
+                                    <div className={styles['season']} key={season} data-season={season} onClick={this.changeSeason}>
+                                        S {season}
+                                    </div>
+                                )}
+                            </div>
+                        </Popup.Menu>
+                    </Popup>
                     <div className={styles['button-container']} onClick={this.onNextButtonClicked} >
                         <Icon className={styles['button-icon']} icon={'ic_arrow_left'} />
                     </div>
@@ -58,13 +78,16 @@ class VideosList extends Component {
                         .map((video) =>
                             <Video key={video.id}
                                 className={styles['video']}
+                                id={video.id}
                                 poster={video.poster}
                                 episode={video.episode}
+                                season={video.season}
                                 title={video.name}
                                 released={video.released}
                                 isWatched={video.isWatched}
                                 isUpcoming={video.isUpcoming}
                                 progress={video.progress}
+                                onClick={this.onClick}
                             />
                         )}
                 </div>
@@ -74,6 +97,7 @@ class VideosList extends Component {
 }
 
 VideosList.propTypes = {
+    className: PropTypes.string,
     videos: PropTypes.arrayOf(PropTypes.object).isRequired
 };
 VideosList.defaultProps = {
diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less
index 41f242d3b..cc504a348 100644
--- a/src/routes/Detail/VideosList/styles.less
+++ b/src/routes/Detail/VideosList/styles.less
@@ -1,20 +1,37 @@
 .videos-list-container {
-    --scroll-container-width: 392px;
-    --seasons-bar-height: 50px;
-    --spacing: 8px;
-}
-
-.videos-list-container {
-    height: 100%;
-    display: inline-flex;
     flex-direction: column;
-    background: var(--color-background);
+    padding: calc(3 * var(--spacing)) 0;
+    background: var(--color-backgrounddarker40);
 
     .seasons-bar {
         height: var(--seasons-bar-height);
         display: flex;
         justify-content: space-between;
         margin-bottom: var(--spacing);
+        background: var(--color-backgrounddarker);
+
+        .control-bar-button {
+            cursor: pointer;
+            width: 258px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: var(--color-surfacelighter);
+
+            .icon {
+                width: 14%;
+                height: 14%;
+                fill: var(--color-surfacelight);
+            }
+
+            &:hover {
+                background-color: var(--color-surfacedarker60);
+
+                .icon {
+                    fill: var(--color-surfacelighter);
+                }
+            }
+        }
 
         .button-container {
             width: calc(1.5 * var(--seasons-bar-height));
@@ -30,14 +47,14 @@
             }
 
             &:hover {
-                background-color: var(--color-surfacelighter20);
+                background-color: var(--color-surfacedarker60);
             }
         }
     }
 
     .scroll-container {
         flex: 1;
-        width: var(--scroll-container-width);
+        width: calc(var(--video-width) + 4 * var(--spacing));
         padding: 0 calc(2 * var(--spacing));
         margin: 0 var(--spacing);
         overflow-y: auto;
@@ -53,10 +70,35 @@
     }
 
     .scroll-container::-webkit-scrollbar-thumb {
-        background-color: var(--color-secondarylighter80);
+        background-color: var(--color-secondarylighter);
     }
 
     .scroll-container::-webkit-scrollbar-track {
-        background-color: var(--color-backgroundlight);
+        background-color: var(--color-backgroundlighter);
+    }
+}
+
+.popup-container {
+    --border-color: var(--color-primarylight);
+
+    .popup-content {
+        cursor: pointer;
+        width: 258px;
+        background-color: var(--color-backgrounddark);
+        
+        .season {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 16px;
+            width: 258px;
+            border-top: 1px solid var(--color-primarylight);
+            color: var(--color-surfacelight);
+
+            &:hover {
+                color: var(--color-surfacelighter);
+                background-color: var(--color-surfacedarker60);
+            }
+        }
     }
 }
\ No newline at end of file

From f311729577ceb4a30f84c6e3458b4d69cde76c5c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 2 Jan 2019 11:08:22 +0200
Subject: [PATCH 03/20] detail screen implemented

---
 src/app/routerConfig.js       |   6 +-
 src/routes/Detail/Detail.js   | 137 +++++++++++-
 src/routes/Detail/styles.less | 378 ++++++++++++++++++++++++++++++++++
 3 files changed, 519 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/Detail/styles.less

diff --git a/src/app/routerConfig.js b/src/app/routerConfig.js
index 095a290d4..562ae002b 100644
--- a/src/app/routerConfig.js
+++ b/src/app/routerConfig.js
@@ -1,4 +1,4 @@
-import { Calendar, Discover, Addons, Settings, Board, Player } from 'stremio-routes';
+import { Calendar, Discover, Addons, Settings, Board, Player, Detail } from 'stremio-routes';
 
 const config = {
     views: [
@@ -27,6 +27,10 @@ const config = {
                 {
                     path: '/settings',
                     component: Settings
+                },
+                {
+                    path: '/detail',
+                    component: Detail
                 }
             ]
         },
diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js
index ff647ded3..15fceb8aa 100644
--- a/src/routes/Detail/Detail.js
+++ b/src/routes/Detail/Detail.js
@@ -1,9 +1,144 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import VideosList from './VideosList';
+import Icon from 'stremio-icons/dom';
+import styles from './styles';
 
 class Detail extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            logoLoaded: true
+        };
+    }
+
+    renderSection({ title, links }) {
+        return (
+            <div className={styles['section-container']}>
+                {title ? <div className={styles['title']}>{title}</div> : null}
+                {links.slice(0, 4).map(link => <a key={link} className={styles['link']}>{link}</a>)}
+            </div>
+        );
+    }
+
     render() {
-        return null;
+        return (
+            <div style={this.props.metaItem.background.length > 0 ? { backgroundImage: 'url(' + this.props.metaItem.background + ')' } : { backgroundColor: colors.backgrounddarker }} className={styles['detail-container']}>
+                <div className={styles['overlay-container']} />
+                <div className={styles['info-container']}>
+                    {
+                        this.state.logoLoaded ? <img className={styles['logo']} src={this.props.metaItem.logo} onError={() => this.setState({ logoLoaded: false })} /> : null
+                    }
+                    <div className={styles['basic-info']}>
+                        <div className={styles['duration']}>{this.props.metaItem.duration} min</div>
+                        <div className={styles['release-info']}>{this.props.metaItem.releaseInfo.length > 0 ? this.props.metaItem.releaseInfo : this.props.metaItem.released.getFullYear()}</div>
+                        <a href={this.props.metaItem.links.imdb} target={'_blank'} className={styles['imdb-container']}>
+                            <Icon className={styles['imdb-logo']} icon={'ic_imdbnoframe'} />
+                            <div className={styles['imdb-rating']}>{this.props.metaItem.imdbRating}</div>
+                        </a>
+                    </div>
+                    <div className={styles['name']}>{this.props.metaItem.name}</div>
+                    <div className={styles['description']}>{this.props.metaItem.description}</div>
+                    {this.renderSection({ title: 'GENRES', links: this.props.metaItem.genres })}
+                    {this.renderSection({ title: 'WRITTEN BY', links: this.props.metaItem.writers })}
+                    {this.renderSection({ title: 'DIRECTED BY', links: this.props.metaItem.directors })}
+                    {this.renderSection({ title: 'CAST', links: this.props.metaItem.cast })}
+                    <div className={styles['buttons']}>
+                        <a href={this.props.metaItem.links.youtube} className={styles['button-container']}>
+                            <Icon className={styles['icon']} icon={'ic_movies'} />
+                            <div className={styles['label']}>Trailer</div>
+                        </a>
+                        <div className={styles['button-container']} onClick={this.props.toggleLibraryButton}>
+                            <Icon className={styles['icon']} icon={this.props.inLibrary ? 'ic_removelib' : 'ic_addlib'} />
+                            <div className={styles['label']}>{this.props.inLibrary ? 'Remove from Library' : 'Add to library'}</div>
+                        </div>
+                        <div className={styles['button-container']}>
+                            <Icon className={styles['icon']} icon={'ic_share'} />
+                            <div className={styles['label']}>Share</div>
+                        </div>
+                    </div>
+                </div>
+                <VideosList className={styles['videos-list']} videos={this.props.metaItem.videos}></VideosList>
+            </div>
+        );
     }
 }
 
+Detail.propTypes = {
+    inLibrary: PropTypes.bool.isRequired,
+    metaItem: PropTypes.object.isRequired,
+    toggleLibraryButton: PropTypes.func
+};
+Detail.defaultProps = {
+    inLibrary: false,
+    metaItem: {
+        logo: 'https://images.metahub.space/logo/medium/tt4123430/img',
+        background: 'https://images.metahub.space/background/medium/tt4123430/img',
+        duration: '134',
+        releaseInfo: '2018',
+        released: new Date(2018, 4, 23),
+        imdbRating: '7.4',
+        name: 'Fantastic Beasts and Where to Find Them: The Original Screenplay',
+        description: 'In an effort to thwart Grindelwald' + 's plans ofraisingpurebloodwizardstoansofraisingpurebloodwizardstoansofraisingpurebloodwizardstoansofraising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards to rule over all non-magical beings, Albus Dumbledore enlists his former student Newt Scamander, who agrees to help, unaware of the dangers that lie ahead. Lines are drawn as love and loyalty are tested, even among the truest friends and family, in an increasingly divided wizarding world.',
+        genres: ['Adventure', 'Family', 'Fantasy'],
+        writers: ['J. K. Rowling'],
+        directors: ['David Yates'],
+        cast: ['Johny Depp', 'Kevin Guthrie', 'Carmen Ejogo', 'Wolf Roth'],
+        videos: [
+            { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+            { id: '2', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 3 },
+            { id: '3', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 5 },
+            { id: '4', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 4 },
+            { id: '5', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+            { id: '6', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+            { id: '7', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+            { id: '8', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+            { id: '9', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+            { id: '10', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+            { id: '11', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+            { id: '12', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+            { id: '13', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+            { id: '14', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+            { id: '15', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+            { id: '16', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+            { id: '17', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+            { id: '18', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+            { id: '19', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+            { id: '20', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+            { id: '21', poster: 'https://www.stremiocom/wsebsite/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+            { id: '22', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+            { id: '23', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+            { id: '24', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+            { id: '25', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+            { id: '26', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+            { id: '27', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+            { id: '28', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+            { id: '29', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+            { id: '30', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+            { id: '31', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+            { id: '32', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
+            { id: '33', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+            { id: '34', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+            { id: '35', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+            { id: '36', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+            { id: '37', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+            { id: '38', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
+            { id: '39', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+            { id: '40', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+            { id: '41', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+            { id: '42', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+            { id: '43', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+            { id: '44', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
+            { id: '45', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+            { id: '46', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 }
+        ],
+        links: {
+            share: '',
+            imdb: 'https://www.imdb.com/title/tt4123430/?ref_=fn_al_tt_3',
+            youtube: '#/player'
+        }
+    }
+};
+
 export default Detail;
diff --git a/src/routes/Detail/styles.less b/src/routes/Detail/styles.less
new file mode 100644
index 000000000..c51633a93
--- /dev/null
+++ b/src/routes/Detail/styles.less
@@ -0,0 +1,378 @@
+.detail-container {
+    --logo-height: 90px;
+    --button-width: 80px;
+    --name-font-size: 20px;
+    --description-font-size: 12px;
+    --button-label-font-size: 13px;
+    --link-font-size: 14px;
+    --seasons-bar-height: 50px;
+    --spacing: 8px;
+    --video-width: 360px;
+    --video-spacing: 8px;
+    --video-title-font-size: 12px;
+    --video-released-date-font-size: 11px;
+    --video-label-font-size: 10px;
+    --video-label-border-width: 2px;
+}
+
+@media screen and (max-width: 1220px) {
+    .detail-container {
+        --logo-height: 80px;
+        --button-width: 70px;
+        --name-font-size: 18px;
+        --description-font-size: 10px;
+        --button-label-font-size: 11px;
+        --link-font-size: 12px;
+        --seasons-bar-height: 40px;
+        --spacing: 6px;
+        --video-width: 300px;
+        --video-spacing: 6px;
+        --video-title-font-size: 10px;
+        --video-released-date-font-size: 9px;
+        --video-label-font-size: 8px;
+        --video-label-border-width: 2px;
+    }
+}
+
+@media screen and (min-width: 1440px) {
+    .detail-container {
+        --logo-height: 110px;
+        --button-width: 90px;
+        --name-font-size: 22px;
+        --description-font-size: 14px;
+        --button-label-font-size: 15px;
+        --link-font-size: 16px;
+        --seasons-bar-height: 60px;
+        --spacing: 8px;
+        --video-width: 420px;
+        --video-spacing: 8px;
+        --video-title-font-size: 13px;
+        --video-released-date-font-size: 13px;
+        --video-label-font-size: 12px;
+        --video-label-border-width: 2px;
+    }
+}
+
+@media screen and (min-width: 1680px) {
+    .detail-container {
+        --logo-height: 130px;
+        --button-width: 110px;
+        --name-font-size: 26px;
+        --description-font-size: 17px;
+        --button-label-font-size: 18px;
+        --link-font-size: 20px;
+        --seasons-bar-height: 70px;
+        --spacing: 10px;
+        --video-width: 480px;
+        --video-spacing: 10px;
+        --video-title-font-size: 16px;
+        --video-released-date-font-size: 15px;
+        --video-label-font-size: 14px;
+        --video-label-border-width: 3px;
+    }
+}
+
+@media screen and (min-width: 1920px) {
+    .detail-container {
+        --logo-height: 140px;
+        --button-width: 140px;
+        --name-font-size: 32px;
+        --description-font-size: 22px;
+        --button-label-font-size: 24px;
+        --link-font-size: 26px;
+        --seasons-bar-height: 80px;
+        --spacing: 10px;
+        --video-width: 560px;
+        --video-spacing: 10px;
+        --video-title-font-size: 20px;
+        --video-released-date-font-size: 19px;
+        --video-label-font-size: 18px;
+        --video-label-border-width: 4px;
+    }
+}
+
+@media screen and (min-width: 2048px) {
+    .detail-container {
+        --logo-height: 140px;
+        --button-width: 140px;
+        --name-font-size: 34px;
+        --description-font-size: 22px;
+        --button-label-font-size: 23px;
+        --link-font-size: 26px;
+        --seasons-bar-height: 80px;
+        --spacing: 14px;
+        --video-width: 600px;
+        --video-spacing: 14px;
+        --video-title-font-size: 20px;
+        --video-released-date-font-size: 19px;
+        --video-label-font-size: 18px;
+        --video-label-border-width: 4px;
+    }
+}
+
+@media screen and (min-width: 2560px) {
+    .detail-container {
+        --logo-height: 220px;
+        --button-width: 170px;
+        --name-font-size: 44px;
+        --description-font-size: 30px;
+        --button-label-font-size: 32px;
+        --link-font-size: 34px;
+        --seasons-bar-height: 100px;
+        --spacing: 16px;
+        --video-width: 740px;
+        --video-spacing: 16px;
+        --video-title-font-size: 26px;
+        --video-released-date-font-size: 25px;
+        --video-label-font-size: 22px;
+        --video-label-border-width: 4px;
+    }
+}
+
+@media screen and (min-width: 2880px) {
+    .detail-container {
+        --logo-height: 260px;
+        --button-width: 190px;
+        --name-font-size: 50px;
+        --description-font-size: 36px;
+        --button-label-font-size: 37px;
+        --link-font-size: 40px;
+        --seasons-bar-height: 120px;
+        --spacing: 20px;
+        --video-width: 800px;
+        --video-spacing: 20px;
+        --video-title-font-size: 28px;
+        --video-released-date-font-size: 27px;
+        --video-label-font-size: 26px;
+        --video-label-border-width: 4px;
+    }
+}
+
+@media screen and (min-width: 3440px) {
+    .detail-container {
+        --logo-height: 380px;
+        --button-width: 240px;
+        --name-font-size: 64px;
+        --description-font-size: 48px;
+        --button-label-font-size: 49px;
+        --link-font-size: 54px;
+        --seasons-bar-height: 160px;
+        --spacing: 24px;
+        --video-width: 1100px;
+        --video-spacing: 24px;
+        --video-title-font-size: 36px;
+        --video-released-date-font-size: 35px;
+        --video-label-font-size: 34px;
+        --video-label-border-width: 8px;
+    }
+}
+
+@media screen and (min-height: 700px) {
+    .detail-container {
+        --logo-height: 100px;
+        --button-width: 90px;
+        --name-font-size: 22px;
+        --description-font-size: 14px;
+        --button-label-font-size: 15px;
+        --link-font-size: 16px;
+        --seasons-bar-height: 50px;
+        --spacing: 8px;
+        --video-width: 360px;
+        --video-spacing: 8px;
+        --video-title-font-size: 12px;
+        --video-released-date-font-size: 11px;
+        --video-label-font-size: 10px;
+        --video-label-border-width: 2px;
+    }
+}
+
+@media screen and (min-height: 800px) {
+    .detail-container {
+        --logo-height: 110px;
+        --button-width: 100px;
+        --name-font-size: 24px;
+        --description-font-size: 16px;
+        --button-label-font-size: 17px;
+        --link-font-size: 18px;
+        --seasons-bar-height: 50px;
+        --spacing: 8px;
+        --video-width: 360px;
+        --video-spacing: 8px;
+        --video-title-font-size: 12px;
+        --video-released-date-font-size: 11px;
+        --video-label-font-size: 10px;
+        --video-label-border-width: 2px;
+    }
+}
+
+.detail-container {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    .overlay-container {
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--color-backgrounddarker60);
+    }
+
+    .info-container {
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        right: 40%;
+        bottom: 0;
+        padding: calc(var(--spacing) * 3);
+
+        .logo {
+            height: var(--logo-height);
+            object-fit: contain;
+        }
+
+        .logo-error {
+            display: none;
+        }
+
+        .basic-info {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin: 0.6em 0;
+
+            .duration {
+                padding: 0.3em 0.6em;
+                font-size: var(--link-font-size);
+                color: var(--color-surfacelighter);
+            }
+
+            .release-info {
+                padding: 0.3em 0.6em;
+                font-size: var(--link-font-size);
+                color: var(--color-surfacelighter);
+            }
+
+            .imdb-container {
+                cursor: pointer;
+                width: var(--button-width);
+                display: flex;
+                flex-direction: row;
+                padding: 0.3em 0.6em;
+
+                .imdb-logo {
+                    flex: 1;
+                    height: 100%;
+                    margin-right: 10%;
+                    fill: var(--color-surface);
+                }
+
+                .imdb-rating {
+                    font-size: var(--link-font-size);
+                    color: var(--color-surfacelighter);
+                }
+
+                &:hover {
+                    background-color: var(--color-surface40);
+                }
+            }
+        }
+
+        .name {
+            padding: 0.3em 0;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: var(--name-font-size);
+            color: var(--color-surfacelighter);
+        }
+
+        .description {
+            max-height: 7.5em;
+            margin: 1em 0;
+            overflow: hidden;
+            overflow-wrap: break-word;
+            font-size: var(--description-font-size);
+            line-height: 1.5;
+            color: var(--color-surfacelighter);
+        }
+
+        .section-container {
+            margin: 0.8em 0em;
+
+            .title {
+                margin-bottom: calc(0.05 * var(--button-width));
+                font-size: var(--link-font-size);
+                color: var(--color-surface);
+            }
+
+            .link {
+                display: inline-block;
+                cursor: pointer;
+                padding: 0.3em 0.6em;
+                font-size: var(--link-font-size);
+                color: var(--color-surfacelighter);
+
+                &:hover {
+                    background-color: var(--color-surface40);
+                }
+            }
+        }
+
+        .buttons {
+            position: absolute;
+            left: calc(var(--spacing) * 3);
+            bottom: calc(var(--spacing) * 3);
+
+            .button-container {
+                cursor: pointer;
+                width: var(--button-width);
+                height: var(--button-width);
+                display: inline-flex;
+                flex-direction: column;
+                align-items: center;
+                text-align: center;
+
+                .icon {
+                    height: 30%;
+                    margin: 20% 0 10% 0;
+                    fill: var(--color-surfacelighter);
+                }
+
+                .label {
+                    height: 40%;
+                    padding: 0 calc(0.1 * var(--button-width));
+                    overflow-wrap: break-word;
+                    overflow: hidden;
+                    font-size: var(--button-label-font-size);
+                    color: var(--color-surfacelight);
+                }
+
+                &:hover {
+                    background-color: var(--color-surfacedarker60);
+                }
+            }
+        }
+    }
+
+    .videos-list {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
\ No newline at end of file

From 98a6f30c4c7d5969b07a92aa060cd8fa8f73aae3 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 2 Jan 2019 15:50:27 +0200
Subject: [PATCH 04/20] data-id renamed to data-video-id

---
 src/routes/Detail/VideosList/Video/Video.js | 2 +-
 src/routes/Detail/VideosList/VideosList.js  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/Detail/VideosList/Video/Video.js b/src/routes/Detail/VideosList/Video/Video.js
index 1c62a020f..e5c2ea13e 100644
--- a/src/routes/Detail/VideosList/Video/Video.js
+++ b/src/routes/Detail/VideosList/Video/Video.js
@@ -87,7 +87,7 @@ const renderProgress = (progress) => {
 
 const Video = (props) => {
     return (
-        <div className={classnames(styles['video-container'], props.className)} data-id={props.id} onClick={props.onClick}>
+        <div className={classnames(styles['video-container'], props.className)} data-video-id={props.id} onClick={props.onClick}>
             <div className={styles['flex-row-container']}>
                 {renderPoster(props.poster)}
                 <div className={styles['info-container']}>
diff --git a/src/routes/Detail/VideosList/VideosList.js b/src/routes/Detail/VideosList/VideosList.js
index 6498cf154..55aa870ae 100644
--- a/src/routes/Detail/VideosList/VideosList.js
+++ b/src/routes/Detail/VideosList/VideosList.js
@@ -40,8 +40,8 @@ class VideosList extends Component {
     }
 
     onClick = (event) => {
-        this.setState({ selectedVideoId: event.currentTarget.dataset.id });
-        console.log(event.currentTarget.dataset.id);
+        this.setState({ selectedVideoId: event.currentTarget.dataset.videoId });
+        console.log(event.currentTarget.dataset.videoId);
     }
 
     render() {

From afa188c3cb81a5992937484a1c696e9e51d7639c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 2 Jan 2019 16:00:51 +0200
Subject: [PATCH 05/20] detail screen styles refactored

---
 src/routes/Detail/styles.less | 216 +++++++++-------------------------
 1 file changed, 58 insertions(+), 158 deletions(-)

diff --git a/src/routes/Detail/styles.less b/src/routes/Detail/styles.less
index c51633a93..e996042e8 100644
--- a/src/routes/Detail/styles.less
+++ b/src/routes/Detail/styles.less
@@ -1,209 +1,110 @@
 .detail-container {
-    --logo-height: 90px;
-    --button-width: 80px;
-    --name-font-size: 20px;
-    --description-font-size: 12px;
-    --button-label-font-size: 13px;
-    --link-font-size: 14px;
-    --seasons-bar-height: 50px;
     --spacing: 8px;
+    --action-button-width: 80px;
     --video-width: 360px;
-    --video-spacing: 8px;
-    --video-title-font-size: 12px;
-    --video-released-date-font-size: 11px;
-    --video-label-font-size: 10px;
-    --video-label-border-width: 2px;
+    --stream-width: 360px;
+    font-size: 12px;
 }
 
 @media screen and (max-width: 1220px) {
     .detail-container {
-        --logo-height: 80px;
-        --button-width: 70px;
-        --name-font-size: 18px;
-        --description-font-size: 10px;
-        --button-label-font-size: 11px;
-        --link-font-size: 12px;
-        --seasons-bar-height: 40px;
         --spacing: 6px;
+        --action-button-width: 70px;
         --video-width: 300px;
-        --video-spacing: 6px;
-        --video-title-font-size: 10px;
-        --video-released-date-font-size: 9px;
-        --video-label-font-size: 8px;
-        --video-label-border-width: 2px;
+        --stream-width: 300px;
+        font-size: 10px;
     }
 }
 
 @media screen and (min-width: 1440px) {
     .detail-container {
-        --logo-height: 110px;
-        --button-width: 90px;
-        --name-font-size: 22px;
-        --description-font-size: 14px;
-        --button-label-font-size: 15px;
-        --link-font-size: 16px;
-        --seasons-bar-height: 60px;
         --spacing: 8px;
+        --action-button-width: 90px;
         --video-width: 420px;
-        --video-spacing: 8px;
-        --video-title-font-size: 13px;
-        --video-released-date-font-size: 13px;
-        --video-label-font-size: 12px;
-        --video-label-border-width: 2px;
+        --stream-width: 420px;
+        font-size: 13px;
     }
 }
 
 @media screen and (min-width: 1680px) {
     .detail-container {
-        --logo-height: 130px;
-        --button-width: 110px;
-        --name-font-size: 26px;
-        --description-font-size: 17px;
-        --button-label-font-size: 18px;
-        --link-font-size: 20px;
-        --seasons-bar-height: 70px;
         --spacing: 10px;
+        --action-button-width: 110px;
         --video-width: 480px;
-        --video-spacing: 10px;
-        --video-title-font-size: 16px;
-        --video-released-date-font-size: 15px;
-        --video-label-font-size: 14px;
-        --video-label-border-width: 3px;
+        --stream-width: 480px;
+        font-size: 16px;
     }
 }
 
 @media screen and (min-width: 1920px) {
     .detail-container {
-        --logo-height: 140px;
-        --button-width: 140px;
-        --name-font-size: 32px;
-        --description-font-size: 22px;
-        --button-label-font-size: 24px;
-        --link-font-size: 26px;
-        --seasons-bar-height: 80px;
         --spacing: 10px;
+        --action-button-width: 140px;
         --video-width: 560px;
-        --video-spacing: 10px;
-        --video-title-font-size: 20px;
-        --video-released-date-font-size: 19px;
-        --video-label-font-size: 18px;
-        --video-label-border-width: 4px;
+        --stream-width: 560px;
+        font-size: 20px;
     }
 }
 
 @media screen and (min-width: 2048px) {
     .detail-container {
-        --logo-height: 140px;
-        --button-width: 140px;
-        --name-font-size: 34px;
-        --description-font-size: 22px;
-        --button-label-font-size: 23px;
-        --link-font-size: 26px;
-        --seasons-bar-height: 80px;
         --spacing: 14px;
+        --action-button-width: 140px;
         --video-width: 600px;
-        --video-spacing: 14px;
-        --video-title-font-size: 20px;
-        --video-released-date-font-size: 19px;
-        --video-label-font-size: 18px;
-        --video-label-border-width: 4px;
+        --stream-width: 600px;
+        font-size: 20px;
     }
 }
 
 @media screen and (min-width: 2560px) {
     .detail-container {
-        --logo-height: 220px;
-        --button-width: 170px;
-        --name-font-size: 44px;
-        --description-font-size: 30px;
-        --button-label-font-size: 32px;
-        --link-font-size: 34px;
-        --seasons-bar-height: 100px;
         --spacing: 16px;
+        --action-button-width: 170px;
         --video-width: 740px;
-        --video-spacing: 16px;
-        --video-title-font-size: 26px;
-        --video-released-date-font-size: 25px;
-        --video-label-font-size: 22px;
-        --video-label-border-width: 4px;
+        --stream-width: 740px;
+        font-size: 26px;
     }
 }
 
 @media screen and (min-width: 2880px) {
     .detail-container {
-        --logo-height: 260px;
-        --button-width: 190px;
-        --name-font-size: 50px;
-        --description-font-size: 36px;
-        --button-label-font-size: 37px;
-        --link-font-size: 40px;
-        --seasons-bar-height: 120px;
         --spacing: 20px;
+        --action-button-width: 190px;
         --video-width: 800px;
-        --video-spacing: 20px;
-        --video-title-font-size: 28px;
-        --video-released-date-font-size: 27px;
-        --video-label-font-size: 26px;
-        --video-label-border-width: 4px;
+        --stream-width: 800px;
+        font-size: 28px;
     }
 }
 
 @media screen and (min-width: 3440px) {
     .detail-container {
-        --logo-height: 380px;
-        --button-width: 240px;
-        --name-font-size: 64px;
-        --description-font-size: 48px;
-        --button-label-font-size: 49px;
-        --link-font-size: 54px;
-        --seasons-bar-height: 160px;
         --spacing: 24px;
+        --action-button-width: 240px;
         --video-width: 1100px;
-        --video-spacing: 24px;
-        --video-title-font-size: 36px;
-        --video-released-date-font-size: 35px;
-        --video-label-font-size: 34px;
-        --video-label-border-width: 8px;
+        --stream-width: 1100px;
+        font-size: 40px;
     }
 }
 
-@media screen and (min-height: 700px) {
-    .detail-container {
-        --logo-height: 100px;
-        --button-width: 90px;
-        --name-font-size: 22px;
-        --description-font-size: 14px;
-        --button-label-font-size: 15px;
-        --link-font-size: 16px;
-        --seasons-bar-height: 50px;
-        --spacing: 8px;
-        --video-width: 360px;
-        --video-spacing: 8px;
-        --video-title-font-size: 12px;
-        --video-released-date-font-size: 11px;
-        --video-label-font-size: 10px;
-        --video-label-border-width: 2px;
-    }
-}
+// @media screen and (min-height: 700px) {
+//     .detail-container {
+//         --font-size: 12px;
+//         --spacing: 8px;
+//         --action-button-width: 90px;
+//         --video-width: 360px;
+//         --stream-width: 360px;
+//     }
+// }
 
-@media screen and (min-height: 800px) {
-    .detail-container {
-        --logo-height: 110px;
-        --button-width: 100px;
-        --name-font-size: 24px;
-        --description-font-size: 16px;
-        --button-label-font-size: 17px;
-        --link-font-size: 18px;
-        --seasons-bar-height: 50px;
-        --spacing: 8px;
-        --video-width: 360px;
-        --video-spacing: 8px;
-        --video-title-font-size: 12px;
-        --video-released-date-font-size: 11px;
-        --video-label-font-size: 10px;
-        --video-label-border-width: 2px;
-    }
-}
+// @media screen and (min-height: 800px) {
+//     .detail-container {
+//         --font-size: 12px;
+//         --spacing: 8px;
+//         --action-button-width: 100px;
+//         --video-width: 360px;
+//         --stream-width: 360px;
+//     }
+// }
 
 .detail-container {
     position: relative;
@@ -237,7 +138,7 @@
         padding: calc(var(--spacing) * 3);
 
         .logo {
-            height: var(--logo-height);
+            height: calc(var(--action-button-width) * 1.2);
             object-fit: contain;
         }
 
@@ -253,19 +154,19 @@
 
             .duration {
                 padding: 0.3em 0.6em;
-                font-size: var(--link-font-size);
+                font-size: 120%;
                 color: var(--color-surfacelighter);
             }
 
             .release-info {
                 padding: 0.3em 0.6em;
-                font-size: var(--link-font-size);
+                font-size: 120%;
                 color: var(--color-surfacelighter);
             }
 
             .imdb-container {
                 cursor: pointer;
-                width: var(--button-width);
+                width: var(--action-button-width);
                 display: flex;
                 flex-direction: row;
                 padding: 0.3em 0.6em;
@@ -278,7 +179,7 @@
                 }
 
                 .imdb-rating {
-                    font-size: var(--link-font-size);
+                    font-size: 120%;
                     color: var(--color-surfacelighter);
                 }
 
@@ -293,7 +194,7 @@
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
-            font-size: var(--name-font-size);
+            font-size: 160%;
             color: var(--color-surfacelighter);
         }
 
@@ -302,7 +203,6 @@
             margin: 1em 0;
             overflow: hidden;
             overflow-wrap: break-word;
-            font-size: var(--description-font-size);
             line-height: 1.5;
             color: var(--color-surfacelighter);
         }
@@ -311,8 +211,8 @@
             margin: 0.8em 0em;
 
             .title {
-                margin-bottom: calc(0.05 * var(--button-width));
-                font-size: var(--link-font-size);
+                margin-bottom: calc(var(--action-button-width) * 0.05);
+                font-size: 120%;
                 color: var(--color-surface);
             }
 
@@ -320,7 +220,7 @@
                 display: inline-block;
                 cursor: pointer;
                 padding: 0.3em 0.6em;
-                font-size: var(--link-font-size);
+                font-size: 120%;
                 color: var(--color-surfacelighter);
 
                 &:hover {
@@ -336,8 +236,8 @@
 
             .button-container {
                 cursor: pointer;
-                width: var(--button-width);
-                height: var(--button-width);
+                width: var(--action-button-width);
+                height: var(--action-button-width);
                 display: inline-flex;
                 flex-direction: column;
                 align-items: center;
@@ -351,10 +251,10 @@
 
                 .label {
                     height: 40%;
-                    padding: 0 calc(0.1 * var(--button-width));
+                    padding: 0 calc(var(--action-button-width) * 0.1);
                     overflow-wrap: break-word;
                     overflow: hidden;
-                    font-size: var(--button-label-font-size);
+                    font-size: 110%;
                     color: var(--color-surfacelight);
                 }
 

From e31498f7df32e4e476dcb448d5166caedc35de2d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 2 Jan 2019 16:03:05 +0200
Subject: [PATCH 06/20] video styles refactored

---
 .../Detail/VideosList/Video/styles.less       | 23 +++++++++----------
 src/routes/Detail/VideosList/styles.less      | 18 ++++++++-------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/routes/Detail/VideosList/Video/styles.less b/src/routes/Detail/VideosList/Video/styles.less
index 0da43ffe0..a6d165be0 100644
--- a/src/routes/Detail/VideosList/Video/styles.less
+++ b/src/routes/Detail/VideosList/Video/styles.less
@@ -9,7 +9,7 @@
 
         .poster-container {
             flex: 1;
-            margin: var(--video-spacing) 0 var(--video-spacing) var(--video-spacing);
+            margin: var(--spacing) 0 var(--spacing) var(--spacing);
 
             .poster {
                 display: block;
@@ -31,14 +31,13 @@
 
         .info-container {
             flex: 3;
-            min-height: calc(0.2 * var(--video-width));
-            padding: var(--video-spacing);
+            min-height: calc(var(--video-width) * 0.2);
+            padding: var(--spacing);
             display: flex;
             flex-direction: column;
             justify-content: center;
 
             .title {
-                font-size: var(--video-title-font-size);
                 line-height: 1.2em;
                 color: var(--color-surfacelighter);
                 word-break: break-all; //Firefox doesn't support { break-word }
@@ -46,7 +45,7 @@
             }
 
             .released-date {
-                font-size: var(--video-released-date-font-size);
+                font-size: 90%;
                 color: var(--color-surface);
             }
 
@@ -54,17 +53,17 @@
                 display: flex;
 
                 .upcoming-label, .watched-label {
-                    font-size: var(--video-label-font-size);
+                    font-size: 80%;
                     font-weight: 500;
                     line-height: 1.5;
-                    border-width: var(--video-label-border-width);
+                    border-width: calc(var(--spacing) * 0.25);
                     border-style: solid;
                     padding: 0 0.6em;
                     color: var(--color-surfacelighter);
                 }
 
                 .upcoming-label {
-                    margin-right: var(--video-spacing);
+                    margin-right: var(--spacing);
                     border-color: var(--color-signal5);
                 }
 
@@ -74,15 +73,15 @@
             }
 
             >:not(:last-child) {
-                margin-bottom: calc(0.5 * var(--video-spacing));
+                margin-bottom: calc(var(--spacing) * 0.5);
             }
         }
 
         .arrow-container {
-            width: calc(0.07 * var(--video-width));
+            width: calc(var(--video-width) * 0.07);
             display: flex;
             align-items: center;
-            padding: var(--video-spacing) var(--video-spacing) var(--video-spacing) 0;
+            padding: var(--spacing) var(--spacing) var(--spacing) 0;
 
             .arrow {
                 width: 100%;
@@ -92,7 +91,7 @@
     }
 
     .progress-container {
-        height: calc(0.5 * var(--video-spacing));
+        height: calc(var(--spacing) * 0.5);
         background-color: var(--color-primarydark);
 
         .progress {
diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less
index cc504a348..73a645e92 100644
--- a/src/routes/Detail/VideosList/styles.less
+++ b/src/routes/Detail/VideosList/styles.less
@@ -1,10 +1,12 @@
 .videos-list-container {
+    width: calc(var(--video-width) + var(--spacing) * 6);
     flex-direction: column;
     padding: calc(3 * var(--spacing)) 0;
     background: var(--color-backgrounddarker40);
 
     .seasons-bar {
-        height: var(--seasons-bar-height);
+        height: calc(var(--video-width) * 0.14);
+        width: 100%;
         display: flex;
         justify-content: space-between;
         margin-bottom: var(--spacing);
@@ -12,7 +14,7 @@
 
         .control-bar-button {
             cursor: pointer;
-            width: 258px;
+            flex: 3;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -34,8 +36,8 @@
         }
 
         .button-container {
-            width: calc(1.5 * var(--seasons-bar-height));
             cursor: pointer;
+            flex: 1;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -54,7 +56,7 @@
 
     .scroll-container {
         flex: 1;
-        width: calc(var(--video-width) + 4 * var(--spacing));
+        width: calc(var(--video-width) + var(--spacing) * 4);
         padding: 0 calc(2 * var(--spacing));
         margin: 0 var(--spacing);
         overflow-y: auto;
@@ -66,7 +68,7 @@
     }
 
     .scroll-container::-webkit-scrollbar {
-        width: var(--spacing);
+        width: var(--spacing) !important;
     }
 
     .scroll-container::-webkit-scrollbar-thumb {
@@ -82,16 +84,16 @@
     --border-color: var(--color-primarylight);
 
     .popup-content {
-        cursor: pointer;
         width: 258px;
         background-color: var(--color-backgrounddark);
-        
+
         .season {
+            cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 16px;
-            width: 258px;
+            width: 100%;
             border-top: 1px solid var(--color-primarylight);
             color: var(--color-surfacelight);
 

From 1184ef21e3b3110b8b4323ef886b276fcc056f42 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 3 Jan 2019 17:11:43 +0200
Subject: [PATCH 07/20] detail screen style improvements

---
 src/routes/Detail/Detail.js              |  24 ++-
 src/routes/Detail/VideosList/styles.less |   5 +-
 src/routes/Detail/styles.less            | 214 +++++------------------
 3 files changed, 61 insertions(+), 182 deletions(-)

diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js
index 15fceb8aa..c2cc92c0e 100644
--- a/src/routes/Detail/Detail.js
+++ b/src/routes/Detail/Detail.js
@@ -17,7 +17,7 @@ class Detail extends Component {
         return (
             <div className={styles['section-container']}>
                 {title ? <div className={styles['title']}>{title}</div> : null}
-                {links.slice(0, 4).map(link => <a key={link} className={styles['link']}>{link}</a>)}
+                {links.map(link => <a key={link} className={styles['link']}>{link}</a>)}
             </div>
         );
     }
@@ -30,30 +30,28 @@ class Detail extends Component {
                     {
                         this.state.logoLoaded ? <img className={styles['logo']} src={this.props.metaItem.logo} onError={() => this.setState({ logoLoaded: false })} /> : null
                     }
-                    <div className={styles['basic-info']}>
-                        <div className={styles['duration']}>{this.props.metaItem.duration} min</div>
-                        <div className={styles['release-info']}>{this.props.metaItem.releaseInfo.length > 0 ? this.props.metaItem.releaseInfo : this.props.metaItem.released.getFullYear()}</div>
-                        <a href={this.props.metaItem.links.imdb} target={'_blank'} className={styles['imdb-container']}>
-                            <Icon className={styles['imdb-logo']} icon={'ic_imdbnoframe'} />
-                            <div className={styles['imdb-rating']}>{this.props.metaItem.imdbRating}</div>
-                        </a>
-                    </div>
+                    <div className={styles['duration']}>{this.props.metaItem.duration} min</div>
+                    <div className={styles['release-info']}>{this.props.metaItem.releaseInfo.length > 0 ? this.props.metaItem.releaseInfo : this.props.metaItem.released.getFullYear()}</div>
                     <div className={styles['name']}>{this.props.metaItem.name}</div>
                     <div className={styles['description']}>{this.props.metaItem.description}</div>
                     {this.renderSection({ title: 'GENRES', links: this.props.metaItem.genres })}
                     {this.renderSection({ title: 'WRITTEN BY', links: this.props.metaItem.writers })}
                     {this.renderSection({ title: 'DIRECTED BY', links: this.props.metaItem.directors })}
                     {this.renderSection({ title: 'CAST', links: this.props.metaItem.cast })}
-                    <div className={styles['buttons']}>
-                        <a href={this.props.metaItem.links.youtube} className={styles['button-container']}>
+                    <div className={styles['action-buttons-container']}>
+                        <a href={this.props.metaItem.links.youtube} className={styles['action-button-container']}>
                             <Icon className={styles['icon']} icon={'ic_movies'} />
                             <div className={styles['label']}>Trailer</div>
                         </a>
-                        <div className={styles['button-container']} onClick={this.props.toggleLibraryButton}>
+                        <a href={this.props.metaItem.links.imdb} target={'_blank'} className={styles['action-button-container']}>
+                            <Icon className={styles['icon']} icon={'ic_imdb'} />
+                            <div className={styles['label']}>{this.props.metaItem.imdbRating} / 10</div>
+                        </a>
+                        <div className={styles['action-button-container']} onClick={this.props.toggleLibraryButton}>
                             <Icon className={styles['icon']} icon={this.props.inLibrary ? 'ic_removelib' : 'ic_addlib'} />
                             <div className={styles['label']}>{this.props.inLibrary ? 'Remove from Library' : 'Add to library'}</div>
                         </div>
-                        <div className={styles['button-container']}>
+                        <div className={styles['action-button-container']}>
                             <Icon className={styles['icon']} icon={'ic_share'} />
                             <div className={styles['label']}>Share</div>
                         </div>
diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less
index 73a645e92..74bc958b9 100644
--- a/src/routes/Detail/VideosList/styles.less
+++ b/src/routes/Detail/VideosList/styles.less
@@ -1,16 +1,15 @@
 .videos-list-container {
     width: calc(var(--video-width) + var(--spacing) * 6);
+    display: flex;
     flex-direction: column;
-    padding: calc(3 * var(--spacing)) 0;
+    align-items: center;
     background: var(--color-backgrounddarker40);
 
     .seasons-bar {
         height: calc(var(--video-width) * 0.14);
         width: 100%;
         display: flex;
-        justify-content: space-between;
         margin-bottom: var(--spacing);
-        background: var(--color-backgrounddarker);
 
         .control-bar-button {
             cursor: pointer;
diff --git a/src/routes/Detail/styles.less b/src/routes/Detail/styles.less
index e996042e8..1d16cd253 100644
--- a/src/routes/Detail/styles.less
+++ b/src/routes/Detail/styles.less
@@ -6,114 +6,11 @@
     font-size: 12px;
 }
 
-@media screen and (max-width: 1220px) {
-    .detail-container {
-        --spacing: 6px;
-        --action-button-width: 70px;
-        --video-width: 300px;
-        --stream-width: 300px;
-        font-size: 10px;
-    }
-}
-
-@media screen and (min-width: 1440px) {
-    .detail-container {
-        --spacing: 8px;
-        --action-button-width: 90px;
-        --video-width: 420px;
-        --stream-width: 420px;
-        font-size: 13px;
-    }
-}
-
-@media screen and (min-width: 1680px) {
-    .detail-container {
-        --spacing: 10px;
-        --action-button-width: 110px;
-        --video-width: 480px;
-        --stream-width: 480px;
-        font-size: 16px;
-    }
-}
-
-@media screen and (min-width: 1920px) {
-    .detail-container {
-        --spacing: 10px;
-        --action-button-width: 140px;
-        --video-width: 560px;
-        --stream-width: 560px;
-        font-size: 20px;
-    }
-}
-
-@media screen and (min-width: 2048px) {
-    .detail-container {
-        --spacing: 14px;
-        --action-button-width: 140px;
-        --video-width: 600px;
-        --stream-width: 600px;
-        font-size: 20px;
-    }
-}
-
-@media screen and (min-width: 2560px) {
-    .detail-container {
-        --spacing: 16px;
-        --action-button-width: 170px;
-        --video-width: 740px;
-        --stream-width: 740px;
-        font-size: 26px;
-    }
-}
-
-@media screen and (min-width: 2880px) {
-    .detail-container {
-        --spacing: 20px;
-        --action-button-width: 190px;
-        --video-width: 800px;
-        --stream-width: 800px;
-        font-size: 28px;
-    }
-}
-
-@media screen and (min-width: 3440px) {
-    .detail-container {
-        --spacing: 24px;
-        --action-button-width: 240px;
-        --video-width: 1100px;
-        --stream-width: 1100px;
-        font-size: 40px;
-    }
-}
-
-// @media screen and (min-height: 700px) {
-//     .detail-container {
-//         --font-size: 12px;
-//         --spacing: 8px;
-//         --action-button-width: 90px;
-//         --video-width: 360px;
-//         --stream-width: 360px;
-//     }
-// }
-
-// @media screen and (min-height: 800px) {
-//     .detail-container {
-//         --font-size: 12px;
-//         --spacing: 8px;
-//         --action-button-width: 100px;
-//         --video-width: 360px;
-//         --stream-width: 360px;
-//     }
-// }
-
 .detail-container {
     position: relative;
     z-index: 0;
     width: 100%;
     height: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
@@ -138,6 +35,7 @@
         padding: calc(var(--spacing) * 3);
 
         .logo {
+            display: block;
             height: calc(var(--action-button-width) * 1.2);
             object-fit: contain;
         }
@@ -146,61 +44,30 @@
             display: none;
         }
 
-        .basic-info {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            margin: 0.6em 0;
+        .duration {
+            display: inline-flex;
+            margin-right: 0.6em;
+            font-size: 115%;
+            color: var(--color-surfacelighter);
+        }
 
-            .duration {
-                padding: 0.3em 0.6em;
-                font-size: 120%;
-                color: var(--color-surfacelighter);
-            }
-
-            .release-info {
-                padding: 0.3em 0.6em;
-                font-size: 120%;
-                color: var(--color-surfacelighter);
-            }
-
-            .imdb-container {
-                cursor: pointer;
-                width: var(--action-button-width);
-                display: flex;
-                flex-direction: row;
-                padding: 0.3em 0.6em;
-
-                .imdb-logo {
-                    flex: 1;
-                    height: 100%;
-                    margin-right: 10%;
-                    fill: var(--color-surface);
-                }
-
-                .imdb-rating {
-                    font-size: 120%;
-                    color: var(--color-surfacelighter);
-                }
-
-                &:hover {
-                    background-color: var(--color-surface40);
-                }
-            }
+        .release-info {
+            display: inline-flex;
+            font-size: 115%;
+            color: var(--color-surfacelighter);
         }
 
         .name {
-            padding: 0.3em 0;
+            max-height: 3em;
             overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            font-size: 160%;
+            overflow-wrap: break-word;
+            font-size: 150%;
+            line-height: 1.5;
             color: var(--color-surfacelighter);
         }
 
         .description {
-            max-height: 7.5em;
-            margin: 1em 0;
+            max-height: 10.5em;
             overflow: hidden;
             overflow-wrap: break-word;
             line-height: 1.5;
@@ -208,61 +75,78 @@
         }
 
         .section-container {
-            margin: 0.8em 0em;
-
             .title {
-                margin-bottom: calc(var(--action-button-width) * 0.05);
-                font-size: 120%;
+                margin-bottom: 0.3em;
+                font-size: 115%;
                 color: var(--color-surface);
             }
 
             .link {
-                display: inline-block;
+                display: none;
                 cursor: pointer;
                 padding: 0.3em 0.6em;
-                font-size: 120%;
-                color: var(--color-surfacelighter);
+                font-size: 115%;
+                color: var(--color-surfacelight);
 
                 &:hover {
+                    color: var(--color-surfacelighter);
                     background-color: var(--color-surface40);
                 }
+
+                &:nth-child(-n+5) {
+                    display: inline-block;
+                }
             }
         }
 
-        .buttons {
+        .action-buttons-container {
             position: absolute;
             left: calc(var(--spacing) * 3);
             bottom: calc(var(--spacing) * 3);
 
-            .button-container {
+            .action-button-container {
                 cursor: pointer;
                 width: var(--action-button-width);
                 height: var(--action-button-width);
                 display: inline-flex;
                 flex-direction: column;
                 align-items: center;
+                justify-content: center;
                 text-align: center;
 
                 .icon {
                     height: 30%;
-                    margin: 20% 0 10% 0;
-                    fill: var(--color-surfacelighter);
+                    margin: 10% 0;
+                    fill: var(--color-surfacelight);
                 }
 
                 .label {
-                    height: 40%;
-                    padding: 0 calc(var(--action-button-width) * 0.1);
+                    height: 2.4em;
+                    padding: 0 1em;
                     overflow-wrap: break-word;
                     overflow: hidden;
-                    font-size: 110%;
+                    font-size: 105%;
+                    line-height: 1.2em;
                     color: var(--color-surfacelight);
                 }
 
                 &:hover {
                     background-color: var(--color-surfacedarker60);
+
+                    .icon {
+                        fill: var(--color-surfacelighter);
+                    }
+
+                    .label {
+                        color: var(--color-surfacelighter);
+                    }
                 }
             }
         }
+
+        >:not(:last-child) {
+            margin-bottom: calc(var(--spacing) * 1.5);
+        }
     }
 
     .videos-list {
@@ -271,8 +155,6 @@
         top: 0;
         right: 0;
         bottom: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+        padding: calc(3 * var(--spacing)) 0;
     }
 }
\ No newline at end of file

From 6ddad3253ddffda5a8e06493fb0120562a552349 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 7 Jan 2019 11:59:40 +0200
Subject: [PATCH 08/20] video style changes

---
 .../Detail/VideosList/Video/styles.less       | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/routes/Detail/VideosList/Video/styles.less b/src/routes/Detail/VideosList/Video/styles.less
index a6d165be0..7864b0843 100644
--- a/src/routes/Detail/VideosList/Video/styles.less
+++ b/src/routes/Detail/VideosList/Video/styles.less
@@ -39,13 +39,13 @@
 
             .title {
                 line-height: 1.2em;
-                color: var(--color-surfacelighter);
+                color: var(--color-surfacelight);
                 word-break: break-all; //Firefox doesn't support { break-word }
                 word-break: break-word;
             }
 
             .released-date {
-                font-size: 90%;
+                font-size: 0.9em;
                 color: var(--color-surface);
             }
 
@@ -53,13 +53,13 @@
                 display: flex;
 
                 .upcoming-label, .watched-label {
-                    font-size: 80%;
+                    font-size: 0.8em;
                     font-weight: 500;
                     line-height: 1.5;
                     border-width: calc(var(--spacing) * 0.25);
                     border-style: solid;
                     padding: 0 0.6em;
-                    color: var(--color-surfacelighter);
+                    color: var(--color-surfacelight);
                 }
 
                 .upcoming-label {
@@ -85,7 +85,7 @@
 
             .arrow {
                 width: 100%;
-                fill: var(--color-surfacelighter);
+                fill: var(--color-surfacelight);
             }
         }
     }
@@ -103,5 +103,23 @@
     &:hover {
         cursor: pointer;
         background-color: var(--color-surfacedarker);
+
+        .info-container {
+            .title {
+                color: var(--color-surfacelighter);
+            }
+
+            .label-container {
+                .upcoming-label, .watched-label {
+                    color: var(--color-surfacelighter);
+                }
+            }
+        }
+
+        .arrow-container {
+            .arrow {
+                fill: var(--color-surfacelighter);
+            }
+        }
     }
 }
\ No newline at end of file

From 128de1555a31d04a0912d73659bdb81fac488132 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 7 Jan 2019 12:05:28 +0200
Subject: [PATCH 09/20] popup changes in video list

---
 src/routes/Detail/VideosList/VideosList.js | 26 +++++--
 src/routes/Detail/VideosList/styles.less   | 80 +++++++++++++++++-----
 2 files changed, 82 insertions(+), 24 deletions(-)

diff --git a/src/routes/Detail/VideosList/VideosList.js b/src/routes/Detail/VideosList/VideosList.js
index 55aa870ae..c2559ad91 100644
--- a/src/routes/Detail/VideosList/VideosList.js
+++ b/src/routes/Detail/VideosList/VideosList.js
@@ -16,7 +16,8 @@ class VideosList extends Component {
 
         this.state = {
             selectedSeason: this.seasons[0],
-            selectedVideoId: 0
+            selectedVideoId: 0,
+            seasonsPopupOpen: false
         }
     }
 
@@ -26,7 +27,8 @@ class VideosList extends Component {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-        return nextState.selectedSeason !== this.state.selectedSeason;
+        return nextState.selectedSeason !== this.state.selectedSeason ||
+            nextState.seasonsPopupOpen !== this.state.seasonsPopupOpen;
     }
 
     onPrevButtonClicked = () => {
@@ -39,6 +41,14 @@ class VideosList extends Component {
         this.setState({ selectedSeason: this.seasons[nextSeasonIndex] });
     }
 
+    onSeasonsPopupOpen = () => {
+        this.setState({ seasonsPopupOpen: true });
+    }
+
+    onSeasonsPopupClose = () => {
+        this.setState({ seasonsPopupOpen: false });
+    }
+
     onClick = (event) => {
         this.setState({ selectedVideoId: event.currentTarget.dataset.videoId });
         console.log(event.currentTarget.dataset.videoId);
@@ -51,18 +61,20 @@ class VideosList extends Component {
                     <div className={styles['button-container']} onClick={this.onPrevButtonClicked}>
                         <Icon className={styles['button-icon']} icon={'ic_arrow_left'} />
                     </div>
-                    <Popup ref={this.seasonsPopupRef} className={styles['popup-container']} border={true}>
+                    <Popup ref={this.seasonsPopupRef} className={'detail-popup-container'} onOpen={this.onSeasonsPopupOpen} onClose={this.onSeasonsPopupClose}>
                         <Popup.Label>
-                            <div className={styles['control-bar-button']}>
-                                S {this.state.selectedSeason}
+                            <div className={classnames(styles['season-bar-button'], { 'active': this.state.seasonsPopupOpen })}>
+                                <div className={styles['season-label']}>Season</div>
+                                <div className={styles['season-number']}>{this.state.selectedSeason}</div>
                                 <Icon className={styles['icon']} icon={'ic_arrow_down'} />
                             </div>
                         </Popup.Label>
                         <Popup.Menu>
                             <div className={styles['popup-content']}>
                                 {this.seasons.map((season) =>
-                                    <div className={styles['season']} key={season} data-season={season} onClick={this.changeSeason}>
-                                        S {season}
+                                    <div className={classnames(styles['season'], { [styles['selected-season']]: this.state.selectedSeason === season })} key={season} data-season={season} onClick={this.changeSeason}>
+                                        <div className={styles['season-label']}>Season</div>
+                                        <div className={styles['season-number']}>{season}</div>
                                     </div>
                                 )}
                             </div>
diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less
index 74bc958b9..f52f596d6 100644
--- a/src/routes/Detail/VideosList/styles.less
+++ b/src/routes/Detail/VideosList/styles.less
@@ -9,34 +9,61 @@
         height: calc(var(--video-width) * 0.14);
         width: 100%;
         display: flex;
+        justify-content: space-between;
         margin-bottom: var(--spacing);
 
-        .control-bar-button {
+        .season-bar-button {
             cursor: pointer;
-            flex: 3;
+            width: calc(var(--video-width) * 0.6);
             display: flex;
-            justify-content: center;
             align-items: center;
-            color: var(--color-surfacelighter);
+            justify-content: center;
+            padding: var(--spacing);
+            color: var(--color-surfacelight);
+
+            .season-label {
+                max-width: 8em;
+                max-height: 2.4em;
+                font-size: 1.2em;
+                line-height: 1.2em;
+                text-align: end;
+                overflow: hidden;
+            }
+
+            .season-number {
+                margin: 0 calc(var(--spacing) * 1.5) 0 var(--spacing);
+                font-size: 1.2em;
+                line-height: 1.2em;
+            }
 
             .icon {
-                width: 14%;
-                height: 14%;
+                width: calc(var(--video-width) * 0.04);
+                height: calc(var(--video-width) * 0.04);
                 fill: var(--color-surfacelight);
             }
 
             &:hover {
+                color: var(--color-surfacelighter);
                 background-color: var(--color-surfacedarker60);
 
                 .icon {
                     fill: var(--color-surfacelighter);
                 }
             }
+
+            &:global(.active) {
+                color: var(--color-backgrounddarker);
+                background-color: var(--color-surfacelighter);
+
+                .icon {
+                    fill: var(--color-backgrounddarker);
+                }
+            }
         }
 
         .button-container {
             cursor: pointer;
-            flex: 1;
+            width: calc(var(--video-width) * 0.2);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -44,11 +71,15 @@
             .button-icon {
                 width: 60%;
                 height: 60%;
-                fill: var(--color-surfacelighter);
+                fill: var(--color-surfacelight);
             }
 
             &:hover {
                 background-color: var(--color-surfacedarker60);
+
+                .button-icon {
+                    fill: var(--color-surfacelighter);
+                }
             }
         }
     }
@@ -79,26 +110,41 @@
     }
 }
 
-.popup-container {
-    --border-color: var(--color-primarylight);
+:global(.detail-popup-container) {
+    --border-color: var(--color-backgrounddarker80);
 
     .popup-content {
-        width: 258px;
-        background-color: var(--color-backgrounddark);
+        width: calc(var(--video-width) * 0.6);
+        background-color: var(--color-surfacelighter);
 
         .season {
             cursor: pointer;
             display: flex;
             align-items: center;
-            justify-content: center;
-            padding: 16px;
             width: 100%;
-            border-top: 1px solid var(--color-primarylight);
-            color: var(--color-surfacelight);
+            padding: calc(var(--spacing) * 1.5);
+            font-size: 1.2em;
+            color: var(--color-backgrounddark);
+
+            .season-label {
+                max-height: 2.4em;
+                line-height: 1.2em;
+                overflow: hidden;
+            }
+
+            .season-number {
+                margin-left: var(--spacing);
+                line-height: 1.2em;
+            }
+
+            &.selected-season {
+                color: var(--color-surfacelighter);
+                background-color: var(--color-primarydark);
+            }
 
             &:hover {
                 color: var(--color-surfacelighter);
-                background-color: var(--color-surfacedarker60);
+                background-color: var(--color-primarylight);
             }
         }
     }

From 40606257f3af2df3ddd607586e751e5fc2a5add3 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 7 Jan 2019 12:07:36 +0200
Subject: [PATCH 10/20] detail screen style changes

---
 src/routes/Detail/Detail.js   | 25 +++++++++++++++----
 src/routes/Detail/styles.less | 47 +++++++++++++++++++++++------------
 2 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js
index c2cc92c0e..c2e6e8332 100644
--- a/src/routes/Detail/Detail.js
+++ b/src/routes/Detail/Detail.js
@@ -16,7 +16,12 @@ class Detail extends Component {
     renderSection({ title, links }) {
         return (
             <div className={styles['section-container']}>
-                {title ? <div className={styles['title']}>{title}</div> : null}
+                {
+                    title ?
+                        <div className={styles['title']}>{title}</div>
+                        :
+                        null
+                }
                 {links.map(link => <a key={link} className={styles['link']}>{link}</a>)}
             </div>
         );
@@ -28,10 +33,20 @@ class Detail extends Component {
                 <div className={styles['overlay-container']} />
                 <div className={styles['info-container']}>
                     {
-                        this.state.logoLoaded ? <img className={styles['logo']} src={this.props.metaItem.logo} onError={() => this.setState({ logoLoaded: false })} /> : null
+                        this.state.logoLoaded ?
+                            <img className={styles['logo']} src={this.props.metaItem.logo} onError={() => this.setState({ logoLoaded: false })} />
+                            :
+                            null
                     }
-                    <div className={styles['duration']}>{this.props.metaItem.duration} min</div>
-                    <div className={styles['release-info']}>{this.props.metaItem.releaseInfo.length > 0 ? this.props.metaItem.releaseInfo : this.props.metaItem.released.getFullYear()}</div>
+                    <div className={styles['duration']}>{this.props.metaItem.duration}</div>
+                    <div className={styles['release-info']}>
+                        {
+                            this.props.metaItem.releaseInfo.length > 0 ?
+                                this.props.metaItem.releaseInfo
+                                :
+                                this.props.metaItem.released.getFullYear()
+                        }
+                    </div>
                     <div className={styles['name']}>{this.props.metaItem.name}</div>
                     <div className={styles['description']}>{this.props.metaItem.description}</div>
                     {this.renderSection({ title: 'GENRES', links: this.props.metaItem.genres })}
@@ -73,7 +88,7 @@ Detail.defaultProps = {
     metaItem: {
         logo: 'https://images.metahub.space/logo/medium/tt4123430/img',
         background: 'https://images.metahub.space/background/medium/tt4123430/img',
-        duration: '134',
+        duration: '134 min',
         releaseInfo: '2018',
         released: new Date(2018, 4, 23),
         imdbRating: '7.4',
diff --git a/src/routes/Detail/styles.less b/src/routes/Detail/styles.less
index 1d16cd253..c45e3e2fa 100644
--- a/src/routes/Detail/styles.less
+++ b/src/routes/Detail/styles.less
@@ -1,4 +1,4 @@
-.detail-container {
+.detail-container, :global(.detail-popup-container) {
     --spacing: 8px;
     --action-button-width: 80px;
     --video-width: 360px;
@@ -45,25 +45,33 @@
         }
 
         .duration {
-            display: inline-flex;
-            margin-right: 0.6em;
-            font-size: 115%;
-            color: var(--color-surfacelighter);
+            display: inline-block;
+            max-width: 45%;
+            margin-right: 1.2em;
+            font-size: 1.15em;
+            overflow: hidden;
+            white-space: pre;
+            text-overflow: ellipsis;
+            color: var(--color-surfacelight);
         }
 
         .release-info {
-            display: inline-flex;
-            font-size: 115%;
-            color: var(--color-surfacelighter);
+            display: inline-block;
+            max-width: 45%;
+            font-size: 1.15em;
+            overflow: hidden;
+            white-space: pre;
+            text-overflow: ellipsis;
+            color: var(--color-surfacelight);
         }
 
         .name {
             max-height: 3em;
             overflow: hidden;
             overflow-wrap: break-word;
-            font-size: 150%;
+            font-size: 1.5em;
             line-height: 1.5;
-            color: var(--color-surfacelighter);
+            color: var(--color-surfacelight);
         }
 
         .description {
@@ -71,29 +79,36 @@
             overflow: hidden;
             overflow-wrap: break-word;
             line-height: 1.5;
-            color: var(--color-surfacelighter);
+            color: var(--color-surfacelight);
         }
 
         .section-container {
+            max-height: 3.2em;
+            overflow: hidden;
+
             .title {
                 margin-bottom: 0.3em;
-                font-size: 115%;
+                font-size: 1.15em;
                 color: var(--color-surface);
             }
 
             .link {
                 display: none;
-                cursor: pointer;
+                max-width: 100%;
                 padding: 0.3em 0.6em;
-                font-size: 115%;
+                font-size: 1.15em;
+                overflow: hidden;
+                white-space: pre;
+                text-overflow: ellipsis;
                 color: var(--color-surfacelight);
+                cursor: pointer;
 
                 &:hover {
                     color: var(--color-surfacelighter);
                     background-color: var(--color-surface40);
                 }
 
-                &:nth-child(-n+5) {
+                &:nth-child(-n+6) {
                     display: inline-block;
                 }
             }
@@ -125,7 +140,7 @@
                     padding: 0 1em;
                     overflow-wrap: break-word;
                     overflow: hidden;
-                    font-size: 105%;
+                    font-size: 1.05em;
                     line-height: 1.2em;
                     color: var(--color-surfacelight);
                 }

From cd0455e8b57293d1b97323a6c60b57ccae8577ec Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 7 Jan 2019 17:14:12 +0200
Subject: [PATCH 11/20] shouldComponentUpdate added

---
 src/routes/Detail/Detail.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js
index c2e6e8332..3c73a7859 100644
--- a/src/routes/Detail/Detail.js
+++ b/src/routes/Detail/Detail.js
@@ -13,6 +13,10 @@ class Detail extends Component {
         };
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextState.logoLoaded !== this.state.logoLoaded;
+    }
+
     renderSection({ title, links }) {
         return (
             <div className={styles['section-container']}>

From 6932072e76a73800f4c0cf5efa2be3555e9bb711 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 10 Jan 2019 19:02:33 +0200
Subject: [PATCH 12/20] addon moved; ui changed

---
 src/common/index.js                           |  2 -
 src/{common => routes/Addons}/Addon/Addon.js  | 32 +++------
 src/{common => routes/Addons}/Addon/index.js  |  0
 .../Addons}/Addon/styles.less                 | 71 ++++++-------------
 stories/index.stories.js                      |  3 +-
 5 files changed, 33 insertions(+), 75 deletions(-)
 rename src/{common => routes/Addons}/Addon/Addon.js (81%)
 rename src/{common => routes/Addons}/Addon/index.js (100%)
 rename src/{common => routes/Addons}/Addon/styles.less (65%)

diff --git a/src/common/index.js b/src/common/index.js
index 0853dc433..9487eaa0c 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -6,7 +6,6 @@ import MetadataItem from './MetadataItem';
 import Router from './Router';
 import LibraryItemList from './LibraryItemList';
 import MetaItem from './MetaItem';
-import Addon from './Addon';
 import ShareAddon from './ShareAddon';
 import UserPanel from './UserPanel';
 import Slider from './Slider';
@@ -20,7 +19,6 @@ export {
     Router,
     LibraryItemList,
     MetaItem,
-    Addon,
     ShareAddon,
     UserPanel,
     Slider
diff --git a/src/common/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js
similarity index 81%
rename from src/common/Addon/Addon.js
rename to src/routes/Addons/Addon/Addon.js
index 51be92291..d7d291049 100644
--- a/src/common/Addon/Addon.js
+++ b/src/routes/Addons/Addon/Addon.js
@@ -48,25 +48,9 @@ const renderDescription = (description) => {
     );
 }
 
-const renderUrls = (urls) => {
-    if (urls.length === 0) {
-        return null;
-    }
-
-    return (
-        <div className={styles['urls-container']}>
-            {urls.map((url) => {
-                return (
-                    <div key={url} className={styles['url']}>{url}</div>
-                );
-            })}
-        </div>
-    );
-}
-
 const Addon = (props) => {
     return (
-        <div className={styles['addon']}>
+        <div className={classnames(styles['addon'], props.className)}>
             <div className={styles['logo-container']}>
                 <Icon className={styles['logo']} icon={props.logo.length === 0 ? 'ic_addons' : props.logo} />
             </div>
@@ -78,27 +62,27 @@ const Addon = (props) => {
             </div>
             {renderType(props.types)}
             {renderDescription(props.description)}
-            {renderUrls(props.urls)}
             <div className={styles['buttons']}>
+                <div className={classnames(styles['button'], props.isInstalled ? styles['uninstall-button'] : styles['install-button'])} onClick={props.onToggleClicked}>
+                    <span className={styles['label']}>{props.isInstalled ? 'Uninstall' : 'Install'}</span>
+                </div>
                 <div className={classnames(styles['button'], styles['share-button'])} onClick={props.shareAddon}>
                     <Icon className={styles['icon']} icon={'ic_share'} />
                     <span className={styles['label']}>SHARE ADD-ON</span>
                 </div>
-                <div className={classnames(styles['button'], props.isInstalled ? styles['install-button'] : styles['uninstall-button'])} onClick={props.onToggleClicked}>
-                    <span className={styles['label']}>{props.isInstalled ? 'Install' : 'Uninstall'}</span>
-                </div>
             </div>
         </div>
     );
 }
 
 Addon.propTypes = {
+    className: PropTypes.string,
     logo: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     version: PropTypes.string.isRequired,
     types: PropTypes.arrayOf(PropTypes.string).isRequired,
     description: PropTypes.string.isRequired,
-    urls: PropTypes.arrayOf(PropTypes.string).isRequired,
+    isOfficial: PropTypes.bool.isRequired,
     isInstalled: PropTypes.bool.isRequired,
     shareAddon: PropTypes.func.isRequired,
     onToggleClicked: PropTypes.func.isRequired
@@ -109,8 +93,8 @@ Addon.defaultProps = {
     version: '',
     types: [],
     description: '',
-    urls: [],
+    isOfficial: false,
     isInstalled: false
 };
 
-export default Addon;
\ No newline at end of file
+export default Addon;
diff --git a/src/common/Addon/index.js b/src/routes/Addons/Addon/index.js
similarity index 100%
rename from src/common/Addon/index.js
rename to src/routes/Addons/Addon/index.js
diff --git a/src/common/Addon/styles.less b/src/routes/Addons/Addon/styles.less
similarity index 65%
rename from src/common/Addon/styles.less
rename to src/routes/Addons/Addon/styles.less
index c87733d00..04fc2aa4a 100644
--- a/src/common/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -1,34 +1,21 @@
 .addon {
-    --addon-width: 514px;
-    --name-font-size: 20px;
-    --version-font-size: 12px;
-    --type-font-size: 12px;
-    --description-font-size: 12px;
-    --url-font-size: 12px;
-    --button-border-width: 2px;
-    --button-label-font-size: 14px;
-}
-
-.addon {
-    display: grid;
+    display: inline-grid;
     width: var(--addon-width);
-    padding: 2%;
-    background-color: var(--color-background);
-    grid-template-columns: 1fr 4fr;
-    grid-template-rows: calc(0.04 * var(--addon-width)) calc(0.04 * var(--addon-width)) auto auto calc((0.08 * var(--addon-width)));
+    padding: 1.6em;
+    background-color: var(--color-backgroundlighter);
+    grid-template-columns: 1fr 6fr 3fr;
+    grid-template-rows: calc(0.03 * var(--addon-width)) calc(0.03 * var(--addon-width)) auto;
     grid-template-areas:
-        "logo header"
-        "logo type"
-        "logo description"
-        "urls urls"
-        "buttons buttons";
+        "logo header buttons"
+        "logo type buttons"
+        "logo description buttons";
 
     .logo-container {
         grid-area: logo;
 
         .logo {
-            width: calc(0.2 * var(--addon-width));
-            height: calc(0.2 * var(--addon-width));
+            width: calc(0.12 * var(--addon-width));
+            height: calc(0.12 * var(--addon-width));
             padding: 20%;
             fill: var(--color-surfacelighter);
             background-color: var(--color-backgrounddarker);
@@ -50,7 +37,7 @@
             .name {
                 max-width: 80%;
                 margin-right: 3%;
-                font-size: var(--name-font-size);
+                font-size: 1.8em;
                 color: var(--color-surfacelighter);
                 overflow: hidden;
                 white-space: pre;
@@ -59,7 +46,6 @@
 
             .version {
                 flex: 1;
-                font-size: var(--version-font-size);
                 color: var(--color-surface);
                 overflow: hidden;
                 white-space: pre;
@@ -73,39 +59,25 @@
         display: flex;
         align-items: center;
         padding-left: 4%;
-        font-size: var(--type-font-size);
         color: var(--color-secondarylighter);
     }
 
     .description {
         grid-area: description;
         padding-left: 4%;
-        font-size: var(--description-font-size);
         color: var(--color-surfacelighter);
-        word-break: break-all; //Firefox doesn't support { break-word }
-        word-break: break-word;
-    }
-
-    .urls-container {
-        grid-area: urls;
-        padding: 4% 0%;
-        overflow: auto;
-        word-break: break-all;
-
-        .url {
-            font-size: var(--url-font-size);
-            color: var(--color-surface);
-        }
+        overflow-wrap: break-word;
     }
 
     .buttons {
         grid-area: buttons;
         display: flex;
-        align-items: stretch;
-        justify-content: space-between;
+        flex-direction: column;
+        align-items: flex-end;
 
         .button {
-            width: 46%;
+            width: 85%;
+            height: calc(0.05 * var(--addon-width));
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -114,15 +86,17 @@
             border-style: solid;
 
             .icon {
-                width: 7%;
-                margin-right: 2%;
+                width: 8%;
+                margin-right: 3%;
             }
 
             .label {
+                font-size: 1.1em;
                 color: var(--color-surfacelighter);
             }
 
             &.share-button {
+                margin-top: 4em;
                 border-color: var(--color-secondarylighter);
 
                 .icon {
@@ -134,7 +108,8 @@
                 }
 
                 &:hover {
-                    background-color: var(--color-secondarylighter);
+                    border-color: var(--color-secondarylight);
+                    background-color: var(--color-secondarylight);
 
                     .icon {
                         fill: var(--color-surfacelighter);
@@ -151,7 +126,7 @@
                 background-color: var(--color-signal5);
 
                 &:hover {
-                    background-color: var(--color-signal580);
+                    background-color: var(--color-signal560);
                 }
             }
 
diff --git a/stories/index.stories.js b/stories/index.stories.js
index 996e11312..0cf1c9d57 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { Addon, Checkbox, LibraryItemList, MetaItem, ShareAddon, UserPanel } from 'stremio-common';
+import { Checkbox, LibraryItemList, MetaItem, ShareAddon, UserPanel } from 'stremio-common';
+import Addon from '../src/routes/Addons/Addon';
 import Stream from '../src/routes/Detail/StreamsList/Stream';
 import Video from '../src/routes/Detail/VideosList/Video';
 import VideosList from '../src/routes/Detail/VideosList';

From 785ed4601ca35583571dd40ddda08bfa61928f6c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 11 Jan 2019 17:16:52 +0200
Subject: [PATCH 13/20] addon type overflowing prevented

---
 src/routes/Addons/Addon/Addon.js    |  6 ++++--
 src/routes/Addons/Addon/styles.less | 13 ++++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js
index d7d291049..265234e12 100644
--- a/src/routes/Addons/Addon/Addon.js
+++ b/src/routes/Addons/Addon/Addon.js
@@ -32,8 +32,10 @@ const renderType = (types) => {
     }
 
     return (
-        <div className={styles['type']}>
-            {types.length <= 1 ? types.join('') : types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]}
+        <div className={styles['types-container']}>
+            <div className={styles['type']}>
+                {types.length <= 1 ? types.join('') : types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]}
+            </div>
         </div>
     );
 }
diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index 04fc2aa4a..9244f6f7c 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -3,7 +3,7 @@
     width: var(--addon-width);
     padding: 1.6em;
     background-color: var(--color-backgroundlighter);
-    grid-template-columns: 1fr 6fr 3fr;
+    grid-template-columns: 1fr 5fr 4fr;
     grid-template-rows: calc(0.03 * var(--addon-width)) calc(0.03 * var(--addon-width)) auto;
     grid-template-areas:
         "logo header buttons"
@@ -54,12 +54,19 @@
         }
     }
 
-    .type {
+    .types-container {
         grid-area: type;
         display: flex;
         align-items: center;
         padding-left: 4%;
+        overflow: hidden;
         color: var(--color-secondarylighter);
+
+        .type {
+            overflow: hidden;
+            white-space: pre;
+            text-overflow: ellipsis;
+        }
     }
 
     .description {
@@ -76,7 +83,7 @@
         align-items: flex-end;
 
         .button {
-            width: 85%;
+            width: 70%;
             height: calc(0.05 * var(--addon-width));
             cursor: pointer;
             display: flex;

From f126f8d789fa708f6fd4be795d1268bfa08740de Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 11 Jan 2019 17:23:33 +0200
Subject: [PATCH 14/20] addons screen implemented

---
 src/routes/Addons/Addons.js   | 139 +++++++++++++++++++++++++++++++++-
 src/routes/Addons/styles.less | 106 ++++++++++++++++++++++++++
 2 files changed, 244 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/Addons/styles.less

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index b876cb41b..cc53570e1 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -1,11 +1,148 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Addon from './Addon';
+import styles from './styles';
+
+const ADDON_CATEGORIES = {
+    OFFICIAL: 1,
+    COMMUNITY: 2,
+    MY: 3
+};
+
+const ADDON_TYPES = {
+    All: -1,
+    Movies: 0,
+    Series: 1,
+    Channels: 2,
+    Others: 3
+};
+
+const DEFAULT_TYPE = 'All';
 
 class Addons extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selectedCategory: ADDON_CATEGORIES.OFFICIAL,
+            selectedAddonType: DEFAULT_TYPE
+        };
+    }
+
+    changeSelectedCategory = (event) => {
+        this.setState({ selectedCategory: ADDON_CATEGORIES[event.currentTarget.dataset.category] });
+    }
+
+    changeSelectedAddonType = (event) => {
+        this.setState({ selectedAddonType: event.currentTarget.dataset.type })
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextState.selectedCategory !== this.state.selectedCategory ||
+            nextState.selectedAddonType !== this.state.selectedAddonType;
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (this.state.selectedCategory !== prevState.selectedCategory || !this.getAddonTypes().includes(this.state.selectedAddonType)) {
+            this.setState({ selectedAddonType: DEFAULT_TYPE })
+        }
+    }
+
+    getAddonTypes() {
+        const addonTypes = this.props.addons
+            .filter((addon) => {
+                if (this.state.selectedCategory === ADDON_CATEGORIES.OFFICIAL) return addon.isOfficial === true;
+                if (this.state.selectedCategory === ADDON_CATEGORIES.COMMUNITY) return addon.isOfficial === false;
+                if (this.state.selectedCategory === ADDON_CATEGORIES.MY) return addon.isInstalled === true;
+            })
+            .map((addon) => addon.types)
+            .join()
+            .split(',')
+            .filter((type, index, types) => types.indexOf(type) === index)
+            .sort(function(a, b) {
+                const valueA = ADDON_TYPES[a];
+                const valueB = ADDON_TYPES[b];
+                if (!isNaN(valueA) && !isNaN(valueB)) return valueA - valueB;
+                if (!isNaN(valueA)) return -1;
+                if (!isNaN(valueB)) return 1;
+                return a - b;
+            });
+
+        return addonTypes;
+    }
+
     render() {
         return (
-            <div style={{ color: 'pink', paddingTop: 40 }}>You're on the Addons Tab</div>
+            <div className={styles['addons-container']}>
+                <div className={styles['side-menu']}>
+                    {Object.keys(ADDON_CATEGORIES).map((category) =>
+                        <div className={classnames(styles['label-container'], { [styles['selected']]: this.state.selectedCategory === ADDON_CATEGORIES[category] })} tabIndex={this.state.selectedCategory === ADDON_CATEGORIES[category] ? null : '0'} key={category} data-category={category} onClick={this.changeSelectedCategory}>
+                            <div className={styles['label']}>
+                                {category}
+                            </div>
+                        </div>
+                    )}
+                    <div className={classnames(styles['label-container'], { [styles['selected']]: this.state.selectedAddonType === DEFAULT_TYPE })} tabIndex={this.state.selectedAddonType === DEFAULT_TYPE ? null : '0'} data-type={DEFAULT_TYPE} onClick={this.changeSelectedAddonType}>
+                        <div className={styles['label-']}>All</div>
+                    </div>
+                    {this.getAddonTypes().map((type) =>
+                        <div className={classnames(styles['label-container'], { [styles['selected']]: this.state.selectedAddonType === type })} tabIndex={this.state.selectedAddonType === type ? null : '0'} key={type} data-type={type} onClick={this.changeSelectedAddonType}>
+                            <div className={styles['label']}>{type}</div>
+                        </div>
+                    )}
+                </div>
+                <div className={styles['scroll-container']}>
+                    {this.props.addons
+                        .filter((addon) => {
+                            if (this.state.selectedCategory === ADDON_CATEGORIES.OFFICIAL) return addon.isOfficial === true;
+                            if (this.state.selectedCategory === ADDON_CATEGORIES.COMMUNITY) return addon.isOfficial === false;
+                            if (this.state.selectedCategory === ADDON_CATEGORIES.MY) return addon.isInstalled === true;
+                        })
+                        .filter((addon) => {
+                            return this.state.selectedAddonType === DEFAULT_TYPE ||
+                                addon.types.indexOf(this.state.selectedAddonType) !== -1;
+                        })
+                        .map((addon) =>
+                            <Addon key={addon.name}
+                                className={styles['addon']}
+                                logo={addon.logo}
+                                name={addon.name}
+                                version={addon.version}
+                                isOfficial={addon.isOfficial}
+                                isInstalled={addon.isInstalled}
+                                types={addon.types}
+                                description={addon.description}
+                            />
+                        )}
+                </div>
+            </div>
         );
     }
 }
 
+Addons.propTypes = {
+    addons: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+Addons.defaultProps = {
+    addons: [
+        { logo: 'ic_series', name: 'Watch Hub', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['ovies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
+        { name: 'Cinemeta', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Moies', 'Series'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_youtube_small', name: 'YouTube', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { name: 'OpenSubtitles', version: '1.3.0', isOfficial: false, isInstalled: false, types: ['Movie', 'Seies'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_series', name: 'Zooqle', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['Movies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
+        { name: 'PirateBay Addon', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'eries'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_youtube_small', name: 'Popcorn Time', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { name: 'IBERIAN', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Other'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_series', name: 'Ex Addon', version: '1.3.0', isOfficial: false, isInstalled: false, types: ['Movies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
+        { name: 'Juan Carlos', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Seris', 'Channels'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_youtube_small', name: 'Juan Carlos Torrents', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { name: 'Juan Carlos 2', version: '1.3.0', isOfficial: false, isInstalled: false, types: ['Moes', 'Serie'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_series', name: 'Netflix', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['Movies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
+        { name: 'Anime Addon', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Series'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_youtube_small', name: 'DTube', version: '1.3.0', isOfficial: true, isInstalled: true, types: ['hannels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { name: 'Mixer', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Series'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' }
+    ]
+};
+
 export default Addons;
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
new file mode 100644
index 000000000..a6b780f59
--- /dev/null
+++ b/src/routes/Addons/styles.less
@@ -0,0 +1,106 @@
+.addons-container {
+    --addon-width: 960px;
+    --label-width: 196px;
+    --spacing: 8px;
+    --button-border-width: 2px;
+    font-size: 14px;
+}
+
+.addons-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+
+    .side-menu {
+        width: calc(var(--addon-width) * 0.25);
+        display: flex;
+        flex-direction: column;
+        padding: 0 calc(var(--spacing) * 2.5 + var(--button-border-width));
+        margin: calc(var(--spacing) * 2.5 + var(--button-border-width)) calc(var(--spacing) * 4.5) calc(var(--spacing) * 2.5 + var(--button-border-width)) 0;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        .label-container {
+            width: var(--label-width);
+            cursor: pointer;
+            margin-top: var(--button-border-width);
+            padding: calc(var(--spacing) * 1.5);
+            font-size: 1.2em;
+            color: var(--color-surfacelight);
+
+            .label {
+                overflow: hidden;
+                white-space: pre;
+                text-overflow: ellipsis;
+            }
+
+            &.selected {
+                color: var(--color-surfacelighter);
+                background: var(--color-primarydark);
+
+                &:hover {
+                    background: var(--color-primarydark);
+                }
+
+                &:focus {
+                    outline: none;
+                }
+            }
+
+            &:hover {
+                color: var(--color-surfacelighter);
+                background: var(--color-backgroundlighter);
+            }
+
+            &:focus {
+                outline: var(--button-border-width) solid var(--color-surfacelighter);
+
+            }
+
+            &:nth-child(3) {
+                margin-bottom: calc(var(--spacing) * 2.5 + var(--button-border-width));
+            }
+
+            &:last-child {
+                margin-bottom: var(--button-border-width);
+            }
+        }
+    }
+
+    .side-menu::-webkit-scrollbar {
+        width: var(--spacing) !important;
+    }
+
+    .side-menu::-webkit-scrollbar-thumb {
+        background-color: var(--color-secondarylighter);
+    }
+
+    .side-menu::-webkit-scrollbar-track {
+        background-color: var(--color-backgroundlighter);
+    }
+
+    .scroll-container {
+        flex: 1;
+        align-self: stretch;
+        margin: calc(var(--spacing) * 2.5 + var(--button-border-width)) calc(var(--spacing) * 2.5 + var(--button-border-width)) calc(var(--spacing) * 2.5 + var(--button-border-width)) 0;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        >:not(:first-child) {
+            margin-top: calc(var(--spacing) * 2.5 + var(--button-border-width));
+        }
+    }
+
+    .scroll-container::-webkit-scrollbar {
+        width: var(--spacing) !important;
+    }
+
+    .scroll-container::-webkit-scrollbar-thumb {
+        background-color: var(--color-secondarylighter);
+    }
+
+    .scroll-container::-webkit-scrollbar-track {
+        background-color: var(--color-backgroundlighter);
+    }
+}
\ No newline at end of file

From 37a59e7c9b8a8828a34cb1b23ab737253589a25a Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 14 Jan 2019 14:47:48 +0200
Subject: [PATCH 15/20] new addon button added

---
 src/routes/Addons/Addon/styles.less | 10 ++++++-
 src/routes/Addons/Addons.js         | 19 +++++++------
 src/routes/Addons/styles.less       | 43 ++++++++++++++++++++++++-----
 3 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index 9244f6f7c..d4b0470dc 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -103,7 +103,7 @@
             }
 
             &.share-button {
-                margin-top: 4em;
+                margin-top: 2.5em;
                 border-color: var(--color-secondarylighter);
 
                 .icon {
@@ -140,8 +140,16 @@
             &.uninstall-button {
                 border-color: var(--color-surfacedark);
 
+                .label {
+                    color: var(--color-surfacedark);
+                }
+
                 &:hover {
                     background-color: var(--color-surfacedark);
+
+                    .label {
+                        color: var(--color-surfacelighter);
+                    }
                 }
             }
 
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index cc53570e1..cb15591ac 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Addon from './Addon';
+import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
 const ADDON_CATEGORIES = {
@@ -76,19 +77,21 @@ class Addons extends Component {
         return (
             <div className={styles['addons-container']}>
                 <div className={styles['side-menu']}>
+                    <div className={styles['add-addon-container']}>
+                        <Icon className={styles['add-addon-icon']} icon={'ic_plus'} />
+                        <div className={styles['add-addon-label']}>Add new Add-On</div>
+                    </div>
                     {Object.keys(ADDON_CATEGORIES).map((category) =>
-                        <div className={classnames(styles['label-container'], { [styles['selected']]: this.state.selectedCategory === ADDON_CATEGORIES[category] })} tabIndex={this.state.selectedCategory === ADDON_CATEGORIES[category] ? null : '0'} key={category} data-category={category} onClick={this.changeSelectedCategory}>
-                            <div className={styles['label']}>
-                                {category}
-                            </div>
+                        <div className={classnames(styles['label'], { [styles['selected']]: this.state.selectedCategory === ADDON_CATEGORIES[category] })} tabIndex={'0'} key={category} data-category={category} onClick={this.changeSelectedCategory}>
+                            {category}
                         </div>
                     )}
-                    <div className={classnames(styles['label-container'], { [styles['selected']]: this.state.selectedAddonType === DEFAULT_TYPE })} tabIndex={this.state.selectedAddonType === DEFAULT_TYPE ? null : '0'} data-type={DEFAULT_TYPE} onClick={this.changeSelectedAddonType}>
-                        <div className={styles['label-']}>All</div>
+                    <div className={classnames(styles['label'], { [styles['selected']]: this.state.selectedAddonType === DEFAULT_TYPE })} tabIndex={'0'} data-type={DEFAULT_TYPE} onClick={this.changeSelectedAddonType}>
+                        All
                     </div>
                     {this.getAddonTypes().map((type) =>
-                        <div className={classnames(styles['label-container'], { [styles['selected']]: this.state.selectedAddonType === type })} tabIndex={this.state.selectedAddonType === type ? null : '0'} key={type} data-type={type} onClick={this.changeSelectedAddonType}>
-                            <div className={styles['label']}>{type}</div>
+                        <div className={classnames(styles['label'], { [styles['selected']]: this.state.selectedAddonType === type })} tabIndex={'0'} key={type} data-type={type} onClick={this.changeSelectedAddonType}>
+                            {type}
                         </div>
                     )}
                 </div>
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index a6b780f59..7236cc95f 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -1,6 +1,7 @@
 .addons-container {
     --addon-width: 960px;
     --label-width: 196px;
+    --label-height: 44px;
     --spacing: 8px;
     --button-border-width: 2px;
     font-size: 14px;
@@ -13,7 +14,7 @@
     flex-direction: row;
 
     .side-menu {
-        width: calc(var(--addon-width) * 0.25);
+        width: calc(var(--label-width) + var(--spacing) * 5.5);
         display: flex;
         flex-direction: column;
         padding: 0 calc(var(--spacing) * 2.5 + var(--button-border-width));
@@ -21,20 +22,49 @@
         overflow-y: auto;
         overflow-x: hidden;
 
-        .label-container {
+        .add-addon-container {
             width: var(--label-width);
+            min-height: var(--label-height);
+            display: flex;
+            align-items: center;
             cursor: pointer;
             margin-top: var(--button-border-width);
+            margin-bottom: calc(var(--spacing) * 2.5 + var(--button-border-width));
             padding: calc(var(--spacing) * 1.5);
-            font-size: 1.2em;
-            color: var(--color-surfacelight);
+            background: var(--color-signal5);
 
-            .label {
+            .add-addon-icon {
+                flex: 1;
+                margin-right: calc(var(--spacing) * 2);
+                fill: var(--color-surfacelighter);
+            }
+
+            .add-addon-label {
+                flex: 8;
+                font-size: 1.2em;
+                color: var(--color-surfacelighter);
                 overflow: hidden;
                 white-space: pre;
                 text-overflow: ellipsis;
             }
 
+            &:hover {
+                background: var(--color-signal560);
+            }
+        }
+
+        .label {
+            width: var(--label-width);
+            min-height: var(--label-height);
+            cursor: pointer;
+            margin-top: var(--button-border-width);
+            padding: calc(var(--spacing) * 1.5);
+            font-size: 1.2em;
+            overflow: hidden;
+            white-space: pre;
+            text-overflow: ellipsis;
+            color: var(--color-surfacelight);
+
             &.selected {
                 color: var(--color-surfacelighter);
                 background: var(--color-primarydark);
@@ -55,10 +85,9 @@
 
             &:focus {
                 outline: var(--button-border-width) solid var(--color-surfacelighter);
-
             }
 
-            &:nth-child(3) {
+            &:nth-child(4) {
                 margin-bottom: calc(var(--spacing) * 2.5 + var(--button-border-width));
             }
 

From ebd181b971ac73ca480bf4543479b21d3602af0b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 14 Jan 2019 14:56:55 +0200
Subject: [PATCH 16/20] remove webkit scrollbar style

---
 src/routes/Addons/styles.less | 24 ------------------------
 1 file changed, 24 deletions(-)

diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 7236cc95f..c924f7bce 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -97,18 +97,6 @@
         }
     }
 
-    .side-menu::-webkit-scrollbar {
-        width: var(--spacing) !important;
-    }
-
-    .side-menu::-webkit-scrollbar-thumb {
-        background-color: var(--color-secondarylighter);
-    }
-
-    .side-menu::-webkit-scrollbar-track {
-        background-color: var(--color-backgroundlighter);
-    }
-
     .scroll-container {
         flex: 1;
         align-self: stretch;
@@ -120,16 +108,4 @@
             margin-top: calc(var(--spacing) * 2.5 + var(--button-border-width));
         }
     }
-
-    .scroll-container::-webkit-scrollbar {
-        width: var(--spacing) !important;
-    }
-
-    .scroll-container::-webkit-scrollbar-thumb {
-        background-color: var(--color-secondarylighter);
-    }
-
-    .scroll-container::-webkit-scrollbar-track {
-        background-color: var(--color-backgroundlighter);
-    }
 }
\ No newline at end of file

From 27469f85c03c9f09fd16c367115e462fc103060d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 14 Jan 2019 17:58:05 +0200
Subject: [PATCH 17/20] remove urls

---
 stories/index.stories.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/stories/index.stories.js b/stories/index.stories.js
index 0cf1c9d57..2401ba71f 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -43,7 +43,6 @@ storiesOf('Addon', module)
                 isInstalled={false}
                 types={['Movies', 'Series']}
                 description={'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.'}
-                urls={['http://nfxaddon.strem.io/stremioget', 'http://127.0.0.1:11470/addons/com.stremio.subtitles/stremioget', 'http://127.0.0.1:11470/addons/com.stremio.localfiles/stremioget']}
             />
         </div>
     ))
@@ -55,7 +54,6 @@ storiesOf('Addon', module)
                 isInstalled={true}
                 types={['Movies', 'Series']}
                 description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'}
-                urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1']}
             />
         </div>
     ))
@@ -68,7 +66,6 @@ storiesOf('Addon', module)
                 isInstalled={true}
                 types={['Channels', 'Videos']}
                 description={'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.'}
-                urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1']}
             />
         </div>
     ))
@@ -80,7 +77,6 @@ storiesOf('Addon', module)
                 isInstalled={false}
                 types={['Movies', 'Series']}
                 description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'}
-                urls={['https://channels.strem.io/stremioget/stremio/v1channels.strem.io/stremioget/stremio/v1channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1', 'http://127.0.0.1:11470/addons/com.stremio.subtitles/stremioget', 'https://channels.strem.io/stremioget/stremio/v1']}
             />
         </div>
     ));

From 129acd12961708066d2592627656850e9ac0b2ed Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 15 Jan 2019 10:52:16 +0200
Subject: [PATCH 18/20] addon hostname added

---
 src/routes/Addons/Addon/Addon.js    | 15 +++++++++++++++
 src/routes/Addons/Addon/styles.less | 20 +++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js
index 265234e12..90e84db0c 100644
--- a/src/routes/Addons/Addon/Addon.js
+++ b/src/routes/Addons/Addon/Addon.js
@@ -40,6 +40,18 @@ const renderType = (types) => {
     );
 }
 
+const renderHostname = (hostname) => {
+    if (hostname.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={styles['hostname-container']}>
+            <div className={styles['hostname']}>{hostname}</div>
+        </div>
+    )
+}
+
 const renderDescription = (description) => {
     if (description.length === 0) {
         return null;
@@ -63,6 +75,7 @@ const Addon = (props) => {
                 </div>
             </div>
             {renderType(props.types)}
+            {renderHostname(props.hostname)}
             {renderDescription(props.description)}
             <div className={styles['buttons']}>
                 <div className={classnames(styles['button'], props.isInstalled ? styles['uninstall-button'] : styles['install-button'])} onClick={props.onToggleClicked}>
@@ -83,6 +96,7 @@ Addon.propTypes = {
     name: PropTypes.string.isRequired,
     version: PropTypes.string.isRequired,
     types: PropTypes.arrayOf(PropTypes.string).isRequired,
+    hostname: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
     isOfficial: PropTypes.bool.isRequired,
     isInstalled: PropTypes.bool.isRequired,
@@ -94,6 +108,7 @@ Addon.defaultProps = {
     name: '',
     version: '',
     types: [],
+    hostname: '',
     description: '',
     isOfficial: false,
     isInstalled: false
diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index d4b0470dc..f8a196aad 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -4,10 +4,11 @@
     padding: 1.6em;
     background-color: var(--color-backgroundlighter);
     grid-template-columns: 1fr 5fr 4fr;
-    grid-template-rows: calc(0.03 * var(--addon-width)) calc(0.03 * var(--addon-width)) auto;
+    grid-template-rows: calc(0.03 * var(--addon-width)) calc(0.03 * var(--addon-width)) calc(0.03 * var(--addon-width)) auto;
     grid-template-areas:
         "logo header buttons"
         "logo type buttons"
+        "logo hostname buttons"
         "logo description buttons";
 
     .logo-container {
@@ -69,10 +70,27 @@
         }
     }
 
+    .hostname-container {
+        grid-area: hostname;
+        display: flex;
+        align-items: center;
+        padding-left: 4%;
+        overflow: hidden;
+        overflow-wrap: break-word;
+        color: var(--color-surfacelighter);
+
+        .hostname {
+            overflow: hidden;
+            white-space: pre;
+            text-overflow: ellipsis;
+        }
+    }
+
     .description {
         grid-area: description;
         padding-left: 4%;
         color: var(--color-surfacelighter);
+        overflow: hidden;
         overflow-wrap: break-word;
     }
 

From 7c553615be1559d3c7a54885754cc8830dc0a137 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 15 Jan 2019 11:06:15 +0200
Subject: [PATCH 19/20] outline fixed

---
 src/routes/Addons/Addons.js   | 33 ++++++++++++++++++---------------
 src/routes/Addons/styles.less | 11 ++++-------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index cb15591ac..650f56bd2 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -32,10 +32,12 @@ class Addons extends Component {
     }
 
     changeSelectedCategory = (event) => {
+        event.currentTarget.blur();
         this.setState({ selectedCategory: ADDON_CATEGORIES[event.currentTarget.dataset.category] });
     }
 
     changeSelectedAddonType = (event) => {
+        event.currentTarget.blur();
         this.setState({ selectedAddonType: event.currentTarget.dataset.type })
     }
 
@@ -115,6 +117,7 @@ class Addons extends Component {
                                 isOfficial={addon.isOfficial}
                                 isInstalled={addon.isInstalled}
                                 types={addon.types}
+                                hostname={addon.hostname}
                                 description={addon.description}
                             />
                         )}
@@ -129,22 +132,22 @@ Addons.propTypes = {
 };
 Addons.defaultProps = {
     addons: [
-        { logo: 'ic_series', name: 'Watch Hub', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['ovies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
-        { name: 'Cinemeta', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Moies', 'Series'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
-        { logo: 'ic_youtube_small', name: 'YouTube', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_series', name: 'Watch Hub', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['ovies', 'Series'], hostname: 'piratebay-stremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuapp.com', description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
+        { name: 'Cinemeta', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Moies', 'Series'], hostname: 'stremio-zooqle.now.sh', description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_youtube_small', name: 'YouTube', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], hostname: 'pct.best4stremio.space', description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
         { name: 'OpenSubtitles', version: '1.3.0', isOfficial: false, isInstalled: false, types: ['Movie', 'Seies'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
-        { logo: 'ic_series', name: 'Zooqle', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['Movies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
-        { name: 'PirateBay Addon', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'eries'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
-        { logo: 'ic_youtube_small', name: 'Popcorn Time', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
-        { name: 'IBERIAN', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Other'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
-        { logo: 'ic_series', name: 'Ex Addon', version: '1.3.0', isOfficial: false, isInstalled: false, types: ['Movies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
-        { name: 'Juan Carlos', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Seris', 'Channels'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
-        { logo: 'ic_youtube_small', name: 'Juan Carlos Torrents', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
-        { name: 'Juan Carlos 2', version: '1.3.0', isOfficial: false, isInstalled: false, types: ['Moes', 'Serie'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
-        { logo: 'ic_series', name: 'Netflix', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['Movies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
-        { name: 'Anime Addon', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Series'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
-        { logo: 'ic_youtube_small', name: 'DTube', version: '1.3.0', isOfficial: true, isInstalled: true, types: ['hannels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
-        { name: 'Mixer', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Series'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' }
+        { logo: 'ic_series', name: 'Zooqle', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['Movies', 'Series'], hostname: 'pct.best4stremio.space', description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
+        { name: 'PirateBay Addon', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'eries'], hostname: 'pct.best4stremio.space', description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_youtube_small', name: 'Popcorn Time', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], hostname: 'pct.best4stremio.space', description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { name: 'IBERIAN', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Other'], hostname: 'pct.best4stremio.space', description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_series', name: 'Ex Addon', version: '1.3.0', isOfficial: false, isInstalled: false, types: ['Movies', 'Series'], hostname: 'pct.best4stremio.space', description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
+        { name: 'Juan Carlos', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Seris', 'Channels'], hostname: 'pct.best4stremio.space', description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_youtube_small', name: 'Juan Carlos Torrents', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], hostname: 'pct.best4stremio.space', description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { name: 'Juan Carlos 2', version: '1.3.0', isOfficial: false, isInstalled: false, types: ['Moes', 'Serie'], hostname: 'pct.best4stremio.space', description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_series', name: 'Netflix', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['Movies', 'Series'], hostname: 'pct.best4stremio.space', description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
+        { name: 'Anime Addon', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Series'], hostname: 'pct.best4stremio.space', description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { logo: 'ic_youtube_small', name: 'DTube', version: '1.3.0', isOfficial: true, isInstalled: true, types: ['hannels', 'Videos'], hostname: 'pct.best4stremio.space', description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
+        { name: 'Mixer', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Series'], hostname: 'pct.best4stremio.space', description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' }
     ]
 };
 
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index c924f7bce..1ff9dcd3b 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -72,19 +72,16 @@
                 &:hover {
                     background: var(--color-primarydark);
                 }
+            }
 
-                &:focus {
-                    outline: none;
-                }
+            &:focus {
+                outline: var(--button-border-width) solid var(--color-surfacelighter);
             }
 
             &:hover {
                 color: var(--color-surfacelighter);
                 background: var(--color-backgroundlighter);
-            }
-
-            &:focus {
-                outline: var(--button-border-width) solid var(--color-surfacelighter);
+                outline: none;
             }
 
             &:nth-child(4) {

From 3a199e52589ac99c6d4d30088446c7442fcd4a5d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 15 Jan 2019 11:27:18 +0200
Subject: [PATCH 20/20] spacing between buttons changed

---
 src/routes/Addons/Addon/styles.less | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index f8a196aad..bbe111c69 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -96,12 +96,14 @@
 
     .buttons {
         grid-area: buttons;
+        height: calc(0.12 * var(--addon-width));
         display: flex;
         flex-direction: column;
         align-items: flex-end;
+        justify-content: space-between;
 
         .button {
-            width: 70%;
+            width: 65%;
             height: calc(0.05 * var(--addon-width));
             cursor: pointer;
             display: flex;
@@ -121,7 +123,6 @@
             }
 
             &.share-button {
-                margin-top: 2.5em;
                 border-color: var(--color-secondarylighter);
 
                 .icon {