New image assets for v3 docs (#2463)

* New image assets for docs

* Type headers reduced and other small style fixes

platform/docs/docs/userManuals/viewer/study-panel.md

@@ -4,23 +4,28 @@ sidebar_position: 2
 
 # Study Panel
 
-In `Basic Viewer` mode, the left panel includes Studies related to the current patient.
-You can see three main type of studies below
+In `Basic Viewer` mode, the left panel includes Studies related to the current
+patient. You can see three main type of studies below
 
-- Primary: The opened study from the study list. This study is always expanded by default.
-- Recent: All studies for the patient that contain study dates within 1 year of the primary study
-- All: All studies available for the patient contained within the source repository
+- Primary: The opened study from the study list. This study is always expanded
+  by default.
+- Recent: All studies for the patient that contain study dates within 1 year of
+  the primary study
+- All: All studies available for the patient contained within the source
+  repository
+
+The `Study Panel` displays the measurement tracking status of each series within
+a study. As you can see in the first picture, the dashed circle on the left side
+of each series demonstrates whether the series is being tracked for measurement
+or not.
 
-The `Study Panel` displays the measurement tracking status of each series within a study. As you can see in the first picture, the dashed circle on the left side of each series demonstrates whether the series is being tracked for measurement or not.
 <!-- We should resize this screenshot to make it smaller. We might want to add both screenshots in-line to make better use of horizontal space. Let's ask Dan -->
 
 ![user-study-panel](../../assets/img/user-study-panel.png)
 
-
-
-Studies can be expanded or collapsed by clicking on the study information in the Study Panel. If a series is being tracking within a study, the Measurement Panel will display this information while the study is collapsed.
-
-![user-studylist-all](../../assets/img/user-studylist-all.png)
+Studies can be expanded or collapsed by clicking on the study information in the
+Study Panel. If a series is being tracking within a study, the Measurement Panel
+will display this information while the study is collapsed.
 
 <!-- We should link to refer to measurement tracking section -->
 

platform/docs/src/css/custom.css

@@ -35,15 +35,15 @@
   --ifm-table-stripe-background: #f4fbfb;
   --ifm-color-warning: #e9e489;
   --ifm-alert-color: #333333;
+  --ohif-color-border: #7bb2ce;
 }
 
 html[data-theme='dark'] .header-github-link:before {
-    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-        no-repeat;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
 }
 
-
-html[data-theme="dark"] {
+html[data-theme='dark'] {
   --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.4)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
   --ifm-color-primary: #5acce6;
   --ifm-color-primary-dark: #3ec3e2;
@@ -67,6 +67,7 @@ html[data-theme="dark"] {
   --ifm-table-stripe-background: #060920;
   --ifm-color-warning: #f1c55a;
   --ifm-alert-color: #000000;
+  --ohif-color-border: #3a3f99;
 }
 
 .medium-zoom-overlay {
@@ -78,11 +79,11 @@ html[data-theme="dark"] {
 }
 .header-github-link:before {
   content: '';
-    width: 24px;
-    height: 24px;
-    display: flex;
-    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-        no-repeat;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
 }
 /*
 .docusaurus-highlight-code-line {
@@ -95,14 +96,14 @@ html[data-theme="dark"] {
 
 /* Typography updates */
 
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
 
 html {
   font-size: 18px;
 }
 
 body {
-  font-family: "Inter", sans-serif;
+  font-family: 'Inter', sans-serif;
 }
 
 h1,
@@ -112,13 +113,27 @@ h4,
 h5 {
   color: var(--ifm-color-primary);
   font-weight: 400;
-  font-family: "Inter", sans-serif;
+  font-family: 'Inter', sans-serif;
 }
 
 blockquote {
   border-left: 3px solid #4042af;
 }
 
+/* Temporary Type Size Changes */
+
+article header h1 {
+  font-size: 2.6rem !important;
+}
+
+article h2 {
+  font-size: 1.85rem !important;
+}
+
+article header h3 {
+  font-size: 1.5rem !important;
+}
+
 /* Remove navigation shadow */
 
 .navbar {
@@ -173,10 +188,16 @@ blockquote {
   --ifm-badge-background-color: var(--ifm-color-secondary);
   --ifm-badge-border-color: var(--ifm-badge-background-color);
   color: var(--ifm-color-primary);
+  border: 1px solid var(--ohif-color-border);
 }
 
 /* Alerts */
 
+.alert {
+  font-size: 0.9rem;
+  padding: 10px;
+}
+
 .alert--secondary {
   --ifm-alert-background-color: var(--ifm-color-secondary);
   --ifm-alert-color: var(--ifm-font-color-base);
@@ -186,15 +207,13 @@ blockquote {
   fill: #0151d9;
 }
 
-
 .table-of-contents__left-border {
   border-left: #013998;
 }
 
-
 .footer__col:first-of-type {
   flex-grow: 2;
-  margin-right: 20%
+  margin-right: 20%;
 }
 
 .DocSearch {