Lg 3876 remove basscss modules (#5944)

* lg-3876 - remove basscss modules

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';

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';

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;
+}

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