From c915b7741f2a4c081eecd84a05839ae6f7df4fde Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Thu, 2 Jul 2020 21:56:28 +0200
Subject: [PATCH] Use relative font-size unit

For improved accessibility
---
 ui/src/App.js                                |  5 +++++
 ui/src/components/header/Searchbar.js        |  6 +++---
 ui/src/components/sidebar/PhotoSidebar.js    | 21 ++++++++++++--------
 ui/src/components/sidebar/SidebarDownload.js |  2 +-
 ui/src/components/sidebar/SidebarItem.js     |  5 +++--
 5 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/ui/src/App.js b/ui/src/App.js
index 28263c6..f834678 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -5,9 +5,14 @@ import Routes from './Routes'
 import Messages from './components/messages/Messages'
 
 const GlobalStyle = createGlobalStyle`
+  html {
+    font-size: 0.85rem;
+  }
+
   #root, body {
     height: 100%;
     margin: 0;
+    font-size: inherit;
   }
 
   /* Make dimmer lighter */
diff --git a/ui/src/components/header/Searchbar.js b/ui/src/components/header/Searchbar.js
index 391aaa7..0304a1b 100644
--- a/ui/src/components/header/Searchbar.js
+++ b/ui/src/components/header/Searchbar.js
@@ -21,7 +21,7 @@ const SearchField = styled.input`
   border: 1px solid #eee;
   border-radius: 4px;
   padding: 0 8px;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
   &:focus {
@@ -120,8 +120,8 @@ const SearchBar = () => {
 }
 
 const ResultTitle = styled.h1`
-  font-size: 20px;
-  margin: 12px 0 4px;
+  font-size: 1.25rem;
+  margin: 12px 0 0.25rem;
 `
 
 const SearchResults = ({ result }) => {
diff --git a/ui/src/components/sidebar/PhotoSidebar.js b/ui/src/components/sidebar/PhotoSidebar.js
index 129f482..bdc310c 100644
--- a/ui/src/components/sidebar/PhotoSidebar.js
+++ b/ui/src/components/sidebar/PhotoSidebar.js
@@ -36,18 +36,18 @@ const photoQuery = gql`
 
 const PreviewImage = styled(ProtectedImage)`
   width: 100%;
-  height: 333px;
+  height: ${({ imageAspect }) => imageAspect * 100}%;
   object-fit: contain;
 `
 
 const Name = styled.div`
   text-align: center;
-  font-size: 16px;
-  margin-bottom: 12px;
+  font-size: 1.2rem;
+  margin: 0.75rem 0 1rem;
 `
 
 const ExifInfo = styled.div`
-  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
 `
 
 const exifNameLookup = {
@@ -109,15 +109,20 @@ const SidebarContent = ({ photo, hidePreview }) => {
     ))
   }
 
-  let previewUrl = null
+  let previewImage = null
   if (photo) {
-    if (photo.highRes) previewUrl = photo.highRes.url
-    else if (photo.thumbnail) previewUrl = photo.thumbnail.url
+    if (photo.highRes) previewImage = photo.highRes
+    else if (photo.thumbnail) previewImage = photo.thumbnail
   }
 
   return (
     <div>
-      {!hidePreview && <PreviewImage src={previewUrl} />}
+      {!hidePreview && (
+        <PreviewImage
+          src={previewImage.url}
+          imageAspect={previewImage.width / previewImage.height}
+        />
+      )}
       <Name>{photo && photo.title}</Name>
       <ExifInfo>{exifItems}</ExifInfo>
       <SidebarDownload photo={photo} />
diff --git a/ui/src/components/sidebar/SidebarDownload.js b/ui/src/components/sidebar/SidebarDownload.js
index f3833f3..6a229a2 100644
--- a/ui/src/components/sidebar/SidebarDownload.js
+++ b/ui/src/components/sidebar/SidebarDownload.js
@@ -181,7 +181,7 @@ const SidebarDownload = ({ photo }) => {
     <div style={{ marginBottom: 24 }}>
       <h2>Download</h2>
 
-      <Table selectable singleLine>
+      <Table selectable singleLine compact>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Name</Table.HeaderCell>
diff --git a/ui/src/components/sidebar/SidebarItem.js b/ui/src/components/sidebar/SidebarItem.js
index 295fa7d..4d5f4d0 100644
--- a/ui/src/components/sidebar/SidebarItem.js
+++ b/ui/src/components/sidebar/SidebarItem.js
@@ -6,14 +6,15 @@ const ItemName = styled.div`
   display: inline-block;
   width: 100px;
   font-weight: 600;
-  font-size: 12px;
+  font-size: 0.85rem;
   color: #888;
   text-align: right;
-  margin-right: 8px;
+  margin-right: 0.5rem;
 `
 
 const ItemValue = styled.div`
   display: inline-block;
+  font-size: 1rem;
 `
 
 const SidebarItem = ({ name, value }) => (
