Merge pull request #14398 from mozilla/fxa-5628-main-content-class-conversion

refactor(payments): convert class main-content

packages/fxa-payments-server/.storybook/preview.js

@@ -2,5 +2,5 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import '../src/styles/tailwind.out';
+import '../src/styles/tailwind.out.css';
 import '../src/index.scss';

packages/fxa-payments-server/src/index.scss

@@ -47,26 +47,6 @@ body {
   }
 }
 
-.main-content {
-  display: grid;
-  grid-template-columns: calc(100vw - 24px);
-  grid-template-rows: min-content;
-  grid-column-gap: 16px;
-  margin-top: $header-height;
-  min-height: calc(100vh - #{$header-height});
-
-  @include min-width('tablet') {
-    grid-template-columns: minmax(359px, 500px) 327px;
-    grid-column-gap: 32px;
-    margin: $header-height-tablet 12px auto;
-    min-height: calc(100vh - #{$header-height-tablet});
-  }
-
-  @include min-width('desktop') {
-    grid-template-columns: 600px 343px;
-  }
-}
-
 hr {
   border: 0;
   border-top: 1px solid #e0e0e6;

packages/fxa-payments-server/src/styles/tailwind.css

@@ -119,3 +119,9 @@
 .total-price {
   @apply font-semibold overflow-hidden text-ellipsis text-lg whitespace-nowrap;
 }
+
+.main-content {
+  @apply grid grid-cols-[calc(100vw_-_1.5rem)] grid-rows-[min-content] gap-x-4 mt-16 min-h-[calc(100vh_-_4rem)];
+  @apply tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:gap-x-8 tablet:mt-[80px] tablet:mb-auto tablet:mx-3;
+  @apply desktop:grid-cols-[600px_1fr];
+}