diff --git a/platform/ui/src/__docs__/getting-started.mdx b/platform/ui/src/__docs__/getting-started.mdx index 9f299d7e8..eea8c528d 100644 --- a/platform/ui/src/__docs__/getting-started.mdx +++ b/platform/ui/src/__docs__/getting-started.mdx @@ -33,8 +33,8 @@ as easy as possible. You will, however, need to include either the default font or the font you set for your theme: ```js -// Google Fonts, Sanchez & Roboto -'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap'; +// Google Fonts, Roboto +'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap'; ``` `@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a diff --git a/platform/ui/src/__docs__/index.html b/platform/ui/src/__docs__/index.html index 263c5b2f1..7920139aa 100644 --- a/platform/ui/src/__docs__/index.html +++ b/platform/ui/src/__docs__/index.html @@ -1,18 +1,19 @@ - - - - - - {{ title }} + + + + + - - - + {{ title }} - - {{ head }} - - -
- {{ footer }} - + + {{ head }} + + + +
+ {{ footer }} + + diff --git a/platform/ui/src/elements/Icon/getIcon.js b/platform/ui/src/elements/Icon/getIcon.js index fa690687e..9651bff5e 100644 --- a/platform/ui/src/elements/Icon/getIcon.js +++ b/platform/ui/src/elements/Icon/getIcon.js @@ -53,6 +53,7 @@ import measureTargetUn from './icons/measure-target-un.svg'; import measureTemp from './icons/measure-temp.svg'; import objectGroup from './icons/object-group.svg'; import ohifLogo from './icons/ohif-logo.svg'; +import ohifTextLogo from './icons/ohif-text-logo.svg'; import oval from './icons/oval.svg'; import palette from './icons/palette.svg'; import play from './icons/play.svg'; @@ -120,6 +121,7 @@ const ICONS = { 'inline-edit': inlineEdit, list, 'ohif-logo': ohifLogo, + 'ohif-text-logo': ohifTextLogo, lock, play, database, diff --git a/platform/ui/src/elements/Icon/icons/ohif-text-logo.svg b/platform/ui/src/elements/Icon/icons/ohif-text-logo.svg new file mode 100644 index 000000000..f06a067b5 --- /dev/null +++ b/platform/ui/src/elements/Icon/icons/ohif-text-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/platform/ui/src/elements/Svg/svgs/ohif-logo-text.svg b/platform/ui/src/elements/Svg/svgs/ohif-logo-text.svg index ffc43c748..f06a067b5 100644 --- a/platform/ui/src/elements/Svg/svgs/ohif-logo-text.svg +++ b/platform/ui/src/elements/Svg/svgs/ohif-logo-text.svg @@ -1,3 +1,3 @@ - + diff --git a/platform/viewer/public/html-templates/index.html b/platform/viewer/public/html-templates/index.html index fa2a32625..1fcdaa31c 100644 --- a/platform/viewer/public/html-templates/index.html +++ b/platform/viewer/public/html-templates/index.html @@ -1,41 +1,35 @@ - - - - - - - - - + + + + - OHIF Viewer + + + + + - - + OHIF Viewer - - + + + + - + - - + + + +
+ -
- diff --git a/platform/viewer/public/html-templates/rollbar.html b/platform/viewer/public/html-templates/rollbar.html index 8dafd18c5..a67c29a5a 100644 --- a/platform/viewer/public/html-templates/rollbar.html +++ b/platform/viewer/public/html-templates/rollbar.html @@ -1,53 +1,50 @@ - - - - - - - - - + + + + - OHIF Viewer + + + + + - - + OHIF Viewer - - + + + + - + - - + + -
+
- - + + + diff --git a/platform/viewer/public/html-templates/script-tag.html b/platform/viewer/public/html-templates/script-tag.html index 1d084d5ad..766b4133e 100644 --- a/platform/viewer/public/html-templates/script-tag.html +++ b/platform/viewer/public/html-templates/script-tag.html @@ -1,67 +1,59 @@ - - - - - - - - - + + - + + + + + + + - - + - OHIF Standalone Viewer - + OHIF Standalone Viewer + - - + + -
+
- - + - + }, + containerId, + componentRenderedOrUpdatedCallback + ); + + + diff --git a/platform/viewer/src/components/Header/Header.css b/platform/viewer/src/components/Header/Header.css index 0e04c765c..402cb957d 100644 --- a/platform/viewer/src/components/Header/Header.css +++ b/platform/viewer/src/components/Header/Header.css @@ -4,7 +4,7 @@ } .entry-header.header-big { - background: rgba(21,25,30,0.7); + background: rgba(21, 25, 30, 0.7); padding: 10px var(--study-list-padding); height: auto; display: inline-block; @@ -32,7 +32,6 @@ padding: 25px 0; } - .header-logo-image { fill: transparent; height: 100%; @@ -47,18 +46,9 @@ height: 50px; } -.header-logo-text { - display: inline-block; - font-family: var(--logo-font-family); - font-size: 14px; - font-weight: var(--logo-font-weight); - color: var(--text-primary-color); - line-height: 30px; -} - .entry-header.header-big .header-logo-text { - font-size: 30px; - line-height: 36px; + width: 474px; + height: auto; } .header-btn { diff --git a/platform/viewer/src/components/OHIFLogo/OHIFLogo.css b/platform/viewer/src/components/OHIFLogo/OHIFLogo.css index 4fc3886a8..daf1cd154 100644 --- a/platform/viewer/src/components/OHIFLogo/OHIFLogo.css +++ b/platform/viewer/src/components/OHIFLogo/OHIFLogo.css @@ -2,23 +2,19 @@ height: 30px; text-decoration: none; text-decoration-color: none; - display: flex; + align-items: center; color: var(--text-primary-color); - font-size: 14px; - font-weight: var(--logo-font-weight); - font-family: var(--logo-font-family); } -.header-brand:hover, -.header-brand:active, -.header-band:visited { +.header-brand:hover, .header-brand:active, .header-band:visited { color: var(--text-primary-color); text-decoration: none; } .header-logo-text { - line-height: 30px; + width: 224px; + height: auto; margin-left: 8px; } diff --git a/platform/viewer/src/components/OHIFLogo/OHIFLogo.js b/platform/viewer/src/components/OHIFLogo/OHIFLogo.js index 1c7b5ddfb..d2e0bd819 100644 --- a/platform/viewer/src/components/OHIFLogo/OHIFLogo.js +++ b/platform/viewer/src/components/OHIFLogo/OHIFLogo.js @@ -12,7 +12,7 @@ function OHIFLogo() { href="http://ohif.org" > -
Open Health Imaging Foundation
+ ); } diff --git a/platform/viewer/src/variables.css b/platform/viewer/src/variables.css index bf0df7495..09d0e2728 100644 --- a/platform/viewer/src/variables.css +++ b/platform/viewer/src/variables.css @@ -1,4 +1,5 @@ /* Sizes */ + :root { --top-bar-height: 40px; --top-bar-expanded-height: 160px; @@ -10,14 +11,8 @@ --study-list-padding-medium-screen: 10px; } -/* Fonts */ -/* Logo font should be SVG so we don't need to load an entire font */ -:root { - --logo-font-family: 'Sanchez'; - --logo-font-weight: 300; /* Sanchez, 300 does not exist */ -} - /* Transitions */ + :root { --transition-duration: 0.3s; --transition-effect: ease; @@ -25,6 +20,7 @@ } /* Thicknesses */ + :root { --viewport-border-thickness: 1px; --ui-border-thickness: 1px;