diff --git a/src/assets/locales/de/translations.json b/src/assets/locales/de/translations.json index 58b154430..99e914714 100644 --- a/src/assets/locales/de/translations.json +++ b/src/assets/locales/de/translations.json @@ -79,6 +79,12 @@ "navigation.contact": "Kontakt", "navigation.about-us": "Über Uns", "blog.share": "Artikel teilen", + "blog.share.facebook": "Teilen auf Facebook", + "blog.share.whatsapp": "Teilen auf WhatsApp", + "blog.share.email": "Teilen per E-Mail", + "blog.share.twitter": "Teilen auf X", + "blog.share.linkedin": "Teilen auf LinkedIn", + "blog.copy": "Kopieren", "blog.copied": "Kopiert", "blog.follow": "Blog abonnieren", "blog.pagination": "Seite", diff --git a/src/assets/locales/en/translations.json b/src/assets/locales/en/translations.json index 28ad9e5ce..f7433689c 100644 --- a/src/assets/locales/en/translations.json +++ b/src/assets/locales/en/translations.json @@ -79,6 +79,12 @@ "navigation.contact": "Contact", "navigation.about-us": "About", "blog.share": "Share article", + "blog.share.facebook": "Share on Facebook", + "blog.share.whatsapp": "Share on WhatsApp", + "blog.share.email": "Share via email", + "blog.share.twitter": "Share on X", + "blog.share.linkedin": "Share on LinkedIn", + "blog.copy": "Copy", "blog.copied": "Copied", "blog.follow": "Subscribe to blog", "blog.pagination": "Page", diff --git a/src/components/forms/checkbox/checkbox.tsx b/src/components/forms/checkbox/checkbox.tsx index 0085b7e9a..17aa6830d 100644 --- a/src/components/forms/checkbox/checkbox.tsx +++ b/src/components/forms/checkbox/checkbox.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { useController, UseControllerProps } from 'react-hook-form'; import styled, { css } from 'styled-components'; import { theme } from '../../layout/theme'; @@ -23,16 +23,23 @@ const CheckboxLabelText = styled.span` } `; -const StyledCheckbox = styled.div<{ checked: boolean; hasError: boolean }>` +const StyledCheckbox = styled.input.attrs({ + type: 'checkbox', +})<{ $hasError: boolean }>` display: inline-block; width: 24px; height: 24px; - + margin: 0; + padding: 0; background: #f7f8fa; border-radius: 4px; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + cursor: pointer; - ${({ hasError }) => - hasError && + ${({ $hasError }) => + $hasError && css` border: 2px solid ${theme.palette.text.errorMessage}; `} @@ -40,21 +47,11 @@ const StyledCheckbox = styled.div<{ checked: boolean; hasError: boolean }>` &:hover { border: 1px solid ${theme.palette.text.default}; } - - svg { - visibility: ${({ checked }) => (checked ? 'visible' : 'hidden')}; - } `; -const HiddenCheckbox = styled.input.attrs({ - type: 'checkbox', -})` - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; +const StyledIcon = styled(Icon)` position: absolute; - visibility: hidden; + pointer-events: none; `; const CheckboxLabelTextWrapper = ({ label, required }) => { @@ -70,29 +67,18 @@ export const Checkbox = ( ) => { const { field, fieldState, formState } = useController(props); const errorMessage = fieldState?.error?.message; - const [checked, setChecked] = useState(field?.value || false); - - const handleChange = () => { - const newChecked = !checked; - setChecked(newChecked); - field.onChange(newChecked); - }; return ( -