feat: new research participant home page

src/app/app.module.ts

@@ -121,6 +121,7 @@ import { GrowthMessageComponent } from "./components/growth/growth-message/growt
 import { ClinicGrowthPage } from "./pages/clinic-growth/clinic-growth-page.component";
 import { EducationalResourcesPage } from "./pages/educational-resources/educational-resources-page.component";
 import { ResearchParentalGrowthPageComponent } from "./pages/research-parental-growth-page/research-parental-growth-page.component";
+import { ResearchParticipantHome } from "./pages/research-participant-home/research-participant-home.component";
 
 import { NgApexchartsModule } from "ng-apexcharts";
 // possibly to be deleted below
@@ -209,6 +210,7 @@ import { AdminExternalResourcesComponent } from "./pages/admin-resources/admin-r
     ClinicGrowthPage,
     EducationalResourcesPage,
     ResearchParentalGrowthPageComponent,
+    ResearchParticipantHome,
   ],
   imports: [
     BrowserModule,
@@ -282,8 +284,8 @@ import { AdminExternalResourcesComponent } from "./pages/admin-resources/admin-r
 })
 export class AppModule {
   constructor(private translate: TranslateService) {
-    this.translate.setDefaultLang('en');
-    this.translate.use('en');
+    this.translate.setDefaultLang("en");
+    this.translate.use("en");
   }
 }
 // required for AOT compilation

src/app/pages/parental-header/parental-header.component.html

