From a93281396891d601e5d5a5606813891b454a0fb0 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Fri, 31 Jul 2020 15:44:55 -0400
Subject: [PATCH] #6 Metadata Edit View styling

---
 .../MetadataEditView/MetadataEditView.js      |  4 +-
 src/components/_library/Fieldset/Fieldset.js  | 39 +++++++++++++++----
 src/components/_library/Fieldset/styles.js    | 16 ++++++++
 3 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/components/MetadataEditView/MetadataEditView.js b/src/components/MetadataEditView/MetadataEditView.js
index b40bdbf..eb2f9af 100644
--- a/src/components/MetadataEditView/MetadataEditView.js
+++ b/src/components/MetadataEditView/MetadataEditView.js
@@ -29,9 +29,9 @@ const MetadataEditView = ({
 		<ScrollContainer>
 			<Content>
 				{data.map(({ values, groupLabel }) => (
-					<Fieldset title={groupLabel} key={groupLabel}>
+					<Fieldset title={groupLabel} key={groupLabel} mode="edit">
 						{values.map(({ label, ValueComponent = DefaultValueComponent, value }) => (
-							<MetadataRow key={label} label={label}>
+							<MetadataRow key={label} label={label} mode="edit">
 								{Array.isArray(value)
 									? value.map(({ name, ...props }) => (
 										<ValueComponent
diff --git a/src/components/_library/Fieldset/Fieldset.js b/src/components/_library/Fieldset/Fieldset.js
index ab50b58..7ab82d1 100644
--- a/src/components/_library/Fieldset/Fieldset.js
+++ b/src/components/_library/Fieldset/Fieldset.js
@@ -1,22 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Headline from '../Headline';
-import { Container, Legend } from './styles';
+import {
+	Container, Legend, EditLegend, EditContainer,
+} from './styles';
 
-const Fieldset = ({ title, children }) => (
+const Fieldset = ({ title, children, mode }) => (
 	<Container>
-		<Legend>
-			<Headline variant="h5">
-				{title}
-			</Headline>
-		</Legend>
-		{children}
+		{mode === 'edit'
+			? (
+				<EditContainer>
+					<EditLegend>
+						<Headline variant="h5">
+							{title}
+						</Headline>
+					</EditLegend>
+					{children}
+				</EditContainer>
+			)
+			: (
+				<>
+					<Legend>
+						<Headline variant="h5">
+							{title}
+						</Headline>
+					</Legend>
+					{children}
+				</>
+			)
+		}
 	</Container>
 );
 
 Fieldset.propTypes = {
 	title: PropTypes.string.isRequired,
 	children: PropTypes.node.isRequired,
+	mode: PropTypes.oneOf(['edit', 'display']),
+};
+
+Fieldset.defaultProps = {
+	mode: 'display',
 };
 
 export default Fieldset;
diff --git a/src/components/_library/Fieldset/styles.js b/src/components/_library/Fieldset/styles.js
index 2244853..7af7b74 100644
--- a/src/components/_library/Fieldset/styles.js
+++ b/src/components/_library/Fieldset/styles.js
@@ -14,3 +14,19 @@ export const Legend = styled.legend`
 	margin-bottom: 1rem;
 	display: block;
 `;
+
+export const EditLegend = styled.legend`
+	margin-bottom: 1rem;
+	display: block;
+	background-color: white;
+	border: 1px solid #dee2e6;
+	border-radius: 5px;
+	padding: 0.75rem 1rem 0 1rem;
+`;
+
+export const EditContainer = styled.fieldset`
+	background-color: whitesmoke;
+	padding: 1rem 2rem 2rem 2rem;
+	border: 1px solid #dee2e6;
+	border-radius: 5px;
+`;