From ada7299bc8c88cf98e6e30042e0eb2a894741fc6 Mon Sep 17 00:00:00 2001
From: peggles2 <peggles2@users.noreply.github.com>
Date: Tue, 22 Feb 2022 13:13:08 -0500
Subject: [PATCH] Lg 3876 remove basscss modules (#5944)

* lg-3876 - remove basscss modules
---
 app/assets/stylesheets/_vendor-overrides.scss |  5 --
 app/assets/stylesheets/_vendor.scss           |  4 --
 app/assets/stylesheets/application.css.scss   |  4 +-
 .../design-system-waiting-room.scss           | 46 +++++++++++++++++++
 .../users/backup_code_setup/create.html.erb   | 24 +++++-----
 5 files changed, 60 insertions(+), 23 deletions(-)
 delete mode 100644 app/assets/stylesheets/_vendor-overrides.scss
 create mode 100644 app/assets/stylesheets/design-system-waiting-room.scss

diff --git a/app/assets/stylesheets/_vendor-overrides.scss b/app/assets/stylesheets/_vendor-overrides.scss
deleted file mode 100644
index 1eae129c60e..00000000000
--- a/app/assets/stylesheets/_vendor-overrides.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Remove after `basscss-sass/base-forms` is no longer in use (LG-3876). BassCSS applies default
-// styling to label elements, that this exists to unset to avoid conflicts with design system.
-.usa-checkbox__label {
-  vertical-align: baseline;
-}
diff --git a/app/assets/stylesheets/_vendor.scss b/app/assets/stylesheets/_vendor.scss
index f54df0ea1cd..1d061847cc2 100644
--- a/app/assets/stylesheets/_vendor.scss
+++ b/app/assets/stylesheets/_vendor.scss
@@ -1,7 +1,3 @@
-@import 'basscss-sass/base-reset';
-@import 'basscss-sass/base-forms';
-@import 'basscss-sass/base-tables';
-@import 'basscss-sass/base-typography';
 @import 'basscss-sass/color-base';
 @import 'basscss-sass/color-forms';
 @import 'basscss-sass/color-tables';
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index ca6a06d22ce..958d861bf5d 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -2,7 +2,9 @@
 @import 'variables/app';
 @import 'required';
 @import 'vendor';
-@import 'vendor-overrides';
+// To be removed once design system incorporates styles included below.
+@import 'design-system-waiting-room.scss';
+// ----------------------------------------
 @import 'identity-style-guide/dist/assets/scss/packages/required';
 @import 'identity-style-guide/dist/assets/scss/packages/global';
 @import 'identity-style-guide/dist/assets/scss/packages/components';
diff --git a/app/assets/stylesheets/design-system-waiting-room.scss b/app/assets/stylesheets/design-system-waiting-room.scss
new file mode 100644
index 00000000000..e1bc2a25113
--- /dev/null
+++ b/app/assets/stylesheets/design-system-waiting-room.scss
@@ -0,0 +1,46 @@
+// To be removed once design system incorporates styles included below.
+
+// basscss-base-forms
+//------------------------------------------------
+input[type=text],
+input[type=date],
+input[type=datetime],
+input[type=datetime-local],
+input[type=email],
+input[type=month],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=tel],
+input[type=time],
+input[type=url],
+input[type=week] {
+  height: 3rem;
+  padding: 0.5rem 1rem;
+  vertical-align: middle;
+  -webkit-appearance: none;
+}
+
+//basscss-base-topography
+//------------------------------------------------
+body {
+  font-family: $font-family;
+  line-height: $line-height;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $heading-font-family;
+  line-height: $heading-line-height;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: $space-2;
+}
+
+dl, ol, ul {
+  margin-top: 0;
+  margin-bottom: $space-2;
+}
diff --git a/app/views/users/backup_code_setup/create.html.erb b/app/views/users/backup_code_setup/create.html.erb
index 6aee3fcc57f..19f3aada5ac 100644
--- a/app/views/users/backup_code_setup/create.html.erb
+++ b/app/views/users/backup_code_setup/create.html.erb
@@ -14,22 +14,20 @@
 </p>
 
 <div class="margin-top-4 margin-bottom-5">
-  <table>
-    <tr>
-      <% [ @codes.first(@codes.length / 2), @codes.last(@codes.length / 2)].each do |section| %>
-        <td class="padding-0">
-          <% section.each do |code| %>
+  <div class="grid-row">
+    <% [ @codes.first(@codes.length / 2), @codes.last(@codes.length / 2)].each do |section| %>
+      <div class="grid-col-12 tablet:grid-col-6">
+        <% section.each do |code| %>
+          <div class="margin-bottom-2">
             <code class="bold h2">
               <%= RandomPhrase.format(code, separator: '-') %>
             </code>
-            <br/>
-            <br/>
-          <% end %>
-        </td>
-      <% end %>
-    </tr>
-  </table>
-  <div class="margin-top-0">
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  <div class="margin-top-1">
     <% if desktop_device? %>
       <%= render ButtonComponent.new(
             action: ->(**tag_options, &block) do