From 0e0038f53ca9bb03992427289bc6494a370559ec Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Fri, 24 Apr 2020 12:11:17 +0530
Subject: [PATCH] fix issues with page controller icon size and checkbox toggle

---
 src/shared/Checkbox.js       | 10 +++++++---
 src/shared/PageController.js |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/shared/Checkbox.js b/src/shared/Checkbox.js
index 48fbaeb3..e1b24e6d 100644
--- a/src/shared/Checkbox.js
+++ b/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>
diff --git a/src/shared/PageController.js b/src/shared/PageController.js
index 3b7e3584..228841bd 100644
--- a/src/shared/PageController.js
+++ b/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>