diff --git a/client/scss/asset-display/_asset-display.scss b/client/scss/asset-display/_asset-display.scss index b2650f75..1e7c3c87 100644 --- a/client/scss/asset-display/_asset-display.scss +++ b/client/scss/asset-display/_asset-display.scss @@ -5,6 +5,18 @@ justify-content: center; } +.asset-title-wrap { + margin-top: 90px; + .asset-title { + font-weight: normal; + font-size: 26px; + color: #2E2F31; + letter-spacing: 0; + text-align: center; + line-height: 32px; + } +} + .asset-image, .asset-video { margin : 0; max-width: 100%; diff --git a/client/scss/click-to-copy/_click-to-copy.scss b/client/scss/click-to-copy/_click-to-copy.scss index a8dc776f..ac80cda3 100644 --- a/client/scss/click-to-copy/_click-to-copy.scss +++ b/client/scss/click-to-copy/_click-to-copy.scss @@ -1,9 +1,14 @@ .click-to-copy { cursor: pointer; - border: 1px solid black; + border: none; padding: 0.5em; margin: 0; color: black; background-color: white; width: calc(100% - 1em - 2px); + font-size: 14px; + color: #2E2F31; + letter-spacing: -0.6px; + line-height: 20px; + } diff --git a/client/scss/row/_row.scss b/client/scss/row/_row.scss index fb5f3534..1789f1d6 100644 --- a/client/scss/row/_row.scss +++ b/client/scss/row/_row.scss @@ -27,6 +27,8 @@ .row-labeled-label { align-self: flex-start; width: 100%; + color: $grey; + font-size: 12px; } .row-labeled-content { diff --git a/client/scss/variables/_variables.scss b/client/scss/variables/_variables.scss index c1cb3289..b33e1cfa 100644 --- a/client/scss/variables/_variables.scss +++ b/client/scss/variables/_variables.scss @@ -6,6 +6,7 @@ $interactive-color: blue; $success-color: green; $failure-color: red; $brand-color: #ff725d; +$grey: #a9adba; $primary-padding: 3em; $secondary-padding: 2em; diff --git a/client/src/containers/AssetDisplay/view.jsx b/client/src/containers/AssetDisplay/view.jsx index e07bfa78..4259719b 100644 --- a/client/src/containers/AssetDisplay/view.jsx +++ b/client/src/containers/AssetDisplay/view.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import AssetTitle from '@containers/AssetTitle'; import ProgressBar from '@components/ProgressBar'; import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from '../../constants/asset_display_states'; @@ -63,7 +64,9 @@ class AssetDisplay extends React.Component { } })() } + + ); } }; diff --git a/client/src/containers/AssetInfo/view.jsx b/client/src/containers/AssetInfo/view.jsx index 63d8d669..5ba1f997 100644 --- a/client/src/containers/AssetInfo/view.jsx +++ b/client/src/containers/AssetInfo/view.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import Label from '@components/Label'; -import RowLabeled from '@components/RowLabeled'; +import RowLabeledAlt from '@components/RowLabeledAlt'; import Row from '@components/Row'; import SpaceBetween from '@components/SpaceBetween'; import AssetShareButtons from '@components/AssetShareButtons'; @@ -25,7 +25,7 @@ class AssetInfo extends React.Component {
{channelName && ( - } @@ -39,7 +39,7 @@ class AssetInfo extends React.Component { )} - } @@ -54,7 +54,7 @@ class AssetInfo extends React.Component { - } @@ -68,7 +68,7 @@ class AssetInfo extends React.Component { - } diff --git a/client/src/containers/AssetTitle/view.jsx b/client/src/containers/AssetTitle/view.jsx index a542c762..7821920a 100644 --- a/client/src/containers/AssetTitle/view.jsx +++ b/client/src/containers/AssetTitle/view.jsx @@ -1,11 +1,10 @@ import React from 'react'; -import Row from '@components/Row'; const AssetTitle = ({ title }) => { return ( - -

{title}

-
+
+

{title}

+
); }; diff --git a/client/src/pages/ShowAssetDetails/view.jsx b/client/src/pages/ShowAssetDetails/view.jsx index b50b3682..ed6bea8b 100644 --- a/client/src/pages/ShowAssetDetails/view.jsx +++ b/client/src/pages/ShowAssetDetails/view.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PageLayout from '@components/PageLayout'; import VerticalSplit from '@components/VerticalSplit'; -import AssetTitle from '@containers/AssetTitle'; +// import AssetTitle from '@containers/AssetTitle'; import AssetDisplay from '@containers/AssetDisplay'; import AssetInfo from '@containers/AssetInfo'; import ErrorPage from '@pages/ErrorPage'; @@ -17,7 +17,7 @@ class ShowAssetDetails extends React.Component { pageTitle={`${name} - details`} asset={asset} > - + } bottom={}