-chore: import popover images

-chore: implement popover content -refactor: reference new modal components
hms-dbmi · Jun 26, 2024 · 1dc412c · 1dc412c
1 parent 13df5a5
commit 1dc412c
Show file tree

Hide file tree

Showing 34 changed files with 582 additions and 115 deletions.
diff --git a/src/App.css b/src/App.css
@@ -138,8 +138,7 @@ a:hover {
 }
 
 .title-about-link {
-    margin-left: 12px;
-    margin-right: 12px;
+    margin: auto 12px;
     font-size: 12px;
     cursor: pointer;
 }
@@ -558,7 +557,7 @@ a:hover {
 }
 
 .vis-overview-panel .title {
-    height: 30px;
+    height: 51px;
     padding: 10px;
     font-size: 18px;
     border-bottom: 1px solid lightgray;
@@ -621,7 +620,7 @@ a:hover {
 .overview-status {
     background: rgba(210, 210, 210, 0.1);
     width: calc(100% - 400px);
-    height: 20px;
+    height: 25px;
     float: left;
     border-bottom: 1px solid lightgrey;
     padding: 0px;
@@ -815,14 +814,36 @@ a:hover {
         overflow-x: hidden;
     }
 
+    .track-tooltips-container {
+        top: 100px;
+        width: 3%;
+        height: 100%;
+        position: relative;
+        z-index: 997;
+    }
+
+    .track-tooltip {
+        padding: 0px;
+        border: none;
+
+        .button.question-mark {
+            width: 12px;
+            height: 12px;
+            fill: black;
+        }
+    }
+    .track-tooltip:hover {
+        cursor: pointer;
+    }
+
     .sample-label {
         left: 300px;
         top: 8px;
     }
 
     .navigation-buttons {
         position: fixed;
-        z-index: 998;
+        z-index: 997;
         display: flex;
         flex-direction: column;
         top: 3px;
@@ -1040,3 +1061,123 @@ a:hover {
         }
     }
 }
+
+.popover.track-tooltip-popover {
+    max-width: none;
+    box-shadow: 0px 0px 10px 0px #22252954;
+    z-index: 998;
+    .popover-header {
+        font-size: 1.25rem;
+        font-family: 'Inter';
+        font-weight: 600;
+        background-color: #f7f7f7;
+        color: #222529;
+        padding-left: 16px;
+    }
+    .popover-body {
+        display: flex;
+        background-color: #ffffff;
+        border-radius: 10px;
+        padding: 16px 32px;
+        font-family: 'Inter';
+        font-weight: 400;
+        color: #222529;
+
+        .popover-content {
+            display: flex;
+            justify-content: space-between;
+            gap: 24px;
+            h4 {
+                font-size: 1rem;
+                font-weight: 600;
+                margin-bottom: 4px;
+            }
+            hr {
+                color: #cdcdcd;
+                border-width: 1px;
+                margin: 0px;
+            }
+            hr.header {
+                color: #b0b0b0;
+                border-width: 2px;
+            }
+            .section {
+                margin-bottom: 20px;
+
+                .block {
+                    margin: 16px 0px;
+                    display: flex;
+                    min-height: 120px;
+
+                    p {
+                        span.orange {
+                            font-weight: 500;
+                            color: #e1aa4c;
+                        }
+                        span.green {
+                            font-weight: 500;
+                            color: #469c77;
+                        }
+                    }
+                }
+                .block:last-of-type {
+                    margin-bottom: 0px;
+                }
+                .block.text-only {
+                    min-height: min-content;
+                    p {
+                        width: 360px;
+                        padding: 0px 10px;
+                        margin-bottom: 0px;
+                    }
+                }
+                .block.with-image {
+                    justify-content: center;
+                    height: auto;
+
+                    .image-container.two-image {
+                        display: flex;
+                        flex-direction: column;
+                    }
+
+                    img {
+                        width: 130px;
+                        height: fit-content;
+                        margin: auto;
+                        border: 2px solid #ebebeb;
+                        object-fit: contain;
+                    }
+
+                    .text {
+                        display: flex;
+                        width: 200px;
+                        flex-direction: column;
+                        justify-content: space-evenly;
+                        margin-left: 20px;
+
+                        p {
+                            margin-bottom: 0px;
+                        }
+                    }
+                }
+                .block.with-image.column {
+                    flex-direction: column;
+                    align-items: center;
+                    width: 100%;
+                    padding-top: 20px;
+
+                    img {
+                        width: 180px;
+                        margin-bottom: 20px;
+                    }
+
+                    .text {
+                        margin-top: 10px;
+                        width: 250px;
+                        padding: 0px 16px;
+                    }
+                }
+            }
+        }
+    }
+}