kecardel · pollipayne · Jul 2, 2021 · Jul 2, 2021 · Jul 2, 2021 · Jul 2, 2021
diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,4 @@
 @import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300&display=swap');
-/*line 169 in App.js wont show before smthg's clicked...wants you to select the board you'll add card to first*/
 
 /* color scheme: #C0CAAD; /*FFB86F CCFCCB 2D3319 7F534B E9B44C*/
 
@@ -19,7 +18,7 @@
     margin-top: 0;
 }
 
-.flex-container { /*copy paste for the data entry fields*/
+.flex-container {
     padding: 0;
     margin: 0;
     list-style: none;
@@ -62,7 +61,7 @@
     font-size: 40px;
 }
 
-.create-card-prompt h3 { /*Create new card /!\ when you click to enter data, the styling drops...*/
+.create-card-prompt h3 { /*Create new card, /!\ when you click to enter data, the styling drops...*/
     color: #FFB86F;
     margin-top: 70px;
     margin-left: 20px;
@@ -72,7 +71,6 @@
 .currentboard {
     color: #FFB86F;
     font-size: 25px;
-    /* background-color: #8C705F; */
     font-weight: bolder;
     font-family: 'Gaegu', cursive; 
     display: flex; 
@@ -104,100 +102,3 @@ body { /*whole page*/
     font-family: 'Gaegu', cursive; 
     margin: 0px 0px 10px 0px;
 }
-
-
-/* .new-board-form__container  */
-/* .container {
-    color: #FFB86F;
-    display: flex; /*flex container defined
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    max-width: 810px;
-    margin: 20px auto 0;
-    top: 175px;
-    width: 350px;
-    height: 120px;
-} */
-
-/* .flex-container h2 {
-    color: #FFB86F;
-}
-
-.wrap    { 
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-}  */
-
-/*.wrap button { /*Hide Me button*//*
-    font-family: 'Gaegu', cursive; 
-    background: tomato;
-    padding: 5px;
-    width: 100px;
-    height: 50px;
-    margin: 10px;
-
-    line-height: 100px;
-    color: white;
-    font-weight: bold;
-    font-size: 2em;
-    text-align: center;
-}
-
-
-.new-board-form__container h2 {
-    flex-direction: column;
-    color: #FFB86F;
-    font-size: 40px;
-    margin-top: 10px;
-}
-
-.new-board-form__container button {
-    font-family: 'Gaegu', cursive; 
-}
-
-
-/*.boards__container { /* needs to be on left side of page */
-    /* display: flex;
-    flex-wrap: wrap;
-    align-items: normal;
-    justify-content: space-between;
-    left: 20px;
-    max-width: 810px;
-    margin: 20px auto 0; 
-    color: #FFB86F;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    align-items: center;
-    position: absolute;
-    top: 475px;
-    left: 250px;
-    width: 350px;
-    height: 120px;
-} */
-/*
-.boards__container h2 {
-    font-size: 30px;
-    margin-top: 10px;
-
-}
-
-.new-card-form__container { /* needs to be on right side of page */
-    /*color: #FFB86F;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    align-items: center;
-    position: absolute;
-    top: 475px;
-    right: 250px;
-    width: 350px;
-    height: 120px;
-    margin: 20px auto 0; 
-} 
-
-.new-card-form__container h3 {
-    font-size: 30px;
-    margin-top: 10px;
-    align-items: center; /*necessary?*/
-/*} */
diff --git a/src/components/Board.css b/src/components/Board.css
@@ -1,23 +1,22 @@
 @import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300&display=swap');
 
-/* doesnt line up w 'choose' prompt */
 button { 
     background-color: #8C705F;
     color: #CCFCCB;
     font-weight: bolder;
     font-family: 'Gaegu', cursive; 
-    display: flex; /* or in-line block? */
+    display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     max-width: 810px;
     margin: 20px auto 0;
-    padding: 5px; /*space bw button txt and edge of button */
-    border-radius: 25% 10%; /* from: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
+    padding: 5px;
+    border-radius: 25% 10%;
 }
 
 button:hover {
     background-color: #9b806e;
-    text-decoration: underline dotted#CCFCCB; /* https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration */
+    text-decoration: underline dotted#CCFCCB;
 
 }
diff --git a/src/components/BoardList.css b/src/components/BoardList.css
@@ -1,6 +1,4 @@
-/*if you GET boards, what do they look like? */
 .listofBoards {
-    /* background-color: blue; */
     display: flex;
     flex-direction: row;
     margin: 0px 10px 0px 10px;

diff --git a/src/components/Card.css b/src/components/Card.css
@@ -24,8 +24,6 @@ ul{
     padding:1em;
     font-size: 1rem;
     font-weight: normal;
-    /* margin: 20px auto 0;
-    flex-wrap: wrap; */
 }
 
 .cards_container {
@@ -34,4 +32,3 @@ ul{
 ul li{
     margin:1em;
 }
-
diff --git a/src/components/CardList.css b/src/components/CardList.css
@@ -1,5 +1,4 @@
 .listofcards {
-    /* background-color: blue; */
     display: flex;
     flex-direction: row;
     margin: 0px 10px 0px 10px;

diff --git a/src/components/NewBoardForm.css b/src/components/NewBoardForm.css
@@ -1,27 +1,54 @@
 @import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300&display=swap');
 
-/* doesnt line up w 'choose' prompt */
-/* style div class or input classes? */
 .fieldItself { 
     background-color: #8C705F;
     color: #CCFCCB;
     font-weight: bolder;
     font-family: 'Gaegu', cursive; 
-    display: flex; /* or in-line block? */
+    display: flex;
     flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
+    justify-content: space-around;
     max-width: 810px;
     height: 50px;
-    width: 100px; /* shorten button width */
+    width: 100px;
     margin: 20px auto 0;
-    padding: 5px; /*space bw button txt and edge of button */
-    border-radius: 25% 10%; /* from: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
+    margin-right: 450px;
+    padding: 5px;
+    border-radius: 25% 10%; 
+}
+
+.fieldItselfs { 
+    background-color: #8C705F;
+    color: #CCFCCB;
+    font-weight: bolder;
+    font-family: 'Gaegu', cursive; 
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-around;
+    max-width: 810px;
+    height: 50px;
+    width: 100px;
+    margin: 20px auto 0;
+    margin-right: 450px;
+    margin-top: 50px;
+    padding: 5px; 
+    border-radius: 25% 10%; 
+}
+
+.fieldPrompt {
+    margin-right: 450px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-around;
+    box-sizing: border-box;
 }
 
 .fieldItself:hover, .fieldPrompt:hover {
     background-color: #9b806e;
-    text-decoration: underline dotted#CCFCCB; /* https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration */
+    text-decoration: underline dotted#CCFCCB;
 
 }
 

diff --git a/src/components/NewBoardForm.js b/src/components/NewBoardForm.js
@@ -49,7 +49,7 @@ const NewBoardForm = (props) => {
                     className={(boardForm.title.length === 0)? 'invalid-form-input' : ''}
                 />
             </div>
-            <div className='fieldItself'>
+            <div className='fieldItselfs'>
                 <label>Owner</label> 
                 <input
                     value={boardForm.owner}

diff --git a/src/components/NewCardForm.css b/src/components/NewCardForm.css
@@ -20,7 +20,7 @@
     font-weight: bolder;
     font-family: 'Gaegu', cursive; 
     align-items: center;
-    justify-content: flex-start; /*center*/
+    justify-content: flex-start; 
 }
 
 .invalid-form-input { /*box you enter card msg in*/
@@ -35,7 +35,7 @@
 
 label:hover {
     background-color: #9b806e;
-    text-decoration: underline dotted#CCFCCB; /* https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration */
+    text-decoration: underline dotted#CCFCCB;
 
 }
 
@@ -47,49 +47,18 @@ label:hover {
     font-weight: bolder;
     font-family: 'Gaegu', cursive; 
     align-items: center;
-    justify-content: flex-start; /*center*/
+    justify-content: flex-start;
 }
 
 .submit-the-message:hover {
     background-color: #9b806e;
-    text-decoration: underline dotted#CCFCCB; /* https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration */
+    text-decoration: underline dotted#CCFCCB;
 
 }
 
-/*label { 
-    background-color: #8C705F;
-    color: #CCFCCB;
-    font-weight: bolder;
-    font-family: 'Gaegu', cursive; 
-    display: flex; 
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-start; /*center*/
-    /*max-width: 810px;
-    width: 100px; /* shorten button width */
-    /*margin: 20px auto 0;
-    padding: 5px; /*space bw button txt and edge of button */
-    /*border-radius: 25% 10%; /* from: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
-/*} */
-
-/* .invalid-form-input { 
-    background-color: #8C705F;
-    color: #CCFCCB;
-    font-weight: bolder;
-    font-family: 'Gaegu', cursive; 
-    display: flex; 
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    max-width: 810px;
-    margin: 20px auto 0;
-    padding: 5px; /*space bw button txt and edge of button */
-    /*border-radius: 10px; /* from: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
-/*} */
-
 .invalid-form-input:hover {
     background-color: #9b806e;
-    text-decoration: underline dotted#CCFCCB; /* https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration */
+    text-decoration: underline dotted#CCFCCB;
 
 }
 
@@ -98,18 +67,18 @@ label:hover {
     color: #CCFCCB;
     font-weight: bolder;
     font-family: 'Gaegu', cursive; 
-    display: flex; /* or in-line block? */
+    display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     max-width: 810px;
     margin: 20px auto 0;
-    padding: 5px; /*space bw button txt and edge of button */
-    border-radius: 25% 10%; /* from: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
+    padding: 5px;
+    border-radius: 25% 10%;
 }
 
 .fieldPrompt:hover {
     background-color: #9b806e;
-    text-decoration: underline dotted#CCFCCB; /* https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration */
+    text-decoration: underline dotted#CCFCCB;
 
 }
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
@@ -38,7 +38,7 @@ const NewCardForm = (props) => {
                 />
             </div>
 
-            <input className='submit-the-message'
+            <input className='submitTheMessage'
                 type="submit"
                 value="Submit The Message"
                 disabled={((cardForm.message.length === 0) || (cardForm.message.length >40))}