From f250344eae3d2cfad0a13842850c84a779fc3356 Mon Sep 17 00:00:00 2001
From: Dvun <rsheveljov@gmail.com>
Date: Fri, 1 Dec 2023 11:32:54 +0200
Subject: [PATCH 01/10] fix: added new texts

---
 app/translations.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/translations.js b/app/translations.js
index 4978a67162..2306bbe1cf 100644
--- a/app/translations.js
+++ b/app/translations.js
@@ -978,6 +978,7 @@ const translations = {
     'choose-freely': 'Optional',
     'choose-stop': 'Select stop',
     'choose-stop-or-vehicle': 'Select vehicle or stop',
+    'choose-timepicker': 'Add a timepicker',
     'choose-vehicle': 'Select vehicle',
     citybike: 'City bike',
     'citybike-distance-duration': 'Bike {duration} ({distance})',
@@ -1601,6 +1602,7 @@ const translations = {
     time: 'Time',
     'time-selector-hours-label': 'Hour',
     'time-selector-minutes-label': 'Minute',
+    'timepicker-component': 'Time picker',
     timetable: 'Timetable',
     'to-frontpage': 'To the front page',
     'to-rail': 'train',
@@ -2155,6 +2157,7 @@ const translations = {
     'choose-freely': 'Vapaasti valittavat',
     'choose-stop': 'Valitse pysäkki',
     'choose-stop-or-vehicle': 'Valitse linja tai pysäkki',
+    'choose-timepicker': 'Lisää aikavalitsin',
     'choose-vehicle': 'Valitse linja',
     citybike: 'Kaupunkipyörä',
     'citybike-distance-duration': 'Pyöräile {duration} ({distance})',
@@ -2775,6 +2778,7 @@ const translations = {
     time: 'Aika',
     'time-selector-hours-label': 'Tunti',
     'time-selector-minutes-label': 'Minuutti',
+    'timepicker-component': 'Aikavalitsin',
     timetable: 'Aikataulu',
     'to-frontpage': 'Etusivulle',
     'to-rail': 'junaan',
@@ -4102,6 +4106,7 @@ const translations = {
     'choose-freely': 'Valfria',
     'choose-stop': 'Välj hållplats',
     'choose-stop-or-vehicle': 'Select vehicle or stop',
+    'choose-timepicker': 'Lägg till en tidsväljare',
     'choose-vehicle': 'Select vehicle',
     citybike: 'Stadscykel',
     'citybike-distance-duration': 'Cykla {duration} ({distance})',
@@ -4729,6 +4734,7 @@ const translations = {
     time: 'Tid',
     'time-selector-hours-label': 'Timme',
     'time-selector-minutes-label': 'Minut',
+    'timepicker-component': 'Tidsväljare',
     timetable: 'Tidtabell',
     'to-ferry': 'färjan',
     'to-frontpage': 'Till startsidan',

From 959378386f360a11410c7b0da3605ced248d38a1 Mon Sep 17 00:00:00 2001
From: Dvun <rsheveljov@gmail.com>
Date: Fri, 1 Dec 2023 11:34:20 +0200
Subject: [PATCH 02/10] fix: added new Datetimepicker component, new styles for
 this component

---
 .../EmbeddedSearch/EmbeddedSearch.js          | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/app/component/EmbeddedSearch/EmbeddedSearch.js b/app/component/EmbeddedSearch/EmbeddedSearch.js
index 1feded154a..56ac096379 100644
--- a/app/component/EmbeddedSearch/EmbeddedSearch.js
+++ b/app/component/EmbeddedSearch/EmbeddedSearch.js
@@ -18,6 +18,7 @@ import Icon from '../Icon';
 import Loading from '../Loading';
 import { addAnalyticsEvent } from '../../util/analyticsUtils';
 import useUTMCampaignParams from './hooks/useUTMCampaignParams';
+import DatetimepickerContainer from '../DatetimepickerContainer';
 
 const LocationSearch = withSearchContext(DTAutosuggestPanel, true);
 
@@ -103,6 +104,7 @@ const EmbeddedSearch = (props, context) => {
     name: query.address2,
   };
   const useDestinationLocation = query?.destinationLoc;
+  const isTimepickerSelected = query.timepicker;
   const [logo, setLogo] = useState();
   const [origin, setOrigin] = useState(
     useOriginLocation
@@ -298,15 +300,27 @@ const EmbeddedSearch = (props, context) => {
     return <Loading />;
   }
 
+  const previewStyles = () => {
+    if (window.location.pathname === '/reittihakuelementti') {
+      return {
+        position: 'absolute',
+        bottom: '120px',
+        left: '-15px',
+      };
+    }
+    return { position: 'relative', marginTop: '10px', maxWidth: '399px' };
+  };
+
   return (
     <div
+      style={{ height: isTimepickerSelected ? '400px' : '250px' }}
       className={`embedded-seach-container ${
         bikeOnly ? 'bike' : walkOnly ? 'walk' : ''
       }`}
       id={appElement}
     >
       <div className="background-container">{drawBackgroundIcon()}</div>
-      <div className="control-panel-container">
+      <div className="control-panel-container" style={{ position: 'relative' }}>
         <CtrlPanel
           instance="HSL"
           language={lang}
@@ -321,7 +335,17 @@ const EmbeddedSearch = (props, context) => {
             targets={locationSearchTargets}
             {...locationSearchProps}
           />
-          <div className="embedded-search-button-container">
+
+          {isTimepickerSelected && (
+            <div className="datetimepicker-container" style={previewStyles()}>
+              <DatetimepickerContainer realtime />
+            </div>
+          )}
+
+          <div
+            className="embedded-search-button-container"
+            style={{ marginTop: isTimepickerSelected ? '50px' : '' }}
+          >
             {logo ? (
               <img
                 src={logo}

From 60a7fbeb0632ac7e50148ca02e96fef901a0d7e4 Mon Sep 17 00:00:00 2001
From: Dvun <rsheveljov@gmail.com>
Date: Fri, 1 Dec 2023 11:38:13 +0200
Subject: [PATCH 03/10] fix: added new timepicker component for link string.
 New fieldset for checkbox selecting or unselect

---
 app/component/EmbeddedSearchGenerator.js | 46 +++++++++++++++++++++---
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/app/component/EmbeddedSearchGenerator.js b/app/component/EmbeddedSearchGenerator.js
index f8243c78b4..fc546aba1a 100644
--- a/app/component/EmbeddedSearchGenerator.js
+++ b/app/component/EmbeddedSearchGenerator.js
@@ -31,6 +31,7 @@ const EmbeddedSearchGenerator = (props, context) => {
 
   const [chooseFreely, setChooseFreely] = useState(true);
   const [searchOriginDefined, setSearchOriginDefined] = useState(false);
+  const [isTimepickerSelected, setIsTimepickerSelected] = useState(false);
   const [searchOrigin, setSearchOrigin] = useState();
   const [searchDestinationDefined, setSearchDestinationDefined] = useState(
     false,
@@ -112,14 +113,23 @@ const EmbeddedSearchGenerator = (props, context) => {
     mode[searchModeRestriction.substring(0, searchModeRestriction.length - 2)] =
       'true';
     const searchMatch = {
-      location: { query: { ...mode, ...locData, lang: searchLang } },
+      location: {
+        query: {
+          ...mode,
+          ...locData,
+          lang: searchLang,
+          timepicker: isTimepickerSelected,
+        },
+      },
     };
     return <EmbeddedSearch match={searchMatch} />;
   };
 
   const generateComponentString = () => {
     const currentURL = window.location.origin;
-    let iframeHTML = `<iframe width="${searchWidth}" height="250" style="border-radius: 10px;" src="${currentURL}${EMBEDDED_SEARCH_PATH}?${searchModeRestriction}&lang=${searchLang}`;
+    let iframeHTML = `<iframe width="${searchWidth}" height=${
+      isTimepickerSelected ? 400 : 250
+    } style="border-radius: 10px;" src="${currentURL}${EMBEDDED_SEARCH_PATH}?${searchModeRestriction}&lang=${searchLang}&timepicker=${isTimepickerSelected}`;
     if (!chooseFreely) {
       if (searchOriginDefined && searchOrigin) {
         if (originIsCurrentLocation()) {
@@ -254,7 +264,7 @@ const EmbeddedSearchGenerator = (props, context) => {
                   hanldeWidthOnBlur(event.target.value);
                 }}
               />
-              <span> px x 250px</span>
+              <span> px x {isTimepickerSelected ? '400px' : '250px'}</span>
             </label>
           </fieldset>
 
@@ -411,6 +421,34 @@ const EmbeddedSearchGenerator = (props, context) => {
             )}
           </fieldset>
 
+          <fieldset id="timePicker">
+            <legend>
+              <h3>
+                <FormattedMessage
+                  id="timepicker-component"
+                  defaultMessage="Time selector"
+                />
+              </h3>
+            </legend>
+
+            <label htmlFor="choose-timepicker">
+              <input
+                type="checkbox"
+                value="0"
+                name="origin-and-destination"
+                id="choose-timepicker"
+                onChange={() =>
+                  setIsTimepickerSelected(prevState => !prevState)
+                }
+                checked={isTimepickerSelected}
+              />
+              <FormattedMessage
+                id="choose-timepicker"
+                defaultMessage="Add a timepicker"
+              />
+            </label>
+          </fieldset>
+
           <div
             className="embed-preview"
             onFocus={e => {
@@ -425,7 +463,7 @@ const EmbeddedSearchGenerator = (props, context) => {
               className="embedded-search-container"
               id="embedded-search-container-id"
               style={{
-                height: 250,
+                height: isTimepickerSelected ? 300 : 250,
                 width: searchWidth,
                 minWidth: MIN_WIDTH,
                 maxWidth: MAX_WIDTH,

From 40a327918d39ae2a7d62c68bb1c994e303ee5214 Mon Sep 17 00:00:00 2001
From: Dvun <rsheveljov@gmail.com>
Date: Fri, 1 Dec 2023 18:14:55 +0200
Subject: [PATCH 04/10] fix: update

---
 .../EmbeddedSearch/EmbeddedSearch.js          | 31 ++++++++++---------
 app/component/EmbeddedSearchGenerator.js      | 22 ++++++++++---
 app/component/embeddedSearch.scss             | 20 +++++++++++-
 3 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/app/component/EmbeddedSearch/EmbeddedSearch.js b/app/component/EmbeddedSearch/EmbeddedSearch.js
index 56ac096379..9a6a08fc9d 100644
--- a/app/component/EmbeddedSearch/EmbeddedSearch.js
+++ b/app/component/EmbeddedSearch/EmbeddedSearch.js
@@ -76,6 +76,10 @@ const EmbeddedSearch = (props, context) => {
       ? document.referrer
       : document.location.href;
 
+  const previewComponent = window.location.pathname.match(
+    config.URL.EMBEDDED_SEARCH_GENERATION,
+  );
+
   const buttonRef = useRef(null);
 
   useEffect(() => {
@@ -300,27 +304,18 @@ const EmbeddedSearch = (props, context) => {
     return <Loading />;
   }
 
-  const previewStyles = () => {
-    if (window.location.pathname === '/reittihakuelementti') {
-      return {
-        position: 'absolute',
-        bottom: '120px',
-        left: '-15px',
-      };
-    }
-    return { position: 'relative', marginTop: '10px', maxWidth: '399px' };
-  };
-
   return (
     <div
-      style={{ height: isTimepickerSelected ? '400px' : '250px' }}
       className={`embedded-seach-container ${
         bikeOnly ? 'bike' : walkOnly ? 'walk' : ''
       }`}
       id={appElement}
     >
       <div className="background-container">{drawBackgroundIcon()}</div>
-      <div className="control-panel-container" style={{ position: 'relative' }}>
+      <div
+        className={`control-panel-container `}
+        style={{ position: 'relative' }}
+      >
         <CtrlPanel
           instance="HSL"
           language={lang}
@@ -337,14 +332,20 @@ const EmbeddedSearch = (props, context) => {
           />
 
           {isTimepickerSelected && (
-            <div className="datetimepicker-container" style={previewStyles()}>
+            <div
+              className={`datetimepicker-container ${
+                previewComponent ? 'preview-component' : 'ready-component'
+              }`}
+            >
               <DatetimepickerContainer realtime />
             </div>
           )}
 
           <div
             className="embedded-search-button-container"
-            style={{ marginTop: isTimepickerSelected ? '50px' : '' }}
+            style={{
+              marginTop: previewComponent && isTimepickerSelected ? '50px' : '',
+            }}
           >
             {logo ? (
               <img
diff --git a/app/component/EmbeddedSearchGenerator.js b/app/component/EmbeddedSearchGenerator.js
index fc546aba1a..48bced77ff 100644
--- a/app/component/EmbeddedSearchGenerator.js
+++ b/app/component/EmbeddedSearchGenerator.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { FormattedMessage, intlShape } from 'react-intl';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 import DTAutosuggest from '@digitransit-component/digitransit-component-autosuggest';
@@ -22,6 +22,7 @@ const EmbeddedSearchGenerator = (props, context) => {
   const { breakpoint, lang } = props;
   const { config, intl } = context;
   const { colors, fontWeights } = config;
+  const [isTimepickerSelected, setIsTimepickerSelected] = useState(false);
   const MIN_WIDTH = 360;
   const MAX_WIDTH = 640;
 
@@ -31,7 +32,6 @@ const EmbeddedSearchGenerator = (props, context) => {
 
   const [chooseFreely, setChooseFreely] = useState(true);
   const [searchOriginDefined, setSearchOriginDefined] = useState(false);
-  const [isTimepickerSelected, setIsTimepickerSelected] = useState(false);
   const [searchOrigin, setSearchOrigin] = useState();
   const [searchDestinationDefined, setSearchDestinationDefined] = useState(
     false,
@@ -128,8 +128,10 @@ const EmbeddedSearchGenerator = (props, context) => {
   const generateComponentString = () => {
     const currentURL = window.location.origin;
     let iframeHTML = `<iframe width="${searchWidth}" height=${
-      isTimepickerSelected ? 400 : 250
-    } style="border-radius: 10px;" src="${currentURL}${EMBEDDED_SEARCH_PATH}?${searchModeRestriction}&lang=${searchLang}&timepicker=${isTimepickerSelected}`;
+      isTimepickerSelected ? 300 : 250
+    } style="border-radius: 10px;" src="${currentURL}${EMBEDDED_SEARCH_PATH}?${searchModeRestriction}&lang=${searchLang}${
+      isTimepickerSelected ? '&timepicker=true' : ''
+    }`;
     if (!chooseFreely) {
       if (searchOriginDefined && searchOrigin) {
         if (originIsCurrentLocation()) {
@@ -174,6 +176,14 @@ const EmbeddedSearchGenerator = (props, context) => {
     }
   };
 
+  useEffect(() => {
+    if (isTimepickerSelected) {
+      setSearchWidth(MIN_WIDTH + 90);
+    } else {
+      setSearchWidth(MIN_WIDTH);
+    }
+  }, [isTimepickerSelected]);
+
   return (
     <section id="mainContent" className="content">
       <div
@@ -460,7 +470,9 @@ const EmbeddedSearchGenerator = (props, context) => {
               <FormattedMessage id="preview" defaultMessage="Preview" />
             </h3>
             <div
-              className="embedded-search-container"
+              className={`embedded-search-container ${
+                isTimepickerSelected ? 'with-timepicker' : ''
+              }`}
               id="embedded-search-container-id"
               style={{
                 height: isTimepickerSelected ? 300 : 250,
diff --git a/app/component/embeddedSearch.scss b/app/component/embeddedSearch.scss
index 32575164db..20ef7a8b3a 100644
--- a/app/component/embeddedSearch.scss
+++ b/app/component/embeddedSearch.scss
@@ -1,13 +1,26 @@
 .embedded-seach-container {
     display: grid;
     padding: 10px;
-    height: 250px;
+    //height: 250px;
     width: 100vw;
     max-width: 100%;
     overflow: hidden;
+
     .background-container, .control-panel-container{
         grid-column: 1;
         grid-row: 1;
+
+        .preview-component {
+            position: absolute;
+            bottom: 0;
+            left: -15px;
+        }
+
+        .ready-component {
+            position: relative;
+            margin-top: 10px;
+            max-width: 399px;
+        }
     }
     h1 {
         margin-top: 25px;
@@ -56,3 +69,8 @@
         }
     }
 }
+
+.with-timepicker {
+    //height: 400px !important;
+    width: 450px;
+}

From 391775a02d6292ac661e73e2f05cabfab06ea151 Mon Sep 17 00:00:00 2001
From: Dvun <rsheveljov@gmail.com>
Date: Fri, 1 Dec 2023 19:14:03 +0200
Subject: [PATCH 05/10] fix: update

---
 app/component/EmbeddedSearch/EmbeddedSearch.js | 1 +
 app/component/EmbeddedSearchGenerator.js       | 3 +--
 app/component/embeddedSearch.scss              | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/component/EmbeddedSearch/EmbeddedSearch.js b/app/component/EmbeddedSearch/EmbeddedSearch.js
index 9a6a08fc9d..cbc74b377c 100644
--- a/app/component/EmbeddedSearch/EmbeddedSearch.js
+++ b/app/component/EmbeddedSearch/EmbeddedSearch.js
@@ -310,6 +310,7 @@ const EmbeddedSearch = (props, context) => {
         bikeOnly ? 'bike' : walkOnly ? 'walk' : ''
       }`}
       id={appElement}
+      style={{ height: isTimepickerSelected ? '380px' : '250px' }}
     >
       <div className="background-container">{drawBackgroundIcon()}</div>
       <div
diff --git a/app/component/EmbeddedSearchGenerator.js b/app/component/EmbeddedSearchGenerator.js
index 48bced77ff..acb8ab9118 100644
--- a/app/component/EmbeddedSearchGenerator.js
+++ b/app/component/EmbeddedSearchGenerator.js
@@ -128,7 +128,7 @@ const EmbeddedSearchGenerator = (props, context) => {
   const generateComponentString = () => {
     const currentURL = window.location.origin;
     let iframeHTML = `<iframe width="${searchWidth}" height=${
-      isTimepickerSelected ? 300 : 250
+      isTimepickerSelected ? '380' : '250'
     } style="border-radius: 10px;" src="${currentURL}${EMBEDDED_SEARCH_PATH}?${searchModeRestriction}&lang=${searchLang}${
       isTimepickerSelected ? '&timepicker=true' : ''
     }`;
@@ -475,7 +475,6 @@ const EmbeddedSearchGenerator = (props, context) => {
               }`}
               id="embedded-search-container-id"
               style={{
-                height: isTimepickerSelected ? 300 : 250,
                 width: searchWidth,
                 minWidth: MIN_WIDTH,
                 maxWidth: MAX_WIDTH,
diff --git a/app/component/embeddedSearch.scss b/app/component/embeddedSearch.scss
index 20ef7a8b3a..9d25958fc4 100644
--- a/app/component/embeddedSearch.scss
+++ b/app/component/embeddedSearch.scss
@@ -1,7 +1,7 @@
 .embedded-seach-container {
     display: grid;
     padding: 10px;
-    //height: 250px;
+    height: 250px;
     width: 100vw;
     max-width: 100%;
     overflow: hidden;
@@ -12,7 +12,7 @@
 
         .preview-component {
             position: absolute;
-            bottom: 0;
+            bottom: 100px;
             left: -15px;
         }
 
@@ -71,6 +71,6 @@
 }
 
 .with-timepicker {
-    //height: 400px !important;
+    height: 380px;
     width: 450px;
 }

From c9369c816094715b81204c271c167aa003cfe29b Mon Sep 17 00:00:00 2001
From: Dvun <rsheveljov@gmail.com>
Date: Mon, 4 Dec 2023 15:20:08 +0200
Subject: [PATCH 06/10] fix: update

---
 .../EmbeddedSearch/EmbeddedSearch.js          | 103 +++++++++++++++++-
 1 file changed, 101 insertions(+), 2 deletions(-)

diff --git a/app/component/EmbeddedSearch/EmbeddedSearch.js b/app/component/EmbeddedSearch/EmbeddedSearch.js
index cbc74b377c..057acec520 100644
--- a/app/component/EmbeddedSearch/EmbeddedSearch.js
+++ b/app/component/EmbeddedSearch/EmbeddedSearch.js
@@ -6,6 +6,7 @@ import { matchShape } from 'found';
 import DTAutosuggestPanel from '@digitransit-component/digitransit-component-autosuggest-panel';
 import CtrlPanel from '@digitransit-component/digitransit-component-control-panel';
 import i18next from 'i18next';
+import Datetimepicker from '@digitransit-component/digitransit-component-datetimepicker';
 import { getRefPoint } from '../../util/apiUtils';
 import withSearchContext from '../WithSearchContext';
 import {
@@ -18,7 +19,6 @@ import Icon from '../Icon';
 import Loading from '../Loading';
 import { addAnalyticsEvent } from '../../util/analyticsUtils';
 import useUTMCampaignParams from './hooks/useUTMCampaignParams';
-import DatetimepickerContainer from '../DatetimepickerContainer';
 
 const LocationSearch = withSearchContext(DTAutosuggestPanel, true);
 
@@ -70,6 +70,7 @@ const EmbeddedSearch = (props, context) => {
   const { colors, fontWeights } = config;
   const bikeOnly = query?.bikeOnly;
   const walkOnly = query?.walkOnly;
+  const openPicker = !!query.setTime;
   const lang = query.lang || 'fi';
   const url =
     window.location !== window.parent.location
@@ -92,6 +93,12 @@ const EmbeddedSearch = (props, context) => {
     });
   });
 
+  const [state, setState] = useState({
+    open: false,
+    time: undefined,
+    arriveBy: false,
+    keepPickerOpen: false,
+  });
   const defaultOriginExists = query.lat1 && query.lon1;
   const defaultOrigin = {
     lat: Number(query.lat1),
@@ -247,6 +254,13 @@ const EmbeddedSearch = (props, context) => {
     ]);
 
     targetUrl.search += buildQueryString(utmCampaignParams);
+    if (state.time !== undefined) {
+      targetUrl.search += `&time=${state.time}`;
+    }
+
+    if (state.arriveBy) {
+      targetUrl.search += `&arriveBy=${state.arriveBy}`;
+    }
 
     addAnalyticsEvent({
       category: 'EmbeddedSearch',
@@ -304,6 +318,72 @@ const EmbeddedSearch = (props, context) => {
     return <Loading />;
   }
 
+  const onDepartureClick = time => {
+    setState({ ...state, time, arriveBy: false, keepPickerOpen: true });
+    addAnalyticsEvent({
+      event: 'sendMatomoEvent',
+      category: 'EmbeddedSearch',
+      action: 'LeavingArrivingSelection',
+      name: 'SelectLeaving',
+    });
+  };
+
+  const onTimeChange = (time, arriveBy, onSubmit = false) => {
+    const keepPickerOpen = onSubmit === false;
+    setState({
+      ...state,
+      time,
+      arriveBy: !!arriveBy,
+      keepPickerOpen,
+    });
+    addAnalyticsEvent({
+      action: 'EditJourneyTime',
+      category: 'EmbeddedSearch',
+      name: null,
+    });
+  };
+
+  const onDateChange = (time, arriveBy) => {
+    setState({
+      ...state,
+      time,
+      arriveBy: !!arriveBy,
+      keepPickerOpen: true,
+    });
+    addAnalyticsEvent({
+      action: 'EditJourneyDate',
+      category: 'EmbeddedSearch',
+      name: null,
+    });
+  };
+
+  const onNowClick = () => {
+    setState({
+      ...state,
+      time: undefined,
+      arriveBy: false,
+      keepPickerOpen: false,
+    });
+  };
+
+  const onArrivalClick = time => {
+    setState({ ...state, time, arriveBy: true, keepPickerOpen: true });
+    addAnalyticsEvent({
+      event: 'sendMatomoEvent',
+      category: 'EmbeddedSearch',
+      action: 'LeavingArrivingSelection',
+      name: 'SelectArriving',
+    });
+  };
+
+  const onClose = () => {
+    setState({ ...state, open: false });
+  };
+
+  const onOpen = () => {
+    setState({ ...state, open: true });
+  };
+
   return (
     <div
       className={`embedded-seach-container ${
@@ -338,7 +418,26 @@ const EmbeddedSearch = (props, context) => {
                 previewComponent ? 'preview-component' : 'ready-component'
               }`}
             >
-              <DatetimepickerContainer realtime />
+              <Datetimepicker
+                realtime={false}
+                initialTimestamp={state.time}
+                initialArriveBy={state.arriveBy}
+                onTimeChange={onTimeChange}
+                onDateChange={onDateChange}
+                onNowClick={onNowClick}
+                onDepartureClick={onDepartureClick}
+                onArrivalClick={onArrivalClick}
+                embedWhenClosed={null}
+                embedWhenOpen={null}
+                lang={lang}
+                color={colors.primary}
+                timeZone={config.timezoneData.split('|')[0]}
+                serviceTimeRange={context.config.itinerary.serviceTimeRange}
+                fontWeights={config.fontWeights}
+                onOpen={onOpen}
+                onClose={onClose}
+                openPicker={openPicker}
+              />
             </div>
           )}
 

From c73dfbc73c1351d0a209f8ffd9b30d2480561f54 Mon Sep 17 00:00:00 2001
From: Dvun <rsheveljov@gmail.com>
Date: Tue, 5 Dec 2023 18:09:50 +0200
Subject: [PATCH 07/10] fix: update

---
 .../EmbeddedSearch/EmbeddedSearch.js          | 26 +++-------
 .../src/helpers/Datetimepicker.js             | 49 ++++++++++---------
 .../src/helpers/styles.scss                   |  1 +
 .../src/index.js                              |  4 ++
 4 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/app/component/EmbeddedSearch/EmbeddedSearch.js b/app/component/EmbeddedSearch/EmbeddedSearch.js
index 057acec520..6d34db26f0 100644
--- a/app/component/EmbeddedSearch/EmbeddedSearch.js
+++ b/app/component/EmbeddedSearch/EmbeddedSearch.js
@@ -70,17 +70,12 @@ const EmbeddedSearch = (props, context) => {
   const { colors, fontWeights } = config;
   const bikeOnly = query?.bikeOnly;
   const walkOnly = query?.walkOnly;
-  const openPicker = !!query.setTime;
   const lang = query.lang || 'fi';
   const url =
     window.location !== window.parent.location
       ? document.referrer
       : document.location.href;
 
-  const previewComponent = window.location.pathname.match(
-    config.URL.EMBEDDED_SEARCH_GENERATION,
-  );
-
   const buttonRef = useRef(null);
 
   useEffect(() => {
@@ -94,7 +89,8 @@ const EmbeddedSearch = (props, context) => {
   });
 
   const [state, setState] = useState({
-    open: false,
+    open: true,
+    isHideCloseButton: true,
     time: undefined,
     arriveBy: false,
     keepPickerOpen: false,
@@ -393,10 +389,7 @@ const EmbeddedSearch = (props, context) => {
       style={{ height: isTimepickerSelected ? '380px' : '250px' }}
     >
       <div className="background-container">{drawBackgroundIcon()}</div>
-      <div
-        className={`control-panel-container `}
-        style={{ position: 'relative' }}
-      >
+      <div className="control-panel-container" style={{ position: 'relative' }}>
         <CtrlPanel
           instance="HSL"
           language={lang}
@@ -413,11 +406,7 @@ const EmbeddedSearch = (props, context) => {
           />
 
           {isTimepickerSelected && (
-            <div
-              className={`datetimepicker-container ${
-                previewComponent ? 'preview-component' : 'ready-component'
-              }`}
-            >
+            <div className="datetimepicker-container">
               <Datetimepicker
                 realtime={false}
                 initialTimestamp={state.time}
@@ -436,16 +425,15 @@ const EmbeddedSearch = (props, context) => {
                 fontWeights={config.fontWeights}
                 onOpen={onOpen}
                 onClose={onClose}
-                openPicker={openPicker}
+                openPicker={state.open}
+                isHideCloseButton={state.isHideCloseButton}
               />
             </div>
           )}
 
           <div
             className="embedded-search-button-container"
-            style={{
-              marginTop: previewComponent && isTimepickerSelected ? '50px' : '',
-            }}
+            style={{ margin: '10px 0 0 0' }}
           >
             {logo ? (
               <img
diff --git a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
index e10efb330e..cd6a04d2c3 100644
--- a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
+++ b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
@@ -75,6 +75,7 @@ function Datetimepicker({
   onOpen,
   onClose,
   openPicker,
+  isHideCloseButton,
 }) {
   moment.tz.setDefault(timeZone);
   const [isOpen, changeOpen] = useState(openPicker || false);
@@ -358,28 +359,30 @@ function Datetimepicker({
             >
               {i18next.t('departure-now', translationSettings)}
             </button>
-            <span className={styles['right-edge']}>
-              <button
-                type="button"
-                className={styles['close-button']}
-                aria-controls={`${htmlId}-root`}
-                aria-expanded="true"
-                onClick={() => {
-                  changeOpen(false);
-                  showScreenreaderCloseAlert();
-                  if (onClose) {
-                    onClose();
-                  }
-                }}
-              >
-                <span className={styles['close-icon']}>
-                  <Icon img="close" color={color} />
-                </span>
-                <span className={styles['sr-only']}>
-                  {i18next.t('accessible-close', translationSettings)}
-                </span>
-              </button>
-            </span>
+            {!isHideCloseButton && (
+              <span className={styles['right-edge']}>
+                <button
+                  type="button"
+                  className={styles['close-button']}
+                  aria-controls={`${htmlId}-root`}
+                  aria-expanded="true"
+                  onClick={() => {
+                    changeOpen(false);
+                    showScreenreaderCloseAlert();
+                    if (onClose) {
+                      onClose();
+                    }
+                  }}
+                >
+                  <span className={styles['close-icon']}>
+                    <Icon img="close" color={color} />
+                  </span>
+                  <span className={styles['sr-only']}>
+                    {i18next.t('accessible-close', translationSettings)}
+                  </span>
+                </button>
+              </span>
+            )}
           </div>
           <div
             className={
@@ -541,6 +544,7 @@ Datetimepicker.propTypes = {
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   openPicker: PropTypes.bool,
+  isHideCloseButton: PropTypes.bool,
 };
 
 Datetimepicker.defaultProps = {
@@ -553,6 +557,7 @@ Datetimepicker.defaultProps = {
   onOpen: null,
   onClose: null,
   openPicker: undefined,
+  isHideCloseButton: false,
 };
 
 export default Datetimepicker;
diff --git a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
index ee0c2b569c..5a1f9d14f4 100644
--- a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
+++ b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
@@ -253,6 +253,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
   .datetimepicker-select-container {
     position: relative;
     height: 40px;
+    width: 100%;
     // use global scope because react-select is not quite compatible with csss module local scoping
     :global .datetimepicker-select__control {
       cursor: inherit;
diff --git a/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js b/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js
index 95417481f0..cd77902810 100644
--- a/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js
+++ b/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js
@@ -60,6 +60,7 @@ function DatetimepickerStateContainer({
   onOpen,
   onClose,
   openPicker,
+  isHideCloseButton = false,
 }) {
   moment.locale(lang);
   moment.tz.setDefault(timeZone);
@@ -185,6 +186,7 @@ function DatetimepickerStateContainer({
       onOpen={onOpen}
       onClose={onClose}
       openPicker={openPicker}
+      isHideCloseButton={isHideCloseButton}
     />
   );
 }
@@ -210,6 +212,7 @@ DatetimepickerStateContainer.propTypes = {
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   openPicker: PropTypes.bool,
+  isHideCloseButton: PropTypes.bool,
 };
 
 DatetimepickerStateContainer.defaultProps = {
@@ -227,6 +230,7 @@ DatetimepickerStateContainer.defaultProps = {
   onOpen: null,
   onClose: null,
   openPicker: undefined,
+  isHideCloseButton: false,
 };
 
 export default DatetimepickerStateContainer;

From 6084a159ba63f05fd9823e33ef596377d3e5ec92 Mon Sep 17 00:00:00 2001
From: Dvun <rsheveljov@gmail.com>
Date: Thu, 7 Dec 2023 10:36:13 +0200
Subject: [PATCH 08/10] fix: update styles

---
 app/component/embeddedSearchGenerator.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/component/embeddedSearchGenerator.scss b/app/component/embeddedSearchGenerator.scss
index 524a1b2af7..a4b57751f4 100644
--- a/app/component/embeddedSearchGenerator.scss
+++ b/app/component/embeddedSearchGenerator.scss
@@ -82,6 +82,16 @@
                     z-index: 1;
                 }
             }
+
+            .datetimepicker-container {
+                margin-top: 1rem;
+
+                & fieldset {
+                    margin: 0 !important;
+                    padding: 0 !important;
+                    max-width: 399px !important;
+                }
+            }
         }
     }
 

From 2248df9321b3b2e6e27030aaf1d50543a00cb780 Mon Sep 17 00:00:00 2001
From: Dvun <rsheveljov@gmail.com>
Date: Thu, 7 Dec 2023 17:42:13 +0200
Subject: [PATCH 09/10] fix: update

---
 .../EmbeddedSearch/EmbeddedSearch.js          | 39 ++++++-------------
 app/component/EmbeddedSearchGenerator.js      |  2 +-
 app/component/embeddedSearch.scss             | 12 ------
 .../src/helpers/Datetimepicker.js             | 10 ++---
 .../src/helpers/styles.scss                   |  4 ++
 .../src/index.js                              |  8 ++--
 6 files changed, 25 insertions(+), 50 deletions(-)

diff --git a/app/component/EmbeddedSearch/EmbeddedSearch.js b/app/component/EmbeddedSearch/EmbeddedSearch.js
index 6d34db26f0..913d805b4b 100644
--- a/app/component/EmbeddedSearch/EmbeddedSearch.js
+++ b/app/component/EmbeddedSearch/EmbeddedSearch.js
@@ -89,11 +89,9 @@ const EmbeddedSearch = (props, context) => {
   });
 
   const [state, setState] = useState({
-    open: true,
-    isHideCloseButton: true,
+    isAlwaysOpen: true,
     time: undefined,
     arriveBy: false,
-    keepPickerOpen: false,
   });
   const defaultOriginExists = query.lat1 && query.lon1;
   const defaultOrigin = {
@@ -315,7 +313,7 @@ const EmbeddedSearch = (props, context) => {
   }
 
   const onDepartureClick = time => {
-    setState({ ...state, time, arriveBy: false, keepPickerOpen: true });
+    setState({ ...state, time, arriveBy: false });
     addAnalyticsEvent({
       event: 'sendMatomoEvent',
       category: 'EmbeddedSearch',
@@ -325,12 +323,11 @@ const EmbeddedSearch = (props, context) => {
   };
 
   const onTimeChange = (time, arriveBy, onSubmit = false) => {
-    const keepPickerOpen = onSubmit === false;
     setState({
       ...state,
       time,
       arriveBy: !!arriveBy,
-      keepPickerOpen,
+      onSubmit,
     });
     addAnalyticsEvent({
       action: 'EditJourneyTime',
@@ -344,7 +341,6 @@ const EmbeddedSearch = (props, context) => {
       ...state,
       time,
       arriveBy: !!arriveBy,
-      keepPickerOpen: true,
     });
     addAnalyticsEvent({
       action: 'EditJourneyDate',
@@ -358,12 +354,11 @@ const EmbeddedSearch = (props, context) => {
       ...state,
       time: undefined,
       arriveBy: false,
-      keepPickerOpen: false,
     });
   };
 
   const onArrivalClick = time => {
-    setState({ ...state, time, arriveBy: true, keepPickerOpen: true });
+    setState({ ...state, time, arriveBy: true });
     addAnalyticsEvent({
       event: 'sendMatomoEvent',
       category: 'EmbeddedSearch',
@@ -372,24 +367,15 @@ const EmbeddedSearch = (props, context) => {
     });
   };
 
-  const onClose = () => {
-    setState({ ...state, open: false });
-  };
-
-  const onOpen = () => {
-    setState({ ...state, open: true });
-  };
-
   return (
     <div
       className={`embedded-seach-container ${
         bikeOnly ? 'bike' : walkOnly ? 'walk' : ''
-      }`}
+      } ${isTimepickerSelected ? 'with-timepicker' : ''}`}
       id={appElement}
-      style={{ height: isTimepickerSelected ? '380px' : '250px' }}
     >
       <div className="background-container">{drawBackgroundIcon()}</div>
-      <div className="control-panel-container" style={{ position: 'relative' }}>
+      <div className="control-panel-container">
         <CtrlPanel
           instance="HSL"
           language={lang}
@@ -423,18 +409,15 @@ const EmbeddedSearch = (props, context) => {
                 timeZone={config.timezoneData.split('|')[0]}
                 serviceTimeRange={context.config.itinerary.serviceTimeRange}
                 fontWeights={config.fontWeights}
-                onOpen={onOpen}
-                onClose={onClose}
-                openPicker={state.open}
-                isHideCloseButton={state.isHideCloseButton}
+                onOpen={null}
+                onClose={null}
+                openPicker
+                isAlwaysOpen={state.isAlwaysOpen}
               />
             </div>
           )}
 
-          <div
-            className="embedded-search-button-container"
-            style={{ margin: '10px 0 0 0' }}
-          >
+          <div className="embedded-search-button-container">
             {logo ? (
               <img
                 src={logo}
diff --git a/app/component/EmbeddedSearchGenerator.js b/app/component/EmbeddedSearchGenerator.js
index acb8ab9118..6a66594675 100644
--- a/app/component/EmbeddedSearchGenerator.js
+++ b/app/component/EmbeddedSearchGenerator.js
@@ -431,7 +431,7 @@ const EmbeddedSearchGenerator = (props, context) => {
             )}
           </fieldset>
 
-          <fieldset id="timePicker">
+          <fieldset id="time-picker">
             <legend>
               <h3>
                 <FormattedMessage
diff --git a/app/component/embeddedSearch.scss b/app/component/embeddedSearch.scss
index 9d25958fc4..02c365681c 100644
--- a/app/component/embeddedSearch.scss
+++ b/app/component/embeddedSearch.scss
@@ -9,18 +9,6 @@
     .background-container, .control-panel-container{
         grid-column: 1;
         grid-row: 1;
-
-        .preview-component {
-            position: absolute;
-            bottom: 100px;
-            left: -15px;
-        }
-
-        .ready-component {
-            position: relative;
-            margin-top: 10px;
-            max-width: 399px;
-        }
     }
     h1 {
         margin-top: 25px;
diff --git a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
index cd6a04d2c3..f2648aa02b 100644
--- a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
+++ b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
@@ -75,7 +75,7 @@ function Datetimepicker({
   onOpen,
   onClose,
   openPicker,
-  isHideCloseButton,
+  isAlwaysOpen,
 }) {
   moment.tz.setDefault(timeZone);
   const [isOpen, changeOpen] = useState(openPicker || false);
@@ -284,7 +284,7 @@ function Datetimepicker({
         <div
           className={`${styles['datetimepicker-open-container']} ${
             !isOpen ? styles.hidden : ''
-          }`}
+          } ${isAlwaysOpen ? styles.blankContainer : ''}`}
         >
           <div
             className={
@@ -359,7 +359,7 @@ function Datetimepicker({
             >
               {i18next.t('departure-now', translationSettings)}
             </button>
-            {!isHideCloseButton && (
+            {!isAlwaysOpen && (
               <span className={styles['right-edge']}>
                 <button
                   type="button"
@@ -544,7 +544,7 @@ Datetimepicker.propTypes = {
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   openPicker: PropTypes.bool,
-  isHideCloseButton: PropTypes.bool,
+  isAlwaysOpen: PropTypes.bool,
 };
 
 Datetimepicker.defaultProps = {
@@ -557,7 +557,7 @@ Datetimepicker.defaultProps = {
   onOpen: null,
   onClose: null,
   openPicker: undefined,
-  isHideCloseButton: false,
+  isAlwaysOpen: false,
 };
 
 export default Datetimepicker;
diff --git a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
index 5a1f9d14f4..842bfef24e 100644
--- a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
+++ b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
@@ -45,6 +45,10 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
     display: none;
   }
 
+  .blankContainer {
+    background-color: white !important;
+  }
+
   .datetimepicker-open-container {
     background-color: #f4f4f5;
     border-radius: 5px;
diff --git a/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js b/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js
index cd77902810..7e599d8f51 100644
--- a/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js
+++ b/digitransit-component/packages/digitransit-component-datetimepicker/src/index.js
@@ -60,7 +60,7 @@ function DatetimepickerStateContainer({
   onOpen,
   onClose,
   openPicker,
-  isHideCloseButton = false,
+  isAlwaysOpen = false,
 }) {
   moment.locale(lang);
   moment.tz.setDefault(timeZone);
@@ -186,7 +186,7 @@ function DatetimepickerStateContainer({
       onOpen={onOpen}
       onClose={onClose}
       openPicker={openPicker}
-      isHideCloseButton={isHideCloseButton}
+      isAlwaysOpen={isAlwaysOpen}
     />
   );
 }
@@ -212,7 +212,7 @@ DatetimepickerStateContainer.propTypes = {
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   openPicker: PropTypes.bool,
-  isHideCloseButton: PropTypes.bool,
+  isAlwaysOpen: PropTypes.bool,
 };
 
 DatetimepickerStateContainer.defaultProps = {
@@ -230,7 +230,7 @@ DatetimepickerStateContainer.defaultProps = {
   onOpen: null,
   onClose: null,
   openPicker: undefined,
-  isHideCloseButton: false,
+  isAlwaysOpen: false,
 };
 
 export default DatetimepickerStateContainer;

From 3c274a55d513ad8178c73e2e12001eae957e9575 Mon Sep 17 00:00:00 2001
From: Dvun <rsheveljov@gmail.com>
Date: Fri, 8 Dec 2023 11:25:16 +0200
Subject: [PATCH 10/10] fix: update

---
 app/component/EmbeddedSearchGenerator.js      | 10 ++++----
 app/component/embeddedSearchGenerator.scss    | 23 +++++++------------
 .../src/helpers/Datetimepicker.js             |  2 +-
 .../src/helpers/styles.scss                   | 13 +++++++----
 4 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/app/component/EmbeddedSearchGenerator.js b/app/component/EmbeddedSearchGenerator.js
index 6a66594675..eac97774c2 100644
--- a/app/component/EmbeddedSearchGenerator.js
+++ b/app/component/EmbeddedSearchGenerator.js
@@ -201,7 +201,7 @@ const EmbeddedSearchGenerator = (props, context) => {
             />
           </h2>
 
-          <fieldset id="lang">
+          <fieldset id="lang" className="fieldset">
             <legend>
               <h3>
                 <FormattedMessage
@@ -248,7 +248,7 @@ const EmbeddedSearchGenerator = (props, context) => {
             </label>
           </fieldset>
 
-          <fieldset id="width">
+          <fieldset id="width" className="fieldset">
             <legend>
               <h3>
                 <FormattedMessage
@@ -278,7 +278,7 @@ const EmbeddedSearchGenerator = (props, context) => {
             </label>
           </fieldset>
 
-          <fieldset id="mode-restrictions">
+          <fieldset id="mode-restrictions" className="fieldset">
             <legend>
               <h3>
                 <FormattedMessage
@@ -326,7 +326,7 @@ const EmbeddedSearchGenerator = (props, context) => {
             </label>
           </fieldset>
 
-          <fieldset id="origin-and-destination">
+          <fieldset id="origin-and-destination" className="fieldset">
             <legend>
               <h3>
                 <FormattedMessage
@@ -431,7 +431,7 @@ const EmbeddedSearchGenerator = (props, context) => {
             )}
           </fieldset>
 
-          <fieldset id="time-picker">
+          <fieldset id="time-picker" className="fieldset">
             <legend>
               <h3>
                 <FormattedMessage
diff --git a/app/component/embeddedSearchGenerator.scss b/app/component/embeddedSearchGenerator.scss
index a4b57751f4..2a1c72e00d 100644
--- a/app/component/embeddedSearchGenerator.scss
+++ b/app/component/embeddedSearchGenerator.scss
@@ -2,9 +2,12 @@
     font-family: $font-family;
     margin: auto;
 
-    fieldset {
+    .fieldset {
+        margin: 1.125rem 0;
+        padding: 1.125rem 0 1.125rem 0;
         max-width: 350px;
         border: none;
+
         legend {
             background: none;
         }
@@ -82,16 +85,6 @@
                     z-index: 1;
                 }
             }
-
-            .datetimepicker-container {
-                margin-top: 1rem;
-
-                & fieldset {
-                    margin: 0 !important;
-                    padding: 0 !important;
-                    max-width: 399px !important;
-                }
-            }
         }
     }
 
@@ -131,10 +124,10 @@
         }
     }
 
-    .embed-preview, fieldset {
-        margin: 1.125rem 0;
-        padding: 1.125rem 0 1.125rem 0;
-    }
+    //.embed-preview, fieldset {
+    //    margin: 1.125rem 0;
+    //    padding: 1.125rem 0 1.125rem 0;
+    //}
     .embed-preview {
         pointer-events: none;
         user-select: none;
diff --git a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
index f2648aa02b..05c54e44f4 100644
--- a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
+++ b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/Datetimepicker.js
@@ -284,7 +284,7 @@ function Datetimepicker({
         <div
           className={`${styles['datetimepicker-open-container']} ${
             !isOpen ? styles.hidden : ''
-          } ${isAlwaysOpen ? styles.blankContainer : ''}`}
+          } ${isAlwaysOpen ? styles['blank-container'] : ''}`}
         >
           <div
             className={
diff --git a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
index 842bfef24e..96d52c18f4 100644
--- a/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
+++ b/digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss
@@ -45,14 +45,17 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
     display: none;
   }
 
-  .blankContainer {
-    background-color: white !important;
-  }
-
   .datetimepicker-open-container {
     background-color: #f4f4f5;
     border-radius: 5px;
     padding: 15px;
+
+    &.blank-container {
+      background-color: white;
+      margin: 10px 0 0 0;
+      padding: 1rem;
+      max-width: 399px;
+    }
   }
 
   .top-row-container {
@@ -93,6 +96,8 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
     }
     label {
       cursor: pointer;
+      display: flex;
+      justify-content: center;
       &.label-open {
         align-items: flex-start;
         display: flex;