From a3e52a15cc94dfb1b05da14327e399b128e69ed4 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 13 Nov 2024 17:40:07 -0300
Subject: [PATCH] Remove "basics.scss" and organize "tailwind.css"

---
 index.html                                |  2 +-
 src/features/ui/components/modal-root.tsx |  4 +--
 src/styles/application.scss               |  1 -
 src/styles/basics.scss                    | 33 -----------------------
 src/styles/tailwind.css                   | 30 ++++++++++++++++++---
 5 files changed, 30 insertions(+), 40 deletions(-)
 delete mode 100644 src/styles/basics.scss

diff --git a/index.html b/index.html
index 4e41d029c..02eb70d2c 100644
--- a/index.html
+++ b/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>
\ No newline at end of file
diff --git a/src/features/ui/components/modal-root.tsx b/src/features/ui/components/modal-root.tsx
index 5eff12842..0d8c71bd8 100644
--- a/src/features/ui/components/modal-root.tsx
+++ b/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');
     }
   }
 
diff --git a/src/styles/application.scss b/src/styles/application.scss
index 02ff20ab2..329a4cdd9 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -1,4 +1,3 @@
-@use 'basics';
 @use 'loading';
 @use 'ui';
 @use 'emoji-picker';
diff --git a/src/styles/basics.scss b/src/styles/basics.scss
deleted file mode 100644
index fec5daa0e..000000000
--- a/src/styles/basics.scss
+++ /dev/null
@@ -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;
-}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 4c344ff82..17ee83a8e 100644
--- a/src/styles/tailwind.css
+++ b/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;