Improved style of boolean checkbox component

src/components/Col/index.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 
 const Col = styled.div`
-  ${props => props.width
+  ${props => !props.noWidth && (props.width
     ? `flex: 0 0 ${props.width};`
-    : `flex: 1;`
+    : `flex: 1;`)
 }
 
   padding-right: 1rem;

src/components/ErrorOverlay/index.js

@@ -3,6 +3,8 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import OverlayModal from '../OverlayModal'
 import Button from '../Button'
+import Col from '../Col'
+import Row from '../Row'
 import Control from '../../containers/Control'
 
 const ErrorMessage = styled.p`
@@ -17,6 +19,15 @@ const Wrapper = styled.div`
   user-select: text;
 `
 
+const PopupControl = styled(Row)`
+  margin-top: 1rem;
+  font-size: 0.7rem;
+  background: rgba(100,100,100,0.5);
+  border-radius: 2px;
+  padding: 0.5rem;
+  text-align: left;
+`
+
 const ErrorOverlay = ({ isVisible, onCancelClick, code, message, onChooseSketchFolderClick }) => {
   let inner = <p>Whoops!</p>
   let showPopupControl = true
@@ -45,10 +56,10 @@ const ErrorOverlay = ({ isVisible, onCancelClick, code, message, onChooseSketchF
       <ErrorMessage>{message}</ErrorMessage>
 
       {
-        showPopupControl && <>
-          <p>Stop errors from popping up (Can be enabled again in settings)</p>
-          <Control nodeId='areErrorPopupsDisabled' />
-        </>
+        showPopupControl && <PopupControl>
+          <Col width='2rem'><Control nodeId='areErrorPopupsDisabled' /></Col>
+          <Col noWidth>Stop errors from popping up (Can be enabled again in settings)</Col>
+        </PopupControl>
       }
 
     </OverlayModal>

src/components/Settings/index.js

@@ -51,8 +51,10 @@ const Settings = () => (
       </Row>
       <h2>GUI</h2>
       <Row>
-        <Col width='8rem'>
+        <Col noWidth>
           <p>Disable Error Popups</p>
+        </Col>
+        <Col width='1rem'>
           <Control nodeId='areErrorPopupsDisabled' />
         </Col>
       </Row>