From 1feb8446b7d4e6c48a8cf91a3c58b49afad1d001 Mon Sep 17 00:00:00 2001 From: Martin Minkov Date: Tue, 1 Sep 2020 15:51:16 -0700 Subject: [PATCH 1/5] cookie component updated --- .../src/components/CookieWarning.re | 110 +++++++++++++++--- frontend/website-redesign/src/pages/Demo.re | 2 +- 2 files changed, 95 insertions(+), 17 deletions(-) diff --git a/frontend/website-redesign/src/components/CookieWarning.re b/frontend/website-redesign/src/components/CookieWarning.re index 029d8956573..28a65be9be0 100644 --- a/frontend/website-redesign/src/components/CookieWarning.re +++ b/frontend/website-redesign/src/components/CookieWarning.re @@ -7,6 +7,7 @@ module CookieConsent = { ~containerClasses: string=?, ~buttonClasses: string=?, ~contentClasses: string=?, + ~buttonText: React.element=?, //TODO: make this take either react element or string ~children: React.element ) => React.element = @@ -19,39 +20,116 @@ 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.black), + boxSizing(`borderBox), + 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.notMobile, + [marginLeft(`rem(4.)), marginRight(`rem(2.))], + ), ]), ]); }; [@react.component] -let make = () => +let make = () => { + let buttonText = +
+ {React.string("Accept")} + + + +
; + - {React.string("This website uses cookies to enhance the user experience.")} +
+ + {React.string( + "We use cookies to improve your experience on our site.", + )} + + + {React.string(" Read our")} + + + {React.string(" privacy policy ")} + + + {React.string("for more information.")} + +
; +}; diff --git a/frontend/website-redesign/src/pages/Demo.re b/frontend/website-redesign/src/pages/Demo.re index ced7becd9b7..912da8529e9 100644 --- a/frontend/website-redesign/src/pages/Demo.re +++ b/frontend/website-redesign/src/pages/Demo.re @@ -39,7 +39,7 @@ let make = () => { {React.string("Button Label")} - From 85559381ee7db308c8f4244acc110e0c27a1a877 Mon Sep 17 00:00:00 2001 From: Martin Minkov Date: Tue, 1 Sep 2020 16:37:48 -0700 Subject: [PATCH 2/5] refactored css --- .../src/components/CookieWarning.re | 56 +++++++++---------- 1 file changed, 26 insertions(+), 30 deletions(-) diff --git a/frontend/website-redesign/src/components/CookieWarning.re b/frontend/website-redesign/src/components/CookieWarning.re index 28a65be9be0..2789109d491 100644 --- a/frontend/website-redesign/src/components/CookieWarning.re +++ b/frontend/website-redesign/src/components/CookieWarning.re @@ -64,34 +64,38 @@ module Styles = { style([ color(Theme.Colors.black), marginRight(`auto), - media( - Theme.MediaQuery.notMobile, - [marginLeft(`rem(4.)), marginRight(`rem(2.))], - ), + 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))]); }; [@react.component] let make = () => { let buttonText = -
+
{React.string("Accept")} - +
; @@ -103,16 +107,7 @@ let make = () => { contentClasses=Styles.content buttonText buttonClasses=Styles.button> -
+
{React.string( "We use cookies to improve your experience on our site.", @@ -120,6 +115,7 @@ let make = () => { {React.string(" Read our")} + //TODO: Link to privacy policy Date: Tue, 1 Sep 2020 16:46:07 -0700 Subject: [PATCH 3/5] added slight change to colors --- frontend/website-redesign/src/Theme.re | 1 + frontend/website-redesign/src/components/CookieWarning.re | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/website-redesign/src/Theme.re b/frontend/website-redesign/src/Theme.re index 843c2e6e8f0..f170ff568d7 100644 --- a/frontend/website-redesign/src/Theme.re +++ b/frontend/website-redesign/src/Theme.re @@ -6,6 +6,7 @@ module Colors = { let gray = `hex("d9d9d9"); let white = Css.white; let black = Css.black; + let digitalBlack = `hex("2d2d2d"); }; module Typeface = { diff --git a/frontend/website-redesign/src/components/CookieWarning.re b/frontend/website-redesign/src/components/CookieWarning.re index 2789109d491..33b858a2059 100644 --- a/frontend/website-redesign/src/components/CookieWarning.re +++ b/frontend/website-redesign/src/components/CookieWarning.re @@ -26,8 +26,9 @@ module Styles = { display(`flex), flexDirection(`column), width(`percent(100.)), - background(Theme.Colors.black), + background(Theme.Colors.digitalBlack), boxSizing(`borderBox), + boxShadow(~x=`px(0), ~y=`px(1), `hex("e5e5e5e5")), media( Theme.MediaQuery.notMobile, [ From 099c26b155424167bede6a12d6da67f1962d8a8e Mon Sep 17 00:00:00 2001 From: Martin Minkov Date: Tue, 1 Sep 2020 16:47:49 -0700 Subject: [PATCH 4/5] removed todo --- frontend/website-redesign/src/components/CookieWarning.re | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/website-redesign/src/components/CookieWarning.re b/frontend/website-redesign/src/components/CookieWarning.re index 33b858a2059..6ba85086691 100644 --- a/frontend/website-redesign/src/components/CookieWarning.re +++ b/frontend/website-redesign/src/components/CookieWarning.re @@ -7,7 +7,7 @@ module CookieConsent = { ~containerClasses: string=?, ~buttonClasses: string=?, ~contentClasses: string=?, - ~buttonText: React.element=?, //TODO: make this take either react element or string + ~buttonText: React.element=?, ~children: React.element ) => React.element = From e82ffc80132eb9064dcea760fe64d5ab7b881485 Mon Sep 17 00:00:00 2001 From: Martin Minkov Date: Wed, 2 Sep 2020 12:34:38 -0700 Subject: [PATCH 5/5] changed css on privacy text --- frontend/website-redesign/src/components/CookieWarning.re | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/frontend/website-redesign/src/components/CookieWarning.re b/frontend/website-redesign/src/components/CookieWarning.re index 6ba85086691..0a4745533e4 100644 --- a/frontend/website-redesign/src/components/CookieWarning.re +++ b/frontend/website-redesign/src/components/CookieWarning.re @@ -89,6 +89,8 @@ module Styles = { let buttonIcon = style([display(`flex), alignItems(`center), marginLeft(`rem(0.5))]); + + let privacyText = style([color(Theme.Colors.orange), cursor(`pointer)]); }; [@react.component] @@ -118,10 +120,7 @@ let make = () => { {React.string(" Read our")} //TODO: Link to privacy policy - + {React.string(" privacy policy ")}