Merge pull request #35 from HackYourFuture-CPH/feat/styling

Feat/styling
HackYourFuture-CPH · Apr 30, 2024 · 9885e4f · 9885e4f
2 parents b37e09d + 173200c
commit 9885e4f
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 35 deletions.
diff --git a/packages/client/public/index.html b/packages/client/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Retro Realm</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/packages/client/src/containers/CreateTeamPage/CreateTeam.css b/packages/client/src/containers/CreateTeamPage/CreateTeam.css
@@ -1,21 +1,24 @@
 .create-team {
   max-width: 600px;
-  margin: 0 auto;
-  padding: 20px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  background-color: #f9f9f9;
+  margin: 20px auto;
+  padding: 30px;
+  border: 2px solid #660065;
+  border-radius: 10px;
+  background-color: #fff;
+  margin: 20px auto;
 }
 
 h1 {
   font-size: 24px;
   margin-bottom: 20px;
+  color: #660065;
 }
 
 h2 {
   font-size: 20px;
   margin-top: 30px;
   margin-bottom: 10px;
+  color: #660065;
 }
 
 form {
@@ -24,12 +27,13 @@ form {
 
 label {
   font-weight: bold;
+  color: #9c27b0;
 }
 
 input[type='text'],
 input[type='email'],
 select {
-  width: 100%;
+  width: calc(100% - 20px);
   padding: 10px;
   margin-bottom: 10px;
   border: 1px solid #ccc;
@@ -41,39 +45,78 @@ button {
   margin-top: 10px;
   border: none;
   border-radius: 5px;
-  background-color: #007bff;
+  background-color: #9c27b0;
   color: #fff;
   cursor: pointer;
-  margin-right: 10px;
+  margin-bottom: 10px;
 }
 
 button:first-child {
-  margin-right: 0;
+  margin-right: 10px;
 }
 
 button:hover {
-  background-color: #0056b3;
+  background-color: #7b1fa2;
 }
 
 ul {
   list-style: none;
   padding: 0;
+  margin-bottom: 20px;
 }
 
 li {
   margin-bottom: 10px;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 10px;
+}
+
+li:last-child {
+  border-bottom: none;
 }
 
 li button {
-  margin-left: 10px;
   padding: 5px 10px;
-  background-color: #dc3545;
+  background-color: #be28ec;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
 }
 
 li button:hover {
-  background-color: #c82333;
+  background-color: #be28ec;
+}
+input[type='text'],
+input[type='email'],
+select {
+  width: calc(100% - 20px);
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  color: #be28ec;
+}
+
+input[type='text']::placeholder,
+input[type='email']::placeholder,
+select::placeholder {
+  color: #be28ec;
+}
+
+input[type='text']:focus,
+input[type='email']:focus,
+select:focus {
+  outline-color: #be28ec;
+}
+
+li {
+  margin-bottom: 10px;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 10px;
+  color: #9c27b0;
+}
+
+li:last-child {
+  border-bottom: none;
 }
diff --git a/packages/client/src/containers/CreateTeamPage/CreateTeam.js b/packages/client/src/containers/CreateTeamPage/CreateTeam.js
@@ -162,9 +162,6 @@ function CreateTeam() {
         />
 
         <button type="submit">Create Team</button>
-        <br />
-        <h2>Members</h2>
-        <br />
 
         <div>
           <label>First Name</label>

diff --git a/packages/client/src/containers/RetroPage/RetroPage.css b/packages/client/src/containers/RetroPage/RetroPage.css
@@ -2,10 +2,9 @@ body {
   background: linear-gradient(
     to right,
     transparent,
-    rgb(238, 237, 229),
-    rgb(0, 238, 255),
-    rgb(64, 206, 211),
-    rgb(150, 232, 150)
+    rgb(228, 209, 255),
+    rgb(195, 158, 240),
+    rgb(136, 77, 167)
   );
 }
 
@@ -26,23 +25,23 @@ body {
 }
 
 .input-button {
-  background-color: rgb(207, 231, 201);
+  background-color: rgb(104, 45, 124);
   margin-top: 30px;
 }
 
 .submit-button {
   display: flex;
   margin-left: 45%;
   margin-top: 20px;
-  background-color: rgb(5, 255, 134);
+  background-color: rgb(136, 77, 167);
   padding: 25px 69px;
 }
 
 .finalize-button {
   display: flex;
   margin-top: 30px;
   margin-left: 48%;
-  background-color: rgb(229, 74, 13);
+  background-color: rgb(104, 45, 124);
   color: white;
   border: none;
   padding: 9px 30px;
@@ -53,14 +52,15 @@ body {
 
 .retroContainer {
   display: flex;
-  background-color: #49c365;
+  background-color: #e6e2ff;
   border-radius: 5px;
   margin-top: 50px;
   padding-left: 2%;
   width: 60%;
   align-items: center;
   margin-left: 20%;
 }
+
 .retroTitle {
   font-size: 25px;
   font-weight: bold;
@@ -72,20 +72,21 @@ body {
   display: inline-block;
   width: 110px;
   height: 60px;
+  color: white;
 }
 
 .newRetroButton,
 .joinButton {
-  background-color: #007bff;
-  color: white;
+  background-color: rgb(104, 45, 124);
+  color: rgb(240, 233, 233);
   border: none;
   border-radius: 5px;
   cursor: pointer;
 }
 
 .newRetroButton:hover,
 .joinButton:hover {
-  background-color: #0056b3;
+  background-color: #e5b3ff;
 }
 
 .retroCodeButton {
@@ -110,6 +111,10 @@ body {
   margin-left: 24%;
 }
 
+.commentInput {
+  flex-grow: 1;
+}
+
 .joinButton {
   margin-top: 5px;
   margin-left: 10%;
@@ -136,22 +141,22 @@ body {
 }
 
 .box1 {
-  background-color: rgb(244, 77, 77);
+  background-color: #f3e5ff;
   border-radius: 10px;
 }
 
 .box2 {
-  background-color: rgb(0, 255, 47);
+  background-color: #dcc6ff;
   border-radius: 10px;
 }
 
 .box3 {
-  background-color: rgb(125, 122, 121);
+  background-color: #c5aaff;
   border-radius: 10px;
 }
 
 .box4 {
-  background-color: yellow;
+  background-color: #efbbff;
   border-radius: 10px;
 }
 
@@ -162,6 +167,8 @@ body {
 .comment {
   margin-right: 10px;
   margin-top: 5px;
+  color: #9c27b0;
+  margin-bottom: 5px;
 }
 
 .commentInputContainer {
@@ -195,3 +202,23 @@ body {
   margin-top: 20%;
   margin-bottom: 10%;
 }
+.completeButtonContainer {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  margin-top: 20px;
+  width: auto;
+}
+
+.completeButton {
+  padding: 10px 20px;
+  background-color: #9c27b0;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.completeButton:hover {
+  background-color: #7b1fa2;
+}
diff --git a/packages/client/src/containers/RetroPage/RetroPage.jsx b/packages/client/src/containers/RetroPage/RetroPage.jsx
@@ -217,9 +217,15 @@ function RetroPage() {
           </div>
         ))}
       </div>
-      <button className="completeButton" type="button" onClick={handleComplete}>
-        Complete
-      </button>
+      <div className="completeButtonContainer">
+        <button
+          className="completeButton"
+          type="button"
+          onClick={handleComplete}
+        >
+          Complete
+        </button>
+      </div>
     </div>
   );
 }