From 37346ea3e3d2dffbdac6ef5df30176efff652745 Mon Sep 17 00:00:00 2001
From: Adrian Galvan <adrian@ethyca.com>
Date: Wed, 11 Oct 2023 13:41:19 -0700
Subject: [PATCH] Copy updates and minor css changes (#4252)

---
 CHANGELOG.md                                  |  1 +
 clients/fides-js/src/components/fides.css     | 12 ++++++++----
 .../src/components/tcf/DoubleToggleTable.tsx  |  4 +++-
 .../fides-js/src/components/tcf/TcfTabs.tsx   | 19 ++++++++++---------
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 446ebe58d7..00727ff1f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,7 @@ The types of changes are:
 - An issue where email was not being overridden correctly for Braze and Domo [#4196](https://github.com/ethyca/fides/pull/4196)
 - Use `stdRetention` when there is not a specific value for a purpose's data retention [#4199](https://github.com/ethyca/fides/pull/4199)
 - Updating the unflatten_dict util to accept flattened dict values [#4200](https://github.com/ethyca/fides/pull/4200)
+- Minor CSS styling fixes for the consent modal [#4252](https://github.com/ethyca/fides/pull/4252)
 
 ## [2.21.0](https://github.com/ethyca/fides/compare/2.20.2...2.21.0)
 
diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index 8473e1ad25..799bbec5a4 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -149,6 +149,10 @@ div#fides-banner-inner-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-column-gap: 60px;
+
+  .fides-acknowledge-button-container {
+    margin-bottom: 0px;
+  }
 }
 
 div#fides-banner-inner-description {
@@ -212,7 +216,7 @@ div#fides-button-group {
 }
 
 div.fides-acknowledge-button-container {
-  margin-top: 0.5em;
+  margin-bottom: var(--fides-overlay-padding);
   display: flex;
   justify-content: end;
 }
@@ -289,7 +293,7 @@ div.fides-modal-content {
   background-color: var(--fides-overlay-background-color);
   border-radius: var(--fides-overlay-container-border-radius);
   max-height: 680px;
-  max-width: 100%;
+  width: 680px;
   overflow-y: auto;
 
   z-index: 2;
@@ -536,7 +540,7 @@ div#fides-banner-inner .fides-privacy-policy {
 }
 
 .fides-notice-toggle .fides-disclosure-visible {
-  padding-inline: 0.75em;
+  padding: 12px 12px 0px 12px;
   overflow: auto; /* prevent margin collapse */
 }
 
@@ -831,6 +835,6 @@ div#fides-banner-inner .fides-privacy-policy {
   margin-bottom: 8px;
 
   > button {
-    margin-right: 12px;
+    margin-right: 18px;
   }
 }
diff --git a/clients/fides-js/src/components/tcf/DoubleToggleTable.tsx b/clients/fides-js/src/components/tcf/DoubleToggleTable.tsx
index 8b00a60d46..d189a951bd 100644
--- a/clients/fides-js/src/components/tcf/DoubleToggleTable.tsx
+++ b/clients/fides-js/src/components/tcf/DoubleToggleTable.tsx
@@ -144,7 +144,9 @@ const DoubleToggleTable = <T extends Item>({
           checked={enabledLegintIds.indexOf(`${item.id}`) !== -1}
           badge={renderBadgeLabel ? renderBadgeLabel(item) : undefined}
           secondToggle={
-            <div style={{ display: "flex", marginLeft: "16px" }}>
+            <div
+              style={{ display: "flex", marginLeft: "16px", minWidth: "95px" }}
+            >
               {item.isConsent ? (
                 <Toggle
                   name={`${item.name}-consent`}
diff --git a/clients/fides-js/src/components/tcf/TcfTabs.tsx b/clients/fides-js/src/components/tcf/TcfTabs.tsx
index 73c59d3f65..ce15763f7c 100644
--- a/clients/fides-js/src/components/tcf/TcfTabs.tsx
+++ b/clients/fides-js/src/components/tcf/TcfTabs.tsx
@@ -39,9 +39,10 @@ const TcfTabs = ({
       content: (
         <div>
           <InfoBox>
-            You can review and and exercise your right to consent to specific
-            purposes by using the filter to switch between Consent and
-            Legitimate Interest below.
+            Below, you will find a list of the purposes and special features for
+            which your data is being processed. You may exercise your rights for
+            specific purposes, based on consent or legitimate interest, using
+            the toggles below.
           </InfoBox>
           <AllOnOffButtons
             enabledIds={enabledIds}
@@ -68,8 +69,9 @@ const TcfTabs = ({
       content: (
         <div>
           <InfoBox>
-            You can review the list of features and exercise your right to
-            consent to special features below.
+            Below, you will find a list of the features for which your data is
+            being processed. You may exercise your rights for special features
+            using the toggles below.
           </InfoBox>
           <AllOnOffButtons
             enabledIds={enabledIds}
@@ -93,10 +95,9 @@ const TcfTabs = ({
       content: (
         <div>
           <InfoBox>
-            You may review the list of vendors and the purposes or features of
-            processing they individually declare below. You have the right to
-            exercise you consent for each vendor based on the legal basis they
-            assert.
+            Below, you will find a list of vendors processing your data and the
+            purposes or features of processing they declare. You may exercise
+            your rights for each vendor based on the legal basis they assert.
           </InfoBox>
           <TcfVendors
             experience={experience}