Merge pull request #357 from ScienceForChange/feature/design

Feature/design

src/app/layout/components/menu/app.menu.component.html

@@ -1,8 +1,12 @@
 <ul class="layout-menu pt-2 pb-2">
   <li class="p-0">
     <a routerLink="/">
-      <icon-soundcollect [iconClass]="'w-full mr-2 w-2rem h-2rem'" />
-      <span class="menu-item"> SoundCollect</span>
+      <img
+        src="../../../../assets/images/home/header/isotipo-color-SC.png"
+        alt="logo"
+        class="logo"
+        style="width: 30px; border-radius: 7px">
+      <span class="menu-item"> SonsCat</span>
     </a>
   </li>
   <p-divider />
@@ -72,4 +76,4 @@
       </button>
     </li>
   </div>
-</ul>
+</ul>

src/app/modules/home/page/home.component.html

@@ -3,7 +3,7 @@
   <div id="header" class="flex col-12">
     <div class="card w-full bg-color-green">
       <div class="col-12 flex justify-content-end">
-        <img id="logo" src="../../../../assets/images/home/header/SC_Logo.png" title="SC_Logo_CAT" alt="SoundCollect" loading="lazy">
+        <img id="logo" src="../../../../assets/images/home/header/logo-color-SC.png" title="SC_Logo_CAT" alt="SoundCollect" loading="lazy">
       </div>
       <div class="col-12">
         <h1>{{'home.header.wellcome' | translate}}</h1>

src/app/modules/home/page/home.component.scss

@@ -40,16 +40,17 @@
 
 }
 .bg-color-green {
-  background: linear-gradient(to left bottom, #206A7199, #206A7133 80%);
+  background: linear-gradient(to left bottom, #00cc99, white 80%);
 }
 .bg-color-orange {
-  background: linear-gradient(to left bottom, #FF7A1F99, #FF7A1F33 80%);
+  background: linear-gradient(to left bottom, #6FCB67, #B7E5B3 80%);
 }
 #logo{
   width: 100%;
   height: 100%;
-  max-width: 150px;
+  max-width: 250px;
   display: flex;
   justify-content: center;
   align-items: center;
+  border-radius: 10px;
 }

src/app/modules/map/components/map-study-zone-layers/map-study-zone-layers.component.scss

@@ -15,18 +15,17 @@
       }
     }
     .toggleButton{
-      background-color: var(--orange);
+      background-color: var(--green);
       border: none;
     }
     // Hide scrollbar for Chrome, Safari and Opera
     ::-webkit-scrollbar {
       display: none;
     }
-  
+
     // Hide scrollbar for Firefox
     scrollbar-width: none;
-  
+
     // Hide scrollbar for IE and Edge
     -ms-overflow-style: none;
   }
-

src/app/shared/components/observation-info-modal/observation-info-modal.component.scss

@@ -1,5 +1,5 @@
 .meteo-information {
-  background-color: var(--orange-lighter);
+  background-color: var(--green-lighter);
   min-width: 100px;
 }
 

src/app/shared/components/spinner/spinner.component.html

@@ -18,11 +18,11 @@
       <g clip-path="url(#clip0_1196_10711)">
         <path
           d="M102 51C102 79.1665 79.1665 102 51 102C22.8335 102 0 79.1665 0 51C0 22.8335 22.8335 0 51 0C79.1665 0 102 22.8335 102 51ZM10.2 51C10.2 73.5332 28.4668 91.8 51 91.8C73.5332 91.8 91.8 73.5332 91.8 51C91.8 28.4668 73.5332 10.2 51 10.2C28.4668 10.2 10.2 28.4668 10.2 51Z"
-          fill="#EAEAEB"
+          fill="#00cc99"
         />
         <path
           d="M18.5438 83.4562C16.5521 85.4479 13.3001 85.4624 11.5172 83.2819C4.97145 75.2762 0.987113 65.4331 0.160637 55.0446C-0.801223 42.9545 2.57705 30.9173 9.68921 21.0932C16.8014 11.269 27.1818 4.30105 38.9678 1.43967C49.0949 -1.01897 59.69 -0.307384 69.3393 3.41134C71.9675 4.42423 72.9691 7.51816 71.6989 10.0322C70.4287 12.5461 67.3679 13.5211 64.7152 12.5742C57.2554 9.91156 49.1427 9.46572 41.3742 11.3517C31.9455 13.6408 23.6411 19.2152 17.9514 27.0745C12.2616 34.9339 9.55902 44.5636 10.3285 54.2357C10.9625 62.2046 13.9192 69.7725 18.7781 76.0279C20.5059 78.2523 20.5355 81.4645 18.5438 83.4562Z"
-          fill="#ff6200"
+          fill="#66ffd9"
         />
       </g>
       <defs>

src/assets/layout/styles/layout/_menu.scss

@@ -41,12 +41,12 @@
     }
 
     &.active {
-      background: var(--orange-transparency);
+      background: var(--green-transparency);
       border-color: var(--primary-color);
     }
 
     &:hover {
-      background-color: var(--orange-transparency);
+      background-color: var(--green-transparency);
     }
 
     &:focus {
@@ -142,7 +142,7 @@
     }
 
     &:hover {
-      background-color: var(--orange-transparency);
+      background-color: var(--green-transparency);
     }
 
     &:focus {
@@ -218,7 +218,7 @@
         .p-menuitem-content {
           border-radius: 12px !important;
           &:hover {
-            background-color: var(--orange-transparency) !important;
+            background-color: var(--green-transparency) !important;
             border-radius: 12px !important;
             transition: none;
           }

src/assets/layout/styles/layout/_preloading.scss

@@ -17,7 +17,7 @@
 
 .preloader-content:before, .preloader-content:after{
     content: '';
-    border: 1em solid var(--primary-color);
+    border: 1em solid var(--green-color);
     border-radius: 50%;
     width: inherit;
     height: inherit;