diff --git a/packages/client/public/index.html b/packages/client/public/index.html
index aa069f2..974b9cf 100644
--- 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`.
-->
- React App
+ Retro Realm
diff --git a/packages/client/src/containers/CreateTeamPage/CreateTeam.css b/packages/client/src/containers/CreateTeamPage/CreateTeam.css
index f1314ce..afbb767 100644
--- 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,33 +45,39 @@ 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;
@@ -75,5 +85,38 @@ li button {
}
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
index 8f8d159..ad546b2 100644
--- a/packages/client/src/containers/CreateTeamPage/CreateTeam.js
+++ b/packages/client/src/containers/CreateTeamPage/CreateTeam.js
@@ -162,9 +162,6 @@ function CreateTeam() {
/>
-
- Members
-
diff --git a/packages/client/src/containers/RetroPage/RetroPage.css b/packages/client/src/containers/RetroPage/RetroPage.css
index 270f0d4..f09b74f 100644
--- 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,7 +25,7 @@ body {
}
.input-button {
- background-color: rgb(207, 231, 201);
+ background-color: rgb(104, 45, 124);
margin-top: 30px;
}
@@ -34,7 +33,7 @@ body {
display: flex;
margin-left: 45%;
margin-top: 20px;
- background-color: rgb(5, 255, 134);
+ background-color: rgb(136, 77, 167);
padding: 25px 69px;
}
@@ -42,7 +41,7 @@ body {
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,7 +52,7 @@ body {
.retroContainer {
display: flex;
- background-color: #49c365;
+ background-color: #e6e2ff;
border-radius: 5px;
margin-top: 50px;
padding-left: 2%;
@@ -61,6 +60,7 @@ body {
align-items: center;
margin-left: 20%;
}
+
.retroTitle {
font-size: 25px;
font-weight: bold;
@@ -72,12 +72,13 @@ 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;
@@ -85,7 +86,7 @@ body {
.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
index 8383d73..b13841e 100644
--- a/packages/client/src/containers/RetroPage/RetroPage.jsx
+++ b/packages/client/src/containers/RetroPage/RetroPage.jsx
@@ -217,9 +217,15 @@ function RetroPage() {
))}
-
+
+
+
);
}