From ca6b0460ed112d91c9f9263c3bb8ba302f8586f6 Mon Sep 17 00:00:00 2001 From: Lauren Date: Thu, 1 Jul 2021 23:39:28 -0700 Subject: [PATCH] spread create buttons out --- src/App.css | 103 +------------------------------- src/components/Board.css | 9 ++- src/components/BoardList.css | 2 - src/components/Card.css | 2 - src/components/CardList.css | 1 - src/components/NewBoardForm.css | 43 ++++++++++--- src/components/NewBoardForm.js | 2 +- src/components/NewCardForm.css | 49 +++------------ src/components/NewCardForm.js | 2 +- 9 files changed, 52 insertions(+), 161 deletions(-) diff --git a/src/App.css b/src/App.css index e13593492..f303c6c3e 100644 --- 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?*/ -/*} */ \ No newline at end of file diff --git a/src/components/Board.css b/src/components/Board.css index d268386aa..984946d53 100644 --- 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; } \ No newline at end of file diff --git a/src/components/BoardList.css b/src/components/BoardList.css index 99143bccb..2c3c6d9c8 100644 --- 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 index 4f8b99548..c95d7d231 100644 --- 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 { diff --git a/src/components/CardList.css b/src/components/CardList.css index 635004544..d7a8892f5 100644 --- 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 index 3f63ed79c..2dac5303f 100644 --- 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 index 60ceb9490..23bdcb297 100644 --- 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' : ''} /> -
+
{ />
- 40))}