Various modal improvements

Author: dcramer

src/components/CameraModal.js

@@ -18,10 +18,17 @@ const CameraViewerContainer = styled.div`
 const CameraListContainer = styled.div`
   grid-area: sidebar;
   font-size: 11pt;
+
+  h3 {
+    margin: 0;
+    padding: 20px;
+  }
+
   ul {
     list-style: none;
     padding: 0;
     margin: 0;
+    width: 100%;
 
     li {
       cursor: pointer;
@@ -60,6 +67,7 @@ export default ({ hass, entityId, cameraList, isOpen, onRequestClose }) => {
           onRequestClose={onRequestClose}
         />
         <CameraListContainer>
+          <h3>Cameras Available</h3>
           <ul>
             {cameraList.map((entityId) => {
               const {

src/components/Modal.js

@@ -16,7 +16,7 @@ export const UnstyledModalHeader = ({
   return (
     <div className={`${className} modal-header`}>
       <TransparentButton onClick={onRequestClose}>
-        <Icon name="close" size="24" />
+        <Icon name="close" size="42" />
       </TransparentButton>
       {title && <h2>{title}</h2>}
       {children}
@@ -28,7 +28,6 @@ export const ModalHeader = styled(UnstyledModalHeader)`
   grid-area: header;
   display: flex;
   align-items: center;
-  padding: 20px;
   border-bottom: 1px solid var(--bg-color);
 
   ${(props) =>
@@ -44,10 +43,25 @@ export const ModalHeader = styled(UnstyledModalHeader)`
     `}
 
   button {
-    display: inline-block;
-    width: 24px;
-    height: 24px;
-    margin-right: 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 60px;
+    height: 100%;
+    background: var(--bg-color);
+
+    ${(props) =>
+      props.small &&
+      css`
+        width: 40px;
+        padding: 6px;
+      `}
+
+    ${(props) =>
+      props.light &&
+      css`
+        background: inherit;
+      `}
   }
 
   button svg {
@@ -58,6 +72,13 @@ export const ModalHeader = styled(UnstyledModalHeader)`
   h2 {
     display: inline-block;
     margin: 0;
+    padding: 20px;
+
+    ${(props) =>
+      props.small &&
+      css`
+        padding: 6px;
+      `}
   }
 `;