Merge pull request #542 from PolymathNetwork/chore/formitem-lineheight

chore(new-ui): change line height of form item

Author: RafaelVidaurre

packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx

@@ -1,13 +1,12 @@
-import React, { FC, useState, Fragment } from 'react';
+import React, { FC, useState } from 'react';
 import { uniqueId } from 'lodash';
 import { InlineFlex } from '~/components/InlineFlex';
 import { SvgCheckmark } from '~/images/icons/Checkmark';
 import { FormikProxy, EnhancedComponentProps } from '../FormikProxy';
 import * as sc from './styles';
-import { Label } from './Label';
 
 interface Props {
-  onChange: (e: boolean) => void;
+  onChange: (e: any) => void;
   /**
    * Specify whether the toggle should be on by default
    */
@@ -38,33 +37,32 @@ export const CheckboxPrimitive: FC<Props> = ({
   }
 
   return (
-    <Fragment>
-      <InlineFlex>
-        <sc.Input
-          {...other}
-          {...checkedProps}
-          type="checkbox"
-          id={name || id}
-          name={name || id}
-          onChange={e => {
-            onChange(e.currentTarget.checked);
-          }}
+    <sc.CheckboxInlineFlex>
+      <sc.Input
+        {...other}
+        {...checkedProps}
+        type="checkbox"
+        id={name || id}
+        name={name || id}
+        onChange={e => {
+          onChange(e.target.checked);
+        }}
+      />
+      <sc.CheckboxInput htmlFor={name || id}>
+        <sc.CheckIcon
+          Asset={SvgCheckmark}
+          color="white"
+          width="0.85em"
+          cd
+          height="0.85em"
         />
-        <sc.CheckboxInput htmlFor={name || id}>
-          <sc.CheckIcon
-            Asset={SvgCheckmark}
-            color="white"
-            width="0.85em"
-            height="0.85em"
-          />
-        </sc.CheckboxInput>
-        {label && (
-          <InlineFlex ml={2}>
-            <Label htmlFor={name || id}>{label}</Label>
-          </InlineFlex>
-        )}
-      </InlineFlex>
-    </Fragment>
+      </sc.CheckboxInput>
+      {label && (
+        <InlineFlex ml={2}>
+          <sc.CheckboxLabel htmlFor={name || id}>{label}</sc.CheckboxLabel>
+        </InlineFlex>
+      )}
+    </sc.CheckboxInlineFlex>
   );
 };
 

packages/new-polymath-ui/src/components/inputs/Checkbox/styles.ts

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 import { Icon } from '~/components/Icon';
+import { InlineFlex } from '~/components/InlineFlex';
+import { Label } from './Label';
 
 export const Input = styled.input`
   position: absolute;
@@ -14,6 +16,14 @@ export const Input = styled.input`
   white-space: nowrap;
 `;
 
+export const CheckboxInlineFlex = styled(InlineFlex)`
+  line-height: 18px;
+`;
+
+export const CheckboxLabel = styled(Label)`
+  align-items: flex-start;
+`;
+
 export const CheckIcon = styled(Icon)`
   display: block;
   transition: ${({ theme }) => theme.transitions.hover.ms}ms;
@@ -34,6 +44,7 @@ export const CheckboxInput = styled.label`
   height: 1.125rem;
   background-color: #fff;
   user-select: none;
+  align-items: flex-start;
 
   ${Input}:focus + & {
     border-color: ${({ theme }) => theme.colors.secondary};