From a95f8350388fcef8c056d5ff7095c187fb2765cb Mon Sep 17 00:00:00 2001
From: Leopold Joy <leo@leopoldjoy.com>
Date: Thu, 8 Nov 2018 14:16:51 -0500
Subject: [PATCH] fix label and control dialog spacing and sizing on zoom

---
 src/components/Annotation.js              |  6 ++++--
 src/components/Content/index.js           |  7 ++++++-
 src/components/Editor/index.js            |  1 +
 src/components/RadioButtonEditor/index.js | 18 +++++++-----------
 src/components/defaultProps.js            |  6 ++++--
 5 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/components/Annotation.js b/src/components/Annotation.js
index da8b837..0c7380a 100644
--- a/src/components/Annotation.js
+++ b/src/components/Annotation.js
@@ -285,7 +285,8 @@ export default compose(
           && (
             renderContent({
               key: annotation.data.id,
-              annotation: annotation
+              annotation: annotation,
+              imageZoomAmount: props.imageZoomAmount
             })
           )
         ))}
@@ -297,7 +298,8 @@ export default compose(
             renderEditor({
               annotation: props.value,
               onChange: props.onChange,
-              onSubmit: this.onSubmit
+              onSubmit: this.onSubmit,
+              imageZoomAmount: props.imageZoomAmount
             })
           )
         }
diff --git a/src/components/Content/index.js b/src/components/Content/index.js
index 9df2c45..8f3ee39 100644
--- a/src/components/Content/index.js
+++ b/src/components/Content/index.js
@@ -14,12 +14,15 @@ const Container = styled.div`
   margin-top: 8px;
   margin-left: -50%;
   margin-right: 50%;
+  color: #363636!important;
 `
 
 function Content (props) {
   const { geometry } = props.annotation
   if (!geometry) return null
 
+  const zoomBetweenHalfAndOne = Math.abs(props.imageZoomAmount - 2) / 2;
+
   return (
     <div
       style={{
@@ -32,7 +35,9 @@ function Content (props) {
       className={props.className}
       geometry={geometry}
     >
-      <Container>
+      <Container
+        style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}
+      >
         {props.annotation.data && props.annotation.data.age}
         {' - '}
         {props.annotation.data && props.annotation.data.renovationType}
diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js
index dfe0a9d..2501013 100644
--- a/src/components/Editor/index.js
+++ b/src/components/Editor/index.js
@@ -67,6 +67,7 @@ function Editor (props) {
             onSubmit={props.onSubmit}
             ageValue={props.annotation.data && props.annotation.data.age}
             renovationTypeValue={props.annotation.data && props.annotation.data.renovationType}
+            imageZoomAmount={props.imageZoomAmount}
           />
         }
         {(geometry.type !== PolygonSelector.TYPE) &&
diff --git a/src/components/RadioButtonEditor/index.js b/src/components/RadioButtonEditor/index.js
index 36077c7..822bf71 100644
--- a/src/components/RadioButtonEditor/index.js
+++ b/src/components/RadioButtonEditor/index.js
@@ -3,14 +3,7 @@ import styled, { keyframes } from 'styled-components'
 
 const Inner = styled.div`
   padding: 8px 16px;
-
-  textarea {
-    border: 0;
-    font-size: 14px;
-    margin: 6px 0;
-    min-height: 60px;
-    outline: 0;
-  }
+  color: #363636!important;
 `
 
 const Button = styled.div`
@@ -35,10 +28,12 @@ const Button = styled.div`
 `
 
 function RadioButtonEditor (props) {
+  const zoomBetweenHalfAndOne = Math.abs(props.imageZoomAmount - 2) / 2;
+
   return (
     <React.Fragment>
-      <Inner>
-        <div><h6 style={{margin: '6px 0'}}> - Coffee Age - </h6></div>
+      <Inner style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}>
+        <div><h6 style={{margin: '0px 0px', textAlign: 'center'}}> - Coffee Age - </h6></div>
         <div>
           <label><input type="radio"
             name="age" 
@@ -56,7 +51,7 @@ function RadioButtonEditor (props) {
           /> Mature</label>
         </div>
 
-        <div><h6 style={{margin: '6px 0'}}> - Renovation Type - </h6></div>
+        <div><h6 style={{margin: '0px 0px', textAlign: 'center'}}> - Renovation Type - </h6></div>
         <div>
           <label><input type="radio"
             name="renovationType" 
@@ -77,6 +72,7 @@ function RadioButtonEditor (props) {
       {(props.ageValue && props.ageValue.length > 0 && props.renovationTypeValue && props.renovationTypeValue.length > 0) &&
         <Button
           onClick={props.onSubmit}
+          style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}
         >
           Submit
         </Button>
diff --git a/src/components/defaultProps.js b/src/components/defaultProps.js
index afac866..d461f86 100644
--- a/src/components/defaultProps.js
+++ b/src/components/defaultProps.js
@@ -64,11 +64,12 @@ export default {
         return null
     }
   },
-  renderEditor: ({ annotation, onChange, onSubmit }) => (
+  renderEditor: ({ annotation, onChange, onSubmit, imageZoomAmount }) => (
     <Editor
       annotation={annotation}
       onChange={onChange}
       onSubmit={onSubmit}
+      imageZoomAmount={imageZoomAmount}
     />
   ),
   renderPolygonControls: ({ annotation, onSelectionComplete, onSelectionClear, onSelectionUndo, imageZoomAmount }) => (
@@ -118,10 +119,11 @@ export default {
         return null
     }
   },
-  renderContent: ({ key, annotation }) => (
+  renderContent: ({ key, annotation, imageZoomAmount }) => (
     <Content
       key={key}
       annotation={annotation}
+      imageZoomAmount={imageZoomAmount}
     />
   ),
   renderOverlay: ({ type, annotation }) => {