Merge pull request #77 from elixir-europe/impact

Impact
elixir-europe · Mar 6, 2024 · b237584 · b237584
2 parents f3f145d + 40f465b
commit b237584
Show file tree

Hide file tree

Showing 16 changed files with 267 additions and 58 deletions.
diff --git a/frontend/public/ISCIII_logo.png b/frontend/public/ISCIII_logo.png
diff --git a/frontend/public/caixa_logo.png b/frontend/public/caixa_logo.png
diff --git a/frontend/public/feder_logo.png b/frontend/public/feder_logo.png
diff --git a/frontend/public/impactLogo.png b/frontend/public/impactLogo.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -22,7 +22,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>ELIXIR Beacon network demo</title>
+  <title>IMPaCT Beacon network demo</title>
 </head>
 
 <body class="dx-viewport">

diff --git a/frontend/public/laMaratoLogo.png b/frontend/public/laMaratoLogo.png
diff --git a/frontend/public/ministerio_logo.png b/frontend/public/ministerio_logo.png
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -66,13 +66,22 @@ html {
 }
 
 .version {
-  margin-bottom: 19px;
-  margin-right: 46px;
-  margin-top: 7px;
+  margin-bottom: 27px;
+  margin-right: 27px;
+  margin-top: -10px;
   color: rgb(102 116 152) !important;
   font-weight: 700 !important;
 }
 
