ferns-ui 0.21.2 → 0.22.0

package/src/Form.tsx

@@ -153,7 +153,7 @@ export class FormLine extends React.Component<FormLineProps, FormLineState> {
       <Box direction="row" display="flex">
         <IconButton
           accessibilityLabel="edit"
-          icon="cancel"
+          icon="times"
           iconColor="darkGray"
           prefix="far"
           size="xs"

package/src/Icon.tsx

@@ -1,4 +1,4 @@
-import {FontAwesome} from "@expo/vector-icons";
+import {FontAwesome5} from "@expo/vector-icons";
 import React from "react";
 
 import {IconProps, iconSizeToNumber} from "./Common";
@@ -9,10 +9,16 @@ export function initIcons() {
 }
 
 // TODO: Update <Icon /> to be closer to Expo's Vector Icon, letting multiple icon packs be used, etc.
-export class Icon extends React.Component<IconProps, {}> {
-  render() {
-    const color = Unifier.theme[this.props.color || "primary"];
-    const size = iconSizeToNumber(this.props.size);
-    return <FontAwesome color={color} name={this.props.name as any} size={size} />;
-  }
+export function Icon({color, size, name, prefix}: IconProps): React.ReactElement {
+  const iconColor = Unifier.theme[color || "primary"];
+  const iconSize = iconSizeToNumber(size);
+  return (
+    <FontAwesome5
+      color={iconColor}
+      name={name}
+      regular={prefix === "far"}
+      size={iconSize}
+      solid={!prefix || prefix === "fas"}
+    />
+  );
 }

package/src/Pog.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 
 import {Box} from "./Box";
-import {AllColors, IconPrefix, IconSize} from "./Common";
+import {AllColors, IconName, IconPrefix, IconSize} from "./Common";
 import {Icon} from "./Icon";
 
 const SIZE_NAME_TO_PIXEL = {
@@ -20,7 +20,7 @@ interface Props {
   hovered?: boolean;
   selected?: boolean;
   iconColor?: AllColors;
-  icon: string;
+  icon: IconName;
   iconPrefix?: IconPrefix;
   size?: IconSize;
 }

package/src/TextField.tsx

@@ -193,7 +193,7 @@ export function TextField({
   };
   if (value) {
     if (type === "date") {
-      value = moment(value).format("MM/DD/YYYY");
+      value = moment.utc(value).format("MM/DD/YYYY");
     } else if (type === "height") {
       value = `${Math.floor(Number(value) / 12)} ft, ${Number(value) % 12} in`;
     } else if (type === "phoneNumber") {