built the gabinete-digital-menu page

src/app/app-routing.module.ts

@@ -14,8 +14,14 @@ const routes: Routes = [
     path: 'cal-modal',
     loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule)
   },
+  /* 
+  {
+    path: 'gabinete-digital-menu',
+    loadChildren: () => import('./pages/gabinete-digital-menu/gabinete-digital-menu.module').then( m => m.GabineteDigitalMenuPageModule)
+  },
 
-/*   {
+
+  {
     path: 'view-event',
     loadChildren: () => import('./pages/view-event/view-event.module').then( m => m.ViewEventPageModule)
   }, */

src/app/home/home-routing.module.ts

@@ -28,6 +28,10 @@ const routes: Routes = [
         path: 'gabinete-digital',
         loadChildren: ()=> import('../pages/gabinete-digital/gabinete-digital.module').then(m => m.GabineteDigitalPageModule)
       },
+      {
+        path: 'gabinete-digital-menu',
+        loadChildren: ()=> import('../pages/gabinete-digital-menu/gabinete-digital-menu.module').then(m => m.GabineteDigitalMenuPageModule)
+      },
       /* PROVISORIO */
       {
         path: 'view-event',

src/app/home/home.page.html

@@ -1,5 +1,4 @@
 <ion-tabs>
-
     <ion-tab-bar slot="bottom">
       <ion-tab-button tab="feed">
         <ion-icon name="home"></ion-icon>
@@ -10,7 +9,7 @@
         <ion-icon name="calendar"></ion-icon>
         <ion-label>Agenda</ion-label>
       </ion-tab-button>
-      <ion-tab-button tab="gabinete-digital">
+      <ion-tab-button tab="gabinete-digital-menu">
           <ion-icon name="file-tray-stacked"></ion-icon>
           <ion-label>Gabinete Digital</ion-label>
         </ion-tab-button>
@@ -18,11 +17,6 @@
             <ion-icon name="search"></ion-icon>
             <ion-label>Pesquisa</ion-label>
           </ion-tab-button>
-  
-      <!-- <ion-tab-button tab="tab3">
-        <ion-icon name="square"></ion-icon>
-        <ion-label>Tab 3</ion-label>
-      </ion-tab-button> -->
     </ion-tab-bar>
   
   </ion-tabs>

src/app/pages/feed/feed.page.html

@@ -151,7 +151,7 @@
             <div class="div-item">
               <div class="div-up">
                 <div class="div-icon">
-                  <ion-icon slot="start" name="chatbox"></ion-icon>
+                  <ion-icon slot="start" name="reader"></ion-icon>
                 </div>
                 <div class="div-content-oficial">
                   <h3>Reunião de Conselho de Ministros</h3>
@@ -200,7 +200,7 @@
               <div class="div-item">
                 <div class="div-up">
                   <div class="div-icon">
-                    <ion-icon slot="start" name="chatbox"></ion-icon>
+                    <ion-icon slot="start" name="reader"></ion-icon>
                   </div>
                   <div class="div-content-pessoal">
                     <h3>Conference call Particular</h3>

src/app/pages/gabinete-digital-menu/gabinete-digital-menu-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GabineteDigitalMenuPage } from './gabinete-digital-menu.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GabineteDigitalMenuPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GabineteDigitalMenuPageRoutingModule {}

src/app/pages/gabinete-digital-menu/gabinete-digital-menu.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GabineteDigitalMenuPageRoutingModule } from './gabinete-digital-menu-routing.module';
+
+import { GabineteDigitalMenuPage } from './gabinete-digital-menu.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    GabineteDigitalMenuPageRoutingModule
+  ],
+  declarations: [GabineteDigitalMenuPage]
+})
+export class GabineteDigitalMenuPageModule {}

src/app/pages/gabinete-digital-menu/gabinete-digital-menu.page.html

@@ -0,0 +1,53 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Gbinete Digital</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-card color="#d4d5ca">
+  <ion-card-header>
+    <ion-card-title>Expediente</ion-card-title>
+    <ion-card-content>
+      <ion-item (click)="load()">
+        <ion-label>Correspondência</ion-label>
+        <ion-button slot="end">1</ion-button>
+      </ion-item>
+      <ion-item (click)="load()" class="ion-activated">
+        <ion-label>Pedidos de parecer</ion-label>
+        <ion-button slot="end">1</ion-button>
+      </ion-item>
+      <ion-item (click)="load()">
+        <ion-label>Pedidos de deferimento</ion-label>
+        <ion-button slot="end">1</ion-button>
+      </ion-item>
+    </ion-card-content>
+  </ion-card-header>
+</ion-card>
+<ion-card color="#d4d5ca">
+  <ion-card-header>
+    <ion-card-title>Diplomas</ion-card-title>
+    <ion-card-content>
+      <ion-item (click)="load()" class="ion-item-change-color">
+        <ion-label>Assinados pelo PR</ion-label>
+        <ion-button slot="end">1</ion-button>
+      </ion-item>
+      <ion-item primary (click)="load()" class="ion-activated">
+        <ion-label>Por validar (MDGPR)</ion-label>
+        <ion-button slot="end">1</ion-button>
+      </ion-item>
+    </ion-card-content>
+  </ion-card-header>
+</ion-card>
+<ion-card color="#d4d5ca">
+  <ion-card-header>
+    <ion-card-title>Despachos Efectuados</ion-card-title>
+    <ion-card-content>
+      <ion-item (click)="load()" class="ion-item-change-color">
+        <ion-label>Presidente da República</ion-label>
+        <ion-button slot="end">1</ion-button>
+      </ion-item>
+    </ion-card-content>
+  </ion-card-header>
+</ion-card>
+</ion-content>

