Merge pull request #451 from Stremio/redesign

Redesign

images/background_1.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="968" height="565" viewBox="0 0 968 565">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1144" data-name="Rectangle 1144" width="968" height="565" transform="translate(0 262)" fill="#fff" stroke="#707070" stroke-width="1"/>
+    </clipPath>
+  </defs>
+  <g id="Mask_Group_31" data-name="Mask Group 31" transform="translate(0 -262)" clip-path="url(#clip-path)">
+    <g id="Group_2309" data-name="Group 2309">
+      <path id="Path_983" data-name="Path 983" d="M410.951-49.5c337,24.76,699.788,308.381,792,500.579S897.064,762.814,577.9,762.814,0,593.971,0,385.694,73.955-74.26,410.951-49.5Z" transform="translate(-301.147 411.907)" fill="#362565" opacity="0.8"/>
+      <path id="Path_979" data-name="Path 979" d="M360.91-73.97c324,27.3,638,301.633,720.932,474.48S806.748,680.86,519.716,680.86,0,529.016,0,341.708,36.91-101.27,360.91-73.97Z" transform="translate(-231.91 594.67)" fill="rgba(123,91,245,0.83)" opacity="0.8"/>
+      <path id="Path_984" data-name="Path 984" d="M262.171-10C444.7-10,659.821,73.865,660.993,203.729S513.025,402.667,330.5,402.667,0,313.6,0,203.729,79.643-10,262.171-10Z" transform="translate(-69 681.267)" fill="#5126ed"/>
+      <path id="Path_980" data-name="Path 980" d="M262.171-10C444.7-10,659.821,66.535,660.993,185.049S513.025,366.6,330.5,366.6,0,285.317,0,185.049,79.643-10,262.171-10Z" transform="translate(-69 762.333)" fill="#4516fc"/>
+    </g>
+  </g>
+</svg>

images/background_2.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="718" height="356" viewBox="0 0 718 356">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1144" data-name="Rectangle 1144" width="718" height="356" transform="translate(602 -8)" fill="#fff" stroke="#707070" stroke-width="1"/>
+    </clipPath>
+  </defs>
+  <g id="Mask_Group_31" data-name="Mask Group 31" transform="translate(-602 8)" clip-path="url(#clip-path)">
+    <g id="Group_2308" data-name="Group 2308" transform="translate(-49.883 86.23)">
+      <path id="Path_982" data-name="Path 982" d="M264.138,0C470.016,0,780.486,131.36,775.97,319.553S578.654,535.889,372.776,535.889,0,418.717,0,274.178,58.26,0,264.138,0Z" transform="translate(1521.635 173.714) rotate(180)" fill="rgba(137,91,245,0.64)" opacity="0.52"/>
+      <path id="Path_981" data-name="Path 981" d="M177.9,0C301.753,0,447.725,59.059,448.52,150.512s-100.4,140.1-224.26,140.1S0,227.885,0,150.512,54.042,0,177.9,0Z" transform="translate(1366.094 26.124) rotate(180)" fill="#4722d2"/>
+    </g>
+  </g>
+</svg>

package-lock.json

@@ -13,7 +13,7 @@
                 "@sentry/browser": "6.13.3",
                 "@stremio/stremio-colors": "5.0.1",
                 "@stremio/stremio-core-web": "0.44.23",
-                "@stremio/stremio-icons": "4.0.0",
+                "@stremio/stremio-icons": "5.0.0-beta.3",
                 "@stremio/stremio-video": "0.0.24",
                 "a-color-picker": "1.2.1",
                 "bowser": "2.11.0",
@@ -46,6 +46,7 @@
                 "@babel/plugin-proposal-object-rest-spread": "7.16.0",
                 "@babel/preset-env": "7.16.0",
                 "@babel/preset-react": "7.16.0",
+                "@types/react": "^18.2.9",
                 "babel-loader": "8.2.3",
                 "clean-webpack-plugin": "4.0.0",
                 "copy-webpack-plugin": "9.0.1",
@@ -2711,9 +2712,9 @@
             }
         },
         "node_modules/@stremio/stremio-icons": {
-            "version": "4.0.0",
+            "version": "5.0.0-beta.3",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-4.0.0.tgz",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.0.0-beta.3.tgz",
-            "integrity": "sha512-ku1ye/V6WtzCltLKZvLwa60nlEUR2YYT/upjZDzBOoA2VXZu1ubFeR83Hx10tBZPnjALHkG/1QZ5Eyg9PoBMbQ=="
+            "integrity": "sha512-K+jDsizEgxpBC+b0HExCUg+bnsWPZnx96qUfkdQ9nBDVAN/kzcP24Jq/4KwkiEyqDEcvC5l+xBzOLzkhdLwTMw=="
         },
         "node_modules/@stremio/stremio-video": {
             "version": "0.0.24",
@@ -2985,6 +2986,12 @@
             "integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw==",
             "dev": true
         },
+        "node_modules/@types/prop-types": {
+            "version": "15.7.5",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+            "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+            "devOptional": true
+        },
         "node_modules/@types/qs": {
             "version": "6.9.7",
             "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -2997,6 +3004,17 @@
             "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
             "dev": true
         },
+        "node_modules/@types/react": {
+            "version": "18.2.9",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.9.tgz",
+            "integrity": "sha512-pL3JAesUkF7PEQGxh5XOwdXGV907te6m1/Qe1ERJLgomojS6Ne790QiA7GUl434JEkFA2aAaB6qJ5z4e1zJn/w==",
+            "devOptional": true,
+            "dependencies": {
+                "@types/prop-types": "*",
+                "@types/scheduler": "*",
+                "csstype": "^3.0.2"
+            }
+        },
         "node_modules/@types/resolve": {
             "version": "1.17.1",
             "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3012,6 +3030,12 @@
             "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
             "dev": true
         },
+        "node_modules/@types/scheduler": {
+            "version": "0.16.3",
+            "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+            "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+            "devOptional": true
+        },
         "node_modules/@types/serve-index": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -5075,6 +5099,12 @@
             "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
             "dev": true
         },
+        "node_modules/csstype": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+            "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+            "devOptional": true
+        },
         "node_modules/data-urls": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -16812,9 +16842,9 @@
             }
         },
         "@stremio/stremio-icons": {
-            "version": "4.0.0",
+            "version": "5.0.0-beta.3",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-4.0.0.tgz",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.0.0-beta.3.tgz",
-            "integrity": "sha512-ku1ye/V6WtzCltLKZvLwa60nlEUR2YYT/upjZDzBOoA2VXZu1ubFeR83Hx10tBZPnjALHkG/1QZ5Eyg9PoBMbQ=="
+            "integrity": "sha512-K+jDsizEgxpBC+b0HExCUg+bnsWPZnx96qUfkdQ9nBDVAN/kzcP24Jq/4KwkiEyqDEcvC5l+xBzOLzkhdLwTMw=="
         },
         "@stremio/stremio-video": {
             "version": "0.0.24",
@@ -17080,6 +17110,12 @@
             "integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw==",
             "dev": true
         },
+        "@types/prop-types": {
+            "version": "15.7.5",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+            "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+            "devOptional": true
+        },
         "@types/qs": {
             "version": "6.9.7",
             "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -17092,6 +17128,17 @@
             "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
             "dev": true
         },
+        "@types/react": {
+            "version": "18.2.9",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.9.tgz",
+            "integrity": "sha512-pL3JAesUkF7PEQGxh5XOwdXGV907te6m1/Qe1ERJLgomojS6Ne790QiA7GUl434JEkFA2aAaB6qJ5z4e1zJn/w==",
+            "devOptional": true,
+            "requires": {
+                "@types/prop-types": "*",
+                "@types/scheduler": "*",
+                "csstype": "^3.0.2"
+            }
+        },
         "@types/resolve": {
             "version": "1.17.1",
             "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -17107,6 +17154,12 @@
             "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
             "dev": true
         },
+        "@types/scheduler": {
+            "version": "0.16.3",
+            "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+            "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+            "devOptional": true
+        },
         "@types/serve-index": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -18707,6 +18760,12 @@
                 }
             }
         },
+        "csstype": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+            "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+            "devOptional": true
+        },
         "data-urls": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",

package.json

@@ -16,7 +16,7 @@
         "@sentry/browser": "6.13.3",
         "@stremio/stremio-colors": "5.0.1",
         "@stremio/stremio-core-web": "0.44.23",
-        "@stremio/stremio-icons": "4.0.0",
+        "@stremio/stremio-icons": "5.0.0-beta.3",
         "@stremio/stremio-video": "0.0.24",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
@@ -49,6 +49,7 @@
         "@babel/plugin-proposal-object-rest-spread": "7.16.0",
         "@babel/preset-env": "7.16.0",
         "@babel/preset-react": "7.16.0",
+        "@types/react": "^18.2.9",
         "babel-loader": "8.2.3",
         "clean-webpack-plugin": "4.0.0",
         "copy-webpack-plugin": "9.0.1",

src/App/styles.less

