form validation styles transfered to global styles; new CSS variable '--text-color'; add util classes for hiding scrollbar and centering content

Author: AvidDollars

frontend/src/app/user/register/register.component.scss

@@ -1,6 +0,0 @@
-// FORM VALIDATION
-input.ng-invalid.ng-touched,
-[formgroupname].ng-invalid.ng-touched input
-{
-  background-color: var(--color-invalid);
-}

frontend/src/styles.scss

@@ -5,8 +5,9 @@
   :root {
     --bg-color: rgb(49, 49, 49);
     --bg-color-light: rgb(78, 78, 78);
+    --text-color: rgb(236, 236, 236);
 
-    color: rgb(236, 236, 236);
+    color: var(--text-color);
     background-color: var(--bg-color);
 
     --primary-color-light: rgb(41, 122, 117);
@@ -24,8 +25,9 @@
   [data-theme="light"] {
     --bg-color: rgb(236, 236, 236);
     --bg-color-light: rgb(255, 255, 255);
+    --text-color: rgb(49, 49, 49);
 
-    color: rgb(49, 49, 49);
+    color: var(--text-color);
     background-color: var(--bg-color);
 
     --primary-color-light: rgb(107, 179, 134);
@@ -43,8 +45,9 @@
   [data-theme="blues"] {
     --bg-color: rgb(32, 32, 94);
     --bg-color-light: rgb(48, 48, 119);
+    --text-color: rgb(196, 196, 240);
 
-    color: rgb(196, 196, 240);
+    color: var(--text-color);
     background-color: var(--bg-color);
 
     --primary-color-light: rgb(115, 115, 221);
@@ -84,7 +87,8 @@
   --color-invalid: var(--color-invalid);
   --color-valid: var(--color-valid);
 
-  --color-bg-light: var(--bg-color-light);
+  --color-light: var(--bg-color-light);
+  --color-text: var(--text-color);
 }
 
 // FOR SUBMITTING FORMS
@@ -116,4 +120,29 @@
   100% {
      transform: rotate(1turn);
   }
+}
+
+// FORM VALIDATION
+input.ng-invalid.ng-touched,
+[formgroupname].ng-invalid.ng-touched input
+{
+  background-color: var(--color-invalid);
+}
+
+// FROM: https://dev.to/derick1530/how-to-create-scrollable-element-in-tailwind-without-a-scrollbar-4mbd
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+ /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+}
+
+// CENTERED CONTENT
+.centered-content {
+  @apply h-full flex justify-center items-center;
 }