feat: style embedded search

stadtnavi · Jan 27, 2025 · c73d205 · c73d205
1 parent 7f7017a
commit c73d205
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 12 deletions.
diff --git 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
@@ -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/...ransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.scss b/...ransit-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
@@ -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
@@ -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;
+}