Merge pull request #137 from AmruthPillai/develop

Bugfix: Icon Sizes and Visibility

docs/changelog/README.md

@@ -10,6 +10,11 @@ All notable changes to this project will be documented in this file.
 
 ### April 23, 2020
 
+- Fix Issue with Page Controller Icon Size
+- Fix Issue with Checkbox Icon Toggle
+
+### April 23, 2020
+
 - Transfer all external resources to local, self-host everything
 - Shorten entry animation by a second
 - Optimize Images through `imgbot`

src/shared/Checkbox.js

@@ -3,17 +3,21 @@ import React from 'react';
 const Checkbox = ({ checked, onChange, icon = 'check', size = '2rem' }) => {
   return (
     <div
-      className="bg-white border-2 rounded border-gray-400 hover:border-gray-500 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500 cursor-pointer"
+      className="relative bg-white border-2 rounded border-gray-400 hover:border-gray-500 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500 cursor-pointer"
       style={{ width: size, height: size }}
     >
       <input
         type="checkbox"
         style={{ width: size, height: size }}
-        className="opacity-0 absolute cursor-pointer"
+        className="opacity-0 absolute cursor-pointer z-20"
         checked={checked}
         onChange={e => onChange(e.target.checked)}
       />
-      <i className="material-icons fill-current hidden text-sm font-bold text-gray-800 cursor-pointer">
+      <i
+        className={`absolute material-icons ${
+          checked ? 'opacity-100' : 'opacity-0'
+        } text-sm text-gray-800`}
+      >
         {icon}
       </i>
     </div>

src/shared/PageController.js

@@ -18,7 +18,7 @@ const PageController = () => {
       id="pageController"
       className="absolute z-20 opacity-75 hover:opacity-100 transition-all duration-150"
     >
-      <div className="px-8 border border-gray-200 rounded-full bg-white flex justify-center items-center select-none">
+      <div className="text-2xl px-8 border border-gray-200 rounded-full bg-white flex justify-center items-center leading-none select-none">
         <div className="p-3 hover:bg-gray-200 cursor-pointer flex" onClick={zoomIn}>
           <i className="material-icons">zoom_in</i>
         </div>