From c73d205a1d3f19d39a9c358b2c86c539b3c1f6c5 Mon Sep 17 00:00:00 2001
From: Holger Bruch <hb@mfdz.de>
Date: Mon, 27 Jan 2025 22:25:36 +0100
Subject: [PATCH] feat: style embedded search

---
 app/configurations/config.mitfahren-bw.js     |  2 +
 .../src/helpers/MobileSearch.js               |  7 +++-
 .../src/helpers/MobileSearch.scss             |  2 +-
 .../src/index.js                              |  4 +-
 sass/themes/mitfahren-bw/overrides.scss       | 40 +++++++++++++++----
 5 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/app/configurations/config.mitfahren-bw.js b/app/configurations/config.mitfahren-bw.js
index 32767f0bf0..07bced6e91 100644
--- a/app/configurations/config.mitfahren-bw.js
+++ b/app/configurations/config.mitfahren-bw.js
@@ -75,6 +75,8 @@ export default configMerger(parentConfig, {
 
     colors: {
         primary: '#2a2623',
+        accessiblePrimary:  '#2a2623',
+        hover: '#524942',
         iconColors: {
             'mode-bus': '#ff0000',
             'mode-car': '#007AC9',
diff --git a/digitransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.js b/digitransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.js
index 4971736b5b..8c5b784d18 100644
--- a/digitransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.js
+++ b/digitransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.js
@@ -138,7 +138,10 @@ const MobileSearch = ({
 
   const renderContent = () => {
     return (
-      <div className={styles['combobox-container']} htmlFor={inputId}>
+      <div
+        className={`${styles['combobox-container']} mfbw-combobox-container`}
+        htmlFor={inputId}
+      >
         <button
           type="button"
           className={styles['combobox-icon']}
@@ -170,7 +173,7 @@ const MobileSearch = ({
               className: cx(
                 `${styles.input} ${styles[id] || ''} ${
                   inputProps.value ? styles.hasValue : ''
-                }`,
+                } mfbw`,
               ),
               autoFocus: true,
             }}
diff --git a/digitransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.scss b/digitransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.scss
index b3ac89da4c..3d815c50a6 100644
--- a/digitransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.scss
+++ b/digitransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.scss
@@ -38,7 +38,7 @@ input[type='text'] {
     flex-direction: column;
     width: 100%;
     height: 100%;
-    padding-top: 9px;
+    padding-top: 3px; /* MFBW: was 9px; */
   }
 }
 
diff --git a/digitransit-component/packages/digitransit-component-autosuggest/src/index.js b/digitransit-component/packages/digitransit-component-autosuggest/src/index.js
index d8597a5008..2ade7a7f26 100644
--- a/digitransit-component/packages/digitransit-component-autosuggest/src/index.js
+++ b/digitransit-component/packages/digitransit-component-autosuggest/src/index.js
@@ -293,8 +293,8 @@ class DTAutosuggest extends React.Component {
     isMobile: false,
     color: '#007ac9',
     hoverColor: '#0062a1',
-    accessiblePrimaryColor: '#0074be',
-    timeZone: 'Europe/Helsinki',
+    accessiblePrimaryColor: '#2a2623',
+    timeZone: 'Europe/Berlin',
     pathOpts: {
       routesPrefix: 'linjat',
       stopsPrefix: 'pysakit',
diff --git a/sass/themes/mitfahren-bw/overrides.scss b/sass/themes/mitfahren-bw/overrides.scss
index e35c0fce48..ddc779ff65 100644
--- a/sass/themes/mitfahren-bw/overrides.scss
+++ b/sass/themes/mitfahren-bw/overrides.scss
@@ -145,13 +145,39 @@
     }
     @media only screen and (min-width: 600px) {
 
-        .embedded-search-button-container {
-          .brand-logo {
-              display: none;
-              object-fit: contain;
-              height: 40px;
-              max-width: 55%;
-          }
+      .embedded-search-button-container {
+        .brand-logo {
+            display: none;
+            object-fit: contain;
+            height: 40px;
+            max-width: 55%;
+        }
       }
     }
 }
+
+/* Style embedded search origin/destination search */
+.ReactModalPortal {
+  .mfbw-combobox-container {
+    border: 0px;
+    border-bottom: solid var(--bw-border-width-200);
+    background-color: var(--bw-background-subtle);
+    border-radius: var(--bw-border-radius-100) var(--bw-border-radius-100) 0 0;
+    &:focus {
+      outline: var(--focus-border-width) solid var(--focus-border-color);
+      outline-offset: var(--focus-border-offset);
+    }
+    input.mfbw {
+      background-color: var(--bw-background-subtle);
+      color: var(--bw-foreground-primary);
+    }
+  }
+}
+
+/* set background to transparent so it can be place with zIndex */
+section.content {
+  background-color: #00000000;
+}
+body {
+  background: #00000000 !important;
+}