fix: size and position of touch indicator and checkbox (#282)

Author: codingLogan

src/components/ExampleCheckbox.tsx

@@ -10,7 +10,7 @@ export const ExampleCheckbox: React.FC<
   }
 > = ({ id, showTouchIndicator, pseudoFocusColor }) => {
   const theme = useTheme()
-  const checkboxSize = '1em'
+  const checkboxSize = '15px'
 
   return (
     <div aria-hidden="true" style={{ position: 'relative' }}>
@@ -25,14 +25,15 @@ export const ExampleCheckbox: React.FC<
           marginTop: '8px',
           marginBottom: '8px',
           marginRight: '12px',
+          marginLeft: '4px',
           width: checkboxSize,
           height: checkboxSize,
         }}
         tabIndex={-1}
         type="checkbox"
       />
       {/* Position the touch indicator to be centered over the checkbox */}
-      {showTouchIndicator && <TouchIndicator style={{ left: '-9px', top: '-4px' }} />}
+      {showTouchIndicator && <TouchIndicator style={{ left: '-8px', top: '-4px' }} />}
       {/* If we are showing the psuedo touch indicator, also show the pseudo-focus for the checkbox */}
       {showTouchIndicator && (
         <div

src/components/TouchIndicator.tsx

@@ -12,8 +12,8 @@ export const TouchIndicator: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
 
   const styles: React.CSSProperties = {
     position: 'absolute',
-    height: '36px',
-    width: '36px',
+    height: '37px',
+    width: '37px',
     background: `radial-gradient(circle, ${hover} 0%, ${selected} 100%)`,
     stroke: theme.palette.divider,
     filter: 'drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12))',

src/views/oauth/experiments/PredirectInstructions.tsx

@@ -127,8 +127,8 @@ function PredirectInstructions(
                 const isLastItem = index === checkboxItems.length - 1
 
                 return (
-                  <>
-                    <li key={item}>
+                  <React.Fragment key={item}>
+                    <li>
                       <ExampleCheckbox
                         id={item}
                         pseudoFocusColor={institutionColor}
@@ -139,8 +139,8 @@ function PredirectInstructions(
                       </Text>
                     </li>
 
-                    {!isLastItem && <Divider key={`divider-${index}`} />}
-                  </>
+                    {!isLastItem && <Divider />}
+                  </React.Fragment>
                 )
               })}
             </ul>