Merge pull request #34 from elixir-europe/elixir-bsc

Elixir bsc
elixir-europe · Jan 8, 2024 · 81b78d3 · 81b78d3
2 parents 00df030 + 97c1aa0
commit 81b78d3
Show file tree

Hide file tree

Showing 21 changed files with 1,782 additions and 1,450 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -14,4 +14,4 @@ services:
     stdin_open: true
     volumes:
       - ./frontend/.env:/frontend/.env
-      - ./frontend/src/config.json:/frontend/src/config.json
+      - ./frontend/src/config.json:/frontend/src/config.json
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -38,8 +38,8 @@ html {
   font-variant-caps: all-petite-caps;
 }
 
-.modeVariants:hover h2{
-  color: rgb(236, 149, 0)!important;
+.modeVariants:hover h2 {
+  color: rgb(236, 149, 0) !important;
 }
 
 .variantsFilters {
@@ -196,11 +196,12 @@ html {
 }
 
 .inputVariants {
-  height: 18px;
+  height: 24px;
   border: 1.5px solid #dfdfdf;
   border-radius: 2px;
   margin-bottom: 30px;
-  font-size: 14.5px;
+  font-size: 12.5px;
+  padding: 5px;
 }
 
 .labelVariants {
@@ -362,11 +363,11 @@ html {
 }
 
 .buttonVariants {
-  margin-top: 12px;
-  margin-bottom: 20px;
+  margin-top: 9px;
+  margin-bottom: -14px;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px,
     rgba(179, 179, 179, 0.22) 0px 1px 1px;
-  padding: 7px;
+  padding: 6px;
   cursor: pointer;
 }
 
@@ -394,6 +395,26 @@ html {
   flex-direction: column;
 }
 
+.variantExampleButton {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  border: solid #d6d5e1;
+  padding: 4px;
+  margin-left: 13px;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  font-size: 10px;
+  box-shadow: 1px 1px 1px -1px #ffd8d8;
+  text-transform: uppercase;
+  color: rgba(12, 16, 64, 0.606);
+  font-weight: 700;
+}
+.variantExampleButton:hover {
+  background-color: #78beed;
+  border: solid #06c;
+}
+
 .divFlex {
   width: 168%;
   display: flex;
@@ -444,11 +465,14 @@ html {
 }
 
 .NavlinkVerifier {
-  color: #3fa18e;
-  width: 172px;
+  color: rgba(12, 16, 64, 0.606);
+  font-size: 15px !important;
+  font-feature-settings: 'pcap', 'c2pc';
+  font-variant-caps: all-petite-caps;
+  margin-top: -4px;
 }
 .NavlinkVerifier:hover {
-  margin: 0px !important;
+  color: rgb(236, 149, 0) !important;
 }
 
 .alphanumContainer {
@@ -652,7 +676,7 @@ hr {
 }
 
 .questionLogo:hover {
-  background: linear-gradient(356deg, #6ac5ff 50%, #86d2ff 80%);
+  background: linear-gradient(356deg, #3893cb 50%, #419ed3 80%);
   border-radius: 9px;
 }
 
@@ -663,7 +687,7 @@ hr {
 }
 
 .questionLogo2:hover {
-  background: linear-gradient(356deg, #6ac5ff 50%, #86d2ff 80%);
+  background: linear-gradient(356deg, #3ca2e2 50%, #63acd6 80%);
   border-radius: 9px;
 }
 
@@ -979,9 +1003,9 @@ h5 {
 }
 
 .ReactModal__Content--after-open {
-  width: 369px;
-  font-size: 12px;
-  height: 29%;
+  width: 485px;
+  font-size: 11px;
+  height: 33%;
   position: absolute !important;
   inset: 35% !important;
   border: 1px solid rgb(204, 204, 204) !important;
@@ -1008,13 +1032,26 @@ h5 {
   }
 
   .inputVariants {
-    height: 18px;
+    height: 24px;
     border: 1.5px solid #dfdfdf;
     border-radius: 2px;
     margin-bottom: 30px;
     font-size: 12px;
   }
 
+  .exampleQuery {
+    border: none;
+    /* border-color: #5454bc; */
+    padding: 5px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row-reverse;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+  }
+
   .labelVariants {
     font-size: 11.5px;
     margin-bottom: 18px;
@@ -1075,7 +1112,7 @@ h5 {
     text-transform: uppercase;
     font-size: 10px;
     margin-left: 2px !important;
-    margin-right: 5px !important;
+    margin-right: 7px !important;
     /* margin-right: 36px; */
     /* margin-left: 27px; */
   }
@@ -1112,10 +1149,12 @@ h5 {
     font-size: 10px;
     margin-left: 0px !important;
   }
+
   .additionalOptions {
     justify-content: center;
     align-items: center;
     z-index: 0;
+    height: 34px;
   }
 
   .bulbLogo {
@@ -1140,6 +1179,7 @@ h5 {
     justify-content: center;
     align-content: center;
     align-items: center;
+    width: 112px;
   }
   .searchIcon {
     width: 26px;
@@ -1163,4 +1203,37 @@ h5 {
     height: 30px;
     cursor: pointer;
   }
+
+  .examplesQueriesList {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: flex-start;
+    width: 189px;
+    border-radius: 5px;
+    font-size: 9px;
+    margin-left: 10px !important;
+    background: #8dbde0;
+
+  }
+
+  .bulbExample {
+    display: flex;
+    border-left: 1.7px solid #f1f1f1;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
+
+  .NavlinkVerifier{
+    color: rgba(12, 16, 64, 0.606);
+    font-size: 15px !important;
+    font-feature-settings: 'pcap', 'c2pc', "pcap", "c2pc";
+    font-variant-caps: all-petite-caps;
+    margin-top: 0px;
+    font-size: 12px !important;
+  }
+
 }
diff --git a/frontend/src/components/Cohorts/Cohorts.css b/frontend/src/components/Cohorts/Cohorts.css
@@ -8,8 +8,8 @@
 }
 
 #chartEthnicity {
-  width: 900px;
-  margin: 38px;
+  width: 90vw;
+  margin-top: 29px;
 }
 
 .back {
@@ -47,15 +47,15 @@
 }
 
 #chartFilteredEthnicity {
-  width: 700px !important;
+  width: 70vw !important;
   display: flex;
   align-items: center;
   justify-items: center;
   margin-top: 20px;
 }
 
 #chartFilteredEthnicity2 {
-  width: 400px !important;
+  width: 40vw !important;
   height: 400px !important;
   display: flex;
   align-items: center;
@@ -71,8 +71,16 @@
   margin-top: 20px;
 }
 
+.graphsDiv h10 {
+  color: #df0a0a;
+  font-weight: 500;
+  margin-top: 32px;
+  margin-left: -29px;
+  font-size: 14px;
+}
+
 #chartFilteredDisease {
-  width: 700px !important;
+  width: 70vw !important;
   height: 700px !important;
   display: flex;
   align-items: center;
@@ -81,7 +89,7 @@
 }
 
 #chartFilteredDisease2 {
-  width: 400px !important;
+  width: 40vw !important;
   height: 400px !important;
   display: flex;
   align-items: center;
@@ -90,7 +98,7 @@
 }
 
 #chartGeo {
-  width: 500px;
+  width: 50vw;
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 14px;
@@ -205,9 +213,9 @@
 }
 
 #chartDiseases {
-  width: 1000px;
-  margin: 38px;
+  width: 100vw;
   min-height: 300px !important;
+  margin-top: 29px;
 }
 
 h12 {