diff --git a/frontend/src/app/general/general.component.html b/frontend/src/app/general/general.component.html index 21f47dc..d909a79 100644 --- a/frontend/src/app/general/general.component.html +++ b/frontend/src/app/general/general.component.html @@ -1,25 +1,52 @@ - - - - Socket.IO chat - - - - -
- -
- - +
+
+ + + +

{{username}}

+ +
+
+ + + +
+ + + +
+

General Chat

+
+ +
+ + +
+ + + +
+
+
+
+ +
+
+
+ +
+
+ +
+
+ + diff --git a/frontend/src/app/general/general.component.ts b/frontend/src/app/general/general.component.ts index 096d68b..383ffcc 100644 --- a/frontend/src/app/general/general.component.ts +++ b/frontend/src/app/general/general.component.ts @@ -11,7 +11,7 @@ import {MessageService} from "../services/message/message.service"; }) export class GeneralComponent implements OnInit { - private username = sessionStorage.getItem('login'); + public username = sessionStorage.getItem('login'); private room = 'general'; public msg = ''; diff --git a/frontend/src/app/login/login.component.html b/frontend/src/app/login/login.component.html index 28e356d..814a887 100644 --- a/frontend/src/app/login/login.component.html +++ b/frontend/src/app/login/login.component.html @@ -24,5 +24,6 @@ - +
+ diff --git a/frontend/src/app/services/auth/auth.service.ts b/frontend/src/app/services/auth/auth.service.ts index 2b070eb..7d16dad 100644 --- a/frontend/src/app/services/auth/auth.service.ts +++ b/frontend/src/app/services/auth/auth.service.ts @@ -11,6 +11,8 @@ export class AuthService { // @ts-ignore islog: boolean; + // @ts-ignore + public currentUser; constructor(private messageService: MessageService) { } diff --git a/frontend/src/app/services/message/message.service.ts b/frontend/src/app/services/message/message.service.ts index 13b1560..ed7273a 100644 --- a/frontend/src/app/services/message/message.service.ts +++ b/frontend/src/app/services/message/message.service.ts @@ -25,3 +25,4 @@ export class MessageService { } } + diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 5e6c778..0bbb80a 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -5,6 +5,7 @@ body { .container-fluid { padding: 50px 200px; overflow: hidden; + background-color: #87CEEB; } .user-list-card { @@ -46,64 +47,44 @@ body { position: relative; overflow: hidden; - .chat-header { - height: 70px; - background-color: #E5E5E5; + +} + +.chat-header { + height: 70px; + border-radius: 10px; + background-color: #E5E5E5; + display: flex; + justify-content: flex-start; + align-items: center; + + .username { + font-size: 20px; + font-weight: 500; + margin-bottom: 0; + margin-left: 20px; display: flex; - justify-content: flex-start; + justify-content: center; align-items: center; - - .username { - font-size: 14px; - font-weight: 500; - margin-bottom: 0; - display: flex; - justify-content: center; - align-items: center; - } - } - - .chat-body { - background-image: url(./assets/image/user.png); - background-repeat: no-repeat; - background-size: cover; - background-position: center center; - height: calc(100vh - 125px); - overflow-y: auto; - - .message-container { - background-color: white; - padding: 7px; - border-radius: 5px; - width: fit-content; - max-width: 90%; - margin-bottom: 15px; - } - - .same-user { - display: flex; - justify-content: flex-end; - - .message-container { - background-color: lightskyblue; - } - } - } - - .chat-footer { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background-color: #EDEDED; - padding: 10px 20px; - - .form-control { - background-color: white; - border: 1px solid #D8DDEC; - box-sizing: border-box; - font-size: 1rem; - color: black; - } } } + +.chat-body { + background-color: white; + border-radius: 10px; + height: calc(89.5vh - 89.5px); + overflow-y: auto; +} + +.chat-footer { + border-radius: 10px; + bottom: 0; + left: 0; + right: 0; + background-color: #EDEDED; + padding: 10px 20px; +} + +.modal-footer { + display: block; +}