From 6981b9949171fda3554565e673f75fcb91b5cf05 Mon Sep 17 00:00:00 2001
From: Valik <valik3201@gmail.com>
Date: Mon, 22 Jan 2024 22:10:57 +0100
Subject: [PATCH] style(ui): update styles

---
 public/index.html              |  3 +--
 public/manifest.json           |  1 -
 src/components/ContactForm.jsx |  4 +++-
 src/components/ContactList.jsx | 37 +++++++++++++++++++---------------
 4 files changed, 25 insertions(+), 20 deletions(-)
diff --git a/public/index.html b/public/index.html
index de9a84b..334ffb1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,10 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..b4e8a34 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -20,6 +20,5 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
   "background_color": "#ffffff"
 }
diff --git a/src/components/ContactForm.jsx b/src/components/ContactForm.jsx
index 6019c59..e78c6c9 100644
--- a/src/components/ContactForm.jsx
+++ b/src/components/ContactForm.jsx
@@ -62,7 +62,7 @@ export class ContactForm extends Component {
     const { name, number } = this.state;
 
     return (
-      <Form onSubmit={this.handleFormSubmit}>
+      <Form onSubmit={this.handleFormSubmit} autoComplete="off">
         <Row>
           <Col>
             <FloatingLabel
@@ -75,6 +75,7 @@ export class ContactForm extends Component {
                 name="name"
                 value={name}
                 onChange={this.handleChange}
+                autoComplete="off"
                 pattern="^[a-zA-Zа-яА-Я]+(([' -][a-zA-Zа-яА-Я ])?[a-zA-Zа-яА-Я]*)*$"
                 title="Name may contain only letters, apostrophe, dash and spaces. For example Adrian, Jacob Mercer, Charles de Batz de Castelmore d'Artagnan"
                 placeholder="Name"
@@ -93,6 +94,7 @@ export class ContactForm extends Component {
                 name="number"
                 value={number}
                 onChange={this.handleChange}
+                autoComplete="off"
                 pattern="\+?\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}"
                 title="Phone number must be digits and can contain spaces, dashes, parentheses and can start with +"
                 placeholder="+48 123-456-789"
diff --git a/src/components/ContactList.jsx b/src/components/ContactList.jsx
index 6a2a5cf..f9d5f24 100644
--- a/src/components/ContactList.jsx
+++ b/src/components/ContactList.jsx
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import ListGroup from 'react-bootstrap/ListGroup';
 import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
 
 /**
  * ContactList component for displaying a list of contacts.
@@ -33,22 +35,25 @@ export const ContactList = ({ contacts, onDeleteContact }) => {
  */
 const ContactListItem = ({ contact, onDeleteContact }) => {
   return (
-    <ListGroup.Item
-      as="li"
-      className="d-flex justify-content-between align-items-start"
-    >
-      <div className="fw-bold">{contact.name}</div>
-
-      <div className="ms-4 me-auto">{contact.number}</div>
-
-      <Button
-        variant="outline-danger"
-        size="sm"
-        type="button"
-        onClick={() => onDeleteContact(contact.id)}
-      >
-        Delete
-      </Button>
+    <ListGroup.Item as="li">
+      <Row>
+        <Col>
+          <div className="fw-bold">{contact.name}</div>
+        </Col>
+        <Col className="text-start">
+          <div className="me-auto">{contact.number}</div>
+        </Col>
+        <Col className="text-end">
+          <Button
+            variant="outline-danger"
+            size="sm"
+            type="button"
+            onClick={() => onDeleteContact(contact.id)}
+          >
+            Delete
+          </Button>
+        </Col>
+      </Row>
     </ListGroup.Item>
   );
 };
