wip: home page styles

joshuamorony · Oct 9, 2023 · 41002d3 · 41002d3
1 parent 7c36b11
commit 41002d3
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 8 deletions.
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -1,4 +1,7 @@
 import { Component, effect, inject } from '@angular/core';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { MessageInputComponent } from './ui/message-input.component';
 import { MessageService } from '../shared/data-access/message.service';
 import { MessageListComponent } from './ui/message-list.component';
@@ -9,11 +12,45 @@ import { Router } from '@angular/router';
   standalone: true,
   selector: 'app-home',
   template: `
-    <button (click)="authService.logout()">Logout</button>
-    <app-message-list [messages]="messageService.messages()" />
-    <app-message-input (send)="messageService.add$.next($event)" />
+    <div class="container gradient-bg">
+      <mat-toolbar>
+        <button mat-icon-button (click)="authService.logout()">
+          <mat-icon>logout</mat-icon>
+        </button>
+        <span>Chat</span>
+      </mat-toolbar>
+      <app-message-list [messages]="messageService.messages()" />
+      <app-message-input (send)="messageService.add$.next($event)" />
+    </div>
   `,
-  imports: [MessageInputComponent, MessageListComponent],
+  imports: [
+    MessageInputComponent,
+    MessageListComponent,
+    MatToolbarModule,
+    MatIconModule,
+    MatButtonModule,
+  ],
+  styles: [
+    `
+      .container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+      }
+
+      app-message-list {
+        height: 100%;
+        width: 100%;
+        padding-bottom: 5rem;
+      }
+
+      app-message-input {
+        position: fixed;
+        bottom: 0;
+      }
+    `,
+  ],
 })
 export default class HomeComponent {
   messageService = inject(MessageService);

diff --git a/src/app/home/ui/message-input.component.ts b/src/app/home/ui/message-input.component.ts
@@ -1,16 +1,52 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   standalone: true,
   selector: 'app-message-input',
   template: `
-    <input type="text" [formControl]="messageControl" />
-    <button (click)="send.emit(messageControl.value); messageControl.reset()">
-      Send
+    <input
+      type="text"
+      [formControl]="messageControl"
+      placeholder="type a message..."
+    />
+    <button
+      mat-button
+      (click)="send.emit(messageControl.value); messageControl.reset()"
+    >
+      <mat-icon>send</mat-icon>
     </button>
   `,
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, MatButtonModule, MatIconModule],
+  styles: [
+    `
+      :host {
+        width: 100%;
+        position: relative;
+      }
+
+      input {
+        width: 100%;
+        background: #fff;
+        border: none;
+        font-size: 1.2em;
+        padding: 2rem 1rem;
+      }
+
+      button {
+        height: 100% !important;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+
+        mat-icon {
+          margin-right: 0;
+        }
+      }
+    `,
+  ],
 })
 export class MessageInputComponent {
   @Output() send = new EventEmitter<string>();