New action page and new publication page finished.

src/app/pages/publications/new-action/new-action.page.html

@@ -1,9 +1,62 @@
-<ion-header>
+<ion-header class="ion-no-border">
   <ion-toolbar>
-    <ion-title>new-action</ion-title>
+    <div class="title-content">
+      <div class="div-title">
+        <ion-label class="title">Nova Ação</ion-label>
+      </div>
+    </div>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
+  <div class="ion-item-container">
+    <ion-input placeholder="Assunto" ></ion-input>
+  </div>
+
+  <div class="container-div">
+    <div class="ion-item-class-2">
+      <div class="ion-icon-class">
+        <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+      </div>
+      <div class="ion-input-class">
+        <ion-datetime 
+          placeholder="Fim"
+          displayFormat="D MMM YYYY H:mm"
+          minuteValues="0,15,30,45"
+          monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+          min="2018" 
+          max="2022">
+        </ion-datetime>
+      </div>
+    </div>
+  </div>
+
+  <div class="container-div">
+    <div class="ion-item-class-2">
+      <div class="ion-icon-class">
+        <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+      </div>
+      <div class="ion-textarea-class">
+        <ion-textarea rows="3" cols="20" placeholder="Descrição da ação..."></ion-textarea>
+      </div>
+    </div>
+  </div>
+
+  
 
 </ion-content>
+
+<ion-footer class="ion-no-border">
+  <ion-toolbar class="footer-toolbar">
+    <ion-buttons slot="start">
+      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+        <ion-label>Cancelar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Criar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>

src/app/pages/publications/new-action/new-action.page.scss

@@ -0,0 +1,67 @@
+
+ion-content{
+    --background: transparent;
+    transform: translate3d(0, 5px, 0);
+  }
+  ion-toolbar{
+    --padding-top: 15px;  
+    --background: transparent;
+    border-width: 0 !important;
+  }
+.title-content{
+    width: 360px;
+    margin: 0px auto;
+    overflow: auto;
+    padding: 0 !important;
+  }
+  .div-title{
+      width: 221px;
+    /* padding: 0!important; */
+    float: left;
+    margin: 5px 0 0 5px;
+  }
+  .title{
+    font-size: 25px;
+  }
+  .container-div{
+    margin-bottom: 15px;
+    overflow: auto;
+  }
+  .ion-item-container{
+    width: 360px;
+    margin: 15px auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 10px;
+  }
+  .ion-item-container-no-border{
+    width: 100%;
+    margin: 0px auto;
+    padding: 0 !important;
+    overflow: auto;
+  }
+  .ion-item-class-2{
+    width: 360px;
+    margin: 0px auto;
+  }
+  .ion-icon-class{
+    width: 45px;
+    height: 45px;
+    float: left;
+    padding: 10px;
+    font-size: 25px;
+  }
+  .ion-textarea-class{
+    width: 315px;
+    height: auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-input-class-no-height{
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: auto;
+  }

src/app/pages/publications/new-action/new-action.page.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
 
 @Component({
   selector: 'app-new-action',
@@ -7,9 +8,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NewActionPage implements OnInit {
 
-  constructor() { }
+  constructor(
+    private modalController: ModalController,
+  ) { }
 
   ngOnInit() {
   }
+  save(){
+    console.log('Salvar...');
+  }
+  close(){
+    this.modalController.dismiss();
+  }
 
 }