Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-15 01:01:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix issues with page controller icon size and checkbox toggle

Browse Source
This commit is contained in:
Amruth Pillai
2020-04-24 12:11:17 +05:30
parent b53d12b581
commit 0e0038f53c
2 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/shared/Checkbox.js
View File

@ -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>

2
src/shared/PageController.js
View File

@ -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>