@bytebrand/fe-ui-core 4.2.122 → 4.2.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.122",
+  "version": "4.2.124",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/_common/Modal/Modal.styled.tsx

@@ -10,5 +10,6 @@ export const BaseModalWrapper = styled('div')({
   boxShadow: '0px 0px 20px rgba(76, 78, 100, 0.4)',
   borderRadius: '10px',
   maxWidth: '600px',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  outline: 'none'
 });

package/source/components/_common/Modal/modals/ManageCookieModal/ManageCookieModal.styl

@@ -1,7 +1,7 @@
 @import '../../../../../theme/mixins.styl';
 
 .modalWrapper
-  padding: 16px 10px 25px 25px
+  padding: 13px 15px 28px;
   text-align: center
   box-sizing: border-box
   max-width: 600px
@@ -9,10 +9,13 @@
 .modalTitle
   font-family: sans-serif
   font-weight: bold
-  font-size: 24px;
+  font-size: 16px;
   line-height: 133.4%;
   color: rgba(76, 78, 100, 0.87)
-  margin-top: 20px
+  margin-top: 12px
+  +media-tablet-up()
+    font-size: 24px;
+    margin-top: 20px
 
 .modalContent
   font-family: sans-serif
@@ -21,9 +24,11 @@
   text-align: justify;
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
-  margin-top: 20px
+  margin-top: 12px
   margin-right: 25px
 
+  +media-tablet-up()
+    margin-top: 20px
 .accordions
   height: 278px
   overflow-y: scroll

package/source/components/_common/Modal/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -130,7 +130,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
         </MaterialAccordionGroup>
       </div>
       <div className={styles.buttonsContainer}>
-        <Button onClick={() => onAccept()}className={classNames(styles.modalBtn, styles.outlinedBtn)} variant='outlined'>Auswahl speichern</Button>
+        <Button onClick={() => onAccept()} className={classNames(styles.modalBtn, styles.outlinedBtn)} variant='outlined'>Auswahl speichern</Button>
         <Button onClick={() => onAccept({})} className={styles.modalBtn}>Alles akzeptieren</Button>
       </div>
     </div>

package/source/components/_common/Modal/modals/PreviewCookieModal/PreviewCookieModal.styl

@@ -1,12 +1,12 @@
 @import '../../../../../theme/mixins.styl';
 
 .modalWrapper
-  padding: 26px 60px 38px
+  padding: 28px 58px 28px
   text-align: center
   box-sizing: border-box
   max-width: 600px
-  +media-phone-only()
-    padding: 13px 15px 28px
+  +media-tablet-down()
+    padding: 16px 15px 28px
 
 .modalTitle
   font-family: sans-serif
@@ -16,37 +16,52 @@
   color: rgba(76, 78, 100, 0.87)
   margin-top: 20px
 
+  +media-tablet-down()
+    font-size: 16px;
+    margin-top: 8px;
+
 .modalContent
   font-family: sans-serif
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 14px;
+  line-height: 16px;
   text-align: justify;
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
   margin-top: 20px
-  +media-phone-only()
-    column-gap: 0
+  +media-tablet-down()
+    column-gap: 0;
+    max-height: 320px;
+    overflow-y: scroll;
+    padding-right: 10px;
+    margin-right: -10px;
+    margin-top: 8px
+
+.logoContainer
+  display: flex
+  justify-content: space-between
 
 .buttonsContainer
-  margin-top: 20px
+  margin-top: 12px
   display: flex
   justify-content: space-between
   gap: 36px;
-  +media-phone-only()
+  +media-tablet-down()
     column-gap: 0
 
 .modalBtn
   height: 38px
   text-transform: capitalize !important
   min-width: calc(50% - 18px) !important
-  +media-phone-only()
+  +media-tablet-down()
     font-size: 11px !important
 
 .outlinedBtnLeft
-  float: right;
+  display: flex;
+  justify-content: flex-end;
   color: #005CCB;
   font-size: 16px;
   text-decoration: none;
-
-.clearfix
-  clear: both;
+  margin-top: 12px;
+  margin-bottom: 0;
+  margin-left: auto;
+  max-width: 80px;

