diff --git a/build/build.js b/build/build.js index 791bf2f..4981f2c 100644 --- a/build/build.js +++ b/build/build.js @@ -1,6 +1,7 @@ const gulp = require('gulp'); const runSequence = require('gulp4-run-sequence'); var shelljs = require('shelljs'); +const fs = require("fs"); gulp.task('pre-build', function (done) { runSequence('copy-extensions-assets', 'update-extensions-export', 'clean', 'copy-src-assets', done); diff --git a/package.json b/package.json index 4accbc8..74fd666 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "react-sample-browser", - "version": "14.1.12", + "version": "15.1.10", "private": true, "dependencies": { - "@boldreports/react-reporting-components": "14.1.12", - "@boldreports/javascript-reporting-extensions": "14.1.12", + "@boldreports/react-reporting-components": "15.1.10", + "@boldreports/javascript-reporting-extensions": "15.1.10", "@testing-library/jest-dom": "5.11.9", "@testing-library/react": "11.2.5", "@testing-library/user-event": "12.8.3", diff --git a/src/assets/footer/bg-texture.png b/src/assets/footer/bg-texture.png deleted file mode 100644 index 0af7abf..0000000 Binary files a/src/assets/footer/bg-texture.png and /dev/null differ diff --git a/src/common/header/header.css b/src/common/header/header.css index a96e413..3e278c7 100644 --- a/src/common/header/header.css +++ b/src/common/header/header.css @@ -1,91 +1,18 @@ -/* cyrillic-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiI2B.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} - -/* cyrillic */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZthiI2B.woff2) format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} - -/* greek-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZNhiI2B.woff2) format('woff2'); - unicode-range: U+1F00-1FFF; -} - -/* greek */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZxhiI2B.woff2) format('woff2'); - unicode-range: U+0370-03FF; -} - -/* vietnamese */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZBhiI2B.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; -} - -/* latin-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZFhiI2B.woff2) format('woff2'); - unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} - -/* latin */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -@font-face { - font-family: 'ej-sb-header-icons'; - src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'); - font-weight: normal; - font-style: normal; -} - .ej-sb-header { - background-color: #fff; - box-shadow: 0 8px 11px -6px rgba(0, 0, 0, 0.12); - height: 48px; width: 100%; - display: flex; position: fixed; z-index: 10000; - font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif"; + font-family: "Inter", sans-serif; + height: 64px; + flex: 0 0 auto; + display: flex; + align-items: center; justify-content: space-between; + padding: 0px 24px; + background: var(--neutral-0); + border-bottom: 1px solid var(--neutral-200); } + .ej-sb-header.designer-header { z-index: 1 !important; } @@ -94,290 +21,239 @@ height: inherit; display: flex; align-items: center; + gap: 0; } .ej-sb-header .ej-sb-left-side .ej-sb-hamburger-icon { - margin: 0 21px 0 25px; + margin: 0 16px 0 0; font-size: 24px; cursor: pointer; + color: var(--neutral-600); + transition: color 180ms ease, background 180ms ease, border-radius 180ms ease; + padding: 0px 6px; + border-radius: 6px; } .ej-sb-header .ej-sb-left-side .ej-sb-hamburger-icon::before { content: "\e914"; - color: #333; } +.ej-sb-header .ej-sb-left-side .ej-sb-hamburger-icon:hover { + background: var(--neutral-100); +} + +.ej-sb-header .ej-sb-left-side .ej-sb-logo-link { + display: inline-flex; + align-items: center; + margin-right: 20px; + text-decoration: none; +} + +.ej-sb-header .ej-sb-left-side .ej-sb-logo { + height: 30px; + width: auto; + max-width: 200px; + display: block; +} + +.ej-sb-header .ej-sb-left-side .ej-sb-header-divider { + width: 1px; + height: 28px; + background: var(--neutral-200); + margin-right: 16px; + flex: 0 0 auto; +} +.ej-sb-header .ej-sb-left-side .framework { + font-size: 12px; + font-weight: 600; + color: var(--neutral-500); + padding-right: 10px; + margin-bottom: 0px; +} .ej-sb-header .ej-sb-left-side .ej-sb-platform-name { font-size: 15px; - opacity: 0.87; font-weight: 600; - margin-top: 0px; - margin-bottom: 0px; + color: var(--neutral-900); + margin: 0; } -.ej-sb-header .ej-sb-left-side .dropdown button.btn-secondary, -.ej-sb-header .ej-sb-left-side .dropdown button.btn-secondary:focus, -.ej-sb-header .ej-sb-left-side .dropdown button.btn-secondary:active, -.ej-sb-header .ej-sb-left-side .dropdown button.btn-secondary:active:focus { - background: transparent; - color: #2b3a5c; - opacity: .87; - border: none; - box-shadow: none; - margin-top: 4px; - padding-left: 5px; +.ej-sb-header .ej-sb-left-side .ej-platform-name { + margin: 0 21px 0 25px; + font-size: 15px; + font-weight: 600; + color: var(--neutral-900); } -.ej-sb-header .ej-sb-left-side .dropdown .dropdown-menu a { - cursor: pointer; - font-size: 14px; - color: #2b3a5c; +.ej-sb-header .ej-sb-left-side .ej-sb-framework-tabs { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 4px; + background: var(--neutral-0); + border-radius: 999px; + box-shadow: 0 1px 3px rgba(13, 19, 31, 0.08), 0 4px 12px rgba(13, 19, 31, 0.06); + overflow-x: auto; + scrollbar-width: none; + -ms-overflow-style: none; + max-width: 100%; +} + +.ej-sb-header .ej-sb-left-side .ej-sb-framework-tabs::-webkit-scrollbar { + display: none; } -.ej-sb-header .ej-sb-left-side .dropdown .dropdown-menu a.active { +.ej-sb-header .ej-sb-left-side .ej-sb-framework-tab { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + font-size: 12.5px; + font-weight: 500; + color: var(--neutral-600); background: transparent; - color: #ff5f23; - cursor: default; - pointer-events: none; + border: none; + border-radius: 999px; + cursor: pointer; + text-decoration: none; + transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease; + white-space: nowrap; + line-height: 1; + flex: 0 0 auto; } -.ej-sb-header .ej-sb-left-side .dropdown .dropdown-menu a:hover { - background-color: #f8f9fa; +.ej-sb-header .ej-sb-left-side .ej-sb-framework-tab:hover { + background: var(--blue-50); + color: var(--blue-600); + transform: translateY(-1px); + box-shadow: 0 2px 6px rgba(16, 100, 199, 0.35); } -.ej-sb-header .ej-sb-left-side .dropdown .dropdown-menu a:active { - background: transparent; - color: #000000; +.ej-sb-header .ej-sb-left-side .ej-sb-framework-tab.active { + color: var(--neutral-0); + background: var(--blue-600); + font-weight: 600; + box-shadow: 0 2px 6px rgba(16, 100, 199, 0.35); + transform: translateY(-1px); + pointer-events: none; } .ej-sb-header .ej-sb-right-side { height: inherit; display: flex; align-items: center; -} - -.ej-sb-header .ej-sb-right-side .ej-sb-header-icons { - font-family: 'ej-sb-header-icons'; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.ej-sb-header .ej-sb-right-side .ej-sb-divider { - border-left: 1px solid rgb(196, 196, 196); - height: 32px; + gap: 12px; } .ej-sb-header .ej-sb-right-side a { - font-size: 20px; - cursor: pointer; - text-decoration: none; - margin: 0 10px 0px 10px; - color: #333; - opacity: 0.87; -} - -.ej-sb-header .ej-sb-right-side a.ej-sb-button { - height: 35px; font-size: 14px; font-weight: 500; - opacity: 1; - text-decoration: none; cursor: pointer; + text-decoration: none; text-align: center; - border-radius: 5px; - width: 125px; -} - -.ej-sb-header .ej-sb-right-side .sb-icon-product:before { - content: '\e707'; + transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } -.ej-sb-header .ej-sb-right-side .sb-icon-download::before { - content: '\e701'; -} - -.ej-sb-header .ej-sb-right-side .sb-icon-documentation::before { - content: '\e704'; -} - -@media only screen and (max-width: 850px) { - .ej-sb-header .ej-sb-right-side { - display: none; - } -} - -.dropdown-menu { - position: absolute; - will-change: transform; - top: 0px; - left: 0px; - transform: translate3d(0px, 42px, 0px); -} - -/* header try-it-free and schedule-free-demo*/ -.ej-sb-right-side .nav-link { - padding: 0.4rem 0.5rem 1rem 0.5rem; - width: 200px; - border-radius: 5px; - -} - -.ej-sb-header .ej-sb-right-side a.ej-sb-button.nav-link.bold-schedule-demo { - border-color: #ff4800; - border-style: solid; - border-width: 1px; - background-color: #ffffff; - color: #ff4800 !important; -} - -.ej-sb-header .ej-sb-right-side a.ej-sb-button.nav-link.try-it-free { - background-color: #ff4800; - color: #ffffff !important; +.ej-sb-header .ej-sb-right-side a.ej-sb-button { + display: inline-flex; + align-items: center; + justify-content: center; + height: 40px; + padding: 0 18px; + border-radius: 12px; + font-size: 14px; + font-weight: 600; + line-height: 1; + white-space: nowrap; } .ej-sb-header .ej-sb-right-side a.ej-sb-button.nav-link.product-detail { - border-color: #ff4801; - background: white; - color: #ff4801; - border-style: solid; - border-width: 1px; - border-radius: 5px; + color: var(--blue-600); + background: var(--neutral-0); + border: 1px solid var(--blue-200); } .ej-sb-header .ej-sb-right-side a.ej-sb-button.nav-link.product-detail:hover { - background-color: #ff4800; - color: #ffffff !important; -} - -.ej-sb-header .ej-sb-right-side a.ej-sb-button.nav-link.bold-schedule-demo:hover { - background-color: #ff4800; - color: #ffffff !important; + background: var(--blue-50); + border-color: var(--blue-300); + color: var(--blue-700); + transform: translateY(-1px); } -/* header try-it-free and schedule-free-demo*/ -.ej-sb-right-side .nav-link { - padding-right: 0.5rem; - padding-left: 0.5rem; - width: 200px; - border-radius: 5px; - +.ej-sb-header .ej-sb-right-side a.ej-sb-button.nav-link.try-it-free { + color: var(--neutral-0); + background: var(--blue-600); + border: 1px solid var(--blue-600); } -.ej-sb-header .ej-sb-right-side a.ej-sb-button.nav-link.bold-schedule-demo { - border-color: #ff4800; - border-style: solid; - border-width: 1px; - background-color: #ffffff; - color: #ff4800 !important; +.ej-sb-header .ej-sb-right-side a.ej-sb-button.nav-link.try-it-free:hover { + background: var(--blue-700); + border-color: var(--blue-700); + transform: translateY(-1px); } -.ej-sb-header .ej-sb-right-side a.ej-sb-button.nav-link.try-it-free { - background-color: #ff4800; - color: #ffffff !important; +#home_page { + text-decoration: none; } -.ej-sb-header .ej-sb-right-side a.ej-sb-button.nav-link.bold-schedule-demo:hover { - background-color: #ff4800; - color: #ffffff !important; +a:hover#home_page { + color: var(--neutral-950); + cursor: pointer; + text-decoration: none; } -/* header */ -/* cyrillic-ext */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} - -/* cyrillic */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +@media only screen and (max-width: 1200px) { + .ej-sb-header .ej-sb-left-side .ej-sb-framework-tab { + padding: 7px 14px; + font-size: 13px; + } } -/* greek-ext */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2'); - unicode-range: U+1F00-1FFF; -} +@media only screen and (max-width: 992px) { + .ej-sb-header .ej-sb-left-side .ej-sb-header-divider { + margin-right: 10px; + } -/* greek */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2'); - unicode-range: U+0370-03FF; + .ej-sb-header .ej-sb-left-side .ej-sb-framework-tab { + padding: 6px 10px; + font-size: 12px; + } } -/* vietnamese */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} +@media only screen and (max-width: 850px) { + .ej-sb-header .ej-sb-right-side { + display: none; + } -/* latin-ext */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + .ej-sb-header .ej-sb-left-side .ej-sb-header-divider, + .ej-sb-header .ej-sb-left-side .ej-sb-framework-tabs, + .ej-sb-header .ej-sb-left-side .framework { + display: none; + } } -/* latin */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} +@media only screen and (max-width: 550px) { + .ej-sb-header { + padding: 0 12px; + } -@font-face { - font-family: 'ej-header-icons'; - src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'); - font-weight: normal; - font-style: normal; -} + .ej-sb-header .ej-sb-left-side { + gap: 8px; + } -@font-face { - font-family: 'ejicons'; - src: url('/src/assets/sb-icons/fonts/icons.ttf?gcjn6a') format('truetype'), url('/src/assets/sb-icons/fonts/icons.woff?gcjn6a') format('woff'), url('/src/assets/sb-icons/fonts/icons.svg?gcjn6a#sbicons') format('svg'); - font-weight: normal; - font-style: normal; -} + .ej-sb-header .ej-sb-left-side .ej-sb-hamburger-icon { + margin: 0; + } -a:hover#home_page { - color: black; - cursor: pointer; - text-decoration: none; -} + .ej-sb-header .ej-sb-left-side .ej-sb-logo { + height: 28px; + } -#home_page { - text-decoration: none; -} + .ej-sb-header .ej-sb-left-side .ej-sb-logo-link { + margin-right: 12px; + } -.ej-platform-name { - margin: 0 21px 0 25px; - font-size: 15px; - opacity: 0.87; - font-weight: 600; - color: #2b3a5c; + .ej-sb-header .ej-sb-left-side .ej-sb-platform-name { + font-size: 14px; + } } \ No newline at end of file diff --git a/src/common/header/header.js b/src/common/header/header.js index 200d143..d4c1439 100644 --- a/src/common/header/header.js +++ b/src/common/header/header.js @@ -82,30 +82,49 @@ class Header extends Component { } }; render() { + const showFrameworkTabs = this.props.isViewer || this.props.isPreview || this.props.isDesigner; + const isDesignerHeader = this.props.isDesigner || (!this.props.isViewer && !this.props.isPreview); return ( -
+
{this.props.isViewer ?
: ''} - {this.props.isViewer ?

Bold Reports® for React

: -

Bold Reports® for React

- } - {this.props.isViewer ? -
- - {this.state.open && (
{Object.keys(otherPlatforms).map((name, index) => {name})}
)} -
: - + + Bold Reports + + {showFrameworkTabs ? + +
+

Frameworks

+
+ {Object.keys(otherPlatforms).map((name, index) => { + const platformSlug = name === 'JavaScript' ? 'javascript' + : name === 'ASP.NET Core' ? '' + : name.toLowerCase(); + const isLocal = !window.location.hostname.includes('boldreports.com'); + const href = isLocal ? (platformSlug === '' ? '/' : `/${platformSlug}.html`) : (platformSlug === '' ? '/home/' : `/home/${platformSlug}.html`); + const isActive = name === data.platform; + return ( + e.preventDefault() : undefined} + > + {name} + + ); + })} +
+ : ''}
{/* We hided this element as per management instruction */} - {/* Schedule Free Demo */} - Product Detail - Try it Free + {/* Schedule Free Demo */} + Product Details + Try it Free
diff --git a/src/common/main-content/main-content.css b/src/common/main-content/main-content.css index 3cea5aa..69337ba 100644 --- a/src/common/main-content/main-content.css +++ b/src/common/main-content/main-content.css @@ -1,5 +1,5 @@ .ej-main-body-content { - background-color: #fafafa; + background-color: var(--neutral-50); } .ej-main-child-content { height:100%; @@ -8,28 +8,39 @@ justify-content: space-evenly; } -.ej-main-body-content #parentTabContainer { - border: 1px solid #D7D7D7; -} - .ej-main-body-content .ej-title { - font-size: 18px; - padding: 20px 0 20px 18px; + font-size: 22px; + padding: 15px 0 10px 0px; margin: 0; - font-weight: bold; + font-weight: 700; + color: var(--blue-900); + display: flex; + align-items: center; + gap: 12px; +} + +.ej-main-body-content .ej-category-badge { + background-color: var(--blue-50); + color: var(--blue-700); + font-size: 12px; + padding: 4px 12px; + border-radius: 16px; + font-weight: 600; + border: 1px solid var(--blue-100); } .ej-main-body-content .ej-meta-description { font-size: 14px; - padding: 0px 0 15px 18px; + padding: 10px 0 16px; margin: 0; + color: var(--neutral-600); + line-height: 1.5; } .ej-main-body-content .ej-nav-header { - height: 40px; + height: 45px; line-height: 40px; font-size: 16px; - border-bottom: 1px solid #d7d7d7; } .ej-main-body-content .ej-nav-header .ej-nav-item { @@ -44,23 +55,26 @@ } .ej-main-body-content .ej-nav-header .ej-nav-item a { - font-weight: 600; - padding: 0 12px; - display: flex; - align-items: center; - color:#2b3a5c; - border-bottom: 2px solid transparent; - text-decoration: none; + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 4px 0px; + font-size: 14px; + font-weight: 600; + color: var(--neutral-600); + border-bottom: 2px solid transparent; + text-decoration: none; + transition: color 150ms ease, border-color 150ms ease; } .ej-main-body-content .ej-nav-header .ej-nav-item a:hover { - color: #2b3a5c; + color: var(--blue-700); text-decoration: none; } -.ej-main-body-content .ej-nav-header .ej-nav-item a.active { - color: #ff5f23; - border-color: #ff5f23; +.ej-main-body-content .ej-nav-header .ej-nav-item a.active,.ej-main-body-content .ej-nav-header .ej-nav-item a.active .ej-sb-icons::before { + color: var(--blue-700) !important; + border-color: var(--blue-500); } .ej-main-body-content .ej-tab-content .tab-pane { @@ -115,6 +129,7 @@ content: '\e92e'; margin-right: 5px; font-size: 20px; + color: var(--neutral-600); } .ej-main-body-content #parentTab .ej-source-icon { @@ -125,6 +140,7 @@ content: '\e92d'; margin-right: 5px; font-size: 20px; + color: var(--neutral-600); } .ej-main-body-content #parentTab .ej-description-icon { @@ -140,183 +156,232 @@ .ej-main-body-content #parentTab .ej-nav { position: absolute; right: 0; - opacity: 0.87; + display: flex; + align-items: center; + gap: 12px; + opacity: 1; + padding-right: 20px; +} + +.ej-main-body-content #parentTab .ej-nav .new-tab-btn-container { + display: flex; + align-items: center; + border: 1px solid var(--neutral-200); + border-radius: 20px; + height: 40px; + overflow: hidden; + background-color: #ffffff; +} + +.ej-main-body-content #parentTab .ej-nav .vertical-divider { + width: 1px; + height: 24px; + background-color: var(--neutral-200); } .ej-main-body-content #parentTab .ej-nav .new-tab { display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--neutral-200); + border-radius: 14px; + width: 40px; + height: 40px; + cursor: pointer; + background-color: #ffffff; + transition: all 0.2s ease; } @media only screen and (max-width: 550px) { - .ej-main-body-content #parentTab .ej-nav .new-tab { + .ej-main-body-content #parentTab .ej-nav .new-tab, + .ej-main-body-content #parentTab .ej-nav .vertical-divider { display: none; } } .ej-main-body-content #parentTab .ej-nav .ej-nav-sub-item { - font-size: 25px; + display: flex; + align-items: center; + justify-content: center; cursor: pointer; + color: var(--neutral-600); + transition: all 0.2s ease; } - -.ej-main-body-content #parentTab .ej-nav .ej-nav-sub-item .ej-nav-new { - border-left: 1px solid #cfbdbd; - padding: 0 10px; -} - -.ej-main-body-content #parentTab .ej-nav .ej-nav-sub-item.ej-nav-new:before { - content: '\e91d'; +.ej-main-body-content #parentTab .ej-nav .ej-nav-sub-item:hover { + background-color: var(--blue-50); + color: var(--blue-600); } .ej-main-body-content #parentTab .ej-nav .ej-nav-sub-item.ej-nav-prev { - border-left: 1px solid #c4c4c4; - padding: 0 10px; + border: none; + padding: 0; + width: 44px; + height: 100%; + font-size: 20px; } + .ej-main-body-content #parentTab .ej-nav .ej-nav-sub-item.ej-nav-prev:before { content: '\e91f'; } +.ej-main-body-content #parentTab .ej-nav .ej-nav-sub-item.ej-nav-next { + border: none; + padding: 0; + width: 44px; + height: 100%; + font-size: 20px; + border-left: 1px solid var(--neutral-100); +} + .ej-main-body-content #parentTab .ej-nav .ej-nav-sub-item.ej-nav-next:before { content: '\e91b'; - padding-right: 10px; + padding: 0; +} + +.ej-main-body-content #parentTab .ej-nav .new-tab .ej-nav-new { + font-size: 20px; + color: var(--neutral-600); + display: flex; + align-items: center; + justify-content: center; +} + +.ej-main-body-content #parentTab .ej-nav .new-tab .ej-nav-new:before { + content: '\e91d'; } .ej-main-body-content #childTabContainer .tab-pane { white-space: pre; padding: 10px; - font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont"; + font-family: "Inter", sans-serif; overflow: auto; height: 320px; font-size: 13px; font-weight: 400; + background-color: var(--neutral-950); + color: var(--neutral-100); + border: 1px solid var(--neutral-200); + border-radius: 16px; } /* Banner */ -#footer-banner > * { - font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif"; -} #footer-banner { - background-image: url(../../assets/footer/bg-texture.png); - background-color: #CCFEC6; - background-position: center; - background-size: cover; - border-radius: 4px; - color: #283A5E; - margin: 30px 0px; - width: 100%; - height: 121px; - flex-shrink: 0; + font-family: "Inter", sans-serif; + background: linear-gradient(120deg, var(--blue-50), var(--neutral-50)); + border-radius: 12px; + color:var(--blue-800); + margin: 30px 0; + padding: 48px 24px; + text-align: center; + border: 1px solid var(--blue-100); } -.header { - font-weight: 800; - font-size: 23px; - color: #283A5E; - width: calc(100% - 60px); - height: 32px; - padding: 21px 0 0 40px; +#footer-banner .banner-content { + max-width: 1100px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; } -.content-area { - margin-left: 15px; +#footer-banner .banner-title { + font-size: 32px; + font-weight: 700; + line-height: 1.2; + margin: 0; + color: var(--blue-800); } -.cnt-pt { - margin: 35px 0px 5px 25px; +#footer-banner .banner-features { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px 32px; + padding-bottom: 5px; } -.cnt-text { - font-weight: 500; - font-size: 14px; - padding: 10px 10px 0px 0px; - display: table-cell; - line-height: 7px; +#footer-banner .banner-feature { + display: flex; + align-items: center; + gap: 8px; + font-size: 16px; + font-weight: 400; + color: var(--blue-800); + white-space: nowrap; } -.free-trial { - width: 158px; - height: 45px; +#footer-banner .banner-check { + display: inline-flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + color: var(--blue-800); font-size: 14px; - padding-top: 11px; - background-color: #F14400; - border-radius: 4px; - margin: -52px 25px 0px 0px; font-weight: 700; - float: right; - line-height: 24px; + line-height: 1; + flex-shrink: 0; +} + +#footer-banner .banner-cta { + display: inline-block; + background-color: var(--blue-600); color: #FFFFFF; - text-align: center; - box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%); - cursor: pointer; + font-size: 15px; + font-weight: 700; + text-decoration: none; + padding: 12px 26px; + border-radius: 8px; + transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } -.free-trial-url, .free-trial-url:hover { - text-decoration: none; + +#footer-banner .banner-cta:hover { + background-color: var(--blue-700); + transform: translateY(-1px); } -@media only screen and (min-width: 810px) and (max-width: 1450px) { +@media only screen and (max-width: 768px) { #footer-banner { - height: auto; - } - .header { - padding: 58px 0px 14px 60px; - font-size: 32px; - line-height: 40px; - text-align: center; - height: auto; - } - .content-area { - padding: 0px 20px 0px 85px; - justify-content: left; + padding: 36px 20px; + margin: 24px 0; } - .cnt-text { - font-size: 20px; - padding: 10px 10px 0px 6px; + + #footer-banner .banner-title { + font-size: 24px; } - .cnt-pt { - margin: 10px 0px 0px 19px; + + #footer-banner .banner-features { + flex-direction: column; + gap: 12px; + align-items: flex-start; + width: 100%; + max-width: 360px; } - .free-trial-url{ - padding: 44px 0 58px 0; - display: block; - } - .free-trial { - width: 188px; - font-size: 18px; - margin: 0px auto 0px; - float: none; + + #footer-banner .banner-feature { + font-size: 15px; } } - @media only screen and (min-width: 300px) and (max-width: 809.9px) { +@media only screen and (max-width: 480px) { #footer-banner { - height: auto; + padding: 28px 16px; } - .header { - padding: 48px 0px 14px 60px; + + #footer-banner .banner-title { font-size: 22px; - line-height: 32px; - text-align: center; - height: auto; - } - .content-area { - padding: 0px 20px 0 40px; - justify-content: left; - } - .cnt-text { - font-size: 16px; - line-height: 15px; - padding: 10px 10px 0px 6px; - } - .cnt-pt { - margin: 2px 12px 2px 25px } - .free-trial-url { - padding: 32px 0 48px 0; - display: block; - } - .free-trial { - margin: 0px auto 0px; - float: none; + + #footer-banner .banner-cta { + width: 100%; + max-width: 280px; + padding: 14px 20px; + text-align: center; } } @@ -324,22 +389,31 @@ .ej-lp-footer { font-size: 14px; padding: 10px 10px 10px 10px; - border-top: 1px solid #D7D7D7; + border-top: 1px solid var(--neutral-200); display: table; width: 100%; margin-top: 10px; } .ej-lp-footer .ej-lp-footer-links a { - color: #ff5f23; + color: var(--blue-600); text-decoration: none; cursor: pointer; margin-right: 30px; + font-size: 13.5px; + font-weight: 500; +} + +.ej-lp-footer .ej-lp-footer-links a:hover { +color: var(--blue-700); +text-decoration: underline; } .ej-lp-footer .ej-lp-footer-copyright { line-height: 7px; float: right; + font-size: 12.5px; + color: var(--neutral-500); } .ej-lp-footer > div { diff --git a/src/common/main-content/main-content.js b/src/common/main-content/main-content.js index a0f0331..3421377 100644 --- a/src/common/main-content/main-content.js +++ b/src/common/main-content/main-content.js @@ -1,4 +1,4 @@ -import { React, Component } from 'react'; +import React, { Component } from 'react'; import { Header } from './../header/header'; import Sidebar from './../sidebar/sidebar'; import { Link } from 'react-router-dom'; @@ -137,18 +137,18 @@ class MainContentSample extends Component {
-

{this.props.report.sampleName}

+

{this.props.report.sampleName} {this.props.report.category && {this.props.report.category}}

{this.props.report.metaData.description}

  • - DEMO + Demo
  • { this.SourceActive(); this.getSource(); }} > - SOURCE + Source Code
    • {/*
  • @@ -157,12 +157,14 @@ class MainContentSample extends Component {
    • */}
  • -
    -
    +
    +
    +
    -
    +
    +
    +
    -
