Extracted PhoneInput, fixed styling (#520)

components/ui/form/PhoneInput.tsx

@@ -0,0 +1,19 @@
+import "react-phone-number-input/style.css";
+import { default as BasePhoneInput } from "react-phone-number-input";
+import React from "react";
+import classNames from "@lib/classNames";
+
+export const PhoneInput = (props) => (
+  <BasePhoneInput
+    {...props}
+    className={classNames(
+      "shadow-sm rounded-md block w-full py-px px-3 border border-1 border-gray-300 ring-black focus-within:ring-1 focus-within:border-black dark:border-gray-900 dark:text-white dark:bg-black",
+      props.className
+    )}
+    onChange={() => {
+      /* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */
+    }}
+  />
+);
+
+export default PhoneInput;

pages/[user]/book.tsx

@@ -9,8 +9,7 @@ import { useEffect, useState } from "react";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
-import "react-phone-number-input/style.css";
+import PhoneInput from "@components/ui/form/PhoneInput";
-import PhoneInput from "react-phone-number-input";
 import { LocationType } from "../../lib/location";
 import Avatar from "@components/Avatar";
 import { Button } from "@components/ui/Button";
@@ -255,19 +254,10 @@ export default function Book(props: any): JSX.Element {
                       <label
                         htmlFor="phone"
                         className="block text-sm font-medium dark:text-white text-gray-700">
-                        Phone Number
+                        Phone number
                       </label>
                       <div className="mt-1">
-                        <PhoneInput
+                        <PhoneInput name="phone" placeholder="Enter phone number" id="phone" required />
-                          name="phone"
-                          placeholder="Enter phone number"
-                          id="phone"
-                          required
-                          className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
-                          onChange={() => {
-                            /* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */
-                          }}
-                        />
                       </div>
                     </div>
                   )}

styles/globals.css

@@ -2,6 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+/* PhoneInput dark-mode overrides (it would add a lot of boilerplate to do this in JavaScript) */
+.PhoneInputInput {
+  @apply text-sm focus:ring-0 border-0;
+}
+.dark .PhoneInputInput {
+  @apply bg-black;
+}
+.PhoneInputCountrySelect {
+  @apply text-black;
+}
 
 /* note(PeerRich): TODO move @layer components into proper React Components: <Button color="primary" size="xs" /> */
 @layer components {