improvements,bug fixes

podkrepi-bg · Oct 16, 2023 · 4fc2052 · 4fc2052
1 parent 8827b76
commit 4fc2052
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 10 deletions.
diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json
@@ -102,5 +102,8 @@
     "read-more": "Прочетете още",
     "see-profile": "Вижте профил",
     "question": "Имате въпрос?"
-  }
+  },
+  "cookieConsent": "Подкрепи.бг не използва бисквитки, освен тези от трети страни, нужни за аналитичните компоненти Google Analytics и HotJar. Приемането на бисквитките ще ни помогне да подобрим вашето потребителското преживяване",
+  "cookieConsentButton": "Приемам",
+  "cookieRejectButton": "Отхвърлям"
 }
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -99,5 +99,8 @@
     "read-more": "Read more",
     "see-profile": "See profile",
     "question": "Have a question?"
-  }
+  },
+  "cookieConsent": "Podkrepi.bg doesn't use cookies, except the third-party cookies required for the analytics components Google Analytics and HotJar. Accepting the cookies will help us improve your user experience.",
+  "cookieConsentButton": "Accept",
+  "cookieRejectButton": "Reject"
 }
diff --git a/src/components/common/CookieConsentPopup.tsx b/src/components/common/CookieConsentPopup.tsx
@@ -1,5 +1,5 @@
 import CookieConsent from 'react-cookie-consent'
-import SubmitButton from './form/SubmitButton'
+import { useTranslation } from 'react-i18next'
 
 type CookieConsentPopupProps = {
   handleAcceptCookie: () => void
@@ -10,18 +10,21 @@ const CookieConsentPopup = ({
   handleAcceptCookie,
   handleDeclineCookie,
 }: CookieConsentPopupProps) => {
+  const { t } = useTranslation()
+
   return (
     <CookieConsent
       enableDeclineButton
-      // cookieName="PodkrepiConsent"
       onAccept={handleAcceptCookie}
       onDecline={handleDeclineCookie}
-      buttonText={<SubmitButton label="I understand" />}
-      declineButtonText={<SubmitButton label="Decline" color="error" />}
-      style={{ paddingRight: '30px' }}
-      buttonStyle={{ background: 'transparent' }}
-      declineButtonStyle={{ background: 'transparent' }}>
-      text for cookies
+      buttonText={t('cookieConsentButton')}
+      declineButtonText={t('cookieRejectButton')}
+      buttonWrapperClasses="consent_button-wrapper"
+      containerClasses="consent_container"
+      contentClasses="consent_content"
+      buttonClasses="consent_button-accept"
+      declineButtonClasses="consent_button-decline ">
+      {t('cookieConsent')}
     </CookieConsent>
   )
 }

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -66,3 +66,36 @@ ul {
 .ql-bubble .ql-video {
   margin-inline: auto;
 }
+
+.consent_container {
+  border: 1px solid black;
+  background-color: white !important;
+}
+
+.consent_content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: black;
+}
+
+.consent_button-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0px 30px 0px 30px;
+}
+
+.consent_button-accept {
+  background-color: white !important;
+  color: #32a9fe !important;
+  border: 1px solid #32a9fe !important;
+  border-radius: 5px !important;
+}
+
+.consent_button-decline {
+  background-color: white !important;
+  color: #32a9fe !important;
+  border: 1px solid #32a9fe !important;
+  border-radius: 5px !important;
+}