@@ -16,8 +16,6 @@ <h2 matDialogTitle><a routerLink="/parent/home" class = "titles-logo">{{ "PARENT
   </div>
 
   <button onclick="history.back()" class="mybuttons">Home</button>
-
-
 
   <!-- 
   <div align="center"><i></i></div>

src/app/pages/research-parental-growth-page/research-parental-growth-page.component.css

@@ -4,7 +4,7 @@
   min-height: 100vh;
   margin: 0 auto;
   padding: 16px;
-  padding-top: 240px;
+  padding-top: 160px;
 }
 .page-content {
   width: 100%;

src/app/pages/research-parental-header/research-parental-header.component.html

@@ -1,36 +1,16 @@
-<title>{{'PARTICIPANTPORTAL.TITLE' | translate}}</title>
+<title>{{ "PARTICIPANTPORTAL.TITLE" | translate }}</title>
 
 <div class="header">
-  <h2 matDialogTitle>{{'PARTICIPANTPORTAL.TITLE' | translate}}</h2>
-  <div align="center"><i> <img src="assets/images/logo.png" alt="" height="80" width="80"> </i></div>
+  <h2 matDialogTitle>{{ "PARTICIPANTPORTAL.TITLE" | translate }}</h2>
+  <div align="center">
+    <i> <img src="assets/images/logo.png" alt="" height="80" width="80" /> </i>
+  </div>
   <div class="login-button">
-    <button mat-raised-button (click)="logout()">{{'Log out' | translate}}<i class="fa fa-sign-out" aria-hidden="true"></i></button>
+    <button mat-raised-button (click)="logout()">
+      {{ "Log out" | translate
+      }}<i class="fa fa-sign-out" aria-hidden="true"></i>
+    </button>
   </div>
 
-  <div align="center"><i></i></div>
-  <a class="tab-link" routerLink="/participant/home" routerLinkActive="active"
-    >{{'Questionnaire' | translate}}
-    <img 
-      class="center" 
-      src="assets/images/Questionnaire_Icon.png" 
-      height="40" 
-      width="40"
-    />
-  </a>
-  <a
-    class="tab-link"
-    routerLink="/participant/research-parental-chart"
-    routerLinkActive="active"
-    >{{ "Charts" | translate }}
-    <img
-      class="center"
-      src="assets/images/Chart_Growth_Icon.png"
-      height="40"
-      width="40"
-    />
-  </a>
-  <!-- uncomment history if neccessary
-    <a class="tab-link" routerLink="/researcher_parents/history" routerLinkActive="active">FFQ History</a>
-   -->
-
+  <button onclick="history.back()" class="mybuttons">Home</button>
 </div>

src/app/pages/research-participant-home/research-participant-home.component.css

@@ -0,0 +1,293 @@
+.home-component-container {
+  padding-top: 160px;
+
+  color: aliceblue;
+
+  align-items: center;
+}
+
+.home-container {
+  display: flex;
+  flex-direction: column;
+  width: 80vw;
+  align-items: center;
+  margin: auto;
+}
+
+.home-component-container .homeitem-container {
+  background-color: #4d79ff;
+  color: white;
+}
+
+.home-component-container .homeitem-container:hover {
+  background-color: #b2b9e1;
+  color: #2c387e;
+}
+
+.homeitem-container {
+  display: flex;
+  flex-direction: column;
+
+  background-color: #0039e6;
+
+  margin: 0.3em;
+  padding: 1em;
+
+  align-items: center;
+
+  width: 100%;
+}
+
+.homeitem-container h1 {
+  font-size: 1.5em;
+  text-align: center;
+}
+
+.homeitem-container p {
+  /* align-items: left !important; */
+  /* text-align: left; */
+  font-size: 1em;
+}
+
+.homeitem-2-container {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 1;
+}
+
+.homeitem-content {
+  display: flex;
+  flex-direction: row;
+}
+
+.homeitem-title h1,
+.homeitem-title h2,
+.homeitem-title p {
+  text-align: left;
+  color: aliceblue;
+}
+
+.homeitem-title {
+  padding-left: 20px;
+}
+
+.homeitem-title h1 {
+  font-size: 2em;
+  margin-top: 20px;
+}
+
+.homeitem-title h2 {
+  font-size: 2em;
+  line-height: 0.75em;
+}
+
+.homeitem-title p {
+  font-size: 1em;
+}
+
+.homeitem-svg-title {
+  align-items: center;
+  margin: auto;
+}
+
+.homeitem-svg-title img {
+  align-items: center;
+}
+
+.homeitem-svg {
+  align-items: center;
+  padding: 1em;
+}
+
+.homeitem-svg img {
+  align-items: center;
+}
+
+.home-component-container a {
+  color: white;
+}
+
+@media (max-width: 450px) {
+  .home-component-container {
+    /* width:75%;
+        height:75%; */
+    padding-top: 300px;
+    /* border: 1px solid blue; */
+  }
+
+  #firstitem,
+  #seconditem,
+  #thirditem,
+  #fourthitem,
+  #fifthitem {
+    position: relative;
+    /* border: 1px solid red; */
+    left: 125px;
+  }
+
+  #firstitem {
+    top: 0px;
+  }
+
+  #seconditem {
+    top: 340px;
+    left: -115px;
+  }
+
+  #thirditem {
+    left: 123px;
+    top: 340px;
+  }
+
+  #fourthitem {
+    left: -115px;
+    padding-left: 55px;
+    top: 870px;
+  }
+
+  #fifthitem {
+    left: 0px;
+    top: 880px;
+  }
+}
+
+h2 {
+  text-align: center;
+  color: aliceblue;
+}
+
+a {
+  text-decoration: none;
+}
+
+.header {
+  background-color: #3f51b5;
+  width: 100%;
+  height: auto;
+  position: fixed;
+  z-index: 9999;
+  padding-bottom: 16px;
+}
+
+.links {
+  padding-top: 22px;
+}
+
+body,
+html {
+  height: 100%;
+  margin: 0;
+  font-family: Arial;
+}
+
+/* Style tab links */
+.tab-link {
+  margin-top: 10px;
+  background-color: #6573c3;
+  color: white;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 10px 16px;
+  font-size: 17px;
+  width: 25%;
+  min-width: 130px;
+  text-align: center;
+}
+
+.active {
+  background-color: #2c387e;
+  color: white;
+}
+.tab-link:hover {
+  background-color: #b2b9e1;
+  /*color: #2C387E;*/
+  color: #0612ba;
+  font-weight: bold;
+}
+
+/* Style the tab content (and add height:100% for full page content) */
+.tabcontent {
+  color: white;
+  display: none;
+  padding: 100px 20px;
+  height: 100%;
+}
+
+.login-button {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  padding: 20px 10px;
+}
+
+a {
+  text-decoration: none;
+}
+
+.header {
+  background-color: #3f51b5;
+  width: 100%;
+  height: auto;
+  position: fixed;
+  z-index: 999;
+}
+
+.links {
+  padding-top: 22px;
+}
+
+body,
+html {
+  height: 100%;
+  margin: 0;
+  font-family: Arial;
+}
+
+/* Style tab links */
+.tab-link {
+  margin-top: 10px;
+  background-color: #6573c3;
+  color: white;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 10px 16px;
+  font-size: 17px;
+  width: 20%;
+  text-align: center;
+}
+
+.active {
+  background-color: #2c387e;
+  color: white;
+}
+.tab-link:hover {
+  background-color: #b2b9e1;
+  color: #2c387e;
+  font-weight: bold;
+}
+
+/* Style the tab content (and add height:100% for full page content) */
+.tabcontent {
+  color: white;
+  display: none;
+  padding: 100px 20px;
+  height: 100%;
+}
+
+.login-button {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  padding: 20px 10px;
+}
+.center {
+  display: block;
+  margin: auto;
+}
+.header-logo {
+  cursor: pointer;
+}