diff --git a/src/Components/Share/Share.css b/src/Components/Share/Share.css index 69f110331..289eee3a3 100644 --- a/src/Components/Share/Share.css +++ b/src/Components/Share/Share.css @@ -49,6 +49,36 @@ button { justify-content: flex-end; } +.feedback-buttons-container { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 1.25rem; + padding-bottom: 1.25rem; + border-bottom: 1px solid rgb(176, 175, 182); + margin-left: 1rem; +} + +.feedback-button-and-text { + color: var(--hover-color); + border: 1px solid var(--hover-color); + padding: 0.3125rem 1rem; + width: 10rem; + display: flex; + justify-content: center; + align-items: center; + border-radius: 0.75rem; + font-weight: bold; + font-size: 0.875rem; + text-decoration: none; +} + +.feedback-button-and-text:hover { + color: var(--primary-color); + background-color: var(--hover-color); + border: 1px solid var(--hover-color); +} + .button-no-format { cursor: pointer; } diff --git a/src/Components/Share/Share.tsx b/src/Components/Share/Share.tsx index 9e2a0ab1c..c9050b855 100644 --- a/src/Components/Share/Share.tsx +++ b/src/Components/Share/Share.tsx @@ -17,10 +17,13 @@ import CheckIcon from '@mui/icons-material/Check'; import { Context } from '../Wrapper/Wrapper'; import dataLayerPush from '../../Assets/analytics'; import './Share.css'; +import { useConfig } from '../Config/configHook'; const Share = forwardRef(function Share() { const [copied, setCopied] = useState(false); const { getReferrer } = useContext(Context); + const { email, survey } = useConfig('feedback_links'); + const surveyLink = survey; const intl = useIntl(); const labels = { @@ -65,6 +68,14 @@ const Share = forwardRef(function Share() { return (