latest feedback to make confirm cta full width (#5)

goshippo · Sep 13, 2024 · 115f594 · 115f594
1 parent 862f206
commit 115f594
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/cm.css b/src/cm.css
@@ -44,6 +44,15 @@
   padding-top: 25px;
 }
 
+.container-confirm-privacy-link {
+  height: auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 /*******************
  * Button Styles
  *******************/
@@ -101,8 +110,13 @@
   font-weight: 400;
 }
 
+.button-confirm-cta {
+  width: 100%;
+}
+
 .button-confirm-cta button{
   background-color: var(--shippo-solid-teal);
+  width: 100%;
 }
 
 .button-confirm-cta button span{
@@ -147,7 +161,6 @@ a:focus {
 /** Modal title text styles */
 .text-title {
   font-size: 18px;
-  font-weight: 700;
   color: var(--text-color);
   margin: 0 0 18px 0;
   text-align: center;
@@ -208,6 +221,9 @@ a:focus {
   justify-content: center;
 }
 
+.toggles-container-left {
+  margin:  18px 0 18px -5px;
+}
 /** Container around `CompleteOptions` view state */
 .complete-options-container {
   height: inherit;
@@ -925,9 +941,6 @@ a:focus {
     padding: 5px 0;
   }
 
-  .toggles-container-left {
-    margin:  18px 0 18px -5px;
-  }
   .column-content {
     flex-direction: row;
   }

diff --git a/src/components/CompleteOptions.tsx b/src/components/CompleteOptions.tsx
@@ -123,6 +123,7 @@ export function CompleteOptions({
             />
           ))}
           </div>
+          <div className='container-confirm-privacy-link'>
           <div className="button-confirm-cta">
           <Button
             handleClick={handleSave}
@@ -136,6 +137,7 @@ export function CompleteOptions({
               {formatMessage(bottomMenuMessages.showPolicyButtonAcceptOrRejectAllOrMoreChoices)}
             </a>
         </div>
+        </div>
       </form>
     </div>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -123,6 +123,7 @@ export function CompleteOptions({ @@
                 />
               ))}
               </div>
+              <div className='container-confirm-privacy-link'>
               <div className="button-confirm-cta">
               <Button
                 handleClick={handleSave}
@@ Expand All / @@ -136,6 +137,7 @@ export function CompleteOptions({ @@
                   {formatMessage(bottomMenuMessages.showPolicyButtonAcceptOrRejectAllOrMoreChoices)}
                 </a>
             </div>
+            </div>
           </form>
         </div>
       );
@@ Expand Down @@