@@ -1,9 +1,13 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
-@import (inline, once, css) '~stremio/common/roboto.css';
 @import (reference) '~stremio/common/screen-sizes.less';
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
+@font-face {
+    font-family: 'PlusJakartaSans';
+    src: url('/fonts/PlusJakartaSans.ttf') format('truetype');
+}
+
 :global {
     @import (once, less) '~stremio/common/animations.less';
     @import (once, less) '~stremio-router/styles.css';
@@ -13,14 +17,25 @@
     --landscape-shape-ratio: 0.5625;
     --poster-shape-ratio: 1.464;
     --scroll-bar-size: 6px;
-    --horizontal-nav-bar-size: 4rem;
+    --horizontal-nav-bar-size: 5.5rem;
-    --vertical-nav-bar-size: 5.2rem;
+    --vertical-nav-bar-size: 6rem;
     --focus-outline-size: 2px;
-    --color-facebook: #4267b2;
+    --color-facebook: #1877F1;
     --color-twitter: #1DA1F2;
+    --color-imdb: #f5c518;
     --color-placeholder: #60606080;
     --color-placeholder-text: @color-surface-50;
     --color-placeholder-background: @color-surface-dark5-20;
+    --primary-background-color: rgba(12, 11, 17, 1);
+    --secondary-background-color: rgba(26, 23, 62, 1);
+    --primary-foreground-color: rgba(255, 255, 255, 0.9);
+    --secondary-foreground-color: rgb(12, 11, 17, 1);
+    --primary-accent-color: rgb(123, 91, 245);
+    --secondary-accent-color: rgba(34, 179, 101, 1);
+    --tertiary-accent-color: rgba(246, 199, 0, 1);
+    --overlay-color: rgba(255, 255, 255, 0.05);
+    --modal-background-color: rgba(15, 13, 32, 1);
+    --border-radius: 0.75rem;
 }
 
 * {
@@ -28,7 +43,6 @@
     padding: 0;
     box-sizing: border-box;
     font-size: 1rem;
-    line-height: 1.2em;
     font-family: inherit;
     border: none;
     outline: none;
@@ -41,7 +55,7 @@
     overflow: hidden;
     word-break: break-word;
     scrollbar-width: thin;
-    scrollbar-color: @color-secondaryvariant2-light1 @color-background-dark2;
+    scrollbar-color: var(--overlay-color) transparent;
 }
 
 ::-webkit-scrollbar {
@@ -50,15 +64,16 @@
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: @color-secondaryvariant2-light1;
+    border-radius: var(--scroll-bar-size);
+    background-color: var(--overlay-color);
 
     &:hover {
-        background-color: @color-secondaryvariant2-light2;
+        background-color: var(--primary-accent-color);
     }
 }
 
 ::-webkit-scrollbar-track {
-    background-color: @color-background-dark2;
+    background-color: transparent;
 }
 
 svg {
@@ -70,12 +85,13 @@ html {
     height: 100%;
     min-width: 640px;
     min-height: 480px;
-    font-family: 'Roboto', 'sans-serif';
+    font-family: 'PlusJakartaSans', 'sans-serif';
     overflow: auto;
 
     body {
         width: 100%;
         height: 100%;
+        background: linear-gradient(41deg, var(--primary-background-color) 0%, var(--secondary-background-color) 100%);
 
         :global(#app) {
             position: relative;

src/common/AddonDetailsModal/AddonDetails/AddonDetails.js

@@ -3,13 +3,13 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const Image = require('stremio/common/Image');
 const styles = require('./styles');
 
 const AddonDetails = ({ className, id, name, version, logo, description, types, transportUrl, official }) => {
     const renderLogoFallback = React.useCallback(() => (
-        <Icon className={styles['icon']} icon={'ic_addons'} />
+        <Icon className={styles['icon']} name={'addons'} />
     ), []);
     return (
         <div className={classnames(className, styles['addon-details-container'])}>

src/common/AddonDetailsModal/AddonDetails/styles.less

@@ -14,7 +14,6 @@
             height: 5rem;
             margin-right: 1.5rem;
             padding: 0.5rem;
-            background-color: @color-background-dark5;
         }
 
         .logo {
@@ -23,7 +22,7 @@
         }
 
         .icon {
-            fill: @color-secondaryvariant1-light3;
+            color: var(--primary-foreground-color);
         }
 
         .name-container {
@@ -41,7 +40,7 @@
                 flex-basis: auto;
                 margin-right: 0.5rem;
                 font-size: 1.6rem;
-                color: @color-background-dark5-90;
+                color: var(--primary-foreground-color);
             }
     
             .version {
@@ -49,7 +48,7 @@
                 flex-shrink: 1;
                 flex-basis: auto;
                 margin-top: 0.5rem;
-                color: @color-background-dark5-60;
+                color: var(--primary-foreground-color);
             }
         }
     }
@@ -59,13 +58,13 @@
 
         .section-header {
             font-size: 1.1rem;
-            color: @color-background-dark5-90;
+            color: var(--primary-foreground-color);
         }
 
         .section-label {
             font-size: 1.1rem;
             font-weight: 300;
-            color: @color-background-dark5-90;
+            color: var(--primary-foreground-color);
 
             &.transport-url-label {
                 user-select: text;

src/common/AddonDetailsModal/styles.less

@@ -10,38 +10,24 @@
     .addon-details-container, .addon-details-message-container {
         width: 40rem;
         max-width: 100%;
-    }
+        color: var(--primary-foreground-color);
-
-    .install-button, .uninstall-button, .cancel-button {
-        .label {
-            font-size: 1.2rem;
-            font-weight: 500;
-        }
-    }
-
-    .uninstall-button, .cancel-button {
-        &:focus {
-            outline-color: @color-background-dark5;
-        }
     }
 
     .cancel-button {
         background-color: transparent;
+        opacity: 0.3;
 
         &:hover {
-            background-color: @color-surface-light3;
+            outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+            opacity: 1;
         }
 
-        .label {
+        &:focus {
-            color: @color-surface-dark2;
+            outline-color: var(--primary-foreground-color);
         }
-    }
 
-    .uninstall-button {
+        .cancel-button-label {
-        background-color: @color-accent2;
+            color: var(--primary-foreground-color);
-
-        &:hover {
-            background-color: @color-accent2-light2;
         }
     }
 }

src/common/Button/styles.less

@@ -14,6 +14,6 @@
 
     &:global(.disabled) {
         pointer-events: none;
-        opacity: 0.25;
+        opacity: 0.5;
     }
 }

src/common/CONSTANTS.js

@@ -2,7 +2,7 @@
 
 const CHROMECAST_RECEIVER_APP_ID = '1634F54B';
 const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250];
-const SUBTITLES_FONTS = ['Roboto', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace'];
+const SUBTITLES_FONTS = ['PlusJakartaSans', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace'];
 const SEEK_TIME_DURATIONS = [5000, 10000, 15000, 20000, 25000, 30000];
 const NEXT_VIDEO_POPUP_DURATIONS = [0, 5000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000];
 const CATALOG_PREVIEW_SIZE = 10;
@@ -27,17 +27,17 @@ const TYPE_PRIORITIES = {
     other: -Infinity
 };
 const ICON_FOR_TYPE = new Map([
-    ['movie', 'ic_movies'],
+    ['movie', 'movies'],
-    ['series', 'ic_series'],
+    ['series', 'series'],
-    ['channel', 'ic_channels'],
+    ['channel', 'channels'],
-    ['tv', 'ic_tv'],
+    ['tv', 'tv'],
     ['book', 'ic_book'],
     ['game', 'ic_games'],
     ['music', 'ic_music'],
     ['adult', 'ic_adult'],
     ['radio', 'ic_radio'],
     ['podcast', 'ic_podcast'],
-    ['other', 'ic_movies'],
+    ['other', 'movies'],
 ]);
 
 module.exports = {

src/common/Checkbox/Checkbox.js

@@ -3,21 +3,13 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
 const Button = require('stremio/common/Button');
 const styles = require('./styles');
 
 const Checkbox = React.forwardRef(({ className, checked, children, ...props }, ref) => {
     return (
         <Button {...props} ref={ref} className={classnames(className, styles['checkbox-container'], { 'checked': checked })}>
-            {
+            <div className={styles['toggle']} />
-                checked ?
-                    <svg className={styles['icon']} viewBox={'0 0 100 100'}>
-                        <Icon x={'10'} y={'10'} width={'80'} height={'80'} icon={'ic_check'} />
-                    </svg>
-                    :
-                    <Icon className={styles['icon']} icon={'ic_box_empty'} />
-            }
             {children}
         </Button>
     );

src/common/Checkbox/styles.less

@@ -2,18 +2,43 @@
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
+@height: 1.7rem;
+@width: 3.2rem;
+@thumb-margin: 0.5rem;
+
+@thumb-size: calc(@height - @thumb-margin);
+
 .checkbox-container {
-    &:global(.checked) {
+    position: relative;
-        .icon {
+    
-            fill: @color-surface-light5;
+    .toggle {
-            background-color: @color-primaryvariant1;
+        position: relative;
+        width: @width;
+        height: @height;
+        border-radius: @height;
+        background-color: var(--overlay-color);
+        transition: background-color 0.1s ease-in-out;
+
+        &::before {
+            content: "";
+            position: absolute;
+            height: @thumb-size;
+            width: @thumb-size;
+            top: calc(@thumb-margin / 2);
+            left: calc(@thumb-margin / 2);
+            border-radius: 50%;
+            background-color: var(--primary-foreground-color);
+            transition: transform 0.1s ease-in-out;
         }
     }
 
-    .icon {
+    &:global(.checked) {
-        display: block;
+        .toggle {
-        width: 1rem;
+            background-color: var(--secondary-accent-color);
-        height: 1rem;
+
-        fill: @color-surface-light5;
+            &::before {
+                transform: translateX(calc(@width - @thumb-size - @thumb-margin));
+            }
+        }
     }
 }

src/common/MainNavBars/MainNavBars.js

@@ -7,11 +7,11 @@ const { VerticalNavBar, HorizontalNavBar } = require('stremio/common/NavBar');
 const styles = require('./styles');
 
 const TABS = [
-    { id: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
+    { id: 'board', label: 'Board', icon: 'home', href: '#/' },
-    { id: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
+    { id: 'discover', label: 'Discover', icon: 'discover', href: '#/discover' },
-    { id: 'library', label: 'Library', icon: 'ic_library', href: '#/library' },
+    { id: 'library', label: 'Library', icon: 'library', href: '#/library' },
-    { id: 'settings', label: 'SETTINGS', icon: 'ic_settings', href: '#/settings' },
+    { id: 'addons', label: 'ADDONS', icon: 'addons', href: '#/addons' },
-    { id: 'addons', label: 'ADDONS', icon: 'ic_addons', href: '#/addons' }
+    { id: 'settings', label: 'SETTINGS', icon: 'settings', href: '#/settings' },
 ];
 
 const MainNavBars = React.memo(({ className, route, query, children }) => {

src/common/MetaItem/MetaItem.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const filterInvalidDOMProps = require('filter-invalid-dom-props').default;
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const Image = require('stremio/common/Image');
 const Multiselect = require('stremio/common/Multiselect');
@@ -56,11 +56,11 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
     const renderPosterFallback = React.useCallback(() => (
         <Icon
             className={styles['placeholder-icon']}
-            icon={ICON_FOR_TYPE.has(type) ? ICON_FOR_TYPE.get(type) : ICON_FOR_TYPE.get('other')}
+            name={ICON_FOR_TYPE.has(type) ? ICON_FOR_TYPE.get(type) : ICON_FOR_TYPE.get('other')}
         />
     ), [type]);
     const renderMenuLabelContent = React.useCallback(() => (
-        <Icon className={styles['icon']} icon={'ic_more'} />
+        <Icon className={styles['icon']} name={'more-vertical'} />
     ), []);
     return (
         <Button title={name} href={href} {...filterInvalidDOMProps(props)} className={classnames(className, styles['meta-item-container'], styles['poster-shape-poster'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} onClick={metaItemOnClick}>

src/common/MetaItem/styles.less

@@ -24,8 +24,18 @@
 
     &:hover, &:focus, &:global(.active), &:global(.selected) {
         outline-style: none;
-        background-color: @color-background-light3;
         transition: background-color 100ms ease-out;
+
+        .poster-container {
+            box-shadow: 0 0 0 0.2rem var(--primary-foreground-color);
+            transform: scale(1.05);
+        }
+
+        .title-bar-container {
+            .menu-label-container {
+                opacity: 1;
+            }
+        }
     }
 
     &.poster-shape-poster {
@@ -49,7 +59,9 @@
     .poster-container {
         position: relative;
         z-index: 0;
-        background-color: @color-background;
+        background-color: var(--overlay-color);
+        border-radius: var(--border-radius);
+        transition: all 0.1s ease-out;
 
         .poster-image-layer {
             position: absolute;
@@ -76,7 +88,8 @@
                 flex: none;
                 width: 80%;
                 height: 50%;
-                fill: @color-background-light3-90;
+                color: var(--primary-foreground-color);
+                opacity: 0.2;
             }
         }
 
@@ -96,26 +109,30 @@
                 filter: drop-shadow(0 0 0.5rem @color-background);
 
                 .play-icon-circle-centered-background {
-                    fill: @color-accent4-90;
+                    color: @color-accent4-90;
                 }
 
                 .play-icon-circle-centered-icon {
-                    fill: @color-surface-light5-90;
+                    color: @color-surface-light5-90;
                 }
             }
         }
 
         .progress-bar-layer {
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            left: 0;
             z-index: -1;
-            background-color: @color-background-light2;
+            position: absolute;
+            bottom: 1rem;
+            left: 1rem;
+            right: 1rem;
+            height: 0.45rem;
+            border-radius: 0.45rem;
+            background-color: var(--overlay-color);
+            overflow: hidden;
 
             .progress-bar {
-                height: 0.4rem;
+                position: relative;
-                background-color: @color-primaryvariant1;
+                height: 100%;
+                background-color: var(--primary-foreground-color);
             }
         }
 
@@ -136,24 +153,26 @@
                 border-radius: 0.25rem;
                 font-size: 1rem;
                 font-weight: 600;
-                color: @color-background-dark2-90;
+                color: var(--secondary-foreground-color);
 
                 &:nth-child(1) {
                     top: 0.5rem;
                     right: 0.5rem;
-                    background-color: @color-surface-light5-40;
+                    background-color: var(--primary-foreground-color);
+                    opacity: 0.4;
                 }
 
                 &:nth-child(2) {
                     top: 0.75rem;
                     right: 0.75rem;
-                    background-color: @color-surface-light5-60;
+                    background-color: var(--primary-foreground-color);
+                    opacity: 0.6;
                 }
 
                 &:nth-child(3) {
                     top: 1rem;
                     right: 1rem;
-                    background-color: @color-surface-light5;
+                    background-color: var(--primary-foreground-color);
                 }
             }
         }
@@ -163,52 +182,60 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        height: 2.8rem;
+        height: 4rem;
         overflow: visible;
 
         .title-label {
             flex: 1;
             max-height: 2.4em;
-            padding-left: 0.5rem;
+            padding-left: 1.5rem;
-            color: @color-surface-light5-90;
+            font-weight: 600;
+            text-align: center;
+            color: var(--primary-foreground-color);
 
             &:only-child {
-                padding-right: 0.5rem;
+                padding: 0 0.5rem;
             }
         }
 
         .menu-label-container {
+            z-index: 1;
             flex: none;
             width: 1.5rem;
-            height: 2.8rem;
+            height: 4rem;
             padding: 1rem 0;
             background-color: transparent;
+            opacity: 0;
+            transform: translateX(1rem);
+            transition: opacity 0.1s ease-out;
 
             .icon {
                 display: block;
                 width: 100%;
                 height: 100%;
-                fill: @color-surface-light1-90;
+                color: var(--primary-foreground-color);
+                opacity: 0.6;
             }
 
             .popup-menu-container {
                 width: auto;
 
                 .multiselect-menu-container {
-                    min-width: 6rem;
+                    min-width: 8rem;
-                    max-width: 12rem;
+                    max-width: 14rem;
 
                     .multiselect-option-container {
-                        padding: 0.5rem;
+                        padding: 1rem 1.5rem;
-                        background-color: @color-surface-light5;
 
                         &:hover, &:focus {
                             outline: none;
-                            background-color: @color-surface-light2;
+                            background-color: var(--overlay-color);
                         }
 
                         .multiselect-option-label {
-                            color: @color-background-dark5-90;
+                            font-weight: 500;
+                            color: var(--primary-foreground-color);
+                            opacity: 0.8;
                         }
                     }
                 }

src/common/MetaPreview/ActionButton/ActionButton.js

@@ -3,17 +3,17 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const styles = require('./styles');
 
 const ActionButton = ({ className, icon, label, ...props }) => {
     return (
-        <Button title={label} {...props} className={classnames(className, styles['action-button-container'])}>
+        <Button title={label} {...props} className={classnames(className, styles['action-button-container'], { 'wide': typeof label === 'string' })}>
             {
                 typeof icon === 'string' && icon.length > 0 ?
                     <div className={styles['icon-container']}>
-                        <Icon className={styles['icon']} icon={icon} />
+                        <Icon className={styles['icon']} name={icon} />
                     </div>
                     :
                     null

src/common/MetaPreview/ActionButton/styles.less

@@ -5,33 +5,34 @@
 
 .action-button-container {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
-    background-color: @color-surface-light5-20;
+    align-items: center;
+    gap: 1rem;
+    border-radius: 100%;
+    background-color: var(--overlay-color);
+    backdrop-filter: blur(5px);
+    transition: background-color 0.1s ease-out;
 
     &:hover, &:focus {
-        background-color: @color-accent3;
+        outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+        background-color: transparent;
     }
 
     .icon-container {
-        flex: 0 0 50%;
+        flex: none;
-        align-self: stretch;
-        padding-top: 15%;
-
-        &:only-child {
-            padding: 5% 0;
-        }
 
         .icon {
             display: block;
-            width: 100%;
+            height: 1.75rem;
-            height: 100%;
+            width: 1.75rem;
-            fill: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
+            opacity: 0.9;
         }
     }
 
     .label-container {
-        flex: 0 0 50%;
+        flex: none;
         align-self: stretch;
         display: flex;
         flex-direction: row;
@@ -39,11 +40,13 @@
 
         .label {
             flex: 1;
+            font-size: 1rem;
             font-weight: 500;
             max-height: 2.4em;
             padding: 0 0.2rem;
             text-align: center;
-            color: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
+            opacity: 0.9;
         }
     }
 }
@@ -54,21 +57,8 @@
         padding: 0 1rem;
 
         .icon-container {
-            flex: none;
-            align-self: center;
             height: 2rem;
             width: 2rem;
-            padding-top: 0;
-            margin-right: 0.5rem;
-
-            &:only-child {
-                padding: 0;
-                margin-right: 0;
-            }
-        }
-
-        .label-container {
-            flex: 1;
         }
     }
 }

src/common/MetaPreview/MetaLinks/styles.less

@@ -4,10 +4,12 @@
 
 .meta-links-container {
     .label-container {
-        margin-bottom: 0.2rem;
+        margin-bottom: 0.75rem;
         text-transform: uppercase;
-        font-weight: 500;
+        font-size: 0.95rem;
-        color: @color-surface-dark3-90;
+        font-weight: 700;
+        color: var(--primary-foreground-color);
+        opacity: 0.3;
     }
 
     .links-container {
@@ -19,15 +21,18 @@
             flex-grow: 0;
             flex-shrink: 1;
             flex-basis: auto;
-            margin-right: 0.5rem;
+            margin-right: 0.75rem;
-            margin-bottom: 0.2rem;
+            margin-bottom: 0.75rem;
-            padding: 0.3rem 0.5rem;
+            padding: 0.4rem 1.25rem;
             white-space: nowrap;
             text-overflow: ellipsis;
             border-radius: 2rem;
             border: var(--focus-outline-size) solid transparent;
-            color: @color-surface-light2-90;
+            font-size: 1rem;
-            background-color: @color-surface-light5-20;
+            font-weight: 500;
+            color: var(--primary-foreground-color);
+            background-color: var(--overlay-color);
+            backdrop-filter: blur(5px);
 
             &:hover, &:focus {
                 background-color: @color-surface-light5-30;

src/common/MetaPreview/MetaPreview.js

@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const UrlUtils = require('url');
 const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const Image = require('stremio/common/Image');
 const ModalDialog = require('stremio/common/ModalDialog');
@@ -147,8 +147,8 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                                         target={'_blank'}
                                         {...(compact ? { tabIndex: -1 } : null)}
                                     >
-                                        <Icon className={styles['icon']} icon={'ic_imdbnoframe'} />
                                         <div className={styles['label']}>{linksGroups.get(CONSTANTS.IMDB_LINK_CATEGORY).label}</div>
+                                        <Icon className={styles['icon']} name={'imdb'} />
                                     </Button>
                                     :
                                     null
@@ -157,14 +157,6 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                         :
                         null
                 }
-                {
-                    compact && typeof name === 'string' && name.length > 0 ?
-                        <div className={styles['name-container']}>
-                            {name}
-                        </div>
-                        :
-                        null
-                }
                 {
                     compact && typeof description === 'string' && description.length > 0 ?
                         <div className={styles['description-container']}>{description}</div>
@@ -193,8 +185,8 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                     typeof toggleInLibrary === 'function' ?
                         <ActionButton
                             className={styles['action-button']}
-                            icon={inLibrary ? 'ic_removelib' : 'ic_addlib'}
+                            icon={inLibrary ? 'remove-from-library' : 'add-to-library'}
-                            label={inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}
+                            label={compact ? null : inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}
                             tabIndex={compact ? -1 : 0}
                             onClick={toggleInLibrary}
                         />
@@ -205,8 +197,8 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                     typeof trailerHref === 'string' ?
                         <ActionButton
                             className={styles['action-button']}
-                            icon={'ic_movies'}
+                            icon={'trailer'}
-                            label={t('TRAILER')}
+                            label={compact ? null : t('TRAILER')}
                             tabIndex={compact ? -1 : 0}
                             href={trailerHref}
                         />
@@ -217,7 +209,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                     typeof showHref === 'string' && compact ?
                         <ActionButton
                             className={styles['action-button']}
-                            icon={'ic_play'}
+                            icon={'play'}
                             label={t('SHOW')}
                             tabIndex={compact ? -1 : 0}
                             href={showHref}
@@ -230,8 +222,8 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                         <React.Fragment>
                             <ActionButton
                                 className={styles['action-button']}
-                                icon={'ic_share'}
+                                icon={'share'}
-                                label={t('CTX_SHARE')}
+                                tooltip={t('CTX_SHARE')}
                                 tabIndex={compact ? -1 : 0}
                                 onClick={openShareModal}
                             />

src/common/MetaPreview/MetaPreviewPlaceholder/MetaPreviewPlaceholder.js

@@ -14,9 +14,9 @@ const MetaPreviewPlaceholder = ({ className }) => {
                     <div className={styles['duration-container']} />
                     <div className={styles['release-info-container']} />
                 </div>
-                <div className={styles['description-container']}>
+                <div className={styles['genres-container']}>
-                    <div className={styles['description-label-container']} />
+                    <div className={styles['genres-header-container']} />
-                    <div className={styles['description-label-container']} />
+                    <div className={styles['genre-label-container']} />
                 </div>
                 <div className={styles['genres-container']}>
                     <div className={styles['genres-header-container']} />
@@ -27,20 +27,7 @@ const MetaPreviewPlaceholder = ({ className }) => {
                     <div className={styles['genre-label-container']} />
                 </div>
             </div>
-            <div className={styles['action-buttons-container']}>
+            <div className={styles['action-buttons-container']} />
-                <div className={styles['action-button-container']}>
-                    <div className={styles['action-button-icon']} />
-                    <div className={styles['action-button-label']} />
-                </div>
-                <div className={styles['action-button-container']}>
-                    <div className={styles['action-button-icon']} />
-                    <div className={styles['action-button-label']} />
-                </div>
-                <div className={styles['action-button-container']}>
-                    <div className={styles['action-button-icon']} />
-                    <div className={styles['action-button-label']} />
-                </div>
-            </div>
         </div>
     );
 };

src/common/MetaPreview/MetaPreviewPlaceholder/styles.less

@@ -3,7 +3,6 @@
 .meta-preview-placeholder-container {
     display: flex;
     flex-direction: column;
-    padding: 2rem;
 
     .meta-info-container {
         flex: 1;
@@ -13,6 +12,7 @@
             width: 20rem;
             height: 8rem;
             max-width: 100%;
+            border-radius: var(--border-radius);
             background-color: var(--color-placeholder-background);
         }
 
@@ -26,37 +26,18 @@
                 flex-basis: 5rem;
                 height: 1.4rem;
                 margin-right: 1rem;
+                border-radius: var(--border-radius);
                 background-color: var(--color-placeholder-background);
             }
 
             .release-info-container {
                 flex-basis: 5rem;
                 height: 1.4rem;
+                border-radius: var(--border-radius);
                 background-color: var(--color-placeholder-background);
             }
         }
 
-        .description-container {
-            margin: 1rem 0;
-
-            .description-label-container {
-                background-color: var(--color-placeholder-background);
-
-                &:nth-child(1) {
-                    width: 20rem;
-                    height: 1.4rem;
-                    max-width: 80%;
-                }
-
-                &:nth-child(2) {
-                    width: 26rem;
-                    height: 4.6rem;
-                    max-width: 80%;
-                    margin-top: 1rem;
-                }
-            }
-        }
-
         .genres-container {
             margin: 1rem 0;
 
@@ -64,6 +45,7 @@
                 width: 6.5rem;
                 height: 1.6rem;
                 max-width: 100%;
+                border-radius: var(--border-radius);
                 background-color: var(--color-placeholder-background);
             }
 
@@ -72,6 +54,7 @@
                 height: 1.2rem;
                 max-width: 100%;
                 margin-top: 0.2rem;
+                border-radius: var(--border-radius);
                 background-color: var(--color-placeholder-background);
             }
         }
@@ -81,32 +64,9 @@
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        max-height: 6rem;
+        height: 4rem;
-
+        margin-bottom: 1rem;
-        .action-button-container {
+        border-radius: 4rem;
-            flex: none;
+        background-color: var(--color-placeholder-background);
-            width: 6rem;
-            height: 6rem;
-            margin-right: 2rem;
-            background-color: var(--color-placeholder-background);
-
-            &:last-child {
-                margin-right: 0;
-            }
-
-            .action-button-icon {
-                width: 2rem;
-                height: 2rem;
-                margin: 1rem 2rem 0 2rem;
-                background-color: var(--color-placeholder-background);
-            }
-
-            .action-button-label {
-                width: 4rem;
-                height: 1.2rem;
-                margin: 0.9rem 1rem;
-                background-color: var(--color-placeholder-background);
-            }
-        }
     }
 }

src/common/MetaPreview/styles.less

@@ -13,12 +13,11 @@
         .meta-info-container {
             .logo, .logo-placeholder {
                 width: 100%;
-                height: 8rem;
+                height: 6rem;
-                background-color: @color-surface-dark5-10;
             }
 
             .runtime-release-info-container {
-                justify-content: space-evenly;
+                justify-content: space-between;
 
                 .runtime-label, .release-info-label {
                     margin: 1rem 0.4rem;
@@ -31,8 +30,7 @@
         }
 
         .action-buttons-container {
-            justify-content: space-evenly;
+            justify-content: space-between;
-            padding: 0;
 
             .action-button:not(:last-child) {
                 margin-right: 0;
@@ -48,32 +46,20 @@
         left: -10px;
         z-index: -1;
 
-        &::after {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            z-index: 1;
-            background: @color-background-dark2-60;
-            content: "";
-        }
-
         .background-image {
             display: block;
             width: 100%;
             height: 100%;
             object-fit: cover;
             object-position: center;
-            opacity: 0.9;
+            filter: blur(10px);
-            filter: blur(5px);
+            opacity: 0.3;
         }
     }
 
     .meta-info-container {
         flex: 1;
         align-self: stretch;
-        padding: 0 2rem;
         overflow-y: auto;
 
         &:not(:hover) {
@@ -87,11 +73,11 @@
         .logo, .logo-placeholder {
             display: block;
             max-width: 100%;
-            margin: 2rem 0;
+            margin-bottom: 2rem;
         }
 
         .logo {
-            height: 8rem;
+            height: 9rem;
             object-fit: contain;
             object-position: center;
         }
@@ -110,10 +96,10 @@
 
             .runtime-label, .release-info-label {
                 flex: 0 1 auto;
-                margin-right: 2rem;
+                margin-right: 3rem;
-                margin-bottom: 0.5rem;
+                font-size: 1.25rem;
-                font-size: 1.4rem;
+                font-weight: 600;
-                color: @color-surface-light5-90;
+                color: var(--primary-foreground-color);
             }
 
             .imdb-button-container {
@@ -121,55 +107,41 @@
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                margin-bottom: 0.5rem;
-                padding: 0.3rem 1rem;
                 border-radius: 2.5rem;
-                border: var(--focus-outline-size) solid transparent;
-                background-color: @color-surface-light5-20;
-
-                &:hover, &:focus {
-                    background-color: @color-surface-light5-30;
-                }
 
                 &:focus {
                     outline: none;
                     border: var(--focus-outline-size) solid @color-surface-light5;
                 }
 
+                .label {
+                    flex: 0 1 auto;
+                    margin-right: 1rem;
+                    font-size: 1.25rem;
+                    font-weight: 600;
+                    color: var(--primary-foreground-color);
+                }
+
                 .icon {
                     flex: none;
                     width: 3rem;
-                    height: 1.1rem;
+                    height: 3rem;
-                    margin-right: 1rem;
+                    color: var(--color-imdb);
-                    fill: @color-surface-90;
-                }
-
-                .label {
-                    flex: 0 1 auto;
-                    max-height: 1.2em;
-                    font-size: 1.6rem;
-                    font-weight: 500;
-                    color: @color-surface-light5-90;
                 }
             }
         }
 
-        .name-container {
-            margin-top: 1rem;
-            font-size: 1.5rem;
-            color: @color-surface-light5-90;
-        }
-
         .description-container {
             max-height: 6em;
             margin-top: 1rem;
-            font-size: 1.1rem;
+            font-size: 1rem;
-            line-height: 1.5em;
+            font-weight: 400;
-            color: @color-surface-light5-90;
+            line-height: 2em;
+            color: var(--primary-foreground-color);
         }
 
         .meta-links {
-            margin-top: 1rem;
+            margin-top: 1.5rem;
         }
     }
 
@@ -180,16 +152,21 @@
         flex-direction: row;
         flex-wrap: wrap;
         max-height: 10rem;
-        padding: 0 2rem;
 
         .action-button {
             flex: none;
-            width: 6rem;
+            width: 4rem;
-            height: 6rem;
+            height: 4rem;
-            margin: 2rem 0;
+            margin-bottom: 1rem;
+
+            &:global(.wide) {
+                width: auto;
+                padding: 0 2rem;
+                border-radius: 4rem;
+            }
 
             &:not(:last-child) {
-                margin-right: 2rem;
+                margin-right: 1rem;
             }
         }
     }
@@ -202,33 +179,28 @@
 @media only screen and (max-width: @minimum) {
     .meta-preview-container {
         .meta-info-container {
-            padding: 0 1.5rem;
-
             .logo {
-                margin: 1em 0;
+                margin: 2rem auto;
+            }
+
+            .runtime-release-info-container {
+                justify-content: space-between;
+
+                .runtime-label, .release-info-label {
+                    margin: 0;
+                }
             }
         }
 
         .action-buttons-container {
             flex-wrap: nowrap;
-            padding: 0 1.5rem;
+            margin-top: 3rem;
             overflow-x: visible;
             scrollbar-width: none;
 
             &::-webkit-scrollbar {
                 display: none;
             }
-
-            .action-button {
-                width: auto;
-                height: 4rem;
-                max-width: 60%;
-                margin: 1rem 0;
-
-                &:not(:last-child) {
-                    margin-right: 1rem;
-                }
-            }
         }
     }
 

src/common/MetaRow/MetaRow.js

@@ -5,7 +5,7 @@ const ReactIs = require('react-is');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const CONSTANTS = require('stremio/common/CONSTANTS');
 const MetaRowPlaceholder = require('./MetaRowPlaceholder');
@@ -28,7 +28,7 @@ const MetaRow = ({ className, title, message, items, itemComponent, deepLinks })
                             deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ?
                                 <Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover || deepLinks.library} tabIndex={-1}>
                                     <div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
-                                    <Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
+                                    <Icon className={styles['icon']} name={'chevron-forward'} />
                                 </Button>
                                 :
                                 null

src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const CONSTANTS = require('stremio/common/CONSTANTS');
 const styles = require('./styles');
@@ -21,7 +21,7 @@ const MetaRowPlaceholder = ({ className, title, deepLinks }) => {
                     deepLinks && typeof deepLinks.discover === 'string' ?
                         <Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover} tabIndex={-1}>
                             <div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
-                            <Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
+                            <Icon className={styles['icon']} name={'chevron-forward'} />
                         </Button>
                         :
                         null

src/common/MetaRow/MetaRowPlaceholder/styles.less

@@ -9,12 +9,13 @@
         align-items: center;
         justify-content: flex-end;
         padding: 0 1rem;
-        margin-bottom: 1rem;
+        margin-bottom: 0.5rem;
 
         .title-container {
             flex: 1;
             max-height: 2.4em;
-            font-size: 1.8rem;
+            font-size: 1.6rem;
+            font-weight: 500;
             color: var(--color-placeholder-text);
 
             &:empty {
@@ -39,17 +40,16 @@
             .label {
                 flex: 0 1 auto;
                 max-height: 1.2em;
-                font-size: 1.3rem;
+                font-size: 1rem;
                 font-weight: 500;
-                text-transform: uppercase;
                 color: var(--color-placeholder-text);
             }
 
             .icon {
                 flex: none;
-                height: 1.3rem;
+                height: 1rem;
                 margin-left: 0.5rem;
-                fill: var(--color-placeholder-text);
+                color: var(--color-placeholder-text);
             }
         }
     }
@@ -68,6 +68,7 @@
             }
 
             .poster-container {
+                border-radius: var(--border-radius);
                 padding-bottom: calc(100% * var(--poster-shape-ratio));
                 background-color: var(--color-placeholder-background);
             }
@@ -76,12 +77,14 @@
                 display: flex;
                 flex-direction: row;
                 align-items: center;
+                justify-content: center;
                 height: 2.8rem;
 
                 .title-label {
                     flex: none;
                     width: 60%;
                     height: 1.2rem;
+                    border-radius: var(--border-radius);
                     background-color: var(--color-placeholder-background);
                 }
             }

src/common/MetaRow/styles.less

@@ -12,13 +12,14 @@
         align-items: center;
         justify-content: flex-end;
         padding: 0 1rem;
-        margin-bottom: 1rem;
+        margin-bottom: 0.25rem;
 
         .title-container {
             flex: 1;
             max-height: 2.4em;
-            font-size: 1.8rem;
+            font-size: 1.6rem;
-            color: @color-secondaryvariant2-light1-90;
+            font-weight: 500;
+            color: var(--primary-foreground-color);
         }
 
         .see-all-container {
@@ -27,46 +28,40 @@
             flex-direction: row;
             align-items: center;
             max-width: 12rem;
-            padding: 0.2rem;
+            height: 2.5rem;
+            padding: 0 0.5rem 0 1rem;
+            border-radius: 2.5rem;
+            opacity: 0.6;
 
-            &:focus {
+            &:hover, &:focus {
                 outline: none;
-                background-color: @color-background-light3;
+                background-color: var(--overlay-color);
-            }
+                opacity: 1;
-
-            &:hover {
-                .label {
-                    color: @color-secondaryvariant2-light2-90;
-                }
-
-                .icon {
-                    fill: @color-secondaryvariant2-light2-90;
-                }
             }
 
             .label {
                 flex: 0 1 auto;
                 max-height: 1.2em;
-                font-size: 1.3rem;
+                font-size: 1rem;
                 font-weight: 500;
-                text-transform: uppercase;
+                color: var(--primary-foreground-color);
-                color: @color-secondaryvariant2-light1-90;
             }
 
             .icon {
                 flex: none;
-                height: 1.3rem;
+                height: 1.5rem;
                 margin-left: 0.5rem;
-                fill: @color-secondaryvariant2-light1-90;
+                color: var(--primary-foreground-color);
             }
         }
     }
 
     .message-container {
         max-height: 3.6em;
-        padding: 0 1rem;
+        padding: 0 0.5rem;
         font-size: 1.3rem;
-        color: @color-secondaryvariant2-light1-90;
+        color: var(--primary-foreground-color);
+        opacity: 0.6;
     }
 
     .meta-items-container {
@@ -76,10 +71,6 @@
         overflow: visible;
 
         .meta-item {
-            &:not(:first-child) {
-                margin-left: 0.5rem;
-            }
-
             &.poster-shape-poster {
                 flex: calc(1 / var(--poster-shape-ratio));
             }

src/common/ModalDialog/ModalDialog.js

@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useRouteFocused, useModalsContainer } = require('stremio-router');
 const Button = require('stremio/common/Button');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Modal } = require('stremio-router');
 const styles = require('./styles');
 
@@ -60,7 +60,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
         <Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}>
             <div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}>
                 <Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
-                    <Icon className={styles['icon']} icon={'ic_x'} />
+                    <Icon className={styles['icon']} name={'close'} />
                 </Button>
                 {
                     typeof title === 'string' && title.length > 0 ?
@@ -78,7 +78,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
                                 <Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
                                     {
                                         typeof icon === 'string' && icon.length > 0 ?
-                                            <Icon className={styles['icon']} icon={icon} />
+                                            <Icon className={styles['icon']} name={icon} />
                                             :
                                             null
                                     }

src/common/ModalDialog/styles.less

@@ -10,53 +10,56 @@
     background-color: @color-background-dark5-40;
 
     .modal-dialog-container {
+        position: relative;
         flex: none;
         display: flex;
         flex-direction: column;
         max-width: 80%;
         max-height: 80%;
-        background-color: @color-surface-light5;
+        padding: 0 2rem;
+        border-radius: var(--border-radius);
+        background-color: var(--modal-background-color);
 
         .close-button-container {
-            flex: none;
+            position: absolute;
-            align-self: flex-end;
+            top: 0.5rem;
-            width: 2rem;
+            right: 0.5rem;
-            height: 2rem;
+            width: 3rem;
-            margin: 0.2rem 0.2rem 0 0;
+            height: 3rem;
             padding: 0.5rem;
+            border-radius: var(--border-radius);
 
             .icon {
                 display: block;
                 width: 100%;
                 height: 100%;
-                fill: @color-surface-dark1-90;
+                color: var(--overlay-color);
             }
 
             &:hover, &:focus {
                 .icon {
-                    fill: @color-surface-light1-90;
+                    color: var(--primary-foreground-color);
                 }
             }
 
             &:focus {
-                outline-color: @color-background-dark5;
+                outline-color: var(--primary-foreground-color);
             }
         }
 
         .title-container {
             flex: 1 0 auto;
-            max-height: 2.4em;
+            display: flex;
-            margin: 0 2rem;
+            align-items: center;
+            height: 4.5rem;
             font-size: 1.2rem;
             font-weight: 500;
-            color: @color-background-dark5-90;
+            color: var(--primary-foreground-color);
         }
 
         .modal-dialog-content {
             flex: 1;
             align-self: stretch;
-            margin: 1.5rem 1rem 0;
-            padding: 0 1rem;
             overflow-y: auto;
 
             &:last-child {
@@ -67,13 +70,12 @@
         .buttons-container {
             flex: none;
             align-self: stretch;
-            margin: 2rem 2rem 0;
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
 
             &:last-child {
-                margin-bottom: 2rem;
+                margin: 2rem 0;
             }
         }
     }
@@ -85,15 +87,18 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    height: 3.5rem;
+    border-radius: 3.5rem;
     padding: 1.2rem;
-    background-color: @color-accent3;
+    background-color: var(--secondary-accent-color);
 
     &:hover {
-        background-color: @color-accent3-light1;
+        outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+        background-color: transparent;
     }
 
     &:focus {
-        outline-color: @color-background-dark5;
+        outline-color: var(--primary-foreground-color);
     }
 
     &:not(:last-child) {
@@ -105,7 +110,7 @@
         width: 1.2rem;
         height: 1.2rem;
         margin-right: .5rem;
-        fill: @color-surface-light5-90;
+        color: var(--primary-foreground-color);
     }
 
     .label {
@@ -114,9 +119,9 @@
         flex-basis: auto;
         max-height: 3.6em;
         font-size: 1.1rem;
-        font-weight: 500;
+        font-weight: 700;
         text-align: center;
-        color: @color-surface-light5-90;
+        color: var(--primary-foreground-color);
     }
 }
 
@@ -127,36 +132,7 @@
             width: 90%;
             max-width: initial;
             z-index: 0;
-
+            padding: 0 1.5rem;
-            .close-button-container {
-                position: absolute;
-                top: 0;
-                right: 0;
-                margin: 0.75rem 0.75rem 0 0;
-                padding: 0.25rem;
-            }
-
-            .title-container {
-                max-height: 4.8em;
-                margin: 1rem 3rem 1rem 1.5rem;
-            }
-
-            .modal-dialog-content {
-                margin: 0 0.5rem;
-                padding: 0 0.5rem;
-
-                &:last-child {
-                    margin-bottom: 1rem;
-                }
-            }
-
-            .buttons-container {
-                margin: 1rem 1rem 0;
-
-                &:last-child {
-                    margin-bottom: 1rem;
-                }
-            }
         }
     }
 }

src/common/Multiselect/Multiselect.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const Popup = require('stremio/common/Popup');
 const ModalDialog = require('stremio/common/ModalDialog');
@@ -104,7 +104,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
                                         title
                             }
                         </div>
-                        <Icon className={styles['icon']} icon={'ic_arrow_thin_down'} />
+                        <Icon className={styles['icon']} name={'caret-down'} />
                     </React.Fragment>
             }
             {children}

src/common/Multiselect/styles.less

@@ -11,16 +11,14 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0 1rem;
+    height: 2.75rem;
-    background-color: @color-background;
+    padding: 0 1.5rem;
+    border-radius: 2.75rem;
+    background-color: var(--overlay-color);
 
     &:global(.active) {
-        .label {
-            color: @color-surface-light5-90;
-        }
-
         .icon {
-            fill: @color-surface-light5-90;
+            transform: rotate(180deg);
         }
     }
 
@@ -28,7 +26,7 @@
         flex: 1;
         max-height: 2.4em;
         font-weight: 500;
-        color: @color-secondaryvariant1-90;
+        color: var(--primary-foreground-color);
     }
 
     .icon {
@@ -36,7 +34,8 @@
         width: 1rem;
         height: 1rem;
         margin-left: 1rem;
-        fill: @color-secondaryvariant1-90;
+        color: var(--primary-foreground-color);
+        opacity: 0.4;
     }
 
     .popup-menu-container {
@@ -51,7 +50,6 @@
             flex-direction: row;
             align-items: center;
             padding: 1rem;
-            background-color: @color-background;
 
             &:global(.selected) {
                 .icon {
@@ -60,13 +58,13 @@
             }
 
             &:hover, &:focus {
-                background-color: @color-background-light2;
+                background-color: var(--overlay-color);
             }
 
             .label {
                 flex: 1;
                 max-height: 4.8em;
-                color: @color-surface-light5-90;
+                color: var(--primary-foreground-color);
             }
 
             .icon {
@@ -76,7 +74,8 @@
                 height: 0.5rem;
                 border-radius: 100%;
                 margin-left: 1rem;
-                background-color: @color-accent3-90;
+                background-color: var(--secondary-accent-color);
+                opacity: 1;
             }
         }
 

src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const Image = require('stremio/common/Image');
 const useFullscreen = require('stremio/common/useFullscreen');
@@ -19,7 +19,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
     const renderNavMenuLabel = React.useCallback(({ ref, className, onClick, children, }) => (
         <Button ref={ref} className={classnames(className, styles['button-container'], styles['menu-button-container'])} tabIndex={-1} onClick={onClick}>
-            <Icon className={styles['icon']} icon={'ic_more'} />
+            <Icon className={styles['icon']} name={'more-vertical'} />
             {children}
         </Button>
     ), []);
@@ -28,7 +28,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
             {
                 backButton ?
                     <Button className={classnames(styles['button-container'], styles['back-button-container'])} tabIndex={-1} onClick={backButtonOnClick}>
-                        <Icon className={styles['icon']} icon={'ic_back_ios'} />
+                        <Icon className={styles['icon']} name={'chevron-back'} />
                     </Button>
                     :
                     <div className={styles['logo-container']}>
@@ -45,36 +45,36 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
                     :
                     null
             }
-            <div className={styles['spacing']} />
             {
                 searchBar ?
                     <SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
                     :
                     null
             }
-            <div className={styles['spacing']} />
+            <div className={styles['buttons-container']}>
-            {
+                {
-                addonsButton ?
+                    addonsButton ?
-                    <Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
+                        <Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
-                        <Icon className={styles['icon']} icon={'ic_addons'} />
+                            <Icon className={styles['icon']} name={'addons'} />
-                    </Button>
+                        </Button>
-                    :
+                        :
-                    null
+                        null
-            }
+                }
-            {
+                {
-                fullscreenButton ?
+                    fullscreenButton ?
-                    <Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
+                        <Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
-                        <Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
+                            <Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />
-                    </Button>
+                        </Button>
-                    :
+                        :
-                    null
+                        null
-            }
+                }
-            {
+                {
-                navMenu ?
+                    navMenu ?
-                    <NavMenu renderLabel={renderNavMenuLabel} />
+                        <NavMenu renderLabel={renderNavMenuLabel} />
-                    :
+                        :
-                    null
+                        null
-            }
+                }
+            </div>
         </nav>
     );
 });

src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { useServices } = require('stremio/services');
 const Button = require('stremio/common/Button');
 const useFullscreen = require('stremio/common/useFullscreen');
@@ -50,34 +50,36 @@ const NavMenuContent = ({ onClick }) => {
                                 `url('${require('/images/default_avatar.png')}')`
                     }}
                 />
-                <div className={styles['email-container']}>
+                <div className={styles['user-info-details']}>
-                    <div className={styles['email-label']}>{profile.auth === null ? t('ANONYMOUS_USER') : profile.auth.user.email}</div>
+                    <div className={styles['email-container']}>
+                        <div className={styles['email-label']}>{profile.auth === null ? t('ANONYMOUS_USER') : profile.auth.user.email}</div>
+                    </div>
+                    <Button className={styles['logout-button-container']} title={profile.auth === null ? `${t('LOG_IN')} / ${t('SIGN_UP')}` : t('LOG_OUT')} href={profile.auth === null ? '#/intro' : null} onClick={profile.auth !== null ? logoutButtonOnClick : null}>
+                        <div className={styles['logout-label']}>{profile.auth === null ? `${t('LOG_IN')} / ${t('SIGN_UP')}` : t('LOG_OUT')}</div>
+                    </Button>
                 </div>
-                <Button className={styles['logout-button-container']} title={profile.auth === null ? `${t('LOG_IN')} / ${t('SIGN_UP')}` : t('LOG_OUT')} href={profile.auth === null ? '#/intro' : null} onClick={profile.auth !== null ? logoutButtonOnClick : null}>
-                    <div className={styles['logout-label']}>{profile.auth === null ? `${t('LOG_IN')} / ${t('SIGN_UP')}` : t('LOG_OUT')}</div>
-                </Button>
             </div>
             <div className={styles['nav-menu-section']}>
                 <Button className={styles['nav-menu-option-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
-                    <Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
+                    <Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />
                     <div className={styles['nav-menu-option-label']}>{fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')}</div>
                 </Button>
             </div>
             <div className={styles['nav-menu-section']}>
                 <Button className={styles['nav-menu-option-container']} title={ t('SETTINGS') } href={'#/settings'}>
-                    <Icon className={styles['icon']} icon={'ic_settings'} />
+                    <Icon className={styles['icon']} name={'settings'} />
                     <div className={styles['nav-menu-option-label']}>{ t('SETTINGS') }</div>
                 </Button>
                 <Button className={styles['nav-menu-option-container']} title={ t('ADDONS') } href={'#/addons'}>
-                    <Icon className={styles['icon']} icon={'ic_addons'} />
+                    <Icon className={styles['icon']} name={'addons'} />
                     <div className={styles['nav-menu-option-label']}>{ t('ADDONS') }</div>
                 </Button>
                 <Button className={styles['nav-menu-option-container']} title={ t('PLAY_URL_MAGNET_LINK') } onClick={onPlayMagnetLinkClick}>
-                    <Icon className={styles['icon']} icon={'ic_magnet'} />
+                    <Icon className={styles['icon']} name={'magnet-link'} />
                     <div className={styles['nav-menu-option-label']}>{ t('PLAY_URL_MAGNET_LINK') }</div>
                 </Button>
                 <Button className={styles['nav-menu-option-container']} title={ t('HELP_FEEDBACK') } href={'https://stremio.zendesk.com/'} target={'_blank'}>
-                    <Icon className={styles['icon']} icon={'ic_help'} />
+                    <Icon className={styles['icon']} name={'help'} />
                     <div className={styles['nav-menu-option-label']}>{ t('HELP_FEEDBACK') }</div>
                 </Button>
             </div>

src/common/NavBar/HorizontalNavBar/NavMenu/styles.less

@@ -4,100 +4,94 @@
 @import (reference) '~stremio/common/screen-sizes.less';
 
 .nav-menu-container {
-    width: 20rem;
+    width: 22rem;
     max-height: calc(100vh - var(--horizontal-nav-bar-size));
     overflow-y: auto;
-    background-color: @color-background-dark1;
+    border-radius: var(--border-radius);
+    background-color: var(--modal-background-color);
 
     .user-info-container {
-        display: grid;
+        display: flex;
-        height: 7rem;
+        padding: 1.5rem 1rem;
-        grid-template-columns: 7rem 1fr;
-        grid-template-rows: 50% 50%;
-        grid-template-areas:
-            "avatar-area email-area"
-            "avatar-area logout-button-area";
 
         .avatar-container {
-            grid-area: avatar-area;
+            flex: none;
-            padding: 1rem;
+            height: 4rem;
+            width: 4rem;
             border-radius: 50%;
             background-size: cover;
             background-repeat: no-repeat;
             background-position: center;
             background-origin: content-box;
             background-clip: content-box;
+            background-color: var(--primary-foreground-color);
             opacity: 0.9;
         }
 
-        .email-container {
+        .user-info-details {
-            grid-area: email-area;
+            flex: auto;
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
-            align-items: center;
+            justify-content: center;
-            padding: 1rem 1rem 0 0;
+            margin-left: 1rem;
 
-            .email-label {
+            .email-container {
-                flex: 1;
+                flex: none;
-                max-height: 2.4em;
+                margin-bottom: 0.5rem;
-                color: @color-surface-light5-90;
-            }
-        }
 
-        .logout-button-container {
+                .email-label {
-            grid-area: logout-button-area;
+                    flex: 1;
-            display: flex;
+                    color: var(--primary-foreground-color);
-            flex-direction: row;
-            align-items: center;
-            padding: 0 1rem 1rem 0;
-
-            &:hover, &:focus {
-                outline: none;
-
-                .logout-label {
-                    color: @color-surface-light5-90;
-                    text-decoration: underline;
                 }
             }
 
-            .logout-label {
+            .logout-button-container {
-                flex: 1;
+                flex: none;
-                max-height: 2.4em;
+
-                color: @color-surface-light3-90;
+                &:hover, &:focus {
+                    outline: none;
+
+                    .logout-label {
+                        text-decoration: underline;
+                    }
+                }
+
+                .logout-label {
+                    flex: 1;
+                    font-size: 0.9rem;
+                    font-weight: 500;
+                    color: var(--primary-foreground-color);
+                }
             }
         }
     }
 
     .nav-menu-section {
-        border-top: thin solid @color-surface-light5-20;
+        border-top: thin solid var(--overlay-color);
 
         .nav-menu-option-container {
             display: flex;
             flex-direction: row;
             align-items: center;
             height: 4rem;
+            padding: 0 1.5rem;
 
             &:hover {
-                background-color: @color-background-light2;
+                background-color: var(--overlay-color);
             }
 
             .icon {
                 flex: none;
-                width: 1.4rem;
+                width: 2rem;
-                height: 1.4rem;
+                height: 2rem;
-                margin: 1.3rem;
+                margin-right: 1rem;
-                fill: @color-secondaryvariant2-light1-90;
+                color: var(--primary-foreground-color);
+                opacity: 0.3;
             }
 
             .nav-menu-option-label {
                 flex: 1;
-                max-height: 2.4em;
+                color: var(--primary-foreground-color);
-                padding-right: 1.3rem;
-                color: @color-surface-light5-90;
-
-                &:only-child {
-                    padding-left: 1.3rem;
-                }
             }
         }
     }

src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { useRouteFocused } = require('stremio-router');
 const Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
@@ -60,7 +60,7 @@ const SearchBar = ({ className, query, active }) => {
                     </div>
             }
             <Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>
-                <Icon className={styles['icon']} icon={'ic_search_link'} />
+                <Icon className={styles['icon']} name={'search'} />
             </Button>
         </label>
     );
@@ -80,7 +80,7 @@ const SearchBarFallback = ({ className }) => {
                 <div className={styles['placeholder-label']}>{ t('SEARCH_OR_PASTE_LINK') }</div>
             </div>
             <Button className={styles['submit-button-container']} tabIndex={-1}>
-                <Icon className={styles['icon']} icon={'ic_search_link'} />
+                <Icon className={styles['icon']} name={'search'} />
             </Button>
         </label>
     );

src/common/NavBar/HorizontalNavBar/SearchBar/styles.less

@@ -3,16 +3,12 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
 .search-bar-container {
-    --search-bar-size: calc(var(--horizontal-nav-bar-size) - 1.2rem);
+    --search-bar-size: 3.25rem;
     display: flex;
     flex-direction: row;
     height: var(--search-bar-size);
     border-radius: var(--search-bar-size);
-    background-color: @color-background-light2;
+    background-color: var(--overlay-color);
-
-    &:hover {
-        background-color: @color-background-light3;
-    }
 
     .search-input {
         flex: 1;
@@ -20,15 +16,16 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        padding: 0 0.5rem 0 1.5rem;
+        padding: 0 0.5rem 0 2rem;
         font-weight: 500;
-        color: @color-secondaryvariant1-light1;
+        color: var(--primary-foreground-color);
         cursor: text;
 
         &::placeholder, .placeholder-label {
             max-height: 1.2em;
             opacity: 1;
-            color: @color-secondaryvariant1-light1-90;
+            color: var(--primary-foreground-color);
+            opacity: 0.6;
         }
     }
 
@@ -38,20 +35,15 @@
         flex-direction: row;
         justify-content: center;
         align-items: center;
-        width: var(--search-bar-size);
         height: var(--search-bar-size);
-
+        padding: 0 1.5rem;
-        &:hover {
-            .icon {
-                fill: @color-secondaryvariant2-light1-90;
-            }
-        }
 
         .icon {
             flex: none;
             width: 1.7rem;
             height: 1.7rem;
-            fill: @color-secondaryvariant1-90;
+            color: var(--primary-foreground-color);
+            opacity: 0.6;
         }
     }
 }

src/common/NavBar/HorizontalNavBar/styles.less

@@ -7,9 +7,10 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: space-between;
     height: var(--horizontal-nav-bar-size);
     padding-right: 1rem;
-    background-color: @color-background;
+    background-color: transparent;
     overflow: visible;
 
     .logo-container {
@@ -30,8 +31,8 @@
         }
     }
 
-    .spacing {
+    .back-button-container {
-        flex: 1 0 0;
+        margin-left: 1rem;
     }
 
     .title {
@@ -44,19 +45,18 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         color: @color-secondaryvariant2-light1-90;
-
-        &+.spacing {
-            display: none;
-        }
     }
 
     .search-bar {
-        flex: 2 0 9.5rem;
+        height: 3.25rem;
-        max-width: 30rem;
+        width: 30rem;
+    }
 
-        &+.spacing {
+    .buttons-container {
-            max-width: 11rem;
+        display: flex;
-        }
+        flex-direction: row;
+        gap: 0.5rem;
+        overflow: visible;
     }
 
     .button-container {
@@ -64,31 +64,27 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: var(--horizontal-nav-bar-size);
+        width: 3.5rem;
-        height: var(--horizontal-nav-bar-size);
+        height: 3.5rem;
-
+        border-radius: 0.75rem;
-        &.back-button-container {
+        opacity: 0.4;
-            width: var(--vertical-nav-bar-size);
-            height: var(--horizontal-nav-bar-size);
-        }
-
-        &:hover {
-            background-color: @color-background-light2;
-        }
-
-        &:global(.active) {
-            background-color: @color-background-light3;
-
-            .icon {
-                fill: @color-surface-light5-90;
-            }
-        }
 
         .icon {
             flex: none;
-            width: 1.7rem;
+            width: 2rem;
-            height: 1.7rem;
+            height: 2rem;
-            fill: @color-secondaryvariant2-light1-90;
+            color: var(--primary-foreground-color);
+            opacity: 0.6;
+        }
+
+        &:hover, &:global(.active) {
+            background-color: var(--overlay-color);
+            opacity: 1;
+
+            .icon {
+                color: var(--primary-foreground-color);
+                opacity: 0.8;
+            }
         }
     }
 }
@@ -102,16 +98,12 @@
             width: var(--horizontal-nav-bar-size);
         }
 
-        .search-bar {
+        .button-container {
-            margin: 0 0.5rem;
+            margin: 0 1rem;
-        }
 
-        .spacing {
+            &:not(.back-button-container):not(.menu-button-container) {
-            display: none;
+                display: none;
-        }
+            }
-
-        .button-container:not(.back-button-container):not(.menu-button-container) {
-            display: none;
         }
     }
 }

src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const Image = require('stremio/common/Image');
 const styles = require('./styles');
@@ -11,7 +11,7 @@ const styles = require('./styles');
 const NavTabButton = ({ className, logo, icon, label, href, selected, onClick }) => {
     const renderLogoFallback = React.useCallback(() => (
         typeof icon === 'string' && icon.length > 0 ?
-            <Icon className={styles['icon']} icon={icon} />
+            <Icon className={styles['icon']} name={icon} />
             :
             null
     ), [icon]);
@@ -27,7 +27,7 @@ const NavTabButton = ({ className, logo, icon, label, href, selected, onClick })
                     />
                     :
                     typeof icon === 'string' && icon.length > 0 ?
-                        <Icon className={styles['icon']} icon={icon} />
+                        <Icon className={styles['icon']} name={selected ? icon : `${icon}-outline`} />
                         :
                         null
             }

src/common/NavBar/VerticalNavBar/NavTabButton/styles.less

@@ -1,50 +1,66 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .nav-tab-button-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: @color-background-dark1;
+    background-color: transparent;
+    border-radius: 0.75rem;
 
     &:hover {
-        background-color: @color-background-light2;
+        background-color: var(--overlay-color);
+
+        .label {
+            opacity: 0.6;
+        }
     }
 
     &:global(.selected) {
-        background-color: @color-secondaryvariant1-dark5;
-
-        &:hover {
-            background-color: @color-secondaryvariant1-dark4;
-        }
-
         .icon {
-            fill: @color-surface-light5-90;
+            opacity: 1;
-        }
+            color: var(--primary-accent-color);
-
-        .label {
-            color: @color-surface-light5-90;
         }
     }
 
     .icon, .logo {
         flex: none;
-        width: 1.7rem;
+        width: 2.2rem;
-        height: 1.7rem;
+        height: 2.2rem;
         margin-bottom: 0.5rem;
-        fill: @color-secondary-light5-90;
+    }
+
+    .icon {
+        color: var(--primary-foreground-color);
+        opacity: 0.2;
     }
 
     .label {
         flex: none;
         max-height: 2.4em;
         padding: 0 0.2rem;
-        font-size: 0.9rem;
+        font-size: 0.8rem;
         font-weight: 500;
         letter-spacing: 0.01rem;
         text-align: center;
-        color: @color-secondaryvariant1-90;
+        color: var(--primary-foreground-color);
+        opacity: 0;
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .nav-tab-button-container {
+        .label {
+            opacity: 0.2;
+        }
+
+        &:global(.selected) {
+            .label {
+                opacity: 0.6;
+            }
+        }
     }
 }

src/common/NavBar/VerticalNavBar/styles.less

@@ -4,8 +4,12 @@
 @import (reference) '~stremio/common/screen-sizes.less';
 
 .vertical-nav-bar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
     width: var(--vertical-nav-bar-size);
-    background-color: @color-background-dark1;
+    background-color: transparent;
     overflow-y: auto;
     scrollbar-width: none;
 
@@ -14,8 +18,8 @@
     }
 
     .nav-tab-button {
-        width: var(--vertical-nav-bar-size);
+        width: calc(var(--vertical-nav-bar-size) - 1.5rem);
-        height: var(--vertical-nav-bar-size);
+        height: calc(var(--vertical-nav-bar-size) - 1.5rem);
 
         &:first-child {
             margin-top: 1rem;
@@ -29,11 +33,12 @@
 
 @media only screen and (max-width: @minimum) {
     .vertical-nav-bar-container {
-        display: flex;
         flex-direction: row;
         justify-content: space-between;
+        gap: 0;
         height: var(--vertical-nav-bar-size);
         width: 100%;
+        padding: 0 1rem;
         overflow-y: hidden;
         overflow-x: auto;
 

src/common/PaginationInput/PaginationInput.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const styles = require('./styles');
 
@@ -22,13 +22,13 @@ const PaginationInput = ({ className, label, dataset, onSelect, ...props }) => {
     return (
         <div {...props} className={classnames(className, styles['pagination-input-container'])} >
             <Button className={styles['prev-button-container']} title={'Previous page'} data-value={'prev'} onClick={prevNextButtonOnClick}>
-                <Icon className={styles['icon']} icon={'ic_arrow_left'} />
+                <Icon className={styles['icon']} name={'chevron-back'} />
             </Button>
             <div className={styles['label-container']} title={label}>
                 <div className={styles['label']}>{label}</div>
             </div>
             <Button className={styles['next-button-container']} title={'Next page'} data-value={'next'} onClick={prevNextButtonOnClick}>
-                <Icon className={styles['icon']} icon={'ic_arrow_right'} />
+                <Icon className={styles['icon']} name={'chevron-forward'} />
             </Button>
         </div>
     );

src/common/PaginationInput/styles.less

@@ -5,17 +5,18 @@
 .pagination-input-container {
     display: flex;
     flex-direction: row;
+    border-radius: var(--border-radius);
 
     .prev-button-container, .next-button-container {
         flex: none;
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: @color-background;
+        background-color: var(--overlay-color);
 
         .icon {
             display: block;
-            fill: @color-secondaryvariant1-90;
+            color: var(--primary-foreground-color);
         }
     }
 
@@ -25,7 +26,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: @color-background-dark1;
+        background-color: var(--overlay-color);
 
         .label {
             flex: none;
@@ -35,7 +36,7 @@
             text-overflow: ellipsis;
             text-align: center;
             font-weight: 500;
-            color: @color-secondaryvariant1-90;
+            color: var(--primary-foreground-color);
         }
     }
 }

src/common/Popup/styles.less

@@ -13,8 +13,10 @@
     .menu-container {
         position: absolute;
         z-index: 1;
-        overflow: visible;
+        overflow: hidden;
         visibility: hidden;
+        border-radius: var(--border-radius);
+        background-color: var(--modal-background-color);
         box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
             0 1.1rem 0.85rem @color-background-dark5-20;
         cursor: auto;

src/common/SearchBar/SearchBar.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const TextInput = require('stremio/common/TextInput');
 const SearchBarPlaceholder = require('./SearchBarPlaceholder');
 const styles = require('./styles');
@@ -18,7 +18,7 @@ const SearchBar = ({ className, title, value, onChange }) => {
                 value={value}
                 onChange={onChange}
             />
-            <Icon className={styles['icon']} icon={'ic_search'} />
+            <Icon className={styles['icon']} name={'search'} />
         </label>
     );
 };

src/common/SearchBar/SearchBarPlaceholder/SearchBarPlaceholder.js

@@ -3,14 +3,14 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const styles = require('./styles');
 
 const SearchBarPlaceholder = ({ className, title }) => {
     return (
         <div className={classnames(className, styles['search-bar-container'])}>
             <div className={styles['search-input']}>{title}</div>
-            <Icon className={styles['icon']} icon={'ic_search'} />
+            <Icon className={styles['icon']} name={'search'} />
         </div>
     );
 };

src/common/SearchBar/SearchBarPlaceholder/styles.less

@@ -22,6 +22,6 @@
         flex: none;
         width: 1.5rem;
         height: 1.5rem;
-        fill: var(--color-placeholder-background);
+        color: var(--color-placeholder-background);
     }
 }

src/common/SearchBar/styles.less

@@ -6,31 +6,26 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    height: 3.5rem;
+    height: 3rem;
-    padding: 0 1rem;
+    padding: 0 1.5rem;
-    border-radius: 3.5rem;
+    border-radius: 3rem;
     border: var(--focus-outline-size) solid transparent;
-    background-color: @color-background;
+    background-color: var(--overlay-color);
     cursor: text;
 
-    &:hover, &:focus-within {
-        background-color: @color-background-light1;
-    }
-
     &:focus-within {
-        border: var(--focus-outline-size) solid @color-surface-light5;
+        border: var(--focus-outline-size) solid var(--primary-foreground-color);
     }
 
     .search-input {
         flex: 1;
         margin-right: 1rem;
-        font-size: 1.1rem;
+        font-size: 1rem;
-        color: @color-surface-light5;
+        color: var(--primary-foreground-color);
 
         &::placeholder {
-            max-height: 1.2em;
+            color: var(--primary-foreground-color);
-            opacity: 1;
+            opacity: 0.6;
-            color: @color-secondaryvariant1-light1-90;
         }
     }
 
@@ -38,6 +33,7 @@
         flex: none;
         width: 1.5rem;
         height: 1.5rem;
-        fill: @color-secondaryvariant1-90;
+        color: var(--primary-foreground-color);
+        opacity: 0.6;
     }
 }

src/common/SharePrompt/SharePrompt.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 const Button = require('stremio/common/Button');
@@ -44,11 +44,11 @@ const SharePrompt = ({ className, url }) => {
         <div className={classnames(className, styles['share-prompt-container'])}>
             <div className={styles['buttons-container']}>
                 <Button className={classnames(styles['button-container'], styles['facebook-button'])} title={'Facebook'} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
-                    <Icon className={styles['icon']} icon={'ic_facebook'} />
+                    <Icon className={styles['icon']} name={'facebook'} />
                     <div className={styles['label']}>Facebook</div>
                 </Button>
                 <Button className={classnames(styles['button-container'], styles['twitter-button'])} title={'Twitter'} href={`https://twitter.com/home?status=${url}`} target={'_blank'}>
-                    <Icon className={styles['icon']} icon={'ic_twitter'} />
+                    <Icon className={styles['icon']} name={'ic_twitter'} />
                     <div className={styles['label']}>Twitter</div>
                 </Button>
             </div>
@@ -63,7 +63,7 @@ const SharePrompt = ({ className, url }) => {
                     tabIndex={-1}
                 />
                 <Button className={styles['copy-button']} title={'Copy to clipboard'} onClick={copyToClipboard}>
-                    <Icon className={styles['icon']} icon={'ic_link'} />
+                    <Icon className={styles['icon']} name={'link'} />
                     <div className={styles['label']}>{ t('COPY') }</div>
                 </Button>
             </div>

src/common/SharePrompt/styles.less

@@ -23,7 +23,7 @@
                 flex: none;
                 height: 1.2rem;
                 margin-right: 1rem;
-                fill: @color-surface-light5-90;
+                color: var(--primary-foreground-color);
             }
 
             .label {
@@ -34,13 +34,15 @@
                 font-size: 1.1rem;
                 font-weight: 500;
                 text-align: center;
-                color: @color-surface-light5-90;
+                color: var(--primary-foreground-color);
             }
         }
 
         .facebook-button, .twitter-button {
+            border-radius: var(--border-radius);
+
             &:focus {
-                outline-color: @color-background-dark5;
+                outline-color: var(--primary-foreground-color);
             }
         }
 
@@ -57,7 +59,8 @@
         display: flex;
         flex-direction: row;
         margin-top: 1rem;
-        background-color: @color-surface-light2;
+        border-radius: var(--border-radius);
+        background-color: var(--overlay-color);
 
         .url-text-input {
             flex: 1;
@@ -65,7 +68,7 @@
             padding: 1rem;
             font-size: 1.1rem;
             text-align: center;
-            color: @color-background-dark5;
+            color: var(--primary-foreground-color);
         }
 
         .copy-button {
@@ -77,14 +80,16 @@
             justify-content: center;
             width: 8rem;
             padding: 1rem;
-            background-color: @color-accent3;
+            border-radius: 0 var(--border-radius) var(--border-radius) 0;
+            background-color: var(--secondary-accent-color);
 
             &:hover {
-                background-color: @color-accent3-light1;
+                outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+                background-color: transparent;
             }
 
             &:focus {
-                outline-color: @color-background-dark5;
+                outline-color: var(--primary-foreground-color);
             }
 
             .icon {
@@ -92,7 +97,7 @@
                 width: 1.2rem;
                 height: 1.2rem;
                 margin-right: 0.5rem;
-                fill: @color-surface-light5-90;
+                color: var(--primary-foreground-color);
             }
 
             .label {
@@ -101,7 +106,7 @@
                 flex-basis: auto;
                 max-height: 2.4em;
                 font-size: 1.1rem;
-                color: @color-surface-light5-90;
+                color: var(--primary-foreground-color);
             }
         }
     }

src/common/Slider/styles.less

@@ -16,26 +16,9 @@ html.active-slider-within {
     overflow: visible;
     cursor: pointer;
 
-    &:hover, &:global(.active) {
-        .track-after {
-            background-color: @color-primary-light5;
-        }
-    }
-
     &:global(.disabled) {
         pointer-events: none;
-
+        opacity: 0.5;
-        .track {
-            background-color: @color-surface-dark5;
-        }
-
-        .track-after {
-            background-color: @color-surface;
-        }
-
-        .thumb {
-            fill: @color-surface;
-        }
     }
 
     .layer {
@@ -55,21 +38,24 @@ html.active-slider-within {
         z-index: 0;
         flex: 1;
         height: var(--track-size);
-        background-color: @color-surface-light5-20;
+        border-radius: var(--track-size);
+        background-color: var(--overlay-color);
     }
 
     .track-before {
         z-index: 1;
         flex: none;
         height: var(--track-size);
-        background-color: @color-surface-light5-10;
+        border-radius: var(--track-size);
+        background-color: var(--overlay-color);
     }
 
     .track-after {
         z-index: 2;
         flex: none;
         height: var(--track-size);
-        background-color: @color-primary-light3;
+        border-radius: var(--track-size);
+        background-color: var(--primary-foreground-color);
     }
 
     .thumb {
@@ -78,6 +64,6 @@ html.active-slider-within {
         width: var(--thumb-size);
         height: var(--thumb-size);
         transform: translateX(-50%);
-        fill: @color-surface-light5;
+        fill: var(--primary-foreground-color);
     }
 }

src/common/Toast/ToastItem/ToastItem.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const styles = require('./styles');
 
@@ -16,8 +16,8 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
     }, [props.type]);
     const icon = React.useMemo(() => {
         return typeof props.icon === 'string' ? props.icon :
-            type === 'success' ? 'ic_check' :
+            type === 'success' ? 'checkmark' :
-                type === 'error' ? 'ic_warning' :
+                type === 'error' ? 'warning' :
                     null;
     }, [type, props.icon]);
     const toastOnClick = React.useCallback((event) => {
@@ -54,7 +54,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
             {
                 typeof icon === 'string' && icon.length > 0 ?
                     <div className={styles['icon-container']}>
-                        <Icon className={styles['icon']} icon={icon} />
+                        <Icon className={styles['icon']} name={icon} />
                     </div>
                     :
                     null
@@ -74,7 +74,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
                 }
             </div>
             <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={closeButtonOnClick}>
-                <Icon className={styles['icon']} icon={'ic_x'} />
+                <Icon className={styles['icon']} name={'close'} />
             </Button>
         </Button>
     );

src/common/Toast/ToastItem/styles.less

@@ -18,7 +18,7 @@
             background-color: @color-accent3;
 
             .icon {
-                fill: @color-surface-light5-90;
+                color: @color-surface-light5-90;
             }
         }
     }
@@ -28,7 +28,7 @@
             background-color: @color-accent2;
 
             .icon {
-                fill: @color-surface-light5-90;
+                color: @color-surface-light5-90;
             }
         }
     }
@@ -43,7 +43,7 @@
             display: block;
             width: 100%;
             height: 100%;
-            fill: @color-background-dark5-90;
+            color: @color-background-dark5-90;
         }
     }
 

src/common/roboto.css

@@ -1,55 +0,0 @@
-@font-face {
-    font-family: 'Roboto';
-    font-style: italic;
-    font-weight: 300;
-    src: url('/fonts/Roboto-LightItalic.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-style: italic;
-    font-weight: 400;
-    src: url('/fonts/Roboto-RegularItalic.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-style: italic;
-    font-weight: 500;
-    src: url('/fonts/Roboto-MediumItalic.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-style: italic;
-    font-weight: 700;
-    src: url('/fonts/Roboto-BoldItalic.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 300;
-    src: url('/fonts/Roboto-Light.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 500;
-    src: url('/fonts/Roboto-Medium.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 700;
-    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
-}

src/routes/Addons/Addon/Addon.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Button, Image } = require('stremio/common');
 const styles = require('./styles');
 
@@ -51,7 +51,7 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio
         }
     }, [onToggle, dataset]);
     const renderLogoFallback = React.useCallback(() => (
-        <Icon className={styles['icon']} icon={'ic_addons'} />
+        <Icon className={styles['icon']} name={'addons'} />
     ), []);
     return (
         <Button className={classnames(className, styles['addon-container'])} onKeyDown={onKeyDown}>
@@ -98,7 +98,7 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio
                     {
                         !behaviorHints.configurationRequired && behaviorHints.configurable ?
                             <Button className={styles['configure-button-container']} title={t('ADDON_CONFIGURE')} tabIndex={-1} onClick={configureButtonOnClick}>
-                                <Icon className={styles['icon']} icon={'ic_settings'} />
+                                <Icon className={styles['icon']} name={'settings'} />
                             </Button>
                             :
                             null
@@ -113,7 +113,7 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio
                     </Button>
                 </div>
                 <Button className={styles['share-button-container']} title={t('SHARE_ADDON')} tabIndex={-1} onClick={shareButtonOnClick}>
-                    <Icon className={styles['icon']} icon={'ic_share'} />
+                    <Icon className={styles['icon']} name={'share'} />
                     <div className={styles['label']}>{ t('SHARE_ADDON') }</div>
                 </Button>
             </div>

src/routes/Addons/Addon/styles.less

@@ -8,14 +8,14 @@
     flex-direction: row;
     align-items: flex-start;
     padding: 1.5rem;
-    background-color: @color-background;
+    border-radius: var(--border-radius);
+    background-color: var(--overlay-color);
     cursor: inherit;
 
     .logo-container {
         flex: none;
-        width: 6rem;
+        width: 8rem;
-        height: 6rem;
+        height: 8rem;
-        background-color: @color-background-light1;
 
         .logo {
             display: block;
@@ -31,7 +31,7 @@
             width: 100%;
             height: 100%;
             padding: 1rem;
-            fill: @color-secondaryvariant1-light3;
+            color: var(--primary-foreground-color);
         }
     }
 
@@ -52,7 +52,7 @@
             padding: 0 0.5rem;
             max-height: 3.6em;
             font-size: 1.6rem;
-            color: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
 
         .version-container {
@@ -62,7 +62,8 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 2.4em;
-            color: @color-surface-light5-60;
+            color: var(--primary-foreground-color);
+            opacity: 0.6;
         }
 
         .types-container {
@@ -72,8 +73,9 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 2.4em;
-            color: @color-surface-light5-40;
+            color: var(--primary-foreground-color);
             text-transform: capitalize;
+            opacity: 0.4;
         }
 
         .description-container {
@@ -83,7 +85,7 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 4.8em;
-            color: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
     }
 
@@ -109,8 +111,9 @@
             align-items: center;
             justify-content: center;
             gap: 1rem;
-            height: 4rem;
+            height: 3.5rem;
             padding: 0 1rem;
+            border-radius: 4rem;
 
             .icon {
                 flex: none;
@@ -123,68 +126,70 @@
                 flex-shrink: 1;
                 flex-basis: auto;
                 max-height: 2.4em;
-                font-size: 1.2rem;
+                font-size: 1.1rem;
-                font-weight: 500;
+                font-weight: 700;
                 text-align: center;
             }
         }
 
         .install-button-container {
-            background-color: @color-accent3;
+            background-color: var(--secondary-accent-color);
 
             &:hover {
-                background-color: @color-accent3-light2;
+                outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+                background-color: transparent;
             }
 
             .label {
-                color: @color-surface-light5;
+                color: var(--primary-foreground-color)
             }
         }
 
         .configure-button-container {
             flex: none;
-            background-color: @color-accent3;
+            background-color: var(--secondary-accent-color);
 
             &:hover {
-                background-color: @color-accent3-light2;
+                outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+                background-color: transparent;
             }
 
             .icon {
-                fill: @color-surface-light5;
+                color: var(--primary-foreground-color)
             }
         }
 
         .uninstall-button-container {
-            outline-color: @color-background-light3;
+            outline-color: var(--primary-foreground-color);
             outline-style: solid;
+            opacity: 0.3;
 
             &:hover {
-                background-color: @color-background-light2;
+                opacity: 1;
             }
 
             .label {
-                color: @color-surface-light5-90;
+                color: var(--primary-foreground-color);
             }
         }
 
         .share-button-container {
-            &:hover {
+            opacity: 0.9;
-                .icon {
-                    fill: @color-secondaryvariant1-light1;
-                }
 
+            &:hover {
                 .label {
                     text-decoration: underline;
-                    color: @color-secondaryvariant1-light2;
                 }
             }
 
             .icon {
-                fill: @color-secondaryvariant1-dark1-60;
+                height: 1.5rem;
+                width: 1.5rem;
+                color: var(--primary-foreground-color);
             }
 
             .label {
-                color: @color-secondaryvariant1-90;
+                color: var(--primary-foreground-color);
             }
         }
     }

src/routes/Addons/Addons.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SearchBar, SharePrompt, ModalDialog, useBinaryState, withCoreSuspender } = require('stremio/common');
 const Addon = require('./Addon');
 const useInstalledAddons = require('./useInstalledAddons');
@@ -72,7 +72,7 @@ const Addons = ({ urlParams, queryParams }) => {
             );
     }, [search]);
     const renderLogoFallback = React.useCallback(() => (
-        <Icon className={styles['icon']} icon={'ic_addons'} />
+        <Icon className={styles['icon']} name={'addons'} />
     ), []);
     React.useLayoutEffect(() => {
         closeAddAddonModal();
@@ -83,10 +83,6 @@ const Addons = ({ urlParams, queryParams }) => {
         <MainNavBars className={styles['addons-container']} route={'addons'}>
             <div className={styles['addons-content']}>
                 <div className={styles['selectable-inputs-container']}>
-                    <Button className={styles['add-button-container']} title={t('ADD_ADDON')} onClick={openAddAddonModal}>
-                        <Icon className={styles['icon']} icon={'ic_plus'} />
-                        <div className={styles['add-button-label']}>{ t('ADD_ADDON') }</div>
-                    </Button>
                     {selectInputs.map((selectInput, index) => (
                         <Multiselect
                             {...selectInput}
@@ -95,6 +91,10 @@ const Addons = ({ urlParams, queryParams }) => {
                         />
                     ))}
                     <div className={styles['spacing']} />
+                    <Button className={styles['add-button-container']} title={t('ADD_ADDON')} onClick={openAddAddonModal}>
+                        <Icon className={styles['icon']} name={'add'} />
+                        <div className={styles['add-button-label']}>{ t('ADD_ADDON') }</div>
+                    </Button>
                     <SearchBar
                         className={styles['search-bar']}
                         title={t('ADDON_SEARCH')}
@@ -102,7 +102,7 @@ const Addons = ({ urlParams, queryParams }) => {
                         onChange={searchInputOnChange}
                     />
                     <Button className={styles['filter-button']} title={'All filters'} onClick={openFiltersModal}>
-                        <Icon className={styles['filter-icon']} icon={'ic_filter'} />
+                        <Icon className={styles['filter-icon']} name={'filters'} />
                     </Button>
                 </div>
                 {

src/routes/Addons/styles.less

@@ -24,7 +24,7 @@
 .addons-container {
     width: 100%;
     height: 100%;
-    background-color: @color-background-dark2;
+    background-color: transparent;
 
     .addons-content {
         width: 100%;
@@ -48,26 +48,27 @@
                 flex-direction: row;
                 align-items: center;
                 justify-content: center;
-                width: 10rem;
+                height: 3rem;
-                height: 3.5rem;
                 margin-right: 1.5rem;
-                padding: 0 1rem;
+                padding: 0 1.5rem;
-                background-color: @color-accent3;
+                border-radius: 3rem;
+                background-color: var(--secondary-accent-color);
 
                 &:hover {
-                    background-color: @color-accent3-light2;
+                    outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+                    background-color: transparent;
                 }
 
                 &:focus {
-                    outline-color: @color-surface-light5;
+                    outline-color: var(--primary-foreground-color);
                 }
 
                 .icon {
                     flex: none;
                     width: 1.2rem;
                     height: 1.2rem;
-                    margin-right: 1rem;
+                    margin-right: 0.5rem;
-                    fill: @color-surface-light5;
+                    color: var(--primary-foreground-color);
                 }
 
                 .add-button-label {
@@ -75,8 +76,9 @@
                     flex-shrink: 1;
                     flex-basis: auto;
                     max-height: 2.4em;
-                    font-size: 1.1rem;
+                    font-size: 1rem;
-                    color: @color-surface-light5;
+                    font-weight: 700;
+                    color: var(--primary-foreground-color);
                 }
             }
 
@@ -84,7 +86,6 @@
                 flex-grow: 0;
                 flex-shrink: 1;
                 flex-basis: 15rem;
-                height: 3.5rem;
                 margin-right: 1.5rem;
 
                 .multiselect-menu-container {
@@ -108,15 +109,16 @@
                 display: none;
                 align-items: center;
                 justify-content: center;
-                width: 3.5rem;
+                width: 3rem;
-                height: 3.5rem;
+                height: 3rem;
-                background-color: @color-background;
+                border-radius: var(--border-radius);
+                background-color: var(--overlay-color);
 
                 .filter-icon {
                     flex: none;
                     width: 1.4rem;
                     height: 1.4rem;
-                    fill: @color-secondaryvariant1-90;
+                    color: var(--primary-foreground-color);
                 }
             }
         }
@@ -126,7 +128,7 @@
             align-self: stretch;
             padding: 0 1.5rem;
             font-size: 2rem;
-            color: @color-surface-light5;
+            color: var(--primary-foreground-color);
         }
 
         .addons-list-container {
@@ -152,7 +154,7 @@
             overflow: visible;
 
             .select-input-container {
-                height: 3.5rem;
+                height: 3rem;
 
                 &:not(:last-child) {
                     margin-bottom: 1rem;
@@ -169,39 +171,43 @@
         .notice {
             margin-bottom: 1.5rem;
             font-size: 1rem;
-            color: @color-background-dark5-90;
+            color: var(--primary-foreground-color);
         }
 
         .addon-url-input {
             width: 100%;
             padding: 1rem;
-            color: @color-surface-dark5;
+            color: var(--primary-foreground-color);
-            outline: var(--focus-outline-size) solid @color-surface-light2;
+            border-radius: var(--border-radius);
+            background-color: var(--overlay-color);
+            outline: var(--focus-outline-size) solid var(--overlay-color);
             outline-offset: calc(-1 * var(--focus-outline-size));
 
             &:hover {
-                outline-color: @color-surface-light4;
+                outline-color: var(--primary-foreground-color);
             }
 
             &:focus {
-                outline-color: @color-background-dark5;
+                outline-color: var(--primary-foreground-color);
             }
         }
     }
 
     .cancel-button {
         background-color: transparent;
+        opacity: 0.3;
 
         &:hover {
-            background-color: @color-surface-light3;
+            outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+            opacity: 1;
         }
 
         &:focus {
-            outline-color: @color-background-dark5;
+            outline-color: var(--primary-foreground-color);
         }
 
         .cancel-button-label {
-            color: @color-surface-dark2;
+            color: var(--primary-foreground-color);
         }
     }
 }
@@ -229,7 +235,7 @@
             }
 
             .icon {
-                fill: @color-secondaryvariant1-light3;
+                color: var(--primary-foreground-color);
             }
 
             .name-container {
@@ -247,7 +253,7 @@
                     flex-basis: auto;
                     margin-right: 0.5rem;
                     font-size: 1.6rem;
-                    color: @color-background-dark5-90;
+                    color: var(--primary-foreground-color);
                 }
 
                 .version {
@@ -255,7 +261,7 @@
                     flex-shrink: 1;
                     flex-basis: auto;
                     margin-top: 0.5rem;
-                    color: @color-background-dark5-60;
+                    color: var(--primary-foreground-color);
                 }
             }
         }
@@ -271,11 +277,10 @@
         .addons-content {
             .selectable-inputs-container {
                 .add-button-container {
+                    z-index: 1;
                     position: fixed;
                     right: 0;
                     bottom: calc(3rem + var(--horizontal-nav-bar-size));
-                    box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
-                        0 1.1rem 0.85rem @color-background-dark5-20;
                 }
 
                 .select-input-container {

src/routes/Board/styles.less

@@ -20,15 +20,17 @@
     .board-content-container {
         flex: 1;
         align-self: stretch;
-        background-color: @color-background-dark2;
+        background: transparent;
 
         .board-content {
             width: 100%;
             height: 100%;
+            padding: 0 1rem;
             overflow-y: auto;
 
             .board-row {
-                margin: 4rem 2rem;
+                margin-top: 1rem;
+                margin-bottom: 2rem;
             }
         }
     }
@@ -43,7 +45,7 @@
     .board-container {
         .board-content-container {
             .board-content {
-                .board-row-poster, .board-row-square {
+                .board-row-poster, .board-row-square, .continue-watching-row {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+10) {
                             display: none;
@@ -51,7 +53,7 @@
                     }
                 }
 
-                .board-row-landscape, .continue-watching-row {
+                .board-row-landscape {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+9) {
                             display: none;
@@ -67,7 +69,7 @@
     .board-container {
         .board-content-container {
             .board-content {
-                .board-row-poster, .board-row-square {
+                .board-row-poster, .board-row-square, .continue-watching-row {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+9) {
                             display: none;
@@ -75,7 +77,7 @@
                     }
                 }
 
-                .board-row-landscape, .continue-watching-row {
+                .board-row-landscape {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+8) {
                             display: none;
@@ -91,7 +93,7 @@
     .board-container {
         .board-content-container {
             .board-content {
-                .board-row-poster, .board-row-square {
+                .board-row-poster, .board-row-square, .continue-watching-row {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+8) {
                             display: none;
@@ -99,7 +101,7 @@
                     }
                 }
 
-                .board-row-landscape, .continue-watching-row {
+                .board-row-landscape {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+7) {
                             display: none;
@@ -115,7 +117,7 @@
     .board-container {
         .board-content-container {
             .board-content {
-                .board-row-poster, .board-row-square {
+                .board-row-poster, .board-row-square, .continue-watching-row {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+7) {
                             display: none;
@@ -123,7 +125,7 @@
                     }
                 }
 
-                .board-row-landscape, .continue-watching-row {
+                .board-row-landscape {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+6) {
                             display: none;
@@ -139,7 +141,7 @@
     .board-container {
         .board-content-container {
             .board-content {
-                .board-row-poster, .board-row-square {
+                .board-row-poster, .board-row-square, .continue-watching-row {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+6) {
                             display: none;
@@ -147,7 +149,7 @@
                     }
                 }
 
-                .board-row-landscape, .continue-watching-row {
+                .board-row-landscape {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+5) {
                             display: none;
@@ -163,7 +165,7 @@
     .board-container {
         .board-content-container {
             .board-content {
-                .board-row-poster, .board-row-square {
+                .board-row-poster, .board-row-square, .continue-watching-row {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+5) {
                             display: none;
@@ -171,7 +173,7 @@
                     }
                 }
 
-                .board-row-landscape, .continue-watching-row {
+                .board-row-landscape {
                     .meta-item, .meta-item-placeholder {
                         &:nth-child(n+4) {
                             display: none;
@@ -199,7 +201,7 @@
                 height: calc(100% - 4rem);
 
                 .board-row {
-                    margin: 2rem 1rem;
+                    margin-bottom: 1.5rem;
                 }
 
                 .board-row-poster, .board-row-square, .continue-watching-row {

src/routes/Discover/Discover.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { useServices } = require('stremio/services');
 const { AddonDetailsModal, DelayedRenderer, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
 const useDiscover = require('./useDiscover');
@@ -98,7 +98,7 @@ const Discover = ({ urlParams, queryParams }) => {
                             />
                         ))}
                         <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
-                            <Icon className={styles['filter-icon']} icon={'ic_filter'} />
+                            <Icon className={styles['filter-icon']} name={'filters'} />
                         </Button>
                     </div>
                     {
@@ -148,7 +148,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                                 name={metaItem.name}
                                                 poster={metaItem.poster}
                                                 posterShape={metaItem.posterShape}
-                                                playIcon={selectedMetaItemIndex === index}
+                                                playname={selectedMetaItemIndex === index}
                                                 deepLinks={metaItem.deepLinks}
                                                 data-index={index}
                                                 onClick={metaItemOnClick}
@@ -169,8 +169,8 @@ const Discover = ({ urlParams, queryParams }) => {
                             releaseInfo={selectedMetaItem.releaseInfo}
                             released={selectedMetaItem.released}
                             description={selectedMetaItem.description}
-                            deepLinks={selectedMetaItem.deepLinks}
                             links={selectedMetaItem.links}
+                            deepLinks={selectedMetaItem.deepLinks}
                             trailerStreams={selectedMetaItem.trailerStreams}
                             inLibrary={selectedMetaItem.inLibrary}
                             toggleInLibrary={selectedMetaItem.inLibrary ? removeFromLibrary : addToLibrary}

src/routes/Discover/styles.less

@@ -26,7 +26,7 @@
 .discover-container {
     width: 100%;
     height: 100%;
-    background-color: @color-background-dark2;
+    background-color: transparent;
 
     .discover-content {
         width: 100%;
@@ -50,7 +50,6 @@
 
                 .select-input {
                     flex: 0 1 15rem;
-                    height: 3.5rem;
 
                     &:not(:first-child) {
                         margin-left: 1.5rem;
@@ -75,16 +74,16 @@
                     display: none;
                     align-items: center;
                     justify-content: center;
-                    width: 3.5rem;
+                    width: 3rem;
-                    height: 3.5rem;
+                    height: 3rem;
-                    margin-left: 1.5rem;
+                    border-radius: var(--border-radius);
-                    background-color: @color-background;
+                    background-color: var(--overlay-color);
 
                     .filter-icon {
                         flex: none;
                         width: 1.4rem;
                         height: 1.4rem;
-                        fill: @color-secondaryvariant1-90;
+                        color: var(--primary-foreground-color);
                     }
                 }
             }
@@ -103,7 +102,7 @@
                     margin-bottom: 1rem;
                     font-size: 1.4rem;
                     text-align: center;
-                    color: @color-surface-light5-90;
+                    color: var(--primary-foreground-color);
                 }
 
                 .install-button {
@@ -111,17 +110,22 @@
                     min-width: 10rem;
                     max-width: 15rem;
                     padding: 1rem;
-                    background-color: @color-accent3;
+                    background-color: var(--secondary-accent-color);
 
                     &:hover {
-                        background-color: @color-accent3-light1;
+                        outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+                        background-color: transparent;
+                    }
+
+                    &:focus {
+                        outline-color: var(--primary-foreground-color);
                     }
 
                     .label {
                         max-height: 2.4em;
                         font-weight: 500;
                         text-align: center;
-                        color: @color-surface-light5-90;
+                        color: var(--primary-foreground-color);
                     }
                 }
             }
@@ -151,9 +155,10 @@
 
                 .message-label {
                     flex: none;
-                    font-size: 2.5rem;
+                    font-size: 2rem;
+                    font-weight: 400;
                     text-align: center;
-                    color: @color-secondaryvariant2-light1-90;
+                    color: var(--primary-foreground-color);
                 }
             }
 
@@ -174,18 +179,21 @@
                     .poster-container {
                         padding-bottom: calc(100% * var(--poster-shape-ratio));
                         background-color: var(--color-placeholder-background);
+                        border-radius: var(--border-radius);
                     }
 
                     .title-bar-container {
                         display: flex;
                         flex-direction: row;
                         align-items: center;
+                        justify-content: center;
                         height: 2.8rem;
 
                         .title-label {
                             flex: none;
                             width: 60%;
                             height: 1.2rem;
+                            border-radius: var(--border-radius);
                             background-color: var(--color-placeholder-background);
                         }
                     }
@@ -196,8 +204,10 @@
         .meta-preview-container {
             flex: none;
             align-self: stretch;
-            width: 28rem;
+            width: 29rem;
-            background-color: @color-background-dark3;
+            padding: 2rem 2.5rem;
+            border-radius: var(--border-radius) 0 0 var(--border-radius);
+            background-color: var(--modal-background-color);
         }
     }
 }
@@ -225,47 +235,6 @@
     }
 }
 
-.multiselect-modal-container {
-    .multiselect-menu-container {
-        width: 15rem;
-        max-height: calc(3.2rem * 7);
-        overflow-y: auto;
-        scrollbar-color: @color-surface-light1 @color-surface-light4;
-
-        ::-webkit-scrollbar-thumb {
-            background-color: @color-surface-light1;
-
-            &:hover {
-                background-color: @color-surface-light2;
-            }
-        }
-
-        ::-webkit-scrollbar-track {
-            background-color: @color-surface-light4;
-        }
-
-        .multiselect-option-container {
-            background: none;
-
-            &:hover, &:focus {
-                background-color: @color-surface-light3;
-            }
-
-            &:focus {
-                outline-color: @color-background-dark2;
-            }
-
-            .multiselect-label {
-                color: @color-background-dark2-90;
-            }
-
-            .multiselect-icon {
-                fill: @color-background-dark2-90;
-            }
-        }
-    }
-}
-
 @media only screen and (min-width: @xxlarge) {
     .discover-container {
         .discover-content {
@@ -392,7 +361,7 @@
                     justify-content: space-between;
 
                     .select-input {
-                        &:nth-child(n+3) {
+                        &:nth-child(n+2) {
                             display: none;
 
                             &~.filter-container {

src/routes/Intro/ConsentCheckbox/styles.less

@@ -10,29 +10,30 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 0;
+    border-radius: var(--border-radius);
 
     &:focus {
         outline: none;
-        background-color: @color-surface-light5-20;
+        background-color: var(--overlay-color);
     }
 
-    .checkbox-icon {
+    &:global(.checked) {
-        flex: none;
+        .label {
-        width: 1.2rem;
+            opacity: 1;
-        height: 1.2rem;
+        }
-        fill: @color-surface-dark5;
     }
 
     .label {
         flex: 1;
-        margin-left: 0.5rem;
+        margin-left: 1rem;
         font-size: 0.9rem;
-        color: @color-surface-90;
+        color: var(--primary-foreground-color);
+        opacity: 0.6;
 
         .link {
             font-size: 0.9rem;
-            color: @color-surface-light5-90;
+            color: var(--primary-accent-color);
 
             &:hover {
                 text-decoration: underline;

src/routes/Intro/Intro.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Modal, useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 const { Button, Image, useBinaryState } = require('stremio/common');
@@ -274,111 +274,121 @@ const Intro = ({ queryParams }) => {
     }, [routeFocused]);
     return (
         <div className={styles['intro-container']}>
-            <div className={styles['form-container']}>
+            <div className={styles['background-container']} />
+            <div className={styles['heading-container']}>
                 <div className={styles['logo-container']}>
-                    <Image className={styles['logo']} src={require('/images/stremio_symbol.png')} alt={' '} />
+                    <Image className={styles['logo']} src={require('/images/logo.png')} alt={' '} />
-                    <Icon className={styles['name']} icon={'ic_stremio'} />
+                </div>
+                <div className={styles['title-container']}>
+                    Freedom to Stream
+                </div>
+                <div className={styles['slogan-container']}>
+                    All the Video Content You Enjoy in One Place
+                </div>
+            </div>
+            <div className={styles['content-container']}>
+                <div className={styles['form-container']}>
+                    <CredentialsTextInput
+                        ref={emailRef}
+                        className={styles['credentials-text-input']}
+                        type={'email'}
+                        placeholder={'Email'}
+                        value={state.email}
+                        onChange={emailOnChange}
+                        onSubmit={emailOnSubmit}
+                    />
+                    <CredentialsTextInput
+                        ref={passwordRef}
+                        className={styles['credentials-text-input']}
+                        type={'password'}
+                        placeholder={'Password'}
+                        value={state.password}
+                        onChange={passwordOnChange}
+                        onSubmit={passwordOnSubmit}
+                    />
+                    {
+                        state.form === SIGNUP_FORM ?
+                            <React.Fragment>
+                                <CredentialsTextInput
+                                    ref={confirmPasswordRef}
+                                    className={styles['credentials-text-input']}
+                                    type={'password'}
+                                    placeholder={'Confirm Password'}
+                                    value={state.confirmPassword}
+                                    onChange={confirmPasswordOnChange}
+                                    onSubmit={confirmPasswordOnSubmit}
+                                />
+                                <ConsentCheckbox
+                                    ref={termsRef}
+                                    className={styles['consent-checkbox']}
+                                    label={'I have read and agree with the Stremio'}
+                                    link={'Terms and conditions'}
+                                    href={'https://www.stremio.com/tos'}
+                                    checked={state.termsAccepted}
+                                    onToggle={toggleTermsAccepted}
+                                />
+                                <ConsentCheckbox
+                                    ref={privacyPolicyRef}
+                                    className={styles['consent-checkbox']}
+                                    label={'I have read and agree with the Stremio'}
+                                    link={'Privacy Policy'}
+                                    href={'https://www.stremio.com/privacy'}
+                                    checked={state.privacyPolicyAccepted}
+                                    onToggle={togglePrivacyPolicyAccepted}
+                                />
+                                <ConsentCheckbox
+                                    ref={marketingRef}
+                                    className={styles['consent-checkbox']}
+                                    label={'I agree to receive marketing communications from Stremio'}
+                                    checked={state.marketingAccepted}
+                                    onToggle={toggleMarketingAccepted}
+                                />
+                            </React.Fragment>
+                            :
+                            <div className={styles['forgot-password-link-container']}>
+                                <Button className={styles['forgot-password-link']} onClick={openPasswordRestModal}>Forgot password?</Button>
+                            </div>
+                    }
+                    {
+                        state.error.length > 0 ?
+                            <div ref={errorRef} className={styles['error-message']}>{state.error}</div>
+                            :
+                            null
+                    }
+                    <Button className={classnames(styles['form-button'], styles['submit-button'])} onClick={state.form === SIGNUP_FORM ? signup : loginWithEmail}>
+                        <div className={styles['label']}>{state.form === SIGNUP_FORM ? 'Sign up' : 'Log in'}</div>
+                    </Button>
+                </div>
+                <div className={styles['options-container']}>
+                    <Button className={classnames(styles['form-button'], styles['facebook-button'])} onClick={loginWithFacebook}>
+                        <Icon className={styles['icon']} name={'facebook'} />
+                        <div className={styles['label']}>Continue with Facebook</div>
+                    </Button>
+                    {
+                        state.form === SIGNUP_FORM ?
+                            <Button className={classnames(styles['form-button'], styles['login-form-button'])} onClick={switchFormOnClick}>
+                                <div className={styles['label']}>LOG IN</div>
+                            </Button>
+                            :
+                            null
+                    }
+                    {
+                        state.form === LOGIN_FORM ?
+                            <Button className={classnames(styles['form-button'], styles['signup-form-button'])} onClick={switchFormOnClick}>
+                                <div className={styles['label']}>SIGN UP WITH EMAIL</div>
+                            </Button>
+                            :
+                            null
+                    }
+                    {
+                        state.form === SIGNUP_FORM ?
+                            <Button className={classnames(styles['form-button'], styles['guest-login-button'])} onClick={loginAsGuest}>
+                                <div className={styles['label']}>GUEST LOGIN</div>
+                            </Button>
+                            :
+                            null
+                    }
                 </div>
-                <Button className={classnames(styles['form-button'], styles['facebook-button'])} onClick={loginWithFacebook}>
-                    <Icon className={styles['icon']} icon={'ic_facebook'} />
-                    <div className={styles['label']}>Continue with Facebook</div>
-                </Button>
-                {
-                    state.form === SIGNUP_FORM ?
-                        <Button className={classnames(styles['form-button'], styles['login-form-button'])} onClick={switchFormOnClick}>
-                            Already have an account?
-                            {' '}
-                            <span className={styles['login-label']}>LOG IN</span>
-                        </Button>
-                        :
-                        null
-                }
-                <CredentialsTextInput
-                    ref={emailRef}
-                    className={styles['credentials-text-input']}
-                    type={'email'}
-                    placeholder={'Email'}
-                    value={state.email}
-                    onChange={emailOnChange}
-                    onSubmit={emailOnSubmit}
-                />
-                <CredentialsTextInput
-                    ref={passwordRef}
-                    className={styles['credentials-text-input']}
-                    type={'password'}
-                    placeholder={'Password'}
-                    value={state.password}
-                    onChange={passwordOnChange}
-                    onSubmit={passwordOnSubmit}
-                />
-                {
-                    state.form === SIGNUP_FORM ?
-                        <React.Fragment>
-                            <CredentialsTextInput
-                                ref={confirmPasswordRef}
-                                className={styles['credentials-text-input']}
-                                type={'password'}
-                                placeholder={'Confirm Password'}
-                                value={state.confirmPassword}
-                                onChange={confirmPasswordOnChange}
-                                onSubmit={confirmPasswordOnSubmit}
-                            />
-                            <ConsentCheckbox
-                                ref={termsRef}
-                                className={styles['consent-checkbox']}
-                                label={'I have read and agree with the Stremio'}
-                                link={'Terms and conditions'}
-                                href={'https://www.stremio.com/tos'}
-                                checked={state.termsAccepted}
-                                onToggle={toggleTermsAccepted}
-                            />
-                            <ConsentCheckbox
-                                ref={privacyPolicyRef}
-                                className={styles['consent-checkbox']}
-                                label={'I have read and agree with the Stremio'}
-                                link={'Privacy Policy'}
-                                href={'https://www.stremio.com/privacy'}
-                                checked={state.privacyPolicyAccepted}
-                                onToggle={togglePrivacyPolicyAccepted}
-                            />
-                            <ConsentCheckbox
-                                ref={marketingRef}
-                                className={styles['consent-checkbox']}
-                                label={'I agree to receive marketing communications from Stremio'}
-                                checked={state.marketingAccepted}
-                                onToggle={toggleMarketingAccepted}
-                            />
-                        </React.Fragment>
-                        :
-                        <div className={styles['forgot-password-link-container']}>
-                            <Button className={styles['forgot-password-link']} onClick={openPasswordRestModal}>Forgot password?</Button>
-                        </div>
-                }
-                {
-                    state.error.length > 0 ?
-                        <div ref={errorRef} className={styles['error-message']}>{state.error}</div>
-                        :
-                        null
-                }
-                <Button className={classnames(styles['form-button'], styles['submit-button'])} onClick={state.form === SIGNUP_FORM ? signup : loginWithEmail}>
-                    <div className={styles['label']}>{state.form === SIGNUP_FORM ? 'Sign up' : 'Log in'}</div>
-                </Button>
-                {
-                    state.form === SIGNUP_FORM ?
-                        <Button className={classnames(styles['form-button'], styles['guest-login-button'])} onClick={loginAsGuest}>
-                            <div className={styles['label']}>GUEST LOGIN</div>
-                        </Button>
-                        :
-                        null
-                }
-                {
-                    state.form === LOGIN_FORM ?
-                        <Button className={classnames(styles['form-button'], styles['signup-form-button'])} onClick={switchFormOnClick}>
-                            <div className={styles['label']}>SIGN UP WITH EMAIL</div>
-                        </Button>
-                        :
-                        null
-                }
             </div>
             {
                 passwordRestModalOpen ?
@@ -390,7 +400,7 @@ const Intro = ({ queryParams }) => {
                 loaderModalOpen ?
                     <Modal className={styles['loading-modal-container']}>
                         <div className={styles['loader-container']}>
-                            <Icon className={styles['icon']} icon={'ic_user'} />
+                            <Icon className={styles['icon']} name={'person'} />
                             <div className={styles['label']}>Authenticating...</div>
                         </div>
                     </Modal>

src/routes/Intro/PasswordResetModal/styles.less

@@ -15,16 +15,13 @@
         .credentials-text-input {
             width: 100%;
             padding: 1rem;
-            color: @color-surface-dark5;
+            border-radius: var(--border-radius);
-            outline: var(--focus-outline-size) solid @color-surface-light2-90;
             outline-offset: calc(-1 * var(--focus-outline-size));
+            color: var(--primary-foreground-color);
+            background: var(--overlay-color);
             
-            &:hover {
+            &:hover, &:focus {
-                outline-color: @color-surface-light4-90;
+                outline: var(--focus-outline-size) solid var(--overlay-color);
-            }
-
-            &:focus {
-                outline-color: @color-background-dark5-90;
             }
         }
     }
@@ -39,16 +36,12 @@
     .cancel-button {
         background-color: transparent;
 
-        &:hover {
+        &:hover, &:focus {
-            background-color: @color-surface-light3;
+            outline-color: var(--primary-foreground-color);
-        }
-
-        &:focus {
-            outline-color: @color-background-dark5-90;
         }
 
         .cancel-button-label {
-            color: @color-surface-dark4-90;
+            color: var(--primary-foreground-color);
         }
     }
 }

src/routes/Intro/styles.less

@@ -4,62 +4,92 @@
 @import (reference) '~stremio/common/screen-sizes.less';
 
 .intro-container {
+    position: relative;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
-    width: 100%;
     height: 100%;
-    background:
-        linear-gradient(@color-background-dark3-80, @color-background-dark3-80),
-        url('/images/intro_background.jpg');
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-origin: border-box;
     overflow-y: auto;
 
-    .form-container {
+    .background-container {
+        z-index: -1;
+        position: fixed;
+        top: -1rem;
+        bottom: -1rem;
+        left: -1rem;
+        right: -1rem;
+        background: url('/images/background_1.svg'), url('/images/background_2.svg');
+        background-color: var(--primary-background-color);
+        background-position: bottom left, top right;
+        background-size: 53%, 54%;
+        background-repeat: no-repeat;
+        filter: blur(6rem);
+    }
+
+    .heading-container {
         flex: none;
-        width: 28rem;
+        display: flex;
-        margin: auto;
+        flex-direction: column;
-        padding: 2rem 0;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 5rem;
 
         .logo-container {
-            display: flex;
+            flex: none;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
             margin-bottom: 3rem;
 
             .logo {
-                flex: none;
+                height: 5rem;
-                width: 4rem;
-                height: 4rem;
-                margin-right: 1rem;
                 opacity: 0.9;
             }
+        }
 
-            .name {
+        .title-container, .slogan-container {
-                flex: none;
+            color: var(--primary-foreground-color);
-                width: 8rem;
+        }
-                height: 4rem;
+
-                fill: @color-surface-dark4-90;
+        .title-container {
+            font-size: 3rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+
+        .slogan-container {
+            font-size: 1.5rem;
+            font-weight: 400;
+            text-transform: lowercase;
+            opacity: 0.6;
+            
+            &::first-letter {
+                text-transform: uppercase;
             }
         }
+    }
+
+    .content-container {
+        flex: none;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: center;
+        width: 100%;
     
         .form-button {
             display: flex;
             flex-direction: row;
             align-items: center;
             justify-content: center;
-            padding: 0.5rem 1rem;
+            height: 4rem;
+            border-radius: 3.5rem;
+            padding: 0 1rem;
 
             .icon {
                 flex: none;
-                width: 1rem;
                 height: 2rem;
+                width: 2rem;
                 margin-right: 1rem;
-                fill: @color-surface-light5-90;
+                color: var(--primary-foreground-color);
             }
 
             .label {
@@ -67,130 +97,92 @@
                 flex-shrink: 1;
                 flex-basis: auto;
                 font-size: 1.1rem;
-                font-weight: 500;
+                font-weight: 700;
-                color: @color-surface-light5-90;
+                color: var(--primary-foreground-color);
                 text-align: center;
             }
         }
 
-        .facebook-button {
+        .submit-button, .guest-login-button, .signup-form-button, .login-form-button {
-            min-height: 4.5rem;
-            margin: 1rem 0;
-            background: var(--color-facebook);
-
-            .label {
-                font-size: 1.2rem;
-            }
-        }
-
-        .login-form-button {
-            display: block;
-            margin: 1rem 0;
-            text-align: center;
-            color: @color-surface-dark2-90;
-
-            &:hover {
-                .login-label {
-                    text-decoration: underline;
-                }
-            }
-
-            &:focus {
-                outline: none;
-                background-color: @color-surface-light5-20;
-            }
-
-            .login-label {
-                font-weight: 500;
-                color: @color-accent4-light1-90;
-            }
-        }
-
-        .credentials-text-input {
-            display: block;
-            width: 100%;
-            margin: 1rem 0;
-            padding: 1rem;
-            border-bottom: thin solid @color-surface-90;
-            color: @color-surface-light5;
-
-            &:hover {
-                background-color: @color-surface-light5-20;
-            }
-
-            &:focus {
-                border-bottom-color: @color-secondaryvariant2-light1-90;
-
-                &::placeholder {
-                    color: @color-secondaryvariant2-light1-90;
-                }
-            }
-
-            &::placeholder {
-                color: @color-surface-dark2-90;
-            }
-        }
-
-        .forgot-password-link-container {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-            margin: 1rem 0;
-            text-align: right;
-
-            .forgot-password-link {
-                flex-grow: 0;
-                flex-shrink: 1;
-                flex-basis: auto;
-                padding: 0.5rem 1rem;
-                color: @color-surface-light3-90;
-
-                &:hover {
-                    text-decoration: underline;
-                    color: @color-secondaryvariant2-light1-90;
-                }
-
-                &:focus {
-                    outline: none;
-                    background-color: @color-surface-light5-20;
-                }
-            }
-        }
-
-        .error-message {
-            margin: 1rem 0;
-            padding: 0 1rem;
-            text-align: center;
-            color: @color-accent5-90;
-        }
-
-        .submit-button {
-            min-height: 4rem;
-            margin: 1rem 0;
-            background-color: @color-accent3;
-
-            &:hover {
-                background-color: @color-accent3-light1;
-            }
-
-            .label {
-                font-size: 1.2rem;
-            }
-        }
-
-        .guest-login-button, .signup-form-button {
             margin-top: 1rem;
-            padding: 1rem;
+            outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+            background-color: transparent;
+
+            .label {
+                color: var(--primary-foreground-color);
+            }
 
             &:hover {
+                background-color: var(--primary-foreground-color);
+
                 .label {
-                    text-decoration: underline;
+                    color: var(--secondary-foreground-color);
+                }
+            }
+        }
+
+        .form-container {
+            flex: none;
+            position: relative;
+            width: 22rem;
+            margin-right: 2rem;
+
+            .credentials-text-input {
+                display: block;
+                width: 100%;
+                margin-bottom: 1rem;
+                padding: 1rem;
+                border-radius: var(--border-radius);
+                outline-offset: calc(-1 * var(--focus-outline-size));
+                color: var(--primary-foreground-color);
+                background: var(--overlay-color);
+
+                &:hover, &:focus {
+                    outline: var(--focus-outline-size) solid var(--overlay-color);
                 }
             }
 
-            &:focus {
+            .forgot-password-link-container {
-                outline: none;
+                display: flex;
-                background-color: @color-surface-light5-20;
+                flex-direction: row;
+                justify-content: flex-end;
+                margin: 1rem 0;
+                text-align: right;
+
+                .forgot-password-link {
+                    flex-grow: 0;
+                    flex-shrink: 1;
+                    flex-basis: auto;
+                    padding: 0.5rem 1rem;
+                    color: var(--primary-foreground-color);
+
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+            }
+
+            .error-message {
+                margin: 1rem 0;
+                padding: 0 1rem;
+                text-align: center;
+                color: var(--tertiary-accent-color);
+            }
+        }
+
+        .options-container {
+            flex: none;
+            position: relative;
+            width: 22rem;
+            margin-left: 2rem;
+
+            .facebook-button {
+                background: var(--color-facebook);
+                
+                &:hover, &:focus {
+                    outline: var(--focus-outline-size) solid var(--color-facebook);
+                    background-color: transparent;
+                }
             }
         }
     }
@@ -209,7 +201,8 @@
         align-items: center;
         justify-content: center;
         padding: 2rem;
-        background-color: @color-surface-light5;
+        border-radius: var(--border-radius);
+        background-color: var(--modal-background-color);
 
         @keyframes flash {
             0% {
@@ -226,13 +219,13 @@
             width: 5rem;
             height: 5rem;
             margin-bottom: 1rem;
-            fill: @color-background-dark5-90;
+            color: var(--primary-foreground-color);
             animation: 1s linear infinite alternate flash;
         }
 
         .label {
-            font-size: 2rem;
+            font-size: 1.5rem;
-            color: @color-background-dark5-90;
+            color: var(--primary-foreground-color);
             animation: 1s linear infinite alternate flash;
         }
     }
@@ -240,10 +233,39 @@
 
 @media only screen and (max-width: @minimum) {
     .intro-container {
-        .form-container {
+        justify-content: initial;
-            flex: 0 1 auto;
+        padding: 3rem 1.5rem;
-            width: 100%;
+
-            padding: 2rem 1.5rem;
+        .heading-container {
+            align-items: flex-start;
+            margin-bottom: 4rem;
+
+            .logo-container {
+                .logo {
+                    height: 4rem;
+                }
+            }
+
+            .title-container {
+                font-size: 2.5rem;
+            }
+
+            .slogan-container {
+                font-size: 1.5rem;
+            }
+        }
+
+        .content-container {
+            flex-direction: column-reverse;
+
+            .form-container, .options-container {
+                width: 100%;
+                margin: 0;
+            }
+
+            .options-container {
+                margin-bottom: 4rem;
+            }
         }
     }
 }

src/routes/Library/Library.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const NotFound = require('stremio/routes/NotFound');
 const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState, withCoreSuspender } = require('stremio/common');
 const useLibrary = require('./useLibrary');
@@ -61,10 +61,10 @@ const Library = ({ model, urlParams, queryParams }) => {
                                 paginationInput !== null ?
                                     <PaginationInput {...paginationInput} className={styles['pagination-input']} />
                                     :
-                                    <PaginationInput label={'1'} className={classnames(styles['pagination-input'], styles['pagination-input-placeholder'])} />
+                                    null
                             }
                             <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
-                                <Icon className={styles['filter-icon']} icon={'ic_filter'} />
+                                <Icon className={styles['filter-icon']} name={'filters'} />
                             </Button>
                         </div>
                         :
@@ -78,10 +78,10 @@ const Library = ({ model, urlParams, queryParams }) => {
                                 src={require('/images/anonymous.png')}
                                 alt={' '}
                             />
+                            <div className={styles['message-label']}>Library is only available for logged in users!</div>
                             <Button className={styles['login-button-container']} href={'#/intro'}>
                                 <div className={styles['label']}>LOG IN</div>
                             </Button>
-                            <div className={styles['message-label']}>Library is only available for logged in users!</div>
                         </div>
                         :
                         library.selected === null ?

src/routes/Library/styles.less

@@ -22,7 +22,7 @@
 .library-container {
     width: 100%;
     height: 100%;
-    background-color: @color-background-dark2;
+    background-color: transparent;
 
     .library-content {
         width: 100%;
@@ -42,7 +42,7 @@
                 flex-grow: 0;
                 flex-shrink: 1;
                 flex-basis: 15rem;
-                height: 3.5rem;
+                height: 2.75rem;
 
                 &:not(:last-child) {
                     margin-right: 1.5rem;
@@ -59,15 +59,16 @@
                 display: none;
                 align-items: center;
                 justify-content: center;
-                width: 3.5rem;
+                width: 3rem;
-                height: 3.5rem;
+                height: 3rem;
-                background-color: @color-background;
+                border-radius: var(--border-radius);
+                background-color: var(--overlay-color);
 
                 .filter-icon {
                     flex: none;
                     width: 1.4rem;
                     height: 1.4rem;
-                    fill: @color-secondaryvariant1-90;
+                    color: var(--primary-foreground-color);
                 }
             }
 
@@ -77,26 +78,12 @@
 
             .pagination-input {
                 flex: none;
-                height: 3.5rem;
+                height: 3rem;
                 margin-left: 1.5rem;
 
-                &.pagination-input-placeholder {
-                    pointer-events: none;
-
-                    .pagination-prev-button-container, .pagination-next-button-container {
-                        .pagination-button-icon {
-                            fill: @color-surface-dark5-90;
-                        }
-                    }
-
-                    .pagination-label {
-                        color: @color-surface-dark5-90;
-                    }
-                }
-
                 .pagination-prev-button-container, .pagination-next-button-container {
-                    width: 3.5rem;
+                    width: 3rem;
-                    height: 3.5rem;
+                    height: 3rem;
 
                     .pagination-button-icon {
                         width: 1rem;
@@ -131,13 +118,15 @@
                     align-items: center;
                     justify-content: center;
                     width: 20rem;
-                    min-height: 4rem;
+                    height: 3.5rem;
+                    border-radius: 3.5rem;
                     padding: 0.5rem 1rem;
                     margin-bottom: 1rem;
-                    background-color: @color-accent3;
+                    background-color: var(--secondary-accent-color);
 
                     &:hover {
-                        background-color: @color-accent3-light1;
+                        outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+                        background-color: transparent;
                     }
 
                     .label {
@@ -147,7 +136,7 @@
                         max-height: 4.8em;
                         font-size: 1.2rem;
                         font-weight: 700;
-                        color: @color-surface-light5-90;
+                        color: var(--primary-foreground-color);
                         text-align: center;
                     }
                 }
@@ -157,7 +146,7 @@
                 flex: none;
                 width: 12rem;
                 height: 12rem;
-                margin-bottom: 1rem;
+                margin-bottom: 2rem;
                 object-fit: contain;
                 object-position: center;
                 opacity: 0.9;
@@ -165,9 +154,11 @@
 
             .message-label {
                 flex: none;
-                font-size: 2.5rem;
+                margin-bottom: 2rem;
+                font-size: 2rem;
+                font-weight: 400;
                 text-align: center;
-                color: @color-secondaryvariant2-light1-90;
+                color: var(--primary-foreground-color);
             }
         }
 

src/routes/MetaDetails/StreamsList/Stream/Stream.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Button, Image, PlayIconCircleCentered, useProfile, platform, useStreamingServer, useToast } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const StreamPlaceholder = require('./StreamPlaceholder');
@@ -73,7 +73,7 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
         return href === deepLinks.externalPlayer.href ? deepLinks.externalPlayer.fileName : false;
     }, [href]);
     const renderThumbnailFallback = React.useCallback(() => (
-        <Icon className={styles['placeholder-icon']} icon={'ic_broken_link'} />
+        <Icon className={styles['placeholder-icon']} name={'ic_broken_link'} />
     ), []);
     return (
         <Button href={href} download={forceDownload} {...props} onClick={onClick} className={classnames(className, styles['stream-container'])} title={addonName}>

src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/styles.less

@@ -17,6 +17,7 @@
         .addon-name {
             width: 5rem;
             height: 2rem;
+            border-radius: var(--border-radius);
             background-color: var(--color-placeholder-background);
         }
     }
@@ -27,6 +28,7 @@
 
         .description-container {
             height: 1.2rem;
+            border-radius: var(--border-radius);
             background-color: var(--color-placeholder-background);
 
             &:nth-child(1) {

src/routes/MetaDetails/StreamsList/Stream/styles.less

@@ -11,22 +11,26 @@
 .stream-container {
     display: flex;
     flex-direction: row;
-    align-items: center;
     flex-wrap: wrap;
-    padding: 0.5rem 1rem;
+    align-items: center;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-radius: var(--border-radius);
 
     &:hover, &:focus {
-        background-color: @color-background;
+        background-color: var(--overlay-color);
     }
 
     &:hover, &:focus, &:global(.selected) {
         .play-icon {
+            opacity: 1;
+
             .play-icon-circle-centered-background {
-                fill: @color-accent4-90;
+                fill: var(--secondary-accent-color);
             }
 
             .play-icon-circle-centered-icon {
-                fill: @color-surface-light5-90;
+                fill: var(--primary-foreground-color);
             }
         }
     }
@@ -36,19 +40,21 @@
 
         .thumbnail {
             display: block;
-            width: 5rem;
             height: 5rem;
-            object-fit: contain;
+            width: 8rem;
+            object-fit: cover;
             object-position: center;
             opacity: 0.9;
         }
 
         .placeholder-icon {
             display: block;
-            width: 5rem;
             height: 5rem;
-            padding: 0.5rem;
+            width: 8rem;
-            fill: @color-secondaryvariant1-light3-90;
+            padding: 1rem;
+            color: var(--primary-foreground-color);
+            background-color: var(--overlay-color);
+            opacity: 0.25;
         }
 
         .addon-name {
@@ -56,49 +62,49 @@
             max-height: 3.6em;
             font-size: 1.1rem;
             text-align: center;
-            color: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
     }
 
     .info-container {
         flex: 1;
         max-height: 3.6em;
-        margin: 0.5rem 1rem;
+        padding: 0 0.5rem 0 1.5rem;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        color: var(--primary-foreground-color);
         white-space: pre;
-        color: @color-surface-light5-90;
     }
 
     .play-icon {
         flex: none;
         width: 3.5rem;
         height: 5rem;
+        opacity: 0;
 
         .play-icon-circle-centered-background {
             fill: none;
         }
 
         .play-icon-circle-centered-icon {
-            fill: @color-surface-dark5-90;
+            fill: var(--primary-foreground-color);
         }
     }
 
     .progress-bar-container {
         flex: 0 0 100%;
-        background-color: @color-background-light2;
+        background-color: var(--primary-accent-color);
 
         .progress-bar {
             height: 0.5rem;
-            background-color: @color-primaryvariant1;
+            background-color: var(--primary-foreground-color);
         }
     }
 }
 
 @media only screen and (max-width: @minimum) {
     .stream-container {
-        &:hover, &focus {
-            background-color: @color-surface-light5-20;
-        }
-
         .thumbnail-container, .addon-name-container {
             .addon-name {
                 font-weight: 500;
@@ -107,7 +113,7 @@
 
         .play-icon {
             .play-icon-circle-centered-icon {
-                fill: @color-surface-light5-90;
+                fill: var(--primary-foreground-color);
             }
         }
     }

src/routes/MetaDetails/StreamsList/StreamsList.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Button, Image, Multiselect } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const Stream = require('./Stream');
@@ -120,8 +120,8 @@ const StreamsList = ({ className, video, ...props }) => {
                             </React.Fragment>
             }
             <Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
-                <Icon className={styles['icon']} icon={'ic_addons'} />
+                <Icon className={styles['icon']} name={'addons'} />
-                <div className={styles['label']}>{t('ADDON_CATALOGUE_MORE')}</div>
+                <div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
             </Button>
         </div>
     );

src/routes/MetaDetails/StreamsList/styles.less

@@ -37,26 +37,25 @@
             flex: none;
             font-size: 1.4rem;
             text-align: center;
-            color: @color-secondaryvariant2-light1-90;
+            color: var(--primary-foreground-color);
         }
     }
 
     .select-input-container {
         flex: 0 0 auto;
-        height: 3.5rem;
         margin: 1em 1em 0 1em;
         background: none;
 
         &:hover, &:focus, &:global(.active) {
-            background-color: @color-background;
+            background-color: var(--overlay-color);
         }
 
         & >.multiselect-label {
-            color: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
 
         & >.multiselect-icon {
-            fill: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
 
         .multiselect-menu-container {
@@ -66,9 +65,10 @@
     }
 
     .streams-container {
-        flex: 0 1 auto;
+        flex: 1 1 auto;
         align-self: stretch;
         margin-top: 1rem;
+        padding: 0 1rem;
         overflow-y: auto;
     }
 
@@ -81,10 +81,12 @@
         justify-content: center;
         margin: 1rem;
         padding: 1.5rem 1rem;
-        background-color: @color-accent3;
+        border-radius: var(--border-radius);
+        background-color: var(--secondary-accent-color);
 
-        &:hover, &:focus {
+        &:hover {
-            background-color: @color-accent3-light1;
+            outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+            background-color: transparent;
         }
 
         .icon {
@@ -92,16 +94,16 @@
             width: 2rem;
             height: 2rem;
             margin-right: 1rem;
-            fill: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
 
         .label {
             flex: 0 1 auto;
             font-size: 1.5rem;
-            font-weight: 500;
+            font-weight: 700;
             max-height: 3.6em;
             text-align: center;
-            color: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
     }
 }

src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { t } = require('i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Button, Multiselect } = require('stremio/common');
 const SeasonsBarPlaceholder = require('./SeasonsBarPlaceholder');
 const styles = require('./styles');
@@ -49,7 +49,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
     return (
         <div className={classnames(className, styles['seasons-bar-container'])}>
             <Button className={styles['prev-season-button']} title={'Previous season'} data-action={'prev'} onClick={prevNextButtonOnClick}>
-                <Icon className={styles['icon']} icon={'ic_arrow_thin_left'} />
+                <Icon className={styles['icon']} name={'chevron-back'} />
                 <div className={styles['label']}>Prev</div>
             </Button>
             <Multiselect
@@ -62,7 +62,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
             />
             <Button className={styles['next-season-button']} title={'Next season'} data-action={'next'} onClick={prevNextButtonOnClick}>
                 <div className={styles['label']}>Next</div>
-                <Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
+                <Icon className={styles['icon']} name={'chevron-forward'} />
             </Button>
         </div>
     );

src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js

@@ -3,23 +3,23 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const styles = require('./styles');
 
 const SeasonsBarPlaceholder = ({ className }) => {
     return (
         <div className={classnames(className, styles['seasons-bar-placeholder-container'])}>
             <div className={styles['prev-season-button']}>
-                <Icon className={styles['icon']} icon={'ic_arrow_thin_left'} />
+                <Icon className={styles['icon']} name={'chevron-back'} />
                 <div className={styles['label']}>Prev</div>
             </div>
             <div className={styles['seasons-popup-label-container']}>
                 <div className={styles['seasons-popup-label']}>Season 1</div>
-                <Icon className={styles['seasons-popup-icon']} icon={'ic_arrow_thin_down'} />
+                <Icon className={styles['seasons-popup-icon']} name={'caret-down'} />
             </div>
             <div className={styles['next-season-button']}>
                 <div className={styles['label']}>Next</div>
-                <Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
+                <Icon className={styles['icon']} name={'chevron-forward'} />
             </div>
         </div>
     );

src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less

@@ -12,7 +12,7 @@
         flex-direction: row;
         align-items: center;
         width: 6.5rem;
-        height: 3.5rem;
+        height: 3rem;
         padding: 0.5rem;
 
         &>:first-child {
@@ -24,7 +24,7 @@
             display: block;
             width: 1.5rem;
             height: 1.5rem;
-            fill: var(--color-placeholder-background);
+            color: var(--color-placeholder-background);
         }
 
         .label {
@@ -54,7 +54,7 @@
             width: 1rem;
             height: 1rem;
             margin-left: 1rem;
-            fill: var(--color-placeholder-background);
+            color: var(--color-placeholder-background);
         }
     }
 }

src/routes/MetaDetails/VideosList/SeasonsBar/styles.less

@@ -13,6 +13,8 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
     overflow: visible;
 
     .prev-season-button, .next-season-button {
@@ -21,21 +23,16 @@
         flex-direction: row;
         align-items: center;
         width: 6.5rem;
-        height: 3.5rem;
+        height: 3rem;
+        border-radius: 3rem;
         padding: 0.5rem;
 
         &:hover, &:focus {
-            .label {
+            background-color: var(--overlay-color);
-                color: @color-surface-light2-90;
-            }
-
-            .icon {
-                fill: @color-surface-light2-90;
-            }
         }
 
         &:focus {
-            background-color: @color-surface-light5-10;
+            background-color: var(--primary-foreground-color);
         }
 
         &>:first-child {
@@ -47,32 +44,31 @@
             max-height: 1.2em;
             font-weight: 500;
             text-align: center;
-            color: @color-surface-90;
+            color: var(--primary-foreground-color);
         }
 
         .icon {
             flex: none;
             width: 1.5rem;
             height: 1.5rem;
-            fill: @color-surface-90;
+            color: var(--primary-foreground-color);
         }
     }
 
     .seasons-popup-label-container {
         flex: 0 1 auto;
-        height: 3.5rem;
         background: none;
 
         &:hover, &:focus, &:global(.active) {
-            background-color: @color-background;
+            background-color: var(--overlay-color);
         }
 
         &>.multiselect-label {
-            color: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
 
         &>.multiselect-icon {
-            fill: @color-surface-light5-90;
+            color: var(--primary-foreground-color);
         }
 
         .multiselect-menu-container {
@@ -84,7 +80,7 @@
 
 @media only screen and (max-width: @minimum) {
     .seasons-bar-container {
-        padding-top: 0;
+        height: 6rem;
 
         .seasons-popup-label-container {
             .multiselect-menu-container {

src/routes/MetaDetails/VideosList/Video/Video.js

@@ -6,7 +6,7 @@ const classnames = require('classnames');
 const { t } = require('i18next');
 const { useServices } = require('stremio/services');
 const { useRouteFocused } = require('stremio-router');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Button, Image, Popup, useBinaryState } = require('stremio/common');
 const VideoPlaceholder = require('./VideoPlaceholder');
 const styles = require('./styles');
@@ -81,7 +81,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
                                 renderFallback={() => (
                                     <Icon
                                         className={styles['placeholder-icon']}
-                                        icon={'ic_stremio_tray'}
+                                        name={'symbol'}
                                     />
                                 )}
                             />
@@ -120,6 +120,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
                             {
                                 watched ?
                                     <div className={styles['watched-container']}>
+                                        <Icon className={styles['flag-icon']} name={'eye'} />
                                         <div className={styles['flag-label']}>Watched</div>
                                     </div>
                                     :

src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less

@@ -17,11 +17,13 @@
         .name-container {
             width: 80%;
             height: 1.2rem;
+            border-radius: var(--border-radius);
             background: var(--color-placeholder-background);
         }
 
         .released-container {
             height: 1rem;
+            border-radius: var(--border-radius);
             background: var(--color-placeholder-background);
         }
     }

src/routes/MetaDetails/VideosList/Video/styles.less

@@ -15,34 +15,41 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    padding: 0.5rem 1rem;
+    align-items: center;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-radius: var(--border-radius);
 
     &:hover,
     &:focus,
     &:global(.active) {
-        background-color: @color-background;
+        background-color: var(--overlay-color);
     }
 
     .thumbnail-container {
         flex: none;
+        position: relative;
+        border-radius: var(--border-radius);
+        overflow: hidden;
 
         .thumbnail {
             pointer-events: none;
             display: block;
-            width: 7.5rem;
             height: 5rem;
-            object-fit: contain;
+            width: 8rem;
+            object-fit: cover;
             object-position: center;
             opacity: 0.9;
+            background-color: var(--overlay-color);
         }
 
         .placeholder-icon {
             display: block;
-            width: 7.5rem;
             height: 5rem;
+            width: 8rem;
             padding: 1rem;
-            fill: @color-surface-light5;
+            color: var(--primary-foreground-color);
-            background-color: @color-surface-light5-40;
+            background-color: var(--overlay-color);
             opacity: 0.25;
         }
     }
@@ -52,20 +59,15 @@
         align-self: stretch;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
+        justify-content: center;
-        margin: 0.5rem 1rem;
+        padding: 0 0.5rem 0 1.5rem;
-
-        &:first-child {
-            height: 3rem;
-
-            .title-container {
-                max-height: 1.2em;
-            }
-        }
 
         .title-container {
-            max-height: 2.4em;
+            display: -webkit-box;
-            color: @color-surface-light5-90;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            margin-bottom: 1rem;
+            color: var(--primary-foreground-color);
         }
 
         .flex-row-container {
@@ -83,13 +85,16 @@
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 text-transform: uppercase;
-                color: @color-surface-dark5-90;
+                color: var(--primary-foreground-color);
             }
 
             .upcoming-watched-container {
                 flex: 0 1 auto;
                 display: flex;
                 flex-direction: row;
+                align-items: center;
+                height: 1.6rem;
+                border-radius: 0.3rem;
 
                 &>:nth-child(2) {
                     margin-left: 0.5rem;
@@ -98,29 +103,39 @@
                 .upcoming-container,
                 .watched-container {
                     flex: none;
-                    padding: 0.2rem 0.4rem;
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    padding: 0 0.5rem;
                     max-width: 10rem;
 
                     &:not(:only-child) {
                         max-width: 5rem;
                     }
 
+                    .flag-icon {
+                        height: 1.15rem;
+                        width: 1.15rem;
+                        margin-right: 0.25rem;
+                        color: var(--secondary-foreground-color);
+                    }
+
                     .flag-label {
                         font-size: 0.8rem;
-                        font-weight: 500;
+                        font-weight: 800;
                         white-space: nowrap;
                         text-overflow: ellipsis;
                         text-transform: uppercase;
-                        color: @color-background-90;
+                        color: var(--secondary-foreground-color);
                     }
                 }
 
                 .upcoming-container {
-                    background-color: @color-accent4;
+                    background-color: var(--secondary-accent-color);
                 }
 
                 .watched-container {
-                    background-color: @color-accent5;
+                    background-color: var(--tertiary-accent-color);
                 }
             }
         }
@@ -128,11 +143,11 @@
 
     .progress-bar-container {
         flex: 0 0 100%;
-        background-color: @color-background-light2;
+        background-color: var(--primary-accent-color);
 
         .progress-bar {
             height: 0.5rem;
-            background-color: @color-primaryvariant1;
+            background-color: var(--primary-foreground-color);
         }
     }
 
@@ -141,23 +156,22 @@
 
         .context-menu-content {
             --spatial-navigation-contain: contain;
-            background-color: @color-background-dark1;
 
             .context-menu-option-container {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                padding: 0.5rem 1rem;
+                padding: 1rem 1.5rem;
 
                 &:hover,
                 &:focus {
-                    background-color: @color-background;
+                    background-color: var(--overlay-color);
                 }
 
                 .context-menu-option-label {
                     font-size: 1rem;
-                    max-height: 2.4em;
+                    font-weight: 500;
-                    color: @color-surface-light5-90;
+                    color:var(--primary-foreground-color);
                 }
             }
         }
@@ -166,15 +180,7 @@
 
 @media only screen and (max-width: @minimum) {
     .video-container {
-
-        &:hover,
-        &:focus,
-        &:global(.active) {
-            background-color: @color-surface-light5-20;
-        }
-
         .context-menu-container {
-
             &.menu-direction-top-left,
             &.menu-direction-bottom-left {
                 right: 1.5rem;

src/routes/MetaDetails/VideosList/styles.less

@@ -32,7 +32,7 @@
             flex: none;
             font-size: 1.4rem;
             text-align: center;
-            color: @color-secondaryvariant2-light1-90;
+            color: var(--primary-foreground-color);
         }
     }
 
@@ -67,6 +67,7 @@
     .videos-container {
         flex: 1;
         align-self: stretch;
+        padding: 0 1rem;
         overflow-y: auto;
     }
 }

src/routes/MetaDetails/styles.less

@@ -17,9 +17,9 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
-    background-color: @color-background-dark2;
 
     .nav-bar {
+        z-index: 1;
         flex: none;
         align-self: stretch;
     }
@@ -38,23 +38,13 @@
         }
 
         .background-image-layer {
-            position: absolute;
+            position: fixed;
             top: 0;
             right: 0;
             bottom: 0;
             left: 0;
             z-index: -1;
-
+            background-color: var(--modal-background-color);
-            &::after {
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                z-index: 1;
-                background: @color-background-dark2-70;
-                content: "";
-            }
 
             .background-image {
                 pointer-events: none; 
@@ -63,7 +53,7 @@
                 height: 100%;
                 object-fit: cover;
                 object-position: top left;
-                opacity: 0.9;
+                opacity: 0.3;
             }
         }
 
@@ -91,13 +81,14 @@
                 align-self: stretch;
                 font-size: 2rem;
                 text-align: center;
-                color: @color-secondaryvariant2-light1-90;
+                color: var(--primary-foreground-color);
             }
         }
 
         .meta-preview {
-            flex: 0 1 40rem;
+            flex: 0 1 auto;
             align-self: stretch;
+            padding: 0 4rem 2rem 4rem;
         }
 
         .spacing {
@@ -105,9 +96,11 @@
         }
 
         .videos-list, .streams-list {
-            flex: 0 0 26.5rem;
+            flex: 0 0 28rem;
             align-self: stretch;
-            background-color: @color-background-dark5-70;
+            border-radius: var(--border-radius) 0 0 var(--border-radius);
+            background-color: rgba(0, 0, 0, 0.4);
+            backdrop-filter: blur(15px);
         }
     }
 }
@@ -130,25 +123,20 @@
 
 @media only screen and (max-width: @minimum) {
     .metadetails-container {
-        position: relative;
-        z-index: 0;
-
         .metadetails-content {
             display: block;
-            position: static;
-            z-index: initial;
             overflow-y: auto;
 
             .spacing {
                 display: none;
             }
 
-            .background-image-layer {
+            .meta-preview {
-                top: var(--horizontal-nav-bar-size);
+                padding: 0 1.5rem 2rem;
             }
 
             .videos-list, .streams-list {
-                background-color: transparent;
+                border-radius: var(--border-radius) var(--border-radius) 0 0;
             }
         }
     }