Updated everything

Souviksamanta34 · Oct 4, 2024 · 237ee6b · 237ee6b
1 parent 0066752
commit 237ee6b
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 12 deletions.
diff --git a/src/CheckoutProduct.css b/src/CheckoutProduct.css
@@ -9,7 +9,7 @@
 }
 
 .checkoutProduct__info > button {
-    background: #f0c14b;
+    background: #00aaff;
     border: 1px solid;
     margin-top: 10px;
     border-color: #a88734 #9c7e31 #846a29;

diff --git a/src/CheckoutProduct.js b/src/CheckoutProduct.js
@@ -27,7 +27,7 @@ function CheckoutProduct({ id, image, title, price, rating, hideButton }) {
                     {Array(rating)
                     .fill()
                     .map((_, i) => (
-                        <p key={i}>🌟</p>
+                        <p key={i}>💠</p>
                     ))}
                 </div>
                 {!hideButton && (

diff --git a/src/Login.css b/src/Login.css
@@ -47,7 +47,7 @@
 }
 
 .login__signInButton {
-    background: #f0c14b;
+    background: #00aaff;
     border-radius: 2px;
     width: 100%;
     height: 30px;

diff --git a/src/Payment.css b/src/Payment.css
@@ -39,7 +39,7 @@
 
 
   .payment__details > form > div > button {
-    background: #f0c14b;
+    background: #00aaff;
     border-radius: 2px;
     width: 100%;
     height: 30px;

diff --git a/src/Product.css b/src/Product.css
@@ -24,7 +24,7 @@
   }
 
   .product > button {
-    background: #f0c14b;
+    background: #00aaff;
     border: 1px solid;
     margin-top: 10px;
     border-color: #a88734 #9c7e31 #846a29;

diff --git a/src/Product.js b/src/Product.js
@@ -31,7 +31,7 @@ function Product({ id, title, image, price, rating }) {
           {Array(rating)
             .fill()
             .map((_, i) => (
-              <p key={i}>🌟</p>
+              <p key={i}>💠</p>
             ))}
         </div>
       </div>

diff --git a/src/Register.css b/src/Register.css
@@ -42,7 +42,7 @@
 }
 
 .register__registerButton {
-    background-color: #f0c14b;
+    background-color: #0095ff;
     border-radius: 2px;
     width: 100%;
     height: 30px;
@@ -60,3 +60,65 @@
     color: red;
     margin-left: 4px;
 }
+
+.register input, 
+.register select {
+    width: 100%; /* Full width of the parent container */
+    padding: 12px; /* Adjust padding for better spacing */
+    margin: 8px 0; /* Add margin for spacing */
+    display: block; /* Block display for vertical stacking */
+    border: 1px solid #000000; /* Consistent border styling */
+    border-radius: 4px; /* Rounded corners for both */
+    box-sizing: border-box; /* Includes padding and border in element's total width and height */
+    font-size: 16px; /* Same font size for consistency */
+    height: 45px; /* Ensure consistent height */
+}
+
+/* Ensure exact width matching */
+.register select {
+    appearance: none; /* Remove default select styling */
+    width: 100%; /* Ensure select has full width */
+    background-color: #000000; /* Optional: Set background color */
+    background-image: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>'); /* Add custom dropdown arrow */
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    background-size: 16px;
+}
+
+/* Ensure input and select match exactly in width */
+.register input, .register select {
+    max-width: 100%; /* Ensure they don't exceed the parent width */
+    min-width: 100%; /* Force the minimum width to match parent */
+}
+
+
+
+/* For small devices like phones */
+@media (max-width: 600px) {
+    .register input,.register select {
+        padding: 10px; /* Slightly reduce padding for small screens */
+    }
+}
+
+/* For medium devices like tablets */
+@media (min-width: 601px) and (max-width: 1024px) {
+    .register input,.register select {
+        padding: 12px; /* Comfortable padding for medium screens */
+    }
+}
+
+/* For larger devices like desktops */
+@media (min-width: 1025px) {
+    .register input,.register select {
+        padding: 14px; /* Slightly increase padding for larger screens */
+    }
+}
+
+.register select {
+    appearance: none; /* Optional: Remove default dropdown arrow styling */
+    background-color: #fff; /* Optional: Set a background color */
+    background-image: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>'); /* Add a custom dropdown arrow */
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    background-size: 16px;
+}
diff --git a/src/Register.js b/src/Register.js
@@ -4,6 +4,28 @@ import { auth } from "./firebase";
 import './Register.css';
 import { useStateValue } from './StateProvider';
 
+const countryList = [
+    "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Argentina", "Armenia",
+    "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium",
+    "Belize", "Benin", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria",
+    "Burkina Faso", "Burundi", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Central African Republic", "Chad",
+    "Chile", "China", "Colombia", "Comoros", "Congo", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czech Republic",
+    "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea",
+    "Eritrea", "Estonia", "Eswatini", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia",
+    "Germany", "Ghana", "Greece", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras",
+    "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan",
+    "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho",
+    "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Madagascar", "Malawi", "Malaysia", "Maldives",
+    "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Monaco",
+    "Mongolia", "Montenegro", "Morocco", "Mozambique", "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands",
+    "New Zealand", "Nicaragua", "Niger", "Nigeria", "North Korea", "North Macedonia", "Norway", "Oman", "Pakistan",
+    "Palau", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar",
+    "Romania", "Russia", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent and the Grenadines",
+    "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles",
+    "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Korea",
+    "Spain", "Sri Lanka", "Sudan", "Suriname", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania"
+];
+
 function Register() {
     const navigate = useNavigate();
     const [email, setEmail] = useState('');
@@ -15,9 +37,17 @@ function Register() {
     const [address, setAddress] = useState('');
     const [town, setTown] = useState('');
     const [postcode, setPostcode] = useState('');
-    const [country, setCountry] = useState('India');
+    const [country, setCountry] = useState('India'); // Default to 'India'
     const [{}, dispatch] = useStateValue();
 
+    const handlePhoneNumberChange = (e) => {
+        const value = e.target.value;
+        // Ensure that only numbers are allowed, and limit input to 10 characters
+        if (/^\d*$/.test(value) && value.length <= 10) {
+            setPhoneNumber(value);
+        }
+    };
+
     const register = e => {
         e.preventDefault();
 
@@ -68,7 +98,12 @@ function Register() {
                     <input type='text' value={lastName} onChange={e => setLastName(e.target.value)} />
 
                     <h5>Phone Number</h5>
-                    <input type='text' value={phoneNumber} onChange={e => setPhoneNumber(e.target.value)} />
+                    <input
+                        type='tel'
+                        value={phoneNumber}
+                        onChange={handlePhoneNumberChange}
+                        maxLength="10"
+                    />
 
                     <h5>Address <span className="required">*</span></h5>
                     <input type='text' value={address} onChange={e => setAddress(e.target.value)} />
@@ -80,7 +115,13 @@ function Register() {
                     <input type='text' value={postcode} onChange={e => setPostcode(e.target.value)} />
 
                     <h5>Country <span className="required">*</span></h5>
-                    <input type='text' value={country} onChange={e => setCountry(e.target.value)} />
+                    <select value={country} onChange={e => setCountry(e.target.value)}>
+                        {countryList.map((country, index) => (
+                            <option key={index} value={country}>
+                                {country}
+                            </option>
+                        ))}
+                    </select>
 
                     <h5>E-mail <span className="required">*</span></h5>
                     <input type='text' value={email} onChange={e => setEmail(e.target.value)} />
@@ -104,4 +145,4 @@ function Register() {
     );
 }
 
-export default Register;
+export default Register;
diff --git a/src/Subtotal.css b/src/Subtotal.css
@@ -20,7 +20,7 @@
   }
 
   .subtotal > button {
-    background: #f0c14b;
+    background: #00aaff;
     border-radius: 2px;
     width: 100%;
     height: 30px;