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 "react-phone-number-input";
+import PhoneInput from "@components/ui/form/PhoneInput";
 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
-                          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 */
-                          }}
-                        />
+                        <PhoneInput name="phone" placeholder="Enter phone number" id="phone" required />
                       </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 {
@@ -81,7 +91,7 @@
     }
     /* slider */
     .slider {
-      @apply relative flex items-center w-40 h-4 select-none 
+      @apply relative flex items-center w-40 h-4 select-none
     }
 
     .slider > .slider-track {
@@ -106,7 +116,7 @@
 }
 
 /* !important to style multi-email input */
-::-moz-selection { 
+::-moz-selection {
   color: white;
   background: black;
 }
@@ -188,7 +198,7 @@
 
 .react-multi-email [data-tag] {
   box-shadow: none !important;
-  @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;  
+  @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
 }
 
 .react-multi-email [data-tag] [data-tag-item] {
@@ -278,19 +288,19 @@
   0% {
     transform: rotate(0deg);
   }
-  
+
   25% {
     transform: rotate(180deg);
   }
-  
+
   50% {
     transform: rotate(180deg);
   }
-  
+
   75% {
     transform: rotate(360deg);
   }
-  
+
   100% {
     transform: rotate(360deg);
   }
@@ -300,19 +310,19 @@
   0% {
     height: 0%;
   }
-  
+
   25% {
     height: 0%;
   }
-  
+
   50% {
     height: 100%;
   }
-  
+
   75% {
     height: 100%;
   }
-  
+
   100% {
     height: 0%;
   }