Feature/sophia/reset password

frontend/src/app/handlePasswordReset/page.module.css

@@ -0,0 +1,157 @@
+.resetContainer {
+  position: relative;
+  height: 100vh;
+  margin: 0;
+}
+
+.resetBox {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 15px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  width: 70%;
+  max-width: 580px;
+}
+
+.resetText {
+  color: #000;
+  text-align: center;
+  font-family: Lora;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  padding: 10px 0px;
+  margin-top: 64px; /* Gap between Welcome and Name field */
+}
+
+.instructions {
+  color: #000;
+  font-family: var(--font-open-sans);
+  font-size: 20px;
+  margin: 0px 128px 0px 128px;
+  text-align: center;
+  margin-top: 16px;
+}
+
+.resetForm {
+  width: 80%;
+  margin-top: 16px; /* Gap between Name and Password */
+}
+
+.inputGroup {
+  padding-top: 6px;
+}
+
+.spacer {
+  margin-bottom: 16px;
+}
+
+.label {
+  display: block;
+  margin-bottom: 5px;
+  color: gray;
+  font-size: 16px;
+}
+
+.input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.rememberPassword {
+  color: #4274f4;
+
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: center;
+  padding-top: 22px;
+  margin-bottom: 64px; /* Gap between Forgot password and Log In */
+
+  cursor: pointer;
+  user-select: none;
+}
+
+.confirmButton {
+  width: 100%;
+  height: 50px;
+  flex-shrink: 0;
+  text-align: center;
+  font-family: Lora;
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 56px;
+}
+
+.disabledButton {
+  background: grey !important;
+}
+
+.visibilityButton {
+  padding: 0;
+}
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .backgroundImage {
+    object-fit: cover;
+    object-position: 35% 10%;
+  }
+
+  .resetBox {
+    width: 90%;
+    max-width: 500px;
+  }
+
+  .instructions {
+    margin: 0px 32px;
+    font-size: 18px;
+  }
+
+  .confirmButton {
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+
+/* mobile version */
+@media screen and (max-width: 550px) {
+  .backgroundImage {
+    object-fit: cover;
+    object-position: 35% 10%;
+  }
+
+  .image {
+    width: 130px;
+    height: 60px;
+  }
+
+  .resetText {
+    font-size: 28px;
+    margin-top: 17px; /* Gap between Welcome and Name field */
+  }
+
+  .instructions {
+    margin: 0;
+    font-size: 14px;
+  }
+
+  .inputGroup {
+    padding-top: 0;
+  }
+
+  .confirmButton {
+    margin-bottom: 17px;
+  }
+}