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' }) => { const Checkbox = ({ checked, onChange, icon = 'check', size = '2rem' }) => {
return ( return (
<div <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 }} style={{ width: size, height: size }}
> >
<input <input
type="checkbox" type="checkbox"
style={{ width: size, height: size }} style={{ width: size, height: size }}
className="opacity-0 absolute cursor-pointer" className="opacity-0 absolute cursor-pointer z-20"
checked={checked} checked={checked}
onChange={e => onChange(e.target.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} {icon}
</i> </i>
</div> </div>

2
src/shared/PageController.js
View File

@ -18,7 +18,7 @@ const PageController = () => {
id="pageController" id="pageController"
className="absolute z-20 opacity-75 hover:opacity-100 transition-all duration-150" 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}> <div className="p-3 hover:bg-gray-200 cursor-pointer flex" onClick={zoomIn}>
<i className="material-icons">zoom_in</i> <i className="material-icons">zoom_in</i>
</div> </div>