@@ -203,46 +205,51 @@ class MainContentSample extends Component {
{/* Banner section */} ); diff --git a/src/controls/cmr-report.js b/src/controls/cmr-report.js index 610da2b..3dabfac 100644 --- a/src/controls/cmr-report.js +++ b/src/controls/cmr-report.js @@ -26,7 +26,7 @@ class CMRReport extends Component {

More information about the image report item can be found in this documentation section. + target="_blank">documentation section.

); diff --git a/src/controls/company-sales.js b/src/controls/company-sales.js index 508b182..c0e5955 100644 --- a/src/controls/company-sales.js +++ b/src/controls/company-sales.js @@ -30,13 +30,13 @@ class CompanySales extends Component {
  • Sorting is applied to row groups to sort the product category and sub-category in descending and ascending orders. More information about sorting data in matrix groups can be found in this documentation section. + target="_blank">documentation section.

    • Company Sales report designing steps can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/conditional-row-formatting.js b/src/controls/conditional-row-formatting.js index 9005375..6e35804 100644 --- a/src/controls/conditional-row-formatting.js +++ b/src/controls/conditional-row-formatting.js @@ -20,7 +20,7 @@ class ConditionalRowFormatting extends Component {

    This demo illustrates the Conditional Formatting feature along with Report Parameters using the Tablix data region. Based on the country name selected in + target="_blank">Report Parameters using the Tablix data region. Based on the country name selected in the Highlight Country parameter, the available customer details of the respective country are highlighted using conditional formatting. It makes the report easier @@ -29,13 +29,13 @@ class ConditionalRowFormatting extends Component {

    • Conditional IIF Statement is used to build expression for background color, thereby it highlights the rows based on the + target="_blank">expression for background color, thereby it highlights the rows based on the Country Name field.

    Conditional row formatting report designing steps can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/consolidated-balance-sheet.js b/src/controls/consolidated-balance-sheet.js index 36f3524..6b3ece6 100644 --- a/src/controls/consolidated-balance-sheet.js +++ b/src/controls/consolidated-balance-sheet.js @@ -23,19 +23,19 @@ class ConsolidatedBalanceSheet extends Component { Consolidated Balance Sheet RDLC report represents the assets and liabilities of a company and all subsidiaries for the last four quarters in a single sheet using Tablix report item. + target="_blank">Tablix report item.

    More information about RDLC report can be found in this documentation + href="https://help.boldreports.com/embedded-reporting/react-reporting/report-viewer/rdlc-report/" target="_blank">documentation section.

    diff --git a/src/controls/customer-support-analysis.js b/src/controls/customer-support-analysis.js index e00ab6e..98ad118 100644 --- a/src/controls/customer-support-analysis.js +++ b/src/controls/customer-support-analysis.js @@ -33,17 +33,17 @@ class CustomerSupportAnalysis extends Component { Average resolution time (hrs) by Representative chart. More information about sorting data in matrix groups can be found in this documentation section. + target="_blank">documentation section.
  • The TopN filter is applied to the table data region to display the Top 5 Satisfied Customer. More information on filtering data with table data region can be found in this documentation section.
    • + target="_blank">documentation section.

    More information about chart data region can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/data-bar.js b/src/controls/data-bar.js index 8bff77b..915a231 100644 --- a/src/controls/data-bar.js +++ b/src/controls/data-bar.js @@ -23,7 +23,7 @@ class DataBar extends Component {

    More information about the Databar report item can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/designer/designer.js b/src/controls/designer/designer.js index bb6272b..cdb6b7f 100644 --- a/src/controls/designer/designer.js +++ b/src/controls/designer/designer.js @@ -1,5 +1,5 @@ /* eslint-disable */ -import { React, Component } from 'react'; +import React, { Component } from 'react'; import { Header } from './../../common/header/header'; import rdlcData from '../../rdlcData'; import data from '../../samples.json'; @@ -224,7 +224,7 @@ class Designer extends Component { document.querySelector('meta[property="og:title"]').setAttribute('content', titleWithBoldReports); return (
    -
    +

    More information about the Chart report item can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/dynamic-columns.js b/src/controls/dynamic-columns.js index 7333b8e..7640d75 100644 --- a/src/controls/dynamic-columns.js +++ b/src/controls/dynamic-columns.js @@ -30,7 +30,7 @@ class DynamicColumns extends Component {

    More information about the Tablix data region can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/dynamic-logos.js b/src/controls/dynamic-logos.js index 39d02f4..c063fbf 100644 --- a/src/controls/dynamic-logos.js +++ b/src/controls/dynamic-logos.js @@ -18,7 +18,7 @@ class DynamicLogos extends Component { return (

    The report uses parameter-driven logic to dynamically update company logos, names, and contact details without requiring changes to modifying the report layout using the Report Parameters.

    + target="_blank">Report Parameters.

    ); diff --git a/src/controls/external-parameter-report.js b/src/controls/external-parameter-report.js index 371c859..183b640 100644 --- a/src/controls/external-parameter-report.js +++ b/src/controls/external-parameter-report.js @@ -71,20 +71,20 @@ class ExternalParameterReport extends Component {

    The Product Line Sales RDL report represents the best performing sales people and stores using Tablix and Chart + target="_blank">Tablix and Chart report items.

    More information about handling the report items can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/grouping-aggregate.js b/src/controls/grouping-aggregate.js index 8d0ae3e..d430937 100644 --- a/src/controls/grouping-aggregate.js +++ b/src/controls/grouping-aggregate.js @@ -31,12 +31,12 @@ class GroupingAggregate extends Component { Tablix data region.
  • The sales value for each quarter is formatted in the Currency format to improve the readability of report.
    • + target="_blank">format to improve the readability of report.

    More information about the Tablix data region can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/hr-payroll.js b/src/controls/hr-payroll.js index 693ab48..0e7e5bf 100644 --- a/src/controls/hr-payroll.js +++ b/src/controls/hr-payroll.js @@ -30,7 +30,7 @@ class HRPayroll extends Component {

    For more information on how dynamic image report items enhance customization in multi-company HR reports, refer to this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/infographics-report.js b/src/controls/infographics-report.js index 44c6930..95b6547 100644 --- a/src/controls/infographics-report.js +++ b/src/controls/infographics-report.js @@ -27,7 +27,7 @@ class InfographicsReport extends Component {

    More information about the image report item can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/invoice.js b/src/controls/invoice.js index 36a7676..a1b5434 100644 --- a/src/controls/invoice.js +++ b/src/controls/invoice.js @@ -20,15 +20,15 @@ class Invoice extends Component {

    In this demo, Invoice report is generated based on Report Parameters at run time, and it displays the comprehensive overview of an invoice + target="_blank">Report Parameters at run time, and it displays the comprehensive overview of an invoice that indicates the shipping order details using parameters, expressions, and calculated fields with Tablix report item. + target="_blank">expressions, and calculated fields with Tablix report item.

    More information about Tablix can be found in this documentation + href="https://help.boldreports.com/embedded-reporting/react-reporting/report-designer/designer-guide/report-items/tablix/" target="_blank">documentation section.

    diff --git a/src/controls/mail-merge.js b/src/controls/mail-merge.js index 5ac27a9..0a9cbdd 100644 --- a/src/controls/mail-merge.js +++ b/src/controls/mail-merge.js @@ -26,7 +26,7 @@ class MailMerge extends Component {
  • To keep data in a single page, rectangle report item is used as a container with the KeepTogether property as true.
  • Expression is used to frame the employee details dynamically at run time.
    • + target="_blank">Expression is used to frame the employee details dynamically at run time.

    You can print or export this report as PDF, Excel, Word, HTML, PowerPoint, or CSV format using the @@ -37,7 +37,7 @@ class MailMerge extends Component {

    Mail merge report designing steps can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/multi-language-report.js b/src/controls/multi-language-report.js index 022f27a..b0e8968 100644 --- a/src/controls/multi-language-report.js +++ b/src/controls/multi-language-report.js @@ -63,7 +63,7 @@ class MultiLanguageReport extends Component {

    For detailed guidance on implementing localization, refer to the documentation. + target="_blank">documentation.

    ); diff --git a/src/controls/nda-report.js b/src/controls/nda-report.js index ac7c74b..3132a59 100644 --- a/src/controls/nda-report.js +++ b/src/controls/nda-report.js @@ -28,7 +28,7 @@ class NDAReport extends Component {

    More information about the PDF signature report item can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/northwind-products-suppliers-report.js b/src/controls/northwind-products-suppliers-report.js index d185223..eb198a8 100644 --- a/src/controls/northwind-products-suppliers-report.js +++ b/src/controls/northwind-products-suppliers-report.js @@ -24,18 +24,18 @@ class NorthwindProductsandSuppliersReport extends Component {

    More information about chart data region can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/parameter-customization.js b/src/controls/parameter-customization.js index fd0602f..c223d10 100644 --- a/src/controls/parameter-customization.js +++ b/src/controls/parameter-customization.js @@ -27,7 +27,7 @@ class ParameterCustomization extends Component {

    The Product Line Sales RDL report represents the best performing sales people and stores using Tablix and Chart + target="_blank">Tablix and Chart report items.

    More information about Cascading Parameters can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/patient-experience-analysis.js b/src/controls/patient-experience-analysis.js index 161fb9f..97d3509 100644 --- a/src/controls/patient-experience-analysis.js +++ b/src/controls/patient-experience-analysis.js @@ -20,8 +20,8 @@ class PatientExperienceAnalysis extends Component {

    This report shows the Patient's satisfaction, average stay duration, count and average waiting time using Tablix and Chart + target="_blank">Tablix and Chart report items.

    @@ -32,7 +32,7 @@ class PatientExperienceAnalysis extends Component {

    More information about chart data region can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/paystub.js b/src/controls/paystub.js index bae755d..57204ae 100644 --- a/src/controls/paystub.js +++ b/src/controls/paystub.js @@ -22,18 +22,18 @@ class Paystub extends Component {

    Paystub RDLC report represents the paystub of a company in a single sheet using Tablix report item. + target="_blank">Tablix report item.

    More information about RDLC report can be found in this documentation + href="https://help.boldreports.com/embedded-reporting/react-reporting/report-viewer/rdlc-report/" target="_blank">documentation section.

    diff --git a/src/controls/personal-expense-analysis.js b/src/controls/personal-expense-analysis.js index 938b1e2..d85a94b 100644 --- a/src/controls/personal-expense-analysis.js +++ b/src/controls/personal-expense-analysis.js @@ -27,16 +27,16 @@ class PersonalExpenseAnalysis extends Component {
  • RDL External image embedding concept is used to display the image in report.
  • Text box report items with expressions are used to format the currency data fields.
    • + target="_blank">expressions are used to format the currency data fields.
  • Alternate row formatting is applied in the table data region using the Conditional Formatting feature to alternate the background color for a table data + target="_blank">Conditional Formatting feature to alternate the background color for a table data region, which improves the readability of data.

    • More information about handling images, text boxes, chart, and table report items can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/powerpoint-report.js b/src/controls/powerpoint-report.js index 2bf6234..0d9804a 100644 --- a/src/controls/powerpoint-report.js +++ b/src/controls/powerpoint-report.js @@ -28,7 +28,7 @@ class PowerpointReport extends Component {

    More information about Page break can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/product-catalog.js b/src/controls/product-catalog.js index 3441d01..3a82d7a 100644 --- a/src/controls/product-catalog.js +++ b/src/controls/product-catalog.js @@ -22,7 +22,7 @@ class ProductCatalog extends Component {

    This report shows Mountain bike products information using the Tablix report item in RDLC report. + target="_blank">Tablix report item in RDLC report.

    More information about RDLC report can be found in this documentation + href="https://help.boldreports.com/embedded-reporting/react-reporting/report-viewer/rdlc-report/" target="_blank">documentation section.

    diff --git a/src/controls/product-details.js b/src/controls/product-details.js index 602ed15..dcbf4da 100644 --- a/src/controls/product-details.js +++ b/src/controls/product-details.js @@ -26,15 +26,15 @@ class ProductDetails extends Component {
  • The total price value of each product is calculated based on the OrderQty and UnitPrice data fields using expression.
    • + target="_blank">expression.
  • The price values in the product details are formatted in the Currency format to improve the readability of data.
    • + target="_blank">format to improve the readability of data.

    More information about the Tablix data region can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/product-line-sales.js b/src/controls/product-line-sales.js index 81b2212..03ad173 100644 --- a/src/controls/product-line-sales.js +++ b/src/controls/product-line-sales.js @@ -20,9 +20,9 @@ class ProductLineSales extends Component {

    The Product Line Sales RDL report represents the best performing sales people and stores using Tablix and Tablix and Chart + target="_blank">Chart report items.

    More information about the Tablix data region can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/spark-line.js b/src/controls/spark-line.js index f8cde5b..1531142 100644 --- a/src/controls/spark-line.js +++ b/src/controls/spark-line.js @@ -23,11 +23,11 @@ class SparkLine extends Component { A sparkline is a small embedded line graph that illustrates a single trend. In this report, sales data are interpreted to visualize the sales trends using Spark Line report items. + target="_blank">Spark Line report items.

    More information about RDLC report can be found in this documentation + href="https://help.boldreports.com/embedded-reporting/react-reporting/report-viewer/rdlc-report/" target="_blank">documentation section.

    diff --git a/src/controls/sub-report.js b/src/controls/sub-report.js index 97fe300..a035fb6 100644 --- a/src/controls/sub-report.js +++ b/src/controls/sub-report.js @@ -19,21 +19,21 @@ class SubReport extends Component {

    Sales Order Details by Order Number shows the order details using the report parameters, sub report item, and table formatting in Bold Report Viewer. + target="_blank">report parameters, sub report item, and table formatting in Bold Report Viewer.

    More information about handling the report items can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/territory-sales.js b/src/controls/territory-sales.js index 66362aa..b245528 100644 --- a/src/controls/territory-sales.js +++ b/src/controls/territory-sales.js @@ -34,7 +34,7 @@ class TerritorySales extends Component {

    More information about the table data region can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/tickets-sales-analysis.js b/src/controls/tickets-sales-analysis.js index f3f36dc..9492b8e 100644 --- a/src/controls/tickets-sales-analysis.js +++ b/src/controls/tickets-sales-analysis.js @@ -29,12 +29,12 @@ class TicketsSalesAnalysis extends Component { Top 5 Shows based on Tickets Sold. More information on filtering data with chart data region can be found in this documentation section. + target="_blank">documentation section.

    More information about chart data region can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/transcript-report.js b/src/controls/transcript-report.js index b48300a..587c7ba 100644 --- a/src/controls/transcript-report.js +++ b/src/controls/transcript-report.js @@ -29,7 +29,7 @@ class TranscriptReport extends Component {

    Transcript report designing steps can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/controls/website-visitor-analysis.js b/src/controls/website-visitor-analysis.js index 594654e..2ce275a 100644 --- a/src/controls/website-visitor-analysis.js +++ b/src/controls/website-visitor-analysis.js @@ -28,7 +28,7 @@ class WebsiteVisitorAnalysis extends Component {

    More information about chart data region can be found in this documentation section. + target="_blank">documentation section.

    ); diff --git a/src/index.js b/src/index.js index 181b294..89a2f9b 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { HashRouter } from 'react-router-dom'; +import './styles/variable.css'; //Reports react base import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min'; diff --git a/src/samples.json b/src/samples.json index 62bfc17..e6c2b4e 100644 --- a/src/samples.json +++ b/src/samples.json @@ -12,20 +12,20 @@ "nda" ], "otherPlatforms": { - "React": "react/#", - "Angular": "angular/#/", - "JavaScript": "javascript/#/", + "ASP.NET Core": "aspnet-core/", "Blazor": "blazor/", - "ASP.NET Core": "aspnet-core/" + "Angular": "angular/#/", + "React": "react/#", + "JavaScript": "javascript/#/" }, "platform": "React", "rootPath": "/react/", "banner": { - "text": "Start embedding powerful business intelligence reporting inside your modern web apps today", + "text": "Start Building Pixel-Perfect Reporting Today", "features" : [ - "User-friendly Report Server", + "Native RDL & RDLC Compatibility", "Intuitive drag-and-drop widgets", - "Hassle-free licensing" + "Modern Web-Based Reporting" ], "freeTrialUrl": "https://www.boldreports.com/register/reports?evaluation=v2" }, diff --git a/src/styles/index.css b/src/styles/index.css index 2bd2a00..8387a65 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -1,7 +1,7 @@ @import './../common/header/header.css'; @import './../common/sidebar/sidebar.css'; @import './../common/main-content/main-content.css'; -@import './../../node_modules/prismjs/themes/prism.css'; +@import './../../node_modules/prismjs/themes/prism-dark.css'; @import './../../node_modules/codemirror/lib/codemirror.css'; @import './../../node_modules/codemirror/addon/hint/show-hint.css'; @@ -98,10 +98,10 @@ } body { - color: #2b3a5c; + color: var(--neutral-600); margin: 0; - background-color: #F2F2F2; - font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif"; + background-color: var(--neutral-50); + font-family: "Inter", sans-serif; } :focus { @@ -196,7 +196,7 @@ body { .ej-main-parent-content { position: absolute; left: 0; - top: 48px; + top: 62px; bottom: 0; right: 0; transition: left 400ms ease; @@ -212,7 +212,8 @@ body { transition: left 400ms ease; overflow-y: auto; overflow-x: hidden; - background-color: #fafafa; + background-color: var(--neutral-50); + padding: 22px 0px 0px 28px; } .mobile-overlay { @@ -293,7 +294,7 @@ ej-sidebar { .ej-preview-content { position: absolute; left: 0; - top: 48px; + top: 62px; bottom: 0; right: 0; } @@ -303,7 +304,10 @@ ej-sidebar { } #description a{ - color: #ff5f23; + color: var(--blue-600); +} +#description a:hover{ + color: var(--blue-700); } #r-w-form { diff --git a/src/styles/variable.css b/src/styles/variable.css new file mode 100644 index 0000000..f1beb6e --- /dev/null +++ b/src/styles/variable.css @@ -0,0 +1,24 @@ +:root { + --blue-50: #EFF5FE; + --blue-100: #DCEAFB; + --blue-200: #C4DEFD; + --blue-300: #93C0F5; + --blue-500: #2E81C8; + --blue-600: #1064C7; + --blue-700: #0C4E9E; + --blue-800: #0A3E7D; + --blue-900: #082C59; + + --neutral-0: #FFFFFF; + --neutral-50: #F6F8FB; + --neutral-100: #EAEFF6; + --neutral-200: #D8E0EB; + --neutral-300: #C3CDDB; + --neutral-400: #9EAABC; + --neutral-500: #6E7A90; + --neutral-600: #5E6B80; + --neutral-700: #43506A; + --neutral-800: #2C3A4F; + --neutral-900: #172239; + --neutral-950: #0D131F; +} \ No newline at end of file