+.logosVersionContainer {
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
+  justify-content: center;
+  align-items: flex-end;
+  margin-bottom: 20px;
+}
+
 .searchButton {
   padding-right: 4px;
   padding-left: 0px;
@@ -311,7 +320,7 @@ html {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-    color: #756d6d;
+  color: #756d6d;
 }
 
 .buttonAlphanum:hover {
@@ -594,10 +603,79 @@ html {
   align-items: center;
 }
 
-.elixirLogo {
-  height: 91px;
-  margin-top: 29px;
-  margin-right: 21px;
+.impactLogo {
+  height: 35px;
+  margin-top: 40px;
+  margin-right: 11px;
+  -webkit-filter: grayscale(20%);
+  filter: grayscale(60%);
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+}
+
+.impactLogo:hover {
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+.federLogo {
+  height: 33px;
+  margin-top: 42px;
+  margin-right: 14px;
+  -webkit-filter: grayscale(20%);
+  filter: grayscale(100%);
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+}
+
+.federLogo:hover {
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+.iscLogo {
+  height: 33px;
+  margin-top: 42px;
+  margin-right: 14px;
+  -webkit-filter: grayscale(20%);
+  filter: grayscale(100%);
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+}
+
+.iscLogo:hover {
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+.ministerioLogo {
+  height: 33px;
+  margin-top: 42px;
+  margin-right: 14px;
+  -webkit-filter: grayscale(20%);
+  filter: grayscale(100%);
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+}
+
+.ministerioLogo:hover {
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+.laCaixaLogo {
+  height: 33px;
+  margin-top: 42px;
+  margin-right: 30px;
+  -webkit-filter: grayscale(20%);
+  filter: grayscale(100%);
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+}
+
+.laCaixaLogo:hover {
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
 }
 
 .comming_message {
@@ -662,7 +740,6 @@ select {
   align-items: center;
   padding-bottom: 55px;
   min-height: 280px;
-
 }
 
 .resultSet2 {
@@ -727,9 +804,10 @@ hr {
   display: flex;
   width: 100vw;
   align-items: flex-end;
-  margin-bottom: -11px;
-  margin-top: -16px;
-  flex-direction: column;
+  margin-bottom: 19px;
+  margin-top: -8px;
+  flex-direction: row;
+  justify-content: flex-end;
 }
 
 .helpButton:hover {
@@ -1169,12 +1247,72 @@ h5 {
   }
 
   .version {
-    margin-bottom: 46px;
-    margin-right: 36px;
-    margin-top: -35px;
+    margin-bottom: 39px;
+    margin-right: 25px;
+    margin-top: -14px;
     color: rgb(102 116 152) !important;
-    font-weight: 600;
+    font-weight: 700 !important;
+  }
+
+  .logosVersionContainer {
+    display: flex;
+    flex-direction: column;
+    align-content: stretch;
+    justify-content: center;
+    align-items: flex-end;
+    margin-bottom: 20px;
+  }
+
+  .impactLogo {
+    height: 31px;
+    margin-top: 31px;
+    margin-right: 10px;
+    -webkit-filter: grayscale(20%);
+    filter: grayscale(100%);
+    -webkit-transition: 0.2s ease-in-out;
+    transition: 0.2s ease-in-out;
+  }
+
+  .federLogo {
+    height: 31px;
+    margin-top: 31px;
+    margin-right: 10px;
+    -webkit-filter: grayscale(20%);
+    filter: grayscale(100%);
+    -webkit-transition: 0.2s ease-in-out;
+    transition: 0.2s ease-in-out;
   }
+
+  .iscLogo {
+    height: 31px;
+    margin-top: 31px;
+    margin-right: 10px;
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+    -webkit-transition: 0.2s ease-in-out;
+    transition: 0.2s ease-in-out;
+  }
+
+  .ministerioLogo {
+    height: 31px;
+    margin-top: 31px;
+    margin-right: 10px;
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+    -webkit-transition: 0.2s ease-in-out;
+    transition: 0.2s ease-in-out;
+  }
+
+  .laCaixaLogo {
+    height: 31px;
+    margin-top: 31px;
+    margin-right: 30px;
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+    -webkit-transition: 0.2s ease-in-out;
+    transition: 0.2s ease-in-out;
+  }
+
   .inputVariants {
     height: 24px;
     border: 1.5px solid #dfdfdf;

diff --git a/frontend/src/components/AboutSection/AboutSection.css b/frontend/src/components/AboutSection/AboutSection.css
@@ -9,6 +9,7 @@
   font-weight: 600;
   font-family: 'Poppins', sans-serif;
   margin-right: 26px;
+  transition:  2s, color 1s;
 }
 
 .messageContainer {
@@ -24,4 +25,10 @@
   color: #2f2fb8;
   margin-top: 2px;
   font-size: 40px;
+
+  transition-duration: 2s;
+  transition-timing-function: linear;
+  transition-delay: 1s;
 }
+
+
diff --git a/frontend/src/components/AboutSection/AboutSection.js b/frontend/src/components/AboutSection/AboutSection.js
@@ -6,7 +6,7 @@ function AboutSection () {
       <div className='messageContainer'>
         <h8 className='message'> coming soon . . .</h8>
         <a>
-          <ion-icon color='white' name='rocket-outline'></ion-icon>
+          <ion-icon color='white' className="rocketIcon" name='rocket-outline'></ion-icon>
         </a>
       </div>
     </div>

diff --git a/frontend/src/components/Datasets/ResultsDatasets.css b/frontend/src/components/Datasets/ResultsDatasets.css
@@ -14,6 +14,7 @@ p a {
 .logoBeacon {
   height: 30px;
   padding-left: 10px;
+  margin-top: 8px;
 }
 
 #descriptionEGA {
@@ -57,9 +58,9 @@ p a {
 
 .tittle h2 {
   display: flex;
-  /* align-items: center; */
+  align-items: center;
   justify-content: center;
-  margin-top: 5px !important;
+  margin-top: 7px !important;
   margin-bottom: 5px !important;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -91,10 +92,19 @@ p a {
 }
 
 .tittle2 h1 {
-  font-size: 14px;
-  font-weight: normal;
-  margin: 14px;
-  color: #5d5454;
+  font-size: 12.5px;
+  font-weight: 500;
+  /* margin: 14px; */
+  margin-right: 14px;
+  margin-left: 14px;
+  margin-bottom: 14px;
+  margin-top: 27px;
+  color: #5d5454 !important;
+}
+
+.tittle2 h1:hover {
+  color: #5d5454 !important;
+  font-weight: 500;
 }
 
 .line {
@@ -141,6 +151,7 @@ p a {
   display: flex;
   padding: 2px;
   flex-direction: column;
+  flex-wrap: wrap;
 }
 
 .tittleResults {
@@ -211,6 +222,7 @@ p a {
   align-items: center;
   width: 100%;
   background: #c8d4e6;
+  flex-wrap: wrap;
 }
 
 .tittle4 {
@@ -314,6 +326,7 @@ p a {
     padding: 2px;
     flex-direction: column;
     font-size: 9px !important;
+    flex-wrap: wrap;
   }
 
   .tittle h2 {
@@ -323,11 +336,12 @@ p a {
     color: rgba(12, 16, 64, 0.606);
     font-size: 10px;
     font-weight: 600;
-    margin-left: 10px;
+    align-items: center;
   }
 
   .logoBeacon {
     margin-left: 10px;
+    margin-top: 8px;
   }
 
   .datasetCard a {
@@ -351,9 +365,18 @@ p a {
 
   .tittle2 h1 {
     font-size: 11px;
-    font-weight: normal;
-    margin: 14px;
-    color: #5d5454;
+    font-weight: 500;
+    /* margin: 14px; */
+    margin-right: 14px;
+    margin-left: 14px;
+    margin-bottom: 14px;
+    margin-top: 27px;
+    color: #5d5454 !important;
+  }
+
+  .tittle2 h1:hover {
+    color: #5d5454 !important;
+    font-weight: 500;
   }
 }
 

diff --git a/frontend/src/components/Footer/Footer.js b/frontend/src/components/Footer/Footer.js
@@ -72,7 +72,7 @@ function Footer (props) {
               Beacon validator
             </NavLink>
           </li>
-          <li className='social-icon__item'>
+          {/* <li className='social-icon__item'>
             <a
               className='social-icon__link'
               href='https://github.com/elixir-europe/beacon-network-ui/'
@@ -89,7 +89,7 @@ function Footer (props) {
             >
               GitHub
             </a>
-          </li>
+          </li> */}
           {/* <li className='social-icon__item'>
             <a
               className='social-icon__link'