Major front end improvement (UX/UI)

MouradFrz · Oct 6, 2022 · 28bf4cc · 28bf4cc
1 parent 21c75c6
commit 28bf4cc
Show file tree

Hide file tree

Showing 17 changed files with 630 additions and 112 deletions.
diff --git a/resources/css/convo.css b/resources/css/convo.css
@@ -1 +1,139 @@
-@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";*{padding:0;margin:0;font-family:"Open Sans",sans-serif}body{max-height:100vh;background-color:#eef9fd}.container{width:95%;max-width:378px;margin:auto;max-height:100vh;position:relative;background-color:#dff6ff;min-height:100vh;box-shadow:rgba(149,157,165,.2) 0px 8px 24px}.container nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0px 10px 10px}.container nav input{padding:8px 15px;border:none;background-color:#06283d;font-weight:800;color:#fff;border-radius:2px;cursor:pointer;transition:.08s ease}.container nav input:hover{background-color:#9bc4c9}.container main{height:100%}.container main .messages-wrapper{display:flex;max-height:calc(100vh - 100px);flex-direction:column;overflow-y:scroll}.container main .messages-wrapper .message{background-color:#47b5ff;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:10px;margin:5px;border-radius:3px;align-self:flex-end;word-break:break-all}.container main .messages-wrapper .message.sent{background-color:#9bc4c9;align-self:flex-start}.container #send-message-form{display:flex;width:100%;background-color:red;position:absolute;bottom:0}.container #send-message-form .input-field{padding:12px;width:80%;border:none;outline:none}.container #send-message-form .send-btn{all:unset;width:20%;text-align:center;background-color:#9bc4c9;cursor:pointer;transition:.1s ease}.container #send-message-form .send-btn:hover{background-color:#06283d;color:#fff}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#9bc4c9;border-radius:2px}::-webkit-scrollbar-thumb{background:#9db6c0;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#06283d}/*# sourceMappingURL=convo.css.map */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
+* {
+  padding: 0;
+  margin: 0;
+  font-family: "Open Sans", sans-serif;
+}
+
+body {
+  max-height: 100vh;
+  background-color: #eef9fd;
+}
+
+.container {
+  width: 95%;
+  max-width: 378px;
+  margin: auto;
+  max-height: 100vh;
+  position: relative;
+  background-color: #ffdcdc;
+  min-height: 100vh;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}
+.container nav {
+  display: flex;
+  align-items: center;
+  padding: 10px 0px 10px 10px;
+  gap: 10px;
+}
+.container nav h1 a {
+  color: #804140;
+}
+.container nav .user-status {
+  display: flex;
+  flex-direction: column;
+}
+.container nav .user-status div {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.container nav .user-status .circle {
+  width: 10px;
+  height: 10px;
+  display: block;
+  border-radius: 50%;
+  background-color: gray;
+  transform: translateY(1px);
+}
+.container nav .user-status .circle.green {
+  background-color: green;
+}
+.container nav .user-status .status {
+  font-size: 0.7rem;
+  color: gray;
+}
+.container nav button {
+  padding: 8px 15px;
+  border: none;
+  background-color: #ffdcdc;
+  color: black;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: 0.08s ease;
+}
+.container nav button i {
+  font-weight: 900;
+}
+.container main {
+  height: 100%;
+}
+.container main .messages-wrapper {
+  display: flex;
+  max-height: calc(100vh - 100px);
+  flex-direction: column;
+  overflow-y: scroll;
+}
+.container main .messages-wrapper .message {
+  background-color: #804140;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: 10px;
+  margin: 5px;
+  border-radius: 3px;
+  align-self: flex-end;
+  overflow-wrap: break-word;
+  max-width: 60%;
+  color: white;
+}
+.container main .messages-wrapper .message.sent {
+  background-color: #CC6765;
+  align-self: flex-start;
+}
+.container #send-message-form {
+  display: flex;
+  width: 100%;
+  background-color: red;
+  position: absolute;
+  bottom: 0;
+}
+.container #send-message-form .input-field {
+  padding: 12px;
+  width: 80%;
+  border: none;
+  outline: none;
+}
+.container #send-message-form .send-btn {
+  all: unset;
+  width: 20%;
+  text-align: center;
+  background-color: #CC6765;
+  cursor: pointer;
+  transition: 0.1s ease;
+  color: white;
+}
+.container #send-message-form .send-btn:hover {
+  background-color: #FF8280;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #ffdcdc;
+  border-radius: 2px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #804140;
+  border-radius: 2px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #804140;
+}
diff --git a/resources/css/convo.css.map b/resources/css/convo.css.map
diff --git a/resources/css/extra.css b/resources/css/extra.css
@@ -0,0 +1,63 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: "Open Sans", sans-serif;
+}
+
+.custom-button {
+  all: unset;
+  background-color: #804140;
+  color: white;
+  padding: 6px 18px;
+  border-radius: 2px;
+  cursor: pointer;
+  border: none !important;
+}
+.custom-button:hover {
+  color: white;
+  background-color: #CC6765;
+}
+
+body {
+  height: 100vh;
+  background-color: #FF8280;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body .login-panel {
+  box-shadow: -2px 1px 81px -37px rgba(0, 0, 0, 0.67);
+  -webkit-box-shadow: -2px 1px 81px -37px rgba(0, 0, 0, 0.67);
+  -moz-box-shadow: -2px 1px 81px -37px rgba(0, 0, 0, 0.67);
+  padding: 20px 30px;
+  background-color: rgb(246, 246, 246);
+}
+body .login-panel .success {
+  color: green;
+}
+body .login-panel form {
+  display: flex;
+  flex-direction: column;
+  width: 350px;
+  max-width: 100%;
+}
+body .login-panel form .error {
+  font-size: 0.9rem;
+  color: main #804140;
+  margin-bottom: 0.5rem;
+  font-weight: 300;
+}
+body .login-panel form input {
+  outline: none;
+  border: 1px solid gray;
+  padding: 4px 8px;
+}
+body .login-panel form [type=submit] {
+  width: -webkit-min-content !important;
+  width: -moz-min-content !important;
+  width: min-content !important;
+  padding-left: 10px;
+  padding-right: 10px;
+}
diff --git a/resources/css/homepage.css b/resources/css/homepage.css
@@ -1 +1,142 @@
-@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";*{padding:0;margin:0;font-family:"Open Sans",sans-serif;box-sizing:border-box}body{min-height:100vh;background-color:#eef9fd}.container{width:95%;max-width:378px;margin:auto;background-color:#dff6ff;min-height:100vh;box-shadow:rgba(149,157,165,.2) 0px 8px 24px}.container nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0px 10px 10px}.container nav input{padding:8px 15px;border:none;background-color:#06283d;font-weight:800;color:#fff;border-radius:2px;cursor:pointer;transition:.08s ease}.container nav input:hover{background-color:#256d85}.container main>a{text-decoration:none}.container main .convo{padding:10px;color:#252525;transition:.05s ease-out}.container main .convo p:nth-child(1){font-size:1.2rem;font-weight:600}.container main .convo p:nth-child(2){font-size:.9rem;font-weight:400;color:#484848}.container main .convo p:nth-child(3){font-size:.7rem;font-weight:200}.container main .convo:hover{background-color:#37abd2}.container main .no-convo{text-align:center;color:#5d5d5d;font-size:.8rem}.container section{position:relative}.container section #user-search{padding:12px;width:100%;border:none;outline:none}.container section #floating-users{position:absolute;top:43px;left:0;z-index:2;width:100%;border-radius:3px;box-shadow:rgba(0,0,0,.25) 0px 54px 55px,rgba(0,0,0,.12) 0px -12px 30px,rgba(0,0,0,.12) 0px 4px 6px,rgba(0,0,0,.17) 0px 12px 13px,rgba(0,0,0,.09) 0px -3px 5px}.container section #floating-users a{display:block;text-decoration:none;padding:5px 8px;background-color:#06283d;color:#fff}.container section #floating-users a:hover{background-color:#0a4264}.container section #floating-users p{padding:5px 8px;background-color:#256d85;color:#fff;text-align:center}/*# sourceMappingURL=homepage.css.map */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
+* {
+  padding: 0;
+  margin: 0;
+  font-family: "Open Sans", sans-serif;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  background-color: #eef9fd;
+}
+
+.green-circle {
+  width: 10px;
+  height: 10px;
+  display: block;
+  background-color: green;
+  border-radius: 50%;
+  transform: translateY(2px);
+}
+
+.container {
+  width: 95%;
+  max-width: 378px;
+  margin: auto;
+  background-color: #ffdcdc;
+  min-height: 100vh;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}
+.container nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0px 10px 10px;
+}
+.container nav .user-info {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.container nav .user-info > div {
+  gap: 3px;
+  display: flex;
+  align-items: center;
+}
+.container nav button {
+  padding: 8px 15px;
+  border: none;
+  background-color: #ffdcdc;
+  color: black;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: 0.08s ease;
+}
+.container nav button i {
+  font-weight: 900;
+}
+.container main > a {
+  text-decoration: none;
+}
+.container main .convo {
+  padding: 10px;
+  color: #252525;
+  transition: 0.05s ease-out;
+}
+.container main .convo p:nth-child(1) {
+  font-size: 1.2rem;
+  font-weight: 600;
+  position: relative;
+  left: 14px;
+}
+.container main .convo p:nth-child(1)::before {
+  content: "";
+  position: absolute;
+  left: -15px;
+  top: 10px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: block;
+  background-color: gray;
+  transition: 0.2s ease;
+}
+.container main .convo p:nth-child(1).offline::before {
+  background-color: gray;
+}
+.container main .convo p:nth-child(1).online::before {
+  background-color: green;
+}
+.container main .convo p:nth-child(2) {
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: #484848;
+}
+.container main .convo p:nth-child(3) {
+  font-size: 0.7rem;
+  font-weight: 200;
+}
+.container main .convo:hover {
+  transition: 0.1s ease;
+  background-color: #FF8280;
+}
+.container main .no-convo {
+  text-align: center;
+  color: #5d5d5d;
+  font-size: 0.8rem;
+}
+.container section {
+  position: relative;
+}
+.container section #user-search {
+  padding: 12px;
+  width: 100%;
+  border: none;
+  outline: none;
+}
+.container section #floating-users {
+  position: absolute;
+  top: 43px;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  border-radius: 3px;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+}
+.container section #floating-users a {
+  display: block;
+  text-decoration: none;
+  padding: 5px 8px;
+  background-color: #804140;
+  color: white;
+}
+.container section #floating-users a:hover {
+  background-color: #0a4264;
+}
+.container section #floating-users p {
+  padding: 5px 8px;
+  background-color: #CC6765;
+  color: white;
+  text-align: center;
+}/*# sourceMappingURL=homepage.css.map */
diff --git a/resources/css/homepage.css.map b/resources/css/homepage.css.map