Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Website] Cookie Consent #5829

Merged
merged 6 commits into from
Sep 2, 2020
Merged

[Website] Cookie Consent #5829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1feb844
cookie component updated
MartinMinkov Sep 1, 2020
8555938
refactored css
MartinMinkov Sep 1, 2020
fcc622c
added slight change to colors
MartinMinkov Sep 1, 2020
099c26b
removed todo
MartinMinkov Sep 1, 2020
e82ffc8
changed css on privacy text
MartinMinkov Sep 2, 2020
d073976
Merge branch 'develop' into website/cookie_consent
MartinMinkov Sep 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/website-redesign/src/Theme.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ module Colors = {
let gray = `hex("d9d9d9");
let white = Css.white;
let black = Css.black;
let digitalBlack = `hex("2d2d2d");
};

module Typeface = {
Expand Down
106 changes: 90 additions & 16 deletions frontend/website-redesign/src/components/CookieWarning.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module CookieConsent = {
~containerClasses: string=?,
~buttonClasses: string=?,
~contentClasses: string=?,
~buttonText: React.element=?,
~children: React.element
) =>
React.element =
Expand All @@ -19,39 +20,112 @@ module Styles = {
let container =
style([
position(`fixed),
padding2(~v=`rem(1.), ~h=`rem(2.)),
alignItems(`center),
justifyContent(`spaceBetween),
padding2(~v=`rem(1.5), ~h=`rem(1.)),
alignItems(`flexStart),
justifyContent(`flexStart),
display(`flex),
flexDirection(`column),
width(`percent(100.)),
background(Theme.Colors.gray),
background(Theme.Colors.digitalBlack),
boxSizing(`borderBox),
boxShadow(~x=`px(0), ~y=`px(1), `hex("e5e5e5e5")),
media(
Theme.MediaQuery.notMobile,
[
flexDirection(`row),
justifyContent(`spaceBetween),
padding2(~v=`rem(3.), ~h=`rem(2.)),
],
),
]);

let content = merge([Theme.Type.paragraph, style([color(white)])]);
let content =
merge([
Theme.Type.pageSubhead,
style([
color(white),
margin2(~v=`rem(1.5), ~h=`rem(0.)),
media(
Theme.MediaQuery.tablet,
[margin2(~v=`rem(1.), ~h=`rem(5.))],
),
]),
]);

let button =
merge([
Theme.Type.paragraph,
Button.Styles.button(
Theme.Colors.mint,
true,
`rem(3.25),
`rem(7.75),
1.5,
1.,
),
style([
opacity(1.),
color(Theme.Colors.gray),
background(white),
borderRadius(px(3)),
padding2(~v=`rem(0.75), ~h=`rem(1.5)),
border(`zero, `none, `transparent),
textTransform(`capitalize),
hover([opacity(0.7)]),
color(Theme.Colors.black),
marginRight(`auto),
media(Theme.MediaQuery.tablet, [marginRight(`rem(2.))]),
media(Theme.MediaQuery.desktop, [marginRight(`rem(4.))]),
]),
]);

let text =
style([
display(`block),
marginRight(`rem(2.)),
media(
Theme.MediaQuery.tablet,
[display(`flex), flexDirection(`column)],
),
]);

let buttonText =
style([
display(`flex),
justifyContent(`spaceAround),
alignItems(`center),
]);

let buttonIcon =
style([display(`flex), alignItems(`center), marginLeft(`rem(0.5))]);

let privacyText = style([color(Theme.Colors.orange), cursor(`pointer)]);
};

[@react.component]
let make = () =>
let make = () => {
let buttonText =
<div className=Styles.buttonText>
<span> {React.string("Accept")} </span>
<span className=Styles.buttonIcon>
<Icon kind=Icon.ArrowRightMedium />
</span>
</div>;

<CookieConsent
acceptOnScroll=true
disableStyles=true
containerClasses=Styles.container
contentClasses=Styles.content
buttonText
buttonClasses=Styles.button>
{React.string("This website uses cookies to enhance the user experience.")}
<div className=Styles.text>
<span>
{React.string(
"We use cookies to improve your experience on our site.",
)}
</span>
<span>
<span> {React.string(" Read our")} </span>
//TODO: Link to privacy policy
<Next.Link href="/">
<span className=Styles.privacyText>
{React.string(" privacy policy ")}
</span>
</Next.Link>
<span> {React.string("for more information.")} </span>
</span>
</div>
</CookieConsent>;
};
2 changes: 1 addition & 1 deletion frontend/website-redesign/src/pages/Demo.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ let make = () => {
{React.string("Button Label")}
<Icon kind=Icon.ArrowRightMedium />
</Button>
<Button bgColor=Theme.Colors.mint>
<Button bgColor=Theme.Colors.mint dark=true>
{React.string("Button label ")}
<Icon kind=Icon.ArrowRightMedium />
</Button>
Expand Down