Merge pull request #222 from futurice/style-and-accessibility-adjustm…

…ents Style and accessibility adjustments
futurice · Apr 9, 2020 · ef7539d · ef7539d
2 parents 010ed82 + 665bf2c
commit ef7539d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/src/frontend/main/Header.tsx b/src/frontend/main/Header.tsx
@@ -42,8 +42,8 @@ const HeaderContainer = styled.div<headerContainerProps>`
 `;
 
 const LogoImage = styled.img`
-  height: 55px;
-  width: auto;
+  height: auto;
+  width: 154px;
 `;
 
 const Nav = styled.nav`

diff --git a/src/frontend/main/MapView.tsx b/src/frontend/main/MapView.tsx
@@ -100,7 +100,9 @@ const FilterWrapper = styled.div`
 
 const FilterButton = styled(PrimaryButton)<FilterButtonProps>`
   flex: 0 0 auto;
-  margin-right: 16px;
+  margin-right: 8px;
+  padding: 8px 16px;
+  height: 35px;
   background: ${props => (props.isActive ? '#FFF' : '#595959')};
   color: ${props => (props.isActive ? '#000' : '#FFF')};
   border: ${props => (props.isActive ? '1px solid #000' : '1px solid transparent')};
@@ -142,9 +144,15 @@ const CloseButton = styled.button`
   border: none;
   background-color: transparent;
   position: absolute;
-  top: 13px;
-  right: 4px;
+  top: 0;
+  right: 0;
   z-index: 1;
+  padding: 16px;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
 `;
 
 const MapView = (props: RouteComponentProps) => {
@@ -298,7 +306,7 @@ const MapView = (props: RouteComponentProps) => {
                 <CloseButton
                   type="button"
                   data-dismiss="modal"
-                  aria-label="Close"
+                  aria-label="Sulje"
                   onClick={() => setShowMapInfo(false)}
                 >
                   <CloseIcon />

diff --git a/src/frontend/main/Modal.tsx b/src/frontend/main/Modal.tsx
@@ -37,7 +37,7 @@ const ModalContent = styled.div`
   pointer-events: auto;
   z-index: 100;
   background: white;
-  padding: 32px 18px 24px;
+  padding: 24px 18px 24px;
   width: 100%;
   max-height: 90vh;
   max-width: 90vw;
@@ -53,14 +53,19 @@ const ModalContent = styled.div`
 `;
 
 const ModalCloseButton = styled.button`
-  padding: 10px;
+  padding: 16px;
   cursor: pointer;
   border: none;
   background-color: transparent;
   position: absolute;
-  right: 12px;
-  top: 22px;
+  right: 8px;
+  top: 12px;
   z-index: 1;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
 `;
 
 const CloseButton = styled(PrimaryButton)`
@@ -77,13 +82,13 @@ const Modal: React.FC<ModalProps> = ({ isShowing, hide, children }) =>
     ? ReactDOM.createPortal(
         <>
           <ModalOverlay onClick={hide} />
-          <ModalWrapper aria-modal aria-hidden tabIndex={-1} role="dialog">
+          <ModalWrapper aria-modal tabIndex={-1} role="dialog">
             <ModalContent>
-              <ModalCloseButton type="button" data-dismiss="modal" aria-label="Close" onClick={hide}>
+              <ModalCloseButton type="button" data-dismiss="modal" aria-label="Sulje" onClick={hide}>
                 <CloseIcon />
               </ModalCloseButton>
               {children}
-              <CloseButton type="button" data-dismiss="modal" aria-label="Close" label="Sulje" handleClick={hide} />
+              <CloseButton type="button" data-dismiss="modal" aria-label="Sulje" label="Sulje" handleClick={hide} />
             </ModalContent>
           </ModalWrapper>
         </>,