package/source/components/_common/Modal/modals/PreviewCookieModal/PreviewCookieModal.tsx

@@ -18,21 +18,24 @@ const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPrevi
     toggleModal();
   };
 
+  const onDisableAll = () => {
+    localStorage.setItem('cookieConfig', JSON.stringify({ analytics: {}, marketing: {} }));
+    toggleModal();
+  };
+
   return (
     <div className={styles.modalWrapper}>
-      <IconSVG name='autodeLogo' customDimensions />
+      <div className={styles.logoContainer}>
+        <IconSVG name='autodeLogo' customDimensions />
+        <Button onClick={onDisableAll} className={styles.modalBtn}>Nur notwendige Cookies</Button>
+      </div>
       <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
       <div className={styles.modalContent}>
-        Wenn Sie auf "Zustimmen" klicken, ermöglichen Sie uns über Cookies das Nutzerverhalten
-        für alle User zu optimieren und Ihnen individuelle Empfehlungen auch auf Drittseiten anzuzeigen.
-        Durch die Zustimmung erteilen Sie uns Ihre ausdrückliche Einwilligung.
-        Über "Anpassen" können Sie Ihre Einwilligungen individuell anpassen.
-        Dies ist auch später jederzeit im Bereich "Cookie-Richtlinie" möglich.
-        Die relevante Datenschutzerklärung finden Sie&nbsp;
-        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>hier</a>.
-        <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>
+        Wir verwenden Cookies und ähnliche Technologien (insg. „Cookies“). Cookies die notwendig sind, damit die Website wie vorgesehen funktioniert, werden standardmäßig gesetzt. Cookies, die dazu dienen das Nutzerverhalten zu verstehen und Ihnen ein relevantes bzw. personalisiertes Surferlebnis zu bieten, sowie Cookies zur Personalisierung und Messung der Effektivität von Werbung auf unserer und anderen Websites setzen wir nur mit Ihrer Einwilligung ein. Unsere Partner führen diese Daten möglicherweise mit weiteren Daten zusammen, die Sie ihnen bereitgestellt oder die sie im Rahmen Ihrer Nutzung gesammelt haben. Durch Klick auf "Zustimmen" akzeptieren Sie alle Cookies und die beschriebene Verarbeitung Ihrer Daten. Bevor Sie Ihre Zustimmung erteilen, beachten Sie bitte, dass wir Ihre Daten auch mit Partnern mit Sitz in den USA teilen. Die USA weisen kein mit der EU vergleichbares Datenschutzniveau auf. Es besteht das Risiko, dass US-Behörden Zugriff auf Ihre Daten haben und Sie Ihre Betroffenenrechte nicht durchsetzen können. Über "Anpassen" können Sie Ihre Einwilligungen individuell anpassen. Dies ist auch später jederzeit im Bereich&nbsp;
+        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Cookie-Richtlinie</a> möglich. Weitere Informationen finden Sie in unserer&nbsp;
+        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Datenschutzerklärung</a>.
       </div>
-      <div className={styles.clearfix}></div>
+      <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>
       <div className={styles.buttonsContainer}>
         <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={styles.modalBtn} variant='outlined'>Anpassen</Button>
         <Button onClick={onAcceptAll} className={styles.modalBtn}>zustimmen</Button>

package/source/framework/constants/common.ts

@@ -27,13 +27,10 @@ export interface INecessaryCookieSchema {
 
 export const COOKIE_SCHEMA: INecessaryCookieSchema = {
   necessary: {
-    __cfruid: { name: 'Cloudflare' },
     cf_chl_2: { name: 'Cloudflare für Webverkehr zu identifizieren' },
     cf_chl_rc_ni: { name: 'Cloudflare für den internen Gebrauch' },
     ['next-i18next']: { name: 'Spracheinstellungen' },
-    _cfuvid: { name: 'Cloudflare WAF' },
-    cf_chl_prog: { name: 'Cloudflare für JS' },
-    __cf_bm: { name: 'Cloudflare bot' }
+    cf_chl_prog: { name: 'Cloudflare für JS' }
   },
   analytics: {
     PugT: {name: 'PubMatic' },