move required label to the left column

src/common-elements/fields.ts

@@ -4,7 +4,6 @@ import { transparentizeHex } from '../utils/styled';
 
 export const ClickablePropertyNameCell = PropertyNameCell.extend`
   cursor: pointer;
-  font-weight: bold;
 `;
 
 export const FieldLabel = styled.span`
@@ -26,10 +25,13 @@ export const TypeTitle = styled(FieldLabel)`
 
 export const TypeFormat = TypeName;
 
-export const RequiredLabel = styled(FieldLabel)`
+export const RequiredLabel = styled(FieldLabel.withComponent('div'))`
   color: #e53935;
-  font-size: 13px;
+  font-size: 11px;
-  font-weight: bold;
+  font-weight: normal;
+  margin-left: 20px;
+  line-height: 1;
+  font-weight: normal;
 `;
 
 export const RecursiveLabel = styled(FieldLabel)`

src/components/Fields/Field.tsx

@@ -1,7 +1,7 @@
 import { FieldDetails } from './FieldDetails';
 import * as React from 'react';
 
-import { ClickablePropertyNameCell } from '../../common-elements/fields';
+import { ClickablePropertyNameCell, RequiredLabel } from '../../common-elements/fields';
 
 import {
   PropertyBullet,
@@ -27,7 +27,7 @@ export interface FieldProps {
 export class Field extends React.PureComponent<FieldProps> {
   render() {
     const { className, field, isLast } = this.props;
-    const { name, expanded, deprecated } = field;
+    const { name, expanded, deprecated, required } = field;
 
     const paramName = this.props.onClick ? (
       <ClickablePropertyNameCell
@@ -37,11 +37,13 @@ export class Field extends React.PureComponent<FieldProps> {
         <PropertyBullet />
         {name}
         <ShelfIcon size={'1.2em'} direction={expanded ? 'down' : 'right'} />
+        {required && <RequiredLabel> required </RequiredLabel>}
       </ClickablePropertyNameCell>
     ) : (
       <PropertyNameCell className={deprecated ? 'deprecated' : undefined}>
         <PropertyBullet />
         {name}
+        {required && <RequiredLabel> required </RequiredLabel>}
       </PropertyNameCell>
     );
     return (

src/components/Fields/FieldDetails.tsx

@@ -9,7 +9,6 @@ import {
   RecursiveLabel,
   NullableLabel,
   PatternLabel,
-  RequiredLabel,
   TypeFormat,
   TypeName,
   TypeTitle,
@@ -22,7 +21,7 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
   render() {
     const { showExamples, field, renderDiscriminatorSwitch } = this.props;
 
-    const { schema, description, required, example, deprecated } = field;
+    const { schema, description, example, deprecated } = field;
 
     return (
       <div>
@@ -39,7 +38,6 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
           <ConstraintsView constraints={schema.constraints} />
           {schema.nullable && <NullableLabel> Nullable </NullableLabel>}
           {schema.pattern && <PatternLabel>{schema.pattern}</PatternLabel>}
-          {required && <RequiredLabel> Required </RequiredLabel>}
           {schema.isCircular && <RecursiveLabel> Recursive </RecursiveLabel>}
         </div>
         {deprecated && (