From ed8dc62d32d391b5f2a55cbfabe2715364a3bf41 Mon Sep 17 00:00:00 2001
From: Jon Nicholson <me@drjonnicholson.com>
Date: Fri, 15 Mar 2019 11:18:10 +0000
Subject: [PATCH] Remove opacity, grab ExtensionValue from fields.ts

---
 src/common-elements/fields.ts        | 2 ++
 src/components/Fields/Extensions.tsx | 9 +++------
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
index 4fc3c12c..9ab3a929 100644
--- a/src/common-elements/fields.ts
+++ b/src/common-elements/fields.ts
@@ -88,6 +88,8 @@ export const ExampleValue = styled(FieldLabel)`
   ${extensionsHook('ExampleValue')};
 `;
 
+export const ExtensionValue = styled(ExampleValue)``;
+
 export const ConstraintItem = styled(FieldLabel)`
   border-radius: 2px;
   ${({ theme }) => `
diff --git a/src/components/Fields/Extensions.tsx b/src/components/Fields/Extensions.tsx
index 187e1422..9825d0b6 100644
--- a/src/components/Fields/Extensions.tsx
+++ b/src/components/Fields/Extensions.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { FieldLabel } from '../../common-elements/fields';
+import { FieldLabel, ExtensionValue } from '../../common-elements/fields';
 
 import styled from '../../styled-components';
 
@@ -9,7 +9,6 @@ import { OptionsContext } from '../OptionsProvider';
 import { StyledMarkdownBlock } from '../Markdown/styled.elements';
 
 const Extension = styled(StyledMarkdownBlock)`
-  opacity: 0.9;
   margin: 2px 0;
 `;
 
@@ -28,10 +27,8 @@ export class Extensions extends React.PureComponent<ExtensionsProps> {
             {options.showExtensions &&
               Object.keys(this.props.extensions).map(key => (
                 <Extension key={key}>
-                  <FieldLabel>{key.substring(2)}:</FieldLabel>{' '}
-                  <code>
-                    {JSON.stringify(this.props.extensions[key]).replace(/(^")|("$)/g, '')}
-                  </code>
+                  <FieldLabel>{key.substring(2)}:</FieldLabel>
+                  <ExtensionValue>{JSON.stringify(this.props.extensions[key]).replace(/(^")|("$)/g, '')}</ExtensionValue>
                 </Extension>
               ))}
           </>