Merge branch 'add-new-logo' into 'master'

Add new logo See merge request covid-19/frontend!71

Merge branch 'add-new-logo' into 'master'
a1f30a25 · Julian Matschinske · b1f44dca · ac5b24ef · a1f30a25 · a1f30a25
Commit a1f30a25 authored 4 years ago by Julian Matschinske
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
 <div class="container is-fluid">
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
-      <img src="assets/logo.png" class="menu-icon" alt="logo" width="50px"/>
+      <img routerLink="/" src="assets/covex_logo.png" class="menu-icon is-hoverable navbar-item" alt="logo" width="200"/>
      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>

--- a/src/app/pages/home-page/home-page.component.html
+++ b/src/app/pages/home-page/home-page.component.html
-<section class="hero is-primary is-large">
+<section class="hero is-primary is-fullheight">
  <div class="hero-body">
-    <div class="container">
-      <h1 class="title">
-        SARS-CoV-2 Explorer
-      </h1>
-      <h2 class="subtitle">
-        Explore the Protein interactions of SARS-CoV-2
-      </h2>
+    <div class="container has-text-centered">
+      <div class="column is-6 is-offset-3">
+
+          <img src="assets/covex_logo.png">
+
+          <h1 class="subtitle is-2">
+            <i>Explore</i> the <b> virus-host interactome</b>
+          </h1>
+          <h1 class="subtitle is-2">
+            <i>Find</i> <b> putative drug targets</b>
+          </h1>
+          <h1 class="subtitle is-2">
+            <i>Repurpose</i> <b> drugs </b>
+          </h1>
+          <h1 class="subtitle is-2">
+            <i>All in one web-tool</i>
+          </h1>
+
+          <button class="button has-text-info is-large is-rounded ">
+            <a routerLink="/explorer" routerLinkActive="is-active">
+              <span class="icon"><i class="fa fa-project-diagram has-text-info"></i></span>
+              <span>Start now!</span>
+            </a>
+          </button>
+
+      </div>
    </div>
  </div>
-</section>
-
-<div class="content">
-General Information about the Website
-</div>

+</section>
+<script async type="text/javascript" src="../js/bulma.js"></script>
--- a/src/app/pages/home-page/home-page.component.scss
+++ b/src/app/pages/home-page/home-page.component.scss
+img {
+  width: 600px;
+  padding: 30px;
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 25px;
+}
--- a/src/assets/covex_logo.png
+++ b/src/assets/covex_logo.png
--- a/src/assets/covex_logo_small.png
+++ b/src/assets/covex_logo_small.png
--- a/src/assets/virus_background.png
+++ b/src/assets/virus_background.png
--- a/src/index.html
+++ b/src/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <head>
  <meta charset="utf-8">
-  <title>CovPPI</title>
+  <title>CoVex</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/ico" href="../../assets/logo.png">
+  <link rel="icon" type="image/ico" href="assets/covex_logo_small.png">
  <script src="https://kit.fontawesome.com/3ad4fe992f.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">

--- a/src/styles.scss
+++ b/src/styles.scss
@@ -6,6 +6,11 @@
 @import "~@ng-select/ng-select/themes/default.theme.css";

 $family-sans-serif: "Varela Round", sans-serif;
+$primary: #3070B3;
+$success: #48C774;
+$danger: #EF476F;
+$link: $primary;
+$info: $primary;
 @import "~bulma/bulma.sass";
 @import "~primeng/resources/primeng.css";
 @import "~primeicons/primeicons.css";
@@ -19,24 +24,19 @@ body {
 }

 .hero.is-primary {
-  background-color: #118AB2;
-  background-image: url("assets/logo.png"), linear-gradient(to left, #f2fcfe, #118AB2);
+  background-color: $primary;
+  background-image: url("assets/virus_background.png");
+  background-size: cover;
  background-repeat: no-repeat;
-  background-position: 80%;
-  padding: 50px;
 }

-.button.is-primary, .button.is-primary:hover, .button.is-primary:disabled {
-  background-color: #118AB2;
-}
-
-.button.is-danger, .button.is-danger:hover, .button.is-danger:disabled {
-  background-color: #EF476F;
-}
-
-.button.is-success, .button.is-success:hover, .button.is-success:disabled {
-  background-color: #48C774;
-}
+//.hero.is-primary {
+//  background-color: $primary;
+//  background-image: linear-gradient(to left, #f2fcfe, $primary);
+//  background-repeat: no-repeat;
+//  background-position: 80%;
+//  padding: 50px;
+//}

 div.navbar-menu {
  margin-left: 5px;
@@ -162,23 +162,23 @@ div.field.has-addons.add-remove-toggle {
 }

 .fa-check {
-  color: #48C774;
+  color: $success;
 }

 .fa-search.investigational {
-  color: #e2b600;
+  color: $warning;
 }

 .fa-spinner {
-  color: #e2b600;
+  color: $warning;
 }

 .fa-pause {
-  color: #e2b600;
+  color: $warning;
 }

 .fa-exclamation-triangle {
-  color: #EF476F;
+  color: $danger;
 }

 .footer-toggle-buttons {