fix(ui-toolkit,cp-frontend): bold label only in Form

This commit is contained in:
Sérgio Ramos 2017-09-07 17:51:34 +01:00 committed by Sérgio Ramos
parent 1ac0848ce2
commit 1384d5b50a
4 changed files with 14 additions and 10 deletions

View File

@ -1,11 +1,13 @@
import React from 'react'; import React from 'react';
import { FormMeta, Button, Label } from 'joyent-ui-toolkit'; import { FormGroup, FormMeta, Button, FormLabel } from 'joyent-ui-toolkit';
import { Row } from 'react-styled-flexboxgrid'; import { Row } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import { MEditor } from './editors'; import { MEditor } from './editors';
const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`; const ButtonsRow = Row.extend`
margin: ${remcalc(29)} 0 ${remcalc(60)} 0;
`;
export const Manifest = ({ export const Manifest = ({
handleSubmit, handleSubmit,
@ -15,10 +17,12 @@ export const Manifest = ({
loading loading
}) => ( }) => (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<FormMeta left> <FormGroup reduxForm>
<Label>Project manifest</Label> <FormMeta left>
</FormMeta> <FormLabel>Project manifest</FormLabel>
<Field name="manifest" defaultValue={defaultValue} component={MEditor} /> </FormMeta>
<Field name="manifest" defaultValue={defaultValue} component={MEditor} />
</FormGroup>
<ButtonsRow> <ButtonsRow>
<Button type="button" onClick={onCancel} secondary> <Button type="button" onClick={onCancel} secondary>
Cancel Cancel
@ -34,4 +38,4 @@ export const Manifest = ({
</form> </form>
); );
export default Manifest; export default Manifest;

View File

@ -5,7 +5,7 @@ import remcalc from 'remcalc';
import { import {
FormMeta, FormMeta,
Button, Button,
Label, FormLabel,
Input, Input,
Small, Small,
FormGroup FormGroup
@ -19,7 +19,7 @@ export const Name = ({ handleSubmit, onCancel, dirty }) => (
<Col xs={12} md={4} lg={4}> <Col xs={12} md={4} lg={4}>
<FormGroup name="name" reduxForm> <FormGroup name="name" reduxForm>
<FormMeta left> <FormMeta left>
<Label>Name the new deployment group</Label> <FormLabel>Name the new deployment group</FormLabel>
<Small> <Small>
Your services will be deployed to eu-east-1 data center. Your services will be deployed to eu-east-1 data center.
</Small> </Small>

View File

@ -5,6 +5,7 @@ import Label from '../label';
const StyledLabel = Label.extend` const StyledLabel = Label.extend`
margin-right: ${remcalc(12)}; margin-right: ${remcalc(12)};
font-weight: bold;
`; `;
export default props => { export default props => {

View File

@ -10,7 +10,6 @@ const Label = styled.label`
font-size: ${remcalc(15)}; font-size: ${remcalc(15)};
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block; display: block;
color: ${props => props.theme.secondary}; color: ${props => props.theme.secondary};
`; `;