refactor: ♻️ del children type (#3283)

* refactor: 🔧 del unnecessary children type

Change-Id: I3dea5e07f5401bdbdd168eb959fe361c57784167

* feat: 💄 eslint

Change-Id: Ie173adeca9e3112d8cdfc1f85964332105dcb424

* feat: 🔧 add css type

Change-Id: I8850c4d09b152f4d9c4d98e6eebca58bd9eecd37

* fix: 💄 ci lint

Change-Id: I69ff89c7a30e2bdcd26475ec83f3f5ec143121b6

server/emails/components/Body.tsx

@@ -2,22 +2,18 @@ import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
 import EmptySpace from "./EmptySpace";
 
-type Props = {
-  children: React.ReactNode;
-};
+const Body: React.FC = ({ children }) => (
+  <Table width="100%">
+    <TBody>
+      <TR>
+        <TD>
+          <EmptySpace height={10} />
+          {children}
+          <EmptySpace height={40} />
+        </TD>
+      </TR>
+    </TBody>
+  </Table>
+);
 
-export default ({ children }: Props) => {
-  return (
-    <Table width="100%">
-      <TBody>
-        <TR>
-          <TD>
-            <EmptySpace height={10} />
-            {children}
-            <EmptySpace height={40} />
-          </TD>
-        </TR>
-      </TBody>
-    </Table>
-  );
-};
+export default Body;

server/emails/components/Button.tsx

@@ -2,23 +2,23 @@ import * as React from "react";
 
 type Props = {
   href: string;
-  children: React.ReactNode;
 };
 
-export default (props: Props) => {
-  const style = {
-    display: "inline-block",
-    padding: "10px 20px",
-    color: "#FFFFFF",
-    background: "#000000",
-    borderRadius: "4px",
-    fontWeight: 500,
-    textDecoration: "none",
-    cursor: "pointer",
-  };
-  return (
-    <a {...props} style={style}>
-      {props.children}
-    </a>
-  );
+const style: React.CSSProperties = {
+  display: "inline-block",
+  padding: "10px 20px",
+  color: "#FFFFFF",
+  background: "#000000",
+  borderRadius: "4px",
+  fontWeight: 500,
+  textDecoration: "none",
+  cursor: "pointer",
 };
+
+const Button: React.FC<Props> = (props) => (
+  <a {...props} style={style}>
+    {props.children}
+  </a>
+);
+
+export default Button;

server/emails/components/EmailLayout.tsx

@@ -2,20 +2,18 @@ import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
 import theme from "@shared/theme";
 
-type Props = {
-  children: React.ReactNode;
-};
-
-export default (props: Props) => (
+const EmailLayout: React.FC = ({ children }) => (
   <Table width="550" padding="40">
     <TBody>
       <TR>
-        <TD align="left">{props.children}</TD>
+        <TD align="left">{children}</TD>
       </TR>
     </TBody>
   </Table>
 );
 
+export default EmailLayout;
+
 export const baseStyles = `
   #__bodyTable__ {
     font-family: ${theme.fontFamily};

server/emails/components/Heading.tsx

@@ -4,12 +4,11 @@ const style = {
   fontWeight: 500,
   fontSize: "18px",
 };
-type Props = {
-  children: React.ReactNode;
-};
 
-export default ({ children }: Props) => (
+const Heading: React.FC = ({ children }) => (
   <p>
     <span style={style}>{children}</span>
   </p>
 );
+
+export default Heading;