Remove custom styles, other small touch-ups, hide the cookie consent when close btn is pressed

app/scripts/components/common/cookie-consent/index.scss

@@ -1,19 +1,3 @@
-#cookie-consent{
-
- @media screen and (min-width: 768px) {
- bottom: 0;
- right: 0;
- }
-}
-
-.hide-modal {
- transition: bottom 1.125s ease-in-out 0.125s, opacity 1s ease-in-out 0.125s;
-}
-
-.close {
- & svg {
- @media screen and (min-width: 768px) {
- right: -50px;
- }
- }
+.animation--fade-out {
+ transition: opacity 0.5s ease-in-out 0.125s;
 }

app/scripts/components/common/cookie-consent/index.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-
 import { Icon } from '@trussworks/react-uswds';
 import {
  USWDSAlert,
@@ -38,41 +37,46 @@ export const CookieConsent = ({
  )}; path=/; expires=${closeConsent ? '0' : setCookieExpiration()}`;
  };
 
- const addAttribute = copy && copy?.replaceAll('<a', `<a target="_blank" rel="noopener" role="link"`);
+ const addAttribute =
+ copy &&
+ copy?.replaceAll('<a', `<a target="_blank" rel="noopener" role="link"`);
  useEffect(() => {
  const cookieValue = {
  responded: cookieConsentResponded,
  answer: cookieConsentAnswer
  };
  setCookie(cookieValue, closeConsent);
  onFormInteraction();
- }, [cookieConsentResponded, cookieConsentAnswer]);
+ }, [cookieConsentResponded, cookieConsentAnswer, closeConsent]);
+
  return (
  <div
  id='cookie-consent'
- className={`margin-2 shadow-2 position-fixed z-top maxw-tablet-lg bottom-65px ${
- cookieConsentResponded || closeConsent
- ? 'hide-modal bottom-neg-500 '
- : ''
+ className={`margin-0 tablet:margin-2 shadow-2 position-fixed z-top maxw-full tablet:maxw-tablet-lg animation--fade-out right-0 bottom-0 ${
+ cookieConsentResponded || closeConsent ? ' opacity-0' : 'opacity-1'
  }`}
  >
  <USWDSAlert
  type='info'
  heading={title && title}
- headingLevel='h1'
+ headingLevel='h2'
  noIcon={true}
  className='radius-lg'
  >
  <USWDSButton
- type='button'
- className='usa-modal__close close padding-0'
+ type='button '
+ className='width-3 height-3 padding-0 position-absolute right-2 top-2'
  onClick={() => {
  setCloseConsent(true);
  }}
+ unstyled
  >
- <Icon.Close />
+ <Icon.Close size={3} />
  </USWDSButton>
- {addAttribute && <div dangerouslySetInnerHTML={{ __html: addAttribute }} />}
+
+ {addAttribute && (
+ <div dangerouslySetInnerHTML={{ __html: addAttribute }} />
+ )}
  <USWDSButtonGroup className='padding-top-2'>
  <USWDSButton
  onClick={() => {

app/scripts/components/common/cookie-consent/utils.ts

@@ -0,0 +1,2 @@
+export const NO_COOKIE = 'NO COOKIE';
+export const COOKIE_CONSENT_KEY = `veda--CookieConsent`;

app/scripts/components/common/layout-root/index.tsx

@@ -8,6 +8,7 @@ import MetaTags from '../meta-tags';
 import PageFooter from '../page-footer';
 import Banner from '../banner';
 import { CookieConsent } from '../cookie-consent';
+import { COOKIE_CONSENT_KEY, NO_COOKIE } from '../cookie-consent/utils';
 
 import { LayoutRootContext } from './context';
 
@@ -52,26 +53,27 @@ function LayoutRoot(props: { children?: ReactNode }) {
  }
  return null;
  };
- const { children } = props;
 
  const getCookie = () => {
- const cookie = readCookie('CookieConsent');
+ const cookie = readCookie(COOKIE_CONSENT_KEY);
  if (cookie) {
  const cookieContents = JSON.parse(cookie);
  if (cookieContents.answer) setGoogleTagManager();
  return cookieContents;
  }
- return 'NO COOKIE';
+ return NO_COOKIE;
  };
 
  const showForm = () => {
  const cookieContents = getCookie();
- if (cookieContents === 'NO COOKIE') {
+ if (cookieContents === NO_COOKIE) {
  return true;
  } else {
  return !cookieContents.responded;
  }
  };
+ const { children } = props;
+
 
  useEffect(() => {
  !cookieConsentContent && setGoogleTagManager();