style updates

Fraju-pc · Jul 28, 2023 · 3c9952b · 3c9952b
1 parent f6ed555
commit 3c9952b
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 18 deletions.
diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/LoginTableRow.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/LoginTableRow.jsx
@@ -20,7 +20,7 @@ export default function DisplayTableRow({ log, deleteUser, username, password,
       <td>{log.password}</td>
 
       <td>
-      <Button variant="warning" onClick={handleShow}>
+      <Button variant="success" onClick={handleShow}>
         Update
       </Button>
       <Modal show={show} onHide={handleClose} animation={false}>

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/components/UserTableRow.jsx b/Week-16-React_Router_and_React_Bootstrap/src/components/UserTableRow.jsx
@@ -16,7 +16,7 @@ export default function DisplayTableRow({ chore }) {
       <td>{chore.date}</td>
       <td>{chore.task}</td>
       <td>
-      <Button variant="warning" onClick={() => EmailAdmin(chore={chore})}>
+      <Button variant="success" onClick={() => EmailAdmin(chore={chore})}>
         Done
       </Button>
 

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/index.css b/Week-16-React_Router_and_React_Bootstrap/src/index.css
@@ -21,8 +21,8 @@ footer {
 
   .round-corners {
     overflow: hidden;
-    margin: auto;
-    padding: auto;
+    margin: 0;
+    padding: 0;
     border-radius: 10px;
     box-shadow: 10px 5px 5px#1b2b1b;
   }

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/Admin/Admin.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/Admin/Admin.jsx
@@ -96,8 +96,8 @@ export default function Admin({ chores, getChores, Chores_Api_URL }) {
   return (
     <Container>
       <Row className="m-4 p-4">
-        <Col></Col>
-        <Col id="form-area" className="m-3 p-3">
+        <Col xs={1} md={3}></Col>
+        <Col xs={10} md={6} id="form-area" className="m-3 p-3">
           <h1 id="text-header">Add New Task:</h1>
           <Form>
             <Form.Label id="text-header">User Name:</Form.Label>
@@ -136,7 +136,7 @@ export default function Admin({ chores, getChores, Chores_Api_URL }) {
             </Button>
           </Form>
         </Col>
-        <Col></Col>
+        <Col xs={1} md={3}></Col>
       </Row>
       <Row className="m-4 p-3">
         <Col>

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildA/ChildA.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/ChildA/ChildA.jsx
@@ -9,7 +9,8 @@ export default function ChildA({chores}) {
   return (
     <Container>
         <Row className='m-3 p-3'>
-    <Table striped bordered hover variant="dark">
+          <div className='round-corners'>
+    <Table id="table" striped bordered hover variant="dark">
       <thead>
         <tr>
           <th>Ayla's Tasks</th>
@@ -27,6 +28,7 @@ export default function ChildA({chores}) {
         ))}
       </tbody>
     </Table>
+    </div>
     </Row>
     </Container>
   );

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/Home/Home.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/Home/Home.jsx
@@ -3,6 +3,7 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Button from 'react-bootstrap/Button';
+import Image from 'react-bootstrap/Image';
 import { Link, useNavigate } from 'react-router-dom';
 import NavBar from "../../components/NavBar";
 
@@ -18,9 +19,9 @@ function goLogin(){
         <div className="p-4">
             <Container className="mt-4">
                 <Row>
-                    <Col></Col>
-                    <Col><img src="../src/pages/Home/homeImage.jpg" /></Col>
-                    <Col></Col>
+                    <Col xs={1} md={3}></Col>
+                    <Col xs={10} md={6}><Image src="../src/pages/Home/homeImage.jpg" fluid /></Col>
+                    <Col xs={1} md={3}></Col>
                 </Row>
             </Container>
 

diff --git a/Week-16-React_Router_and_React_Bootstrap/src/pages/Users/Users.jsx b/Week-16-React_Router_and_React_Bootstrap/src/pages/Users/Users.jsx
@@ -104,12 +104,13 @@ export default function Users() {
     <>
       <Container className="p-4">
         <Row className="m-4 p-1">
-          <Col></Col>
-          <Col>
-            <h1>Add New User:</h1>
+          <Col xs={2} md={3}></Col>
+          <Col id="form-area" className="m-3 p-3" xs={8} md={6}>
+          <div >
+            <h1 id="text-header">Add New User:</h1>
             <Form onSubmit={addUser}>
               <Form.Group className="mb-3" controlId="formBasicText">
-                <Form.Label>User Name</Form.Label>
+                <Form.Label id="text-header">User Name</Form.Label>
                 <Form.Control
                   type="text"
                   placeholder="Enter User Name"
@@ -118,7 +119,7 @@ export default function Users() {
                 />
               </Form.Group>
               <Form.Group className="mb-3" controlId="formBasicPassword">
-                <Form.Label>Password</Form.Label>
+                <Form.Label id="text-header">Password</Form.Label>
                 <Form.Control
                   type="password"
                   placeholder="Password"
@@ -130,11 +131,13 @@ export default function Users() {
                 Submit
               </Button>
             </Form>
+            </div>
           </Col>
-          <Col></Col>
+          <Col xs={2} md={3}></Col>
         </Row>
         <Row className="m-4 p-1">
-          <Table striped bordered hover variant="dark">
+          <div className="round-corners">
+          <Table id="table" striped bordered hover variant="dark">
             <thead>
               <tr>
                 <th>User:</th>
@@ -159,6 +162,7 @@ export default function Users() {
 
             </tbody>
           </Table>
+          </div>
         </Row>
       </Container>
     </>