first commit

src/app/pages/message/message-routing.module.ts

@@ -0,0 +1,25 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MessagePage } from './message.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MessagePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MessagePageRoutingModule { }

src/app/pages/message/message.module.ts

@@ -0,0 +1,28 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MessagePageRoutingModule } from './message-routing.module';
+
+import { MessagePage } from './message.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    MessagePageRoutingModule
+  ],
+  declarations: [MessagePage]
+})
+export class MessagePageModule { }

src/app/pages/message/message.page.html

@@ -0,0 +1,57 @@
+<!--
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+ -->
+<ion-header>
+  <ion-toolbar>
+    <ion-item lines="none">
+      <ion-icon name="arrow-back-outline" (click)="onBack()"></ion-icon>
+      <ion-label>
+        Jenny Wilona
+      </ion-label>
+    </ion-item>
+    <ion-buttons slot="end" (click)="onCall()">
+      <ion-button>
+        <ion-icon name="call-outline" color="light"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon name="ellipsis-horizontal-circle-outline" color="light"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="messageList">
+    <div class="left">
+      <p>Attending a trad show can be</p>
+    </div>
+    <div class="right">
+      <p>hey</p>
+    </div>
+    <div class="left">
+      <p>hii, there</p>
+    </div>
+  </div>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-row>
+      <ion-col size="10">
+        <ion-input type="text" placeholder="message..."></ion-input>
+      </ion-col>
+      <ion-col size="2">
+        <div class="btn">
+          <ion-icon name="mic"></ion-icon>
+        </div>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

src/app/pages/message/message.page.scss

@@ -0,0 +1,112 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+ion-header {
+  --background: var(--ion-color-primary);
+
+  ion-toolbar {
+    --background: var(--ion-color-primary);
+
+    ion-item {
+      --background: transparent;
+
+      ion-icon {
+        font-size: 20px;
+        color: #eaeaf4;
+      }
+
+      .back_image {
+        height: 40px;
+        width: 40px;
+        border-radius: 100%;
+      }
+
+      ion-label {
+        margin-left: 1rem;
+        color: #eaeaf4;
+
+        h2 {
+          font-size: 18px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+ion-content {
+
+  .messageList {
+    .left {
+      width: 100%;
+      float: left;
+      margin-left: 15px;
+
+      p {
+        width: max-content;
+        float: left;
+        background: rgb(237, 235, 235);
+        border-radius: 0 10px 10px 10px;
+        padding: 5px 10px;
+      }
+    }
+
+    .right {
+      width: 100%;
+      float: right;
+      margin-right: 15px;
+
+      p {
+        width: max-content;
+        float: right;
+        background: var(--ion-color-primary);
+        color: white;
+        border-radius: 10px 0px 10px 10px;
+        padding: 5px 10px;
+      }
+    }
+  }
+}
+
+ion-footer {
+  ion-toolbar {
+    --border-width: 0px;
+    padding: 10px;
+    align-items: center;
+
+    ion-row {
+      display: flex;
+      flex-direction: row;
+
+      ion-col {
+        ion-input {
+          --padding-start: 20px;
+          background: #F4F5F8;
+          border-radius: 30px;
+          border: 1px solid rgb(220, 219, 219);
+        }
+
+        ion-buttons {
+          background: #fe734d50;
+          border-radius: 50%;
+        }
+
+        .btn {
+          background: var(--ion-color-primary);
+          color: white;
+          border-radius: 50%;
+          height: 100%;
+          width: 90%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}

src/app/pages/message/message.page.spec.ts

@@ -0,0 +1,32 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { MessagePage } from './message.page';
+
+describe('MessagePage', () => {
+  let component: MessagePage;
+  let fixture: ComponentFixture<MessagePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [MessagePage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MessagePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/message/message.page.ts

@@ -0,0 +1,36 @@
+/*
+  Authors : initappz (Rahul Jograna)
+  Website : https://initappz.com/
+  App Name : E-Learning App Template
+  This App Template Source code is licensed as per the
+  terms found in the Website https://initappz.com/license
+  Copyright and Good Faith Purchasers © 2021-present initappz.
+*/
+import { Router } from '@angular/router';
+import { NavController } from '@ionic/angular';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-message',
+  templateUrl: './message.page.html',
+  styleUrls: ['./message.page.scss'],
+})
+export class MessagePage implements OnInit {
+
+  constructor(
+    private navctr: NavController,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onBack() {
+    this.navctr.back();
+  }
+
+  onCall() {
+    this.router.navigate(['call']);
+  }
+
+}