diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index ae0c7d498..f0da1788a 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -1,10 +1,20 @@
const React = require('react');
-const classnames = require('classnames');
const { MainNavBar } = require('stremio/common');
const BoardRow = require('./BoardRow');
const useCatalogs = require('./useCatalogs');
const styles = require('./styles');
+const CONTINUE_WATCHING_MENU = [
+ {
+ label: 'Play',
+ type: 'play'
+ },
+ {
+ label: 'Dismiss',
+ type: 'dismiss'
+ }
+];
+
const Board = () => {
const catalogs = useCatalogs();
return (
@@ -14,9 +24,7 @@ const Board = () => {
{catalogs.map((catalog) => (
diff --git a/src/routes/Board/BoardRow/BoardRow.js b/src/routes/Board/BoardRow.js
similarity index 68%
rename from src/routes/Board/BoardRow/BoardRow.js
rename to src/routes/Board/BoardRow.js
index 60d5f4d0c..0e8dfa244 100644
--- a/src/routes/Board/BoardRow/BoardRow.js
+++ b/src/routes/Board/BoardRow.js
@@ -5,18 +5,7 @@ const { Input } = require('stremio-navigation');
const { MetaItem } = require('stremio/common');
const styles = require('./styles');
-const CONTINUE_WATCHING_MENU = [
- {
- label: 'Play',
- type: 'play'
- },
- {
- label: 'Dismiss',
- type: 'dismiss'
- }
-];
-
-const BoardRow = ({ className, metaItemClassName, menuClassName, title, items }) => {
+const BoardRow = ({ className, title, items, itemMenuOptions }) => {
return (
@@ -27,10 +16,10 @@ const BoardRow = ({ className, metaItemClassName, menuClassName, title, items })
))}
diff --git a/src/routes/Board/BoardRow/index.js b/src/routes/Board/BoardRow/index.js
deleted file mode 100644
index 7ce90b72b..000000000
--- a/src/routes/Board/BoardRow/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const BoardRow = require('./BoardRow');
-
-module.exports = BoardRow;
diff --git a/src/routes/Board/BoardRow/styles.less b/src/routes/Board/BoardRow/styles.less
deleted file mode 100644
index 9d467e593..000000000
--- a/src/routes/Board/BoardRow/styles.less
+++ /dev/null
@@ -1,84 +0,0 @@
-.board-row-container {
- display: grid;
- padding: 0 1em;
- grid-template-columns: 6fr 1fr;
- grid-template-areas:
- "title-area title-area"
- "meta-items-area show-more-area";
-
- .title-container {
- grid-area: title-area;
- padding: 0 1em;
-
- .title {
- font-size: 1.5em;
- line-height: 1.2em;
- max-height: 2.4em;
- color: var(--color-surfacelighter);
- text-transform: capitalize;
- }
- }
-
- .meta-items-container {
- grid-area: meta-items-area;
- display: flex;
- flex-direction: row;
- align-items: stretch;
-
- .meta-item {
- margin: 1em;
-
- &.poster-shape-square {
- flex: 1;
- }
-
- &.poster-shape-landscape {
- flex: calc(1 / var(--landscape-shape-ratio));
- }
-
- &.poster-shape-poster {
- flex: calc(1 / var(--poster-shape-ratio));
- }
- }
- }
-
- .show-more-container {
- grid-area: show-more-area;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- margin: 1em;
- padding: 0.5em;
- background-color: var(--color-backgroundlight);
- cursor: pointer;
-
- &:hover, &:focus {
- background-color: var(--color-backgroundlighter);
-
- .label {
- color: var(--color-surfacelighter);
- }
-
- .icon {
- fill: var(--color-surfacelighter);
- }
- }
-
- .label {
- font-size: 1.2em;
- line-height: 1.2em;
- max-height: 3.6em;
- color: var(--color-surfacelight);
- text-align: center;
- }
-
- .icon {
- flex: none;
- width: 1.3em;
- height: 1.3em;
- margin-left: 0.3em;
- fill: var(--color-surfacelight);
- }
- }
-}
\ No newline at end of file
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index fc0c1084c..d3bef91ed 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -43,6 +43,89 @@
.board-row {
width: 100%;
margin: 2em 0;
+ display: grid;
+ padding: 0 1em;
+ grid-template-columns: 6fr 1fr;
+ grid-template-areas:
+ "title-area title-area"
+ "meta-items-area show-more-area";
+
+ .title-container {
+ grid-area: title-area;
+ padding: 0 1em;
+
+ .title {
+ font-size: 1.5em;
+ line-height: 1.2em;
+ max-height: 2.4em;
+ color: var(--color-surfacelighter);
+ text-transform: capitalize;
+ }
+ }
+
+ .meta-items-container {
+ grid-area: meta-items-area;
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+
+ .meta-item {
+ margin: 1em;
+
+ &.poster-shape-square {
+ flex: 1;
+ }
+
+ &.poster-shape-landscape {
+ flex: calc(1 / var(--landscape-shape-ratio));
+ }
+
+ &.poster-shape-poster {
+ flex: calc(1 / var(--poster-shape-ratio));
+ }
+ }
+ }
+
+ .show-more-container {
+ grid-area: show-more-area;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ margin: 1em;
+ padding: 0.5em;
+ background-color: var(--color-backgroundlight);
+ cursor: pointer;
+
+ &:hover, &:focus {
+ background-color: var(--color-backgroundlighter);
+
+ .label {
+ color: var(--color-surfacelighter);
+ }
+
+ .icon {
+ fill: var(--color-surfacelighter);
+ }
+ }
+
+ .label {
+ font-size: 1.2em;
+ line-height: 1.2em;
+ max-height: 3.6em;
+ color: var(--color-surfacelight);
+ text-align: center;
+ }
+
+ .icon {
+ flex: none;
+ width: 1.3em;
+ height: 1.3em;
+ margin-left: 0.3em;
+ fill: var(--color-surfacelight);
+ }
+ }
+
}
}
-}
\ No newline at end of file
+}