Style forms and .content

SandraBergstrom · Jul 6, 2023 · e9bc519 · e9bc519
1 parent 0d7a588
commit e9bc519
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 19 deletions.
diff --git a/src/pages/travelers/TravelerEditForm.js b/src/pages/travelers/TravelerEditForm.js
@@ -16,7 +16,7 @@ import {
 } from "../../contexts/CurrentUserContext";
 
 import btnStyles from "../../styles/Button.module.css";
-import appStyles from "../../App.module.css";
+import styles from "../../styles/TravelerPage.module.css";
 
 const TravelerEditForm = () => {
   const currentUser = useCurrentUser();
@@ -153,7 +153,7 @@ const TravelerEditForm = () => {
     <Form onSubmit={handleSubmit}>
       <Row>
         <Col className="py-2 p-0 p-md-2 text-center" md={7} lg={6}>
-          <Container className={appStyles.Content}>
+          <Container className={styles.Content}>
             <Form.Group>
               {image && (
                 <figure>
@@ -192,7 +192,7 @@ const TravelerEditForm = () => {
           </Container>
         </Col>
         <Col md={5} lg={6} className="d-none d-md-block p-0 p-md-2 text-center">
-          <Container className={appStyles.Content}>{textFields}</Container>
+          <Container className={styles.Content}>{textFields}</Container>
         </Col>
       </Row>
     </Form>

diff --git a/src/pages/travelers/TravelerPage.js b/src/pages/travelers/TravelerPage.js
@@ -9,7 +9,6 @@ import Button from "react-bootstrap/Button";
 import Asset from "../../components/Asset";
 
 import styles from "../../styles/TravelerPage.module.css";
-import appStyles from "../../App.module.css";
 import btnStyles from "../../styles/Button.module.css";
 
 import { useCurrentUser } from "../../contexts/CurrentUserContext";
@@ -73,16 +72,16 @@ function TravelerPage() {
           <h3 className="m-2">{traveler?.owner}</h3>
           <Row className="justify-content-center no-gutters">
             <Col xs={3} className="my-2">
-              <div>{traveler?.posts_count}</div>
-              <div>posts</div>
+              <div className={styles.Text}>{traveler?.posts_count}</div>
+              <div className={styles.Text}>posts</div>
             </Col>
             <Col xs={3} className="my-2">
-              <div>{traveler?.followers_count}</div>
-              <div>followers</div>
+              <div className={styles.Text}>{traveler?.followers_count}</div>
+              <div className={styles.Text}>followers</div>
             </Col>
             <Col xs={3} className="my-2">
-              <div>{traveler?.following_count}</div>
-              <div>following</div>
+              <div className={styles.Text}>{traveler?.following_count}</div>
+              <div className={styles.Text}>following</div>
             </Col>
           </Row>
         </Col>
@@ -164,7 +163,7 @@ function TravelerPage() {
     <Row>
       <Col className="py-3 p-0 p-lg-2" lg={12}>
         {/* <PopularTravelers mobile /> */}
-        <Container className={appStyles.Content}>
+        <Container className={styles.Content}>
           {hasLoaded ? (
             <>
               {mainTraveler}

diff --git a/src/pages/travelers/UserPasswordForm.js b/src/pages/travelers/UserPasswordForm.js
@@ -12,7 +12,7 @@ import { axiosRes } from "../../api/axiosDefaults";
 import { useCurrentUser } from "../../contexts/CurrentUserContext";
 
 import btnStyles from "../../styles/Button.module.css";
-import appStyles from "../../App.module.css";
+import styles from "../../styles/TravelerPage.module.css";
 
 const UserPasswordForm = () => {
   const history = useHistory();
@@ -55,7 +55,7 @@ const UserPasswordForm = () => {
   return (
     <Row>
       <Col className="py-2 mx-auto text-center" md={6}>
-        <Container className={appStyles.Content}>
+        <Container className={styles.Content}>
           <Form onSubmit={handleSubmit}>
             <Form.Group>
               <Form.Label>New password</Form.Label>
@@ -88,7 +88,7 @@ const UserPasswordForm = () => {
               </Alert>
             ))}
             <Button
-              className={`${btnStyles.Button} ${btnStyles.Blue}`}
+              className={`${btnStyles.Button} ${btnStyles.Bright}`}
               onClick={() => history.goBack()}
             >
               cancel

diff --git a/src/pages/travelers/UsernameForm.js b/src/pages/travelers/UsernameForm.js
@@ -15,7 +15,7 @@ import {
 } from "../../contexts/CurrentUserContext";
 
 import btnStyles from "../../styles/Button.module.css";
-import appStyles from "../../App.module.css";
+import styles from "../../styles/TravelerPage.module.css";
 
 const UsernameForm = () => {
   const [username, setUsername] = useState("");
@@ -55,7 +55,7 @@ const UsernameForm = () => {
   return (
     <Row>
       <Col className="py-2 mx-auto text-center" md={6}>
-        <Container className={appStyles.Content}>
+        <Container className={styles.Content}>
           <Form onSubmit={handleSubmit} className="my-2">
             <Form.Group>
               <Form.Label>Change username</Form.Label>
@@ -72,7 +72,7 @@ const UsernameForm = () => {
               </Alert>
             ))}
             <Button
-              className={`${btnStyles.Button} ${btnStyles.Blue}`}
+              className={`${btnStyles.Button} ${btnStyles.Bright}`}
               onClick={() => history.goBack()}
             >
               cancel

diff --git a/src/styles/Button.module.css b/src/styles/Button.module.css
@@ -4,8 +4,7 @@
   border-radius: 10px;
   border-color: transparent;
   padding: 4px 10px;
-  margin-left: 2px;
-  margin-right: 2px;
+  margin: 20px 5px;
   min-width: 75px;
 }
 

diff --git a/src/styles/Post.module.css b/src/styles/Post.module.css
@@ -37,4 +37,5 @@ h5 {
   display: flex;
   align-items: stretch;
   justify-content: center;
+  margin-top: 20px;
 }
diff --git a/src/styles/TravelerPage.module.css b/src/styles/TravelerPage.module.css
@@ -1,3 +1,11 @@
+.Content {
+  padding: 10px;
+}
+
+.Text {
+  color: var(--clr-accent-dark);
+}
+
 .TravelerImage {
   object-fit: cover;
   height: 120px;