style: fix warning from eslint

components/button/button.drip.tsx

@@ -4,7 +4,7 @@ import withDefaults from '../utils/with-defaults'
 interface Props {
   x?: number
   y?: number
-  color?: string,
+  color?: string
   onCompleted?: Function
 }
 

components/button/styles.ts

@@ -168,8 +168,8 @@ export const getButtonHoverColors = (
 }
 
 export interface ButtonCursorGroup {
-  cursor: string,
-  events: string,
+  cursor: string
+  events: string
 }
 
 export const getButtonCursor = (disabled: boolean, loading: boolean): ButtonCursorGroup => {

components/fieldset/fieldset.tsx

@@ -63,7 +63,7 @@ const Fieldset: React.FC<React.PropsWithChildren<FieldsetProps>> = React.memo(({
         {!hasTitle && <FieldsetTitle>{title}</FieldsetTitle>}
         {!hasSubtitle && <FieldsetSubtitle>{subtitle}</FieldsetSubtitle>}
       </div>
-      {FooterChildren && <>{FooterChildren}</>}
+      {FooterChildren && {FooterChildren}}
       <style jsx>{`
         .fieldset {
           background-color: ${theme.palette.background};

components/image/image.skeleton.tsx

@@ -3,7 +3,7 @@ import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
 
 interface Props {
-  opacity: number,
+  opacity: number
 }
 
 const defaultProps = {

components/image/image.tsx

@@ -4,7 +4,7 @@ import useTheme from '../styles/use-theme'
 import ImageSkeleton from './image.skeleton'
 
 interface Props {
-  src: string,
+  src: string
   animation: boolean
   width?: number
   height?: number

components/input/input.tsx

@@ -68,7 +68,7 @@ const Input: React.FC<InputProps> = ({
   return (
     <div className={`input-container ${className}`}>
       {label && <InputLabel fontSize={fontSize}>{label}</InputLabel>}
-        <div className={`input-wrapper ${hover ? 'hover' : ''} ${disabled ? 'disabled' : ''} ${labelClasses}`}>
+      <div className={`input-wrapper ${hover ? 'hover' : ''} ${disabled ? 'disabled' : ''} ${labelClasses}`}>
         {icon && <InputIcon icon={icon} ratio={heightRatio} />}
         <input type="text" className={`${disabled ? 'disabled' : ''} ${iconClasses}`}
           value={selfValue}

components/row/row.tsx

@@ -46,8 +46,8 @@ const Container: React.FC<React.PropsWithChildren<RowProps>> = React.memo(({
   const Component = component
   const theme = useTheme()
   const { justifyValue, alignValue } = useMemo(
-  () => getFlexAlignment(justify, align),
-  [justify, align],
+    () => getFlexAlignment(justify, align),
+    [justify, align],
   )
   
   return (

components/styles/css-baseline/css-baseline.tsx

@@ -10,7 +10,7 @@ const CSSBaseline: React.FC<React.PropsWithChildren<{}>> = React.memo(({
   
   return (
     <>
-      <React.Fragment>{children}</React.Fragment>
+      {children}
       <style global jsx>{`
         html, body {
           background-color: ${theme.palette.background};

components/styles/themes/dark.ts

@@ -7,6 +7,7 @@ import {
 } from './index'
 
 export const palette: ZeitUIThemesPalette = {
+  /* eslint-disable @typescript-eslint/camelcase */
   accents_1: '#111',
   accents_2: '#333',
   accents_3: '#444',
@@ -15,6 +16,7 @@ export const palette: ZeitUIThemesPalette = {
   accents_6: '#999',
   accents_7: '#eaeaea',
   accents_8: '#fafafa',
+  /* eslint-enable camelcase */
   background: '#000',
   foreground: '#fff',
   selection: '#f81ce5',

components/styles/themes/default.ts

@@ -7,6 +7,7 @@ import {
 } from './index'
 
 export const palette: ZeitUIThemesPalette = {
+  /* eslint-disable @typescript-eslint/camelcase */
   accents_1: '#fafafa',
   accents_2: '#eaeaea',
   accents_3: '#999',
@@ -15,6 +16,7 @@ export const palette: ZeitUIThemesPalette = {
   accents_6: '#444',
   accents_7: '#333',
   accents_8: '#111',
+  /* eslint-enable camelcase */
   background: '#fff',
   foreground: '#000',
   selection: '#79ffe1',

components/styles/themes/index.ts

@@ -1,6 +1,7 @@
 import { ThemeTypes } from '../../utils/prop-types'
 
 export interface ZeitUIThemesPalette {
+  /* eslint-disable @typescript-eslint/camelcase */
   accents_1: string
   accents_2: string
   accents_3: string
@@ -9,6 +10,7 @@ export interface ZeitUIThemesPalette {
   accents_6: string
   accents_7: string
   accents_8: string
+  /* eslint-enable camelcase */
   background: string
   foreground: string
   selection: string

components/toast/toast-container.tsx

@@ -27,7 +27,7 @@ const ToastContainer: React.FC<React.PropsWithChildren<{}>> = () => {
         key={`toast-${t.id}-${i}`}
       />
     )),
-    [toasts, hover],
+  [toasts, hover],
   )
   const hoverHandler = (onHover: boolean) => {
     if (onHover) {

components/utils/collections.ts

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react'
 export const hasChild = (
   children: ReactNode | undefined,
   child: React.ElementType
-): Boolean => {
+): boolean => {
   const types = React.Children.map(children, item => {
     if (!React.isValidElement(item)) return null
     return item.type