Merge pull request #7 from rizul11/master

SarthakSKumar · web-flow · commit 1f8e12fda606 · 2023-10-16T08:25:31.000+05:30
Fix phone number and select country text visibility
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -8,3 +8,54 @@
   scroll-behavior: smooth;
   box-sizing: border-box;
 }
+
+@import 'tailwindcss/base';
+
+/* Custom styles for the country select element */
+.my-custom-country-select {
+  padding: 0.75rem 1rem;
+  border: 2px solid #6B7280;
+  border-radius: 0.5rem;
+  background-color: #F3F4F6;
+  color: #111827;
+  font-size: 1rem;
+  transition: border-color 0.2s ease;
+}
+
+.my-custom-country-select:focus {
+  border-color: #3B82F6;
+}
+
+Custom styles for the input element 
+ .my-custom-input {
+  padding: 0.75rem 1rem;
+  border: 2px solid #6B7280;
+  border-radius: 0.5rem;
+  background-color: #F3F4F6;
+  color: #111827;
+  font-size: 1rem;
+  transition: border-color 0.2s ease;
+}
+
+.my-custom-input:focus {
+  border-color: #3B82F6;
+}
+
+  .PhoneInputCountrySelect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+  color: darkslategrey;
+} 
+
+.PhoneInputInput {
+  flex: 1;
+  min-width: 0;
+  color: darkblue;
+}
diff --git a/src/app/page.js b/src/app/page.js
@@ -1,4 +1,5 @@
 "use client";
+
 import PhoneInput, { isValidPhoneNumber } from "react-phone-number-input";
 import { useState } from "react";
 import "react-phone-number-input/style.css"; // Import the CSS for PhoneInput
@@ -19,29 +20,36 @@ export default function Home() {
   };
 
   return (
-    <main className="w-screen h-screen bg-gray-800 text-gray-200 flex flex-col justify-center items-center">
-      <h1 className="text-3xl font-semibold mb-4">QuickSend</h1>
-      <div className="flex space-x-4 mb-4">
+    <main className="bg-gradient-to-b from-indigo-900 to-gray-800 min-h-screen flex flex-col items-center justify-center text-white">
+      <h1 className="text-4xl font-extrabold mb-8">QuickSend</h1>
+      <div className="mb-8">
         <button
           className={`${
-            messenger === "whatsapp" ? "bg-blue-500" : "bg-gray-400"
-          } text-white px-4 py-2 rounded-md`}
+            messenger === "whatsapp"
+              ? "bg-green-500"
+              : "bg-gray-600 hover:bg-green-500"
+          } text-white px-4 py-2 rounded-lg`}
           onClick={() => handleMessengerChange("whatsapp")}
         >
-          Whatsapp
+          WhatsApp
         </button>
         <button
           className={`${
-            messenger === "telegram" ? "bg-blue-500" : "bg-gray-400"
-          } text-white px-4 py-2 rounded-md`}
+            messenger === "telegram"
+              ? "bg-blue-500"
+              : "bg-gray-600 hover:bg-blue-500"
+          } text-white px-4 py-2 rounded-lg ml-4`}
           onClick={() => handleMessengerChange("telegram")}
         >
           Telegram
         </button>
       </div>
-      <div className="flex flex-col items-center">
+      <div className="w-80">
         <PhoneInput
-          className="p-2"
+          classNames={{
+            countrySelect: "my-custom-country-select",
+            input: "my-custom-input",
+          }}
           placeholder="Enter phone number"
           countrySelectProps={{ unicodeFlags: true }}
           value={value}
@@ -57,7 +65,11 @@ export default function Home() {
           defaultCountry="IN"
         />
         <button
-          className="bg-blue-500 text-white px-4 py-2 rounded-md mt-2"
+          className={`${
+            isValidPhoneNumber(value)
+              ? "bg-blue-500 hover:bg-blue-600"
+              : "bg-gray-600"
+          } text-white px-4 py-2 rounded-lg mt-4 w-full`}
           onClick={handleSendClick}
           disabled={!isValidPhoneNumber(value)}
         >