src/app/pages/gabinete-digital-menu/gabinete-digital-menu.page.scss

@@ -0,0 +1,29 @@
+:host{
+    ion-card-title{
+        text-align: center;
+    }
+
+
+ion-card{
+    background-color: #d4d5ca;
+}
+ion-item{
+    --ion-background-color:#dae3f3;
+    margin-bottom: 10px;
+    border-radius: 5px;
+ }
+ ion-button{
+     color: #000;
+    --background:none;
+    --border-color: none;
+    --box-shadow:none;
+ }
+ ion-label{
+     padding: 10px;
+ }
+}
+.ion-item-change-color{
+    --ion-background-color:#fff2cc !important;
+    margin-bottom: 10px;
+    border-radius: 5px;
+}

src/app/pages/gabinete-digital-menu/gabinete-digital-menu.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GabineteDigitalMenuPage } from './gabinete-digital-menu.page';
+
+describe('GabineteDigitalMenuPage', () => {
+  let component: GabineteDigitalMenuPage;
+  let fixture: ComponentFixture<GabineteDigitalMenuPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GabineteDigitalMenuPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GabineteDigitalMenuPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/gabinete-digital-menu/gabinete-digital-menu.page.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-gabinete-digital-menu',
+  templateUrl: './gabinete-digital-menu.page.html',
+  styleUrls: ['./gabinete-digital-menu.page.scss'],
+})
+export class GabineteDigitalMenuPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  load(){
+    
+  }
+
+}

src/app/pages/gabinete-digital/gabinete-digital.page.html

@@ -20,7 +20,7 @@
       <ion-item-group>
         <ion-item-sliding>
           <ion-item lines="none">
-            <div class="div-content">
+            <div class="div-content-expediente">
               <ion-item lines="none">
                 <ion-icon slot="end" name="document-outline"></ion-icon>
                  <h3>Reunião de Conselho de Ministros</h3>
@@ -35,7 +35,7 @@
       <ion-item-group>
         <ion-item-sliding>
           <ion-item lines="none">
-            <div class="div-content">
+            <div class="div-content-pendentes">
               <ion-item lines="none">
                 <ion-icon slot="end" name="document-outline"></ion-icon>
                  <h3>Avaliação de execução dos projectos públicos</h3>

src/app/pages/gabinete-digital/gabinete-digital.page.scss

@@ -13,10 +13,22 @@
     margin: 0;
   }
 //DIV
-  .div-content h3{
+.div-content-expediente{
+  width: 100%;
+  float: left;
+  border-left: 3px solid #dae3f3;
+  padding: 0 0 0 5px;
+}
+.div-content-pendentes{
+  width: 100%;
+  float: left;
+  border-left: 3px solid #d9d9d9;
+  padding: 0 0 0 5px;
+}
+  .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 15px;
+    font-size: 16pt;
     width: 100%;
   }
   .div-icon{
@@ -30,14 +42,8 @@
     margin: 0 auto;
   
   }
-.div-content{
+  .div-content-expediente p, .div-content-pendentes p{
-    width: 100%;
+    font-size: 14pt;
-    float: left;
-    border-left: 2px solid orange;
-    padding: 0 0 0 5px;
-  }
-  .div-content p{
-    font-size: 10.5pt;
     color: rgb(94, 92, 92);
     padding: 0;
     margin: 0;

src/theme/variables.scss

@@ -74,6 +74,8 @@
   --ion-color-light-contrast-rgb: 0, 0, 0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
+
+  --ion-color-expediente: #dae3f3;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -145,6 +147,8 @@
     --ion-color-light-contrast-rgb: 255,255,255;
     --ion-color-light-shade: #1e2023;
     --ion-color-light-tint: #383a3e;
+
+    --ion-color-expediente: #dae3f3;
   }
 
   /*
@@ -184,6 +188,8 @@
     --ion-item-background: #000000;
 
     --ion-card-background: #1c1c1d;
+
+    --ion-color-expediente: #dae3f3;
   }
 
 
@@ -228,6 +234,8 @@
     --ion-tab-bar-background: #1f1f1f;
 
     --ion-card-background: #1e1e1e;
+/* My colors */
+    --ion-color-expediente: #dae3f3;
   }
 }
 .center{