From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Fri, 14 Dec 2018 16:27:10 +0000 (+0100)
Subject: SONARCLOUD-272 Activate SonarCloud styles at a higher level, update parsable dates
X-Git-Tag: 7.6~227
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=0b64e0734312efd38de8393f9a482d380634fd85;p=sonarqube.git

SONARCLOUD-272 Activate SonarCloud styles at a higher level, update parsable dates

* Set SonarCloud styles at the GlobalContainer level, instead of adding
  CSS classes at multiple, lower levels.
* Update the date handler to avoid having to call parseDate() in
  components unless really necessary.
---

diff --git a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
index f5187c585be..1e63e02a0be 100644
--- a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
@@ -18,12 +18,15 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as classNames from 'classnames';
 import GlobalNav from './nav/global/GlobalNav';
 import StartupModal from './StartupModal';
 import GlobalFooterContainer from './GlobalFooterContainer';
 import GlobalMessagesContainer from './GlobalMessagesContainer';
 import SuggestionsProvider from './embed-docs-modal/SuggestionsProvider';
 import Workspace from '../../components/workspace/Workspace';
+import { isSonarCloud } from '../../helpers/system';
+import '../styles/sonarcloud.css';
 
 interface Props {
   children: React.ReactNode;
@@ -37,7 +40,7 @@ export default function GlobalContainer(props: Props) {
   return (
     <SuggestionsProvider>
       <StartupModal>
-        <div className="global-container">
+        <div className={classNames('global-container', { sonarcloud: isSonarCloud() })}>
           <div className="page-wrapper" id="container">
             <div className="page-container">
               <Workspace>
diff --git a/server/sonar-web/src/main/js/app/components/notifications/NotificationsSidebar.tsx b/server/sonar-web/src/main/js/app/components/notifications/NotificationsSidebar.tsx
index 8eeb985837a..4e05bace133 100644
--- a/server/sonar-web/src/main/js/app/components/notifications/NotificationsSidebar.tsx
+++ b/server/sonar-web/src/main/js/app/components/notifications/NotificationsSidebar.tsx
@@ -24,7 +24,7 @@ import DateFormatter from '../../../components/intl/DateFormatter';
 import DeferredSpinner from '../../../components/common/DeferredSpinner';
 import Modal from '../../../components/controls/Modal';
 import { PrismicFeatureNews } from '../../../api/news';
-import { differenceInSeconds, parseDate } from '../../../helpers/dates';
+import { differenceInSeconds } from '../../../helpers/dates';
 import { translate } from '../../../helpers/l10n';
 
 export interface Props {
@@ -83,9 +83,7 @@ export default function NotificationsSidebar(props: Props) {
 }
 
 export function isUnread(index: number, notificationDate: string, lastReadDate?: Date) {
-  return !lastReadDate
-    ? index < 1
-    : differenceInSeconds(parseDate(notificationDate), lastReadDate) > 0;
+  return !lastReadDate ? index < 1 : differenceInSeconds(notificationDate, lastReadDate) > 0;
 }
 
 interface NotificationProps {
@@ -94,11 +92,10 @@ interface NotificationProps {
 }
 
 export function Notification({ notification, unread }: NotificationProps) {
-  const publicationDate = parseDate(notification.publicationDate);
   return (
     <div className={classNames('notifications-sidebar-slice', { unread })}>
       <h4>
-        <DateFormatter date={publicationDate} long={false} />
+        <DateFormatter date={notification.publicationDate} long={false} />
       </h4>
       {notification.features.map((feature, index) => (
         <Feature feature={feature} key={index} />
diff --git a/server/sonar-web/src/main/js/app/components/notifications/__tests__/__snapshots__/NotificationsSidebar-test.tsx.snap b/server/sonar-web/src/main/js/app/components/notifications/__tests__/__snapshots__/NotificationsSidebar-test.tsx.snap
index e309fd23ec8..9859b9bbb1d 100644
--- a/server/sonar-web/src/main/js/app/components/notifications/__tests__/__snapshots__/NotificationsSidebar-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/notifications/__tests__/__snapshots__/NotificationsSidebar-test.tsx.snap
@@ -72,7 +72,7 @@ exports[`#Notification should render correctly 1`] = `
 >
   <h4>
     <DateFormatter
-      date={2018-04-04T22:00:00.000Z}
+      date="2018-04-05"
       long={false}
     />
   </h4>
@@ -100,7 +100,7 @@ exports[`#Notification should render correctly 2`] = `
 >
   <h4>
     <DateFormatter
-      date={2018-04-04T22:00:00.000Z}
+      date="2018-04-05"
       long={false}
     />
   </h4>
diff --git a/server/sonar-web/src/main/js/app/components/notifications/notifications.css b/server/sonar-web/src/main/js/app/components/notifications/notifications.css
index 57220f85528..2d546ecd06c 100644
--- a/server/sonar-web/src/main/js/app/components/notifications/notifications.css
+++ b/server/sonar-web/src/main/js/app/components/notifications/notifications.css
@@ -27,18 +27,19 @@
 .navbar-latest-notification-wrapper {
   position: relative;
   display: inline-block;
-  padding: var(--gridSize) 34px var(--gridSize) 50px;
+  padding: var(--gridSize);
+  padding-left: 50px;
   height: 28px;
   max-width: 100%;
   box-sizing: border-box;
   overflow: hidden;
   vertical-align: middle;
   font-size: var(--smallFontSize);
-  color: var(--sonarcloudBlack500);
-  background-color: black;
   text-overflow: ellipsis;
   white-space: nowrap;
-  border-radius: 3px;
+  color: var(--sonarcloudBlack500);
+  background-color: #000;
+  border-radius: 3px 0 0 3px;
   cursor: pointer;
 }
 
@@ -66,16 +67,16 @@
   white-space: nowrap;
 }
 
-.navbar-latest-notification .navbar-icon {
-  position: absolute;
-  right: 0;
-  top: 0;
+.navbar-latest-notification-dismiss .navbar-icon {
   height: 28px;
+  background-color: #000;
+  border-radius: 0 3px 3px 0;
   padding: 9px var(--gridSize) !important;
-  border-left: 2px solid #262626;
+  margin-left: 1px;
+  margin-right: var(--gridSize);
 }
 
-.navbar-latest-notification .navbar-icon:hover path {
+.navbar-latest-notification-dismiss .navbar-icon:hover path {
   fill: var(--sonarcloudBlack300) !important;
 }
 
@@ -87,18 +88,13 @@
   width: 400px;
   display: flex;
   flex-direction: column;
-
   background: var(--sonarcloudBlack200);
-
-  z-index: 900;
 }
 
 .notifications-sidebar-top {
   position: relative;
   padding: calc(2 * var(--gridSize));
-
   border-bottom: 1px solid var(--sonarcloudBlack250);
-
   background-color: var(--sonarcloudBlack100);
 }
 
@@ -109,17 +105,15 @@
 
 .notifications-sidebar-top .close {
   position: absolute;
-  top: 16px;
-  right: 16px;
-
+  top: calc(2 * var(--gridSize));
+  right: calc(2 * var(--gridSize));
   border: 0;
-
   color: var(--sonarcloudBlack500);
 }
 
 .notifications-sidebar-content {
   flex: 1 1;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .notifications-sidebar-footer {
@@ -129,11 +123,9 @@
 }
 
 .notifications-sidebar-slice h4 {
-  padding: calc(2 * var(--gridSize)) calc(2 * var(--gridSize)) calc(var(--gridSize) / 2)
-    calc(2 * var(--gridSize));
-
+  padding: calc(2 * var(--gridSize));
+  padding-bottom: calc(var(--gridSize) / 2);
   background-color: var(--sonarcloudBlack200);
-
   font-weight: normal;
   font-size: var(--smallFontSize);
   text-align: right;
@@ -146,17 +138,13 @@
 
 .notifications-sidebar-slice .feature {
   padding: calc(2 * var(--gridSize));
-
   background-color: var(--sonarcloudBlack100);
-
   border-top: 1px solid var(--sonarcloudBlack250);
-
   overflow: hidden;
 }
 
 .notifications-sidebar-slice.unread .feature {
   background-color: #e6f6ff;
-
   border-color: #cee4f2;
 }
 
@@ -166,19 +154,14 @@
   margin-top: var(--gridSize);
 }
 
-.notifications-sidebar-slice .categories {
-  margin-bottom: 8px;
-}
-
 .notifications-sidebar-slice .categories li {
   display: inline-block;
   padding: 4px;
-  margin-right: 8px;
-
-  border-radius: 3px;
-
-  font-size: 8px;
+  margin-right: var(--gridSize);
+  font-size: 9px;
+  line-height: 8px;
   text-transform: uppercase;
-  color: white;
-  letter-spacing: 1px;
+  font-weight: bold;
+  color: #fff;
+  border-radius: 3px;
 }
diff --git a/server/sonar-web/src/main/js/app/styles/init/type.css b/server/sonar-web/src/main/js/app/styles/init/type.css
index 0b6b2c66e48..d488471841b 100644
--- a/server/sonar-web/src/main/js/app/styles/init/type.css
+++ b/server/sonar-web/src/main/js/app/styles/init/type.css
@@ -165,11 +165,15 @@ blockquote cite {
 
 small,
 .small {
-  font-size: 92.30769231%;
+  font-size: var(--smallFontSize);
 }
 
 .big {
-  font-size: 123.07692308%;
+  font-size: var(--bigFontSize);
+}
+
+.huge {
+  font-size: var(--hugeFontSize);
 }
 
 .zero-font-size {
diff --git a/server/sonar-web/src/main/js/app/styles/sonarcloud.css b/server/sonar-web/src/main/js/app/styles/sonarcloud.css
index 3ad81d1225a..3a3e277c6da 100644
--- a/server/sonar-web/src/main/js/app/styles/sonarcloud.css
+++ b/server/sonar-web/src/main/js/app/styles/sonarcloud.css
@@ -18,17 +18,24 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-/* EXTENDS components/pages.css */
-.sonarcloud.page-limited {
-  padding-top: 50px;
-  padding-bottom: 50px;
+.sonarcloud .global-navbar-menu-right .navbar-search {
+  flex: 0 0 310px;
 }
 
-.sonarcloud .page-header {
-  margin-bottom: 40px;
+.sonarcloud table.form {
+  width: 100%;
 }
 
-.sonarcloud .page-title {
-  font-size: var(--hugeFontSize);
-  font-weight: bold;
+.sonarcloud table.form tr,
+.sonarcloud table.form td {
+  vertical-align: middle;
+}
+
+.sonarcloud table.form tr:first-child,
+.sonarcloud table.form td:first-child {
+  width: 450px;
+}
+
+.sonarcloud table.form tbody tr:nth-child(2n) {
+  background: var(--sonarcloudBlack200);
 }
diff --git a/server/sonar-web/src/main/js/apps/create/organization/CreateOrganization.tsx b/server/sonar-web/src/main/js/apps/create/organization/CreateOrganization.tsx
index 9977f8a739b..9b348bd2717 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/CreateOrganization.tsx
+++ b/server/sonar-web/src/main/js/apps/create/organization/CreateOrganization.tsx
@@ -58,7 +58,6 @@ import { getOrganizationUrl } from '../../../helpers/urls';
 import { skipOnboarding } from '../../../store/users';
 import * as api from '../../../api/organizations';
 import * as actions from '../../../store/organizations';
-import '../../../app/styles/sonarcloud.css';
 import '../../tutorials/styles.css'; // TODO remove me
 
 interface Props {
@@ -412,9 +411,11 @@ export class CreateOrganization extends React.PureComponent<Props & WithRouterPr
     return (
       <>
         <Helmet title={header} titleTemplate="%s" />
-        <div className="sonarcloud page page-limited">
-          <header className="page-header">
-            <h1 className="page-title big-spacer-bottom">{header}</h1>
+        <div className="page page-limited huge-spacer-top huge-spacer-bottom">
+          <header className="page-header huge-spacer-bottom">
+            <h1 className="page-title huge big-spacer-bottom">
+              <strong>{header}</strong>
+            </h1>
             {!importPersonalOrg &&
               startedPrice !== undefined && (
                 <p className="page-description">
diff --git a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/CreateOrganization-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/CreateOrganization-test.tsx.snap
index 5b7b823d209..a5739c3fc7c 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/CreateOrganization-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/CreateOrganization-test.tsx.snap
@@ -15,15 +15,17 @@ exports[`should render with auto personal organization bind page 2`] = `
     titleTemplate="%s"
   />
   <div
-    className="sonarcloud page page-limited"
+    className="page page-limited huge-spacer-top huge-spacer-bottom"
   >
     <header
-      className="page-header"
+      className="page-header huge-spacer-bottom"
     >
       <h1
-        className="page-title big-spacer-bottom"
+        className="page-title huge big-spacer-bottom"
       >
-        onboarding.import_organization.personal.page.header
+        <strong>
+          onboarding.import_organization.personal.page.header
+        </strong>
       </h1>
     </header>
     <AutoPersonalOrganizationBind
@@ -88,15 +90,17 @@ exports[`should render with auto tab displayed 1`] = `
     titleTemplate="%s"
   />
   <div
-    className="sonarcloud page page-limited"
+    className="page page-limited huge-spacer-top huge-spacer-bottom"
   >
     <header
-      className="page-header"
+      className="page-header huge-spacer-bottom"
     >
       <h1
-        className="page-title big-spacer-bottom"
+        className="page-title huge big-spacer-bottom"
       >
-        onboarding.create_organization.page.header
+        <strong>
+          onboarding.create_organization.page.header
+        </strong>
       </h1>
       <p
         className="page-description"
@@ -173,15 +177,17 @@ exports[`should render with auto tab selected and manual disabled 2`] = `
     titleTemplate="%s"
   />
   <div
-    className="sonarcloud page page-limited"
+    className="page page-limited huge-spacer-top huge-spacer-bottom"
   >
     <header
-      className="page-header"
+      className="page-header huge-spacer-bottom"
     >
       <h1
-        className="page-title big-spacer-bottom"
+        className="page-title huge big-spacer-bottom"
       >
-        onboarding.create_organization.page.header
+        <strong>
+          onboarding.create_organization.page.header
+        </strong>
       </h1>
       <p
         className="page-description"
@@ -295,15 +301,17 @@ exports[`should render with manual tab displayed 1`] = `
     titleTemplate="%s"
   />
   <div
-    className="sonarcloud page page-limited"
+    className="page page-limited huge-spacer-top huge-spacer-bottom"
   >
     <header
-      className="page-header"
+      className="page-header huge-spacer-bottom"
     >
       <h1
-        className="page-title big-spacer-bottom"
+        className="page-title huge big-spacer-bottom"
       >
-        onboarding.create_organization.page.header
+        <strong>
+          onboarding.create_organization.page.header
+        </strong>
       </h1>
       <p
         className="page-description"
@@ -350,15 +358,17 @@ exports[`should render with organization bind page 2`] = `
     titleTemplate="%s"
   />
   <div
-    className="sonarcloud page page-limited"
+    className="page page-limited huge-spacer-top huge-spacer-bottom"
   >
     <header
-      className="page-header"
+      className="page-header huge-spacer-bottom"
     >
       <h1
-        className="page-title big-spacer-bottom"
+        className="page-title huge big-spacer-bottom"
       >
-        onboarding.create_organization.page.header
+        <strong>
+          onboarding.create_organization.page.header
+        </strong>
       </h1>
       <p
         className="page-description"
@@ -470,15 +480,17 @@ exports[`should switch tabs 1`] = `
     titleTemplate="%s"
   />
   <div
-    className="sonarcloud page page-limited"
+    className="page page-limited huge-spacer-top huge-spacer-bottom"
   >
     <header
-      className="page-header"
+      className="page-header huge-spacer-bottom"
     >
       <h1
-        className="page-title big-spacer-bottom"
+        className="page-title huge big-spacer-bottom"
       >
-        onboarding.create_organization.page.header
+        <strong>
+          onboarding.create_organization.page.header
+        </strong>
       </h1>
       <p
         className="page-description"
diff --git a/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx b/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx
index 27e03f15e47..12904001e99 100644
--- a/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx
@@ -32,7 +32,6 @@ import { getAlmAppInfo } from '../../../api/alm-integration';
 import { hasAdvancedALMIntegration } from '../../../helpers/almIntegrations';
 import { translate } from '../../../helpers/l10n';
 import { getProjectUrl, getOrganizationUrl } from '../../../helpers/urls';
-import '../../../app/styles/sonarcloud.css';
 import './style.css';
 
 interface Props {
@@ -127,9 +126,11 @@ export class CreateProjectPage extends React.PureComponent<Props & WithRouterPro
     return (
       <>
         <Helmet title={header} titleTemplate="%s" />
-        <div className="sonarcloud page page-limited">
-          <header className="page-header">
-            <h1 className="page-title">{header}</h1>
+        <div className="page page-limited huge-spacer-top huge-spacer-bottom">
+          <header className="page-header huge-spacer-bottom">
+            <h1 className="page-title huge">
+              <strong>{header}</strong>
+            </h1>
           </header>
           {loading ? (
             <DeferredSpinner />
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectPage-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectPage-test.tsx.snap
index a191dcd385d..cbec17a9d1c 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectPage-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectPage-test.tsx.snap
@@ -9,15 +9,17 @@ exports[`should render correctly 1`] = `
     titleTemplate="%s"
   />
   <div
-    className="sonarcloud page page-limited"
+    className="page page-limited huge-spacer-top huge-spacer-bottom"
   >
     <header
-      className="page-header"
+      className="page-header huge-spacer-bottom"
     >
       <h1
-        className="page-title"
+        className="page-title huge"
       >
-        onboarding.create_project.header
+        <strong>
+          onboarding.create_project.header
+        </strong>
       </h1>
     </header>
     <DeferredSpinner
@@ -36,15 +38,17 @@ exports[`should render correctly 2`] = `
     titleTemplate="%s"
   />
   <div
-    className="sonarcloud page page-limited"
+    className="page page-limited huge-spacer-top huge-spacer-bottom"
   >
     <header
-      className="page-header"
+      className="page-header huge-spacer-bottom"
     >
       <h1
-        className="page-title"
+        className="page-title huge"
       >
-        onboarding.create_project.header
+        <strong>
+          onboarding.create_project.header
+        </strong>
       </h1>
     </header>
     <Tabs
@@ -103,15 +107,17 @@ exports[`should render with Manual creation only 1`] = `
     titleTemplate="%s"
   />
   <div
-    className="sonarcloud page page-limited"
+    className="page page-limited huge-spacer-top huge-spacer-bottom"
   >
     <header
-      className="page-header"
+      className="page-header huge-spacer-bottom"
     >
       <h1
-        className="page-title"
+        className="page-title huge"
       >
-        onboarding.create_project.header
+        <strong>
+          onboarding.create_project.header
+        </strong>
       </h1>
     </header>
     <ManualProjectCreate
@@ -162,15 +168,17 @@ exports[`should switch tabs 1`] = `
     titleTemplate="%s"
   />
   <div
-    className="sonarcloud page page-limited"
+    className="page page-limited huge-spacer-top huge-spacer-bottom"
   >
     <header
-      className="page-header"
+      className="page-header huge-spacer-bottom"
     >
       <h1
-        className="page-title"
+        className="page-title huge"
       >
-        onboarding.create_project.header
+        <strong>
+          onboarding.create_project.header
+        </strong>
       </h1>
     </header>
     <Tabs
diff --git a/server/sonar-web/src/main/js/apps/overview/components/SonarCloudEmptyOverview.tsx b/server/sonar-web/src/main/js/apps/overview/components/SonarCloudEmptyOverview.tsx
index d1be8f47023..15d02a32a63 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/SonarCloudEmptyOverview.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/SonarCloudEmptyOverview.tsx
@@ -26,7 +26,6 @@ import { isLongLivingBranch, isBranch, isMainBranch } from '../../../helpers/bra
 import { translate } from '../../../helpers/l10n';
 import { isLoggedIn } from '../../../helpers/users';
 import { getCurrentUser, Store } from '../../../store/rootReducer';
-import '../../../app/styles/sonarcloud.css';
 import { Alert } from '../../../components/ui/Alert';
 
 interface OwnProps {
@@ -58,7 +57,7 @@ export function SonarCloudEmptyOverview({
   return (
     <div className="page page-limited">
       <div className="overview page-with-sidebar">
-        <div className="overview-main page-main sonarcloud">
+        <div className="overview-main page-main">
           {isLoggedIn(currentUser) && isMainBranch(branchLike) ? (
             <>
               {hasBranches && (
diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/SonarCloudEmptyOverview-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/SonarCloudEmptyOverview-test.tsx.snap
index 28eda6a8c39..ed33bf33c66 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/SonarCloudEmptyOverview-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/SonarCloudEmptyOverview-test.tsx.snap
@@ -8,7 +8,7 @@ exports[`renders correctly 1`] = `
     className="overview page-with-sidebar"
   >
     <div
-      className="overview-main page-main sonarcloud"
+      className="overview-main page-main"
     >
       <AnalyzeTutorial
         component={
@@ -68,7 +68,7 @@ exports[`should not render the tutorial 1`] = `
     className="overview page-with-sidebar"
   >
     <div
-      className="overview-main page-main sonarcloud"
+      className="overview-main page-main"
     />
     <div
       className="overview-sidebar page-sidebar-fixed"
@@ -107,7 +107,7 @@ exports[`should render another message when there are branches 1`] = `
     className="overview page-with-sidebar"
   >
     <div
-      className="overview-main page-main sonarcloud"
+      className="overview-main page-main"
     >
       <WarningMessage
         branchLike={
@@ -157,7 +157,7 @@ exports[`should render another message when there are branches 2`] = `
     className="overview page-with-sidebar"
   >
     <div
-      className="overview-main page-main sonarcloud"
+      className="overview-main page-main"
     >
       <WarningMessage
         branchLike={
diff --git a/server/sonar-web/src/main/js/helpers/dates.ts b/server/sonar-web/src/main/js/helpers/dates.ts
index b86e3685446..3c74c827cc6 100644
--- a/server/sonar-web/src/main/js/helpers/dates.ts
+++ b/server/sonar-web/src/main/js/helpers/dates.ts
@@ -59,14 +59,14 @@ export function isSameDay(dateLeft: Date, dateRight: Date): boolean {
   return _isSameDay(dateLeft, dateRight);
 }
 
-export function differenceInYears(dateLeft: Date, dateRight: Date): number {
+export function differenceInYears(dateLeft: ParsableDate, dateRight: ParsableDate): number {
   return _differenceInYears(dateLeft, dateRight);
 }
 
-export function differenceInDays(dateLeft: Date, dateRight: Date): number {
+export function differenceInDays(dateLeft: ParsableDate, dateRight: ParsableDate): number {
   return _differenceInDays(dateLeft, dateRight);
 }
 
-export function differenceInSeconds(dateLeft: Date, dateRight: Date): number {
+export function differenceInSeconds(dateLeft: ParsableDate, dateRight: ParsableDate): number {
   return _differenceInSeconds(dateLeft, dateRight);
 }