New Row put to use + style changes to match design

This commit is contained in:
Minesh Mitha 2018-10-07 17:38:49 +01:00
parent e0b15691b9
commit dba4d15a67
8 changed files with 34 additions and 12 deletions

View file

@ -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%;

View file

@ -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;
}

View file

@ -27,6 +27,8 @@
.row-labeled-label {
align-self: flex-start;
width: 100%;
color: $grey;
font-size: 12px;
}
.row-labeled-content {

View file

@ -6,6 +6,7 @@ $interactive-color: blue;
$success-color: green;
$failure-color: red;
$brand-color: #ff725d;
$grey: #a9adba;
$primary-padding: 3em;
$secondary-padding: 2em;

View file

@ -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 {
}
})()
}
<AssetTitle />
</div>
);
}
};

View file

@ -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 {
<div className='asset-information'>
{channelName && (
<Row>
<RowLabeled
<RowLabeledAlt
label={
<Label value={'Channel'} />
}
@ -39,7 +39,7 @@ class AssetInfo extends React.Component {
)}
<Row>
<RowLabeled
<RowLabeledAlt
label={
<Label value={'Share'} />
}
@ -54,7 +54,7 @@ class AssetInfo extends React.Component {
</Row>
<Row>
<RowLabeled
<RowLabeledAlt
label={
<Label value={'Link'} />
}
@ -68,7 +68,7 @@ class AssetInfo extends React.Component {
</Row>
<Row>
<RowLabeled
<RowLabeledAlt
label={
<Label value={'Embed'} />
}

View file

@ -1,11 +1,10 @@
import React from 'react';
import Row from '@components/Row';
const AssetTitle = ({ title }) => {
return (
<Row>
<h3>{title}</h3>
</Row>
<div className='asset-title-wrap'>
<h3 className='asset-title'>{title}</h3>
</div>
);
};

View file

@ -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}
>
<AssetTitle />
<VerticalSplit
top={<AssetDisplay />}
bottom={<AssetInfo />}