Remove "basics.scss" and organize "tailwind.css"

index.html

@@ -21,6 +21,6 @@
         </div>
       </div>
     </div>
-    <noscript>To use this website, please enable JavaScript.</noscript>
+    <noscript class="text-center">To use this website, please enable JavaScript.</noscript>
   </body>
 </html>

src/features/ui/components/modal-root.tsx

@@ -116,9 +116,9 @@ export default class ModalRoot extends PureComponent<IModalRoot> {
 
   componentDidUpdate(prevProps: IModalRoot, prevState: any, { visible }: any) {
     if (visible) {
-      document.body.classList.add('with-modals');
+      document.body.classList.add('overflow-hidden');
     } else {
-      document.body.classList.remove('with-modals');
+      document.body.classList.remove('overflow-hidden');
     }
   }
 

src/styles/application.scss

@@ -1,4 +1,3 @@
-@use 'basics';
 @use 'loading';
 @use 'ui';
 @use 'emoji-picker';

src/styles/basics.scss

@@ -1,33 +0,0 @@
-body {
-  @apply antialiased;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-
-body.with-modals {
-  @apply overflow-hidden;
-}
-
-// Note: this is needed for React HotKeys performance. Removing this
-// will cause severe performance degradation on Safari.
-div[tabindex='-1']:focus {
-  outline: 0;
-}
-
-::selection {
-  @apply bg-primary-600 text-white;
-}
-
-noscript {
-  text-align: center;
-}
-
-.emojione {
-  @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
-}
-
-// Virtuoso empty placeholder fix.
-// https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506
-div[data-viewport-type='window'] {
-  position: static !important;
-}

src/styles/tailwind.css

@@ -2,9 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer utilities {
-  .status {
-    @apply min-h-[54px] cursor-default animate-fade opacity-100;
+@layer base {
+  body {
+    @apply antialiased;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
   }
 
   body.rtl {
@@ -16,6 +18,24 @@
     }
   }
 
+  ::selection {
+    @apply bg-primary-600 text-white;
+  }
+
+  div[data-viewport-type='window'] {
+    position: static !important;
+  }
+
+  div[tabindex='-1']:focus {
+    outline: 0;
+  }
+}
+
+@layer utilities {
+  .status {
+    @apply min-h-[54px] cursor-default animate-fade opacity-100;
+  }
+
   .thread {
     @apply bg-white black:bg-black dark:bg-primary-900;
   
@@ -110,6 +130,10 @@
     height: 36px !important;
   }  
 
+  .emojione {
+    @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
+  }
+
   .compose-form-warning {
     strong {
       @apply font-medium;