diff --git a/lbrytv/component/fileViewerEmbeddedEnded/view.jsx b/lbrytv/component/fileViewerEmbeddedEnded/view.jsx index ba0704c98..647925f7a 100644 --- a/lbrytv/component/fileViewerEmbeddedEnded/view.jsx +++ b/lbrytv/component/fileViewerEmbeddedEnded/view.jsx @@ -36,12 +36,7 @@ function FileViewerEmbeddedEnded(props: Props) { return (
-
{prompt}
diff --git a/ui/component/fileViewerEmbeddedTitle/view.jsx b/ui/component/fileViewerEmbeddedTitle/view.jsx index e05dd735d..18c375602 100644 --- a/ui/component/fileViewerEmbeddedTitle/view.jsx +++ b/ui/component/fileViewerEmbeddedTitle/view.jsx @@ -1,6 +1,7 @@ // @flow import React from 'react'; import Button from 'component/button'; +import FilePrice from 'component/filePrice'; import { formatLbryUrlForWeb } from 'util/url'; import { withRouter } from 'react-router'; import { URL } from 'config'; @@ -25,13 +26,12 @@ function FileViewerEmbeddedTitle(props: Props) { const lbryLinkProps = isInApp ? { navigate: '/' } : { href: URL }; return ( -
-
); } diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss index 5454fbfcb..388a2fe40 100644 --- a/ui/scss/component/_file-render.scss +++ b/ui/scss/component/_file-render.scss @@ -197,11 +197,11 @@ } } -.file-viewer--is-playing:not(:hover) .file-viewer__embedded-title { +.file-viewer--is-playing:not(:hover) .file-viewer__embedded-header { display: none; } -.file-viewer__embedded-title { +.file-viewer__embedded-header { position: absolute; display: flex; justify-content: space-between; @@ -226,14 +226,32 @@ &:hover { color: var(--color-white); } + } - &:first-of-type { - max-width: 90%; + .credit-amount, + .icon--Key { + margin-right: var(--spacing-medium); + } +} - @media (max-width: $breakpoint-small) { - max-width: 80%; - } - } +.file-viewer__embedded-title { + max-width: 75%; + + @media (max-width: $breakpoint-small) { + max-width: 50%; + font-size: var(--font-small); + } +} + +.file-viewer__embedded-info { + display: flex; + align-items: center; + font-size: var(--font-small); + margin-left: var(--spacing-medium); + white-space: nowrap; + + & > *:not(:last-child) { + margin-right: var(--spacing-small); } } diff --git a/ui/scss/component/_purchase.scss b/ui/scss/component/_purchase.scss index 36bde76f3..0ef2d1aae 100644 --- a/ui/scss/component/_purchase.scss +++ b/ui/scss/component/_purchase.scss @@ -5,7 +5,7 @@ color: var(--color-purchased-text); .credit-amount, - .icon { + .icon--Key { position: relative; margin-left: var(--spacing-medium); white-space: nowrap;