Merge pull request #15 from Valdoveste/feature/processComponent

Feature/processComponents

src/app/components/footer/footer.component.html

@@ -1 +1 @@
-<p>footer works!</p>
+<footer id="footer"></footer>

src/app/components/footer/footer.component.scss

@@ -0,0 +1,5 @@
+#footer {
+  height: 65px;
+  margin-top: 1rem;
+  background-color: #292929;
+}

src/app/components/header/header.component.html

@@ -1 +1,12 @@
-<p>header works!</p>
+<header id="header">
+  <nav class="header__navbar">
+    <ul class="header__navbar__list">
+      <li class="header__navbar__item"> <img src="" alt="Sistema Jurídico Logo"> </li>
+    </ul>
+
+    <ul class="header__navbar__list">
+      <li class="header__navbar__item-user-name">Olá, <!--{{Usuário}} --></li>
+      <button class="header__navbar__item-btn-create-process">Criar processo</button>
+    </ul>
+  </nav>
+</header>

src/app/components/header/header.component.scss

@@ -0,0 +1,37 @@
+#header {
+  // height: 75px;
+  background-color: #292929;
+
+  .header__navbar {
+    height: 100%;
+    padding: 20px;
+    margin-bottom: 1rem;
+    color: #fff;
+    @include flexCenter(center, space-between, row);
+
+    .header__navbar__list:last-child {
+      @include flexCenter(center, space-between, row);
+
+      .header__navbar__item-user-name {
+        margin-right: 15px;
+      }
+
+      .header__navbar__item-btn-create-process {
+        padding: 10px;
+        color: white;
+        text-align: center;
+        border-radius: 4.5px;
+        background: #e20474;
+        border: 1px solid #e20474;
+        box-shadow:
+          0 1px 1px 0 #e204735c,
+          0 1px 6px 1px #e2047334;
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+  }
+}

src/app/components/main/main.component.html

@@ -1 +1,3 @@
-<router-outlet></router-outlet>
+<main id="main-container">
+  <router-outlet></router-outlet>
+</main>

src/app/components/main/main.component.scss

@@ -0,0 +1,3 @@
+#main-container {
+  height: 100%;
+}

src/app/components/processComponents/process-area/process-area.component.html

@@ -1 +1,48 @@
-<p>process-area works!</p>
+<div id="process-area">
+  <div class="process-area__header">
+    <h1># 203165789</h1>
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+        <path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1
+           -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z" />
+      </svg>
+    </div>
+  </div>
+
+  <div class="process-area__body">
+
+  </div>
+
+  <!-- <div class="main-info">
+    <p>Tipo de Ação</p>
+    <p>Empresa</p>
+    <p>Âmbito</p>
+    <div>
+      <h1>Parte Contrária</h1>
+      <p>Nome</p>
+      <p>CPF</p>
+      <p>CNPJ</p>
+      <p>Enderço</p>
+      <p>Email</p>
+    </div>
+    <p>Estado</p>
+    <p>Comarca</p>
+    <p>Vara/Orgão</p>
+    <p>Foro/Tribunal/Órgão</p>
+    <p>Fase</p>
+    <p>Data de Distribuição</p>
+    <p>Data de Citação</p>
+    <p>Patrono responsável</p>
+    <p>Patronos anteriores</p>
+    <p>Testo do objeto</p>
+    <p>Valor da causa</p>
+    <p>Data último andamento</p>
+    <p>Motivo do encerramento</p>
+    <p>Acordo</p>
+    <p>Data da tentativa de acordo</p>
+    <p>Valro da tentativa de acordo</p>
+    <p>Condições da tentativa de acordo</p>
+    <p>Valor Estimado de Desembolso/Reembolso Atulizado</p>
+  </div> -->
+</div>

src/app/components/processComponents/process-area/process-area.component.scss

@@ -0,0 +1,25 @@
+#process-area {
+  width: 750px;
+  padding: 1rem;
+  margin-right: 2rem;
+  background-color: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.050),
+    0 2px 6px 2px rgba(60, 64, 67, 0.050);
+
+  .process-area__header {
+    @include flexCenter(normal, space-between, row);
+
+    div {
+      width: 20px;
+
+      svg {
+        fill: #000;
+      }
+    }
+
+  }
+
+  .main-info {
+    border: 1px solid rgba(60, 64, 67, 0.170)
+  }
+}