Add local CSS lint checks (#4068)

* update package scripts to include prettifying scss files and stylelint-ing; fix related issues found from stylelinter

* revert old prettier autofix

* lint

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/styles/ant-overrides.scss

@@ -46,17 +46,6 @@ BUTTONS
   border-radius: var(--theme-rounded-corners);
   border-color: var(--theme-color-components-primary-button-border);
 
-  &:hover,
-  &:focus {
-    border-color: var(--theme-color-action-hover);
-    color: var(--theme-color-action-hover);
-    background-color: var(--theme-color-components-secondary-button-background);
-  }
-
-  &:focus {
-    border-color: var(--theme-color-components-secondary-button-text);
-  }
-
   &[ant-click-animating-without-extra-node]::after {
     animation: 0s !important;
   }

web/styles/globals.scss

@@ -18,18 +18,18 @@
   --chat-notification-icon-padding: 6px;
   --chat-message-padding: 10px;
   --chat-text-highlight-border-radius: 3px;
-	--player-container-height: 75vh;
-	--status-bar-height: 2rem;
-	--footer-padding-x: 1rem;
+  --player-container-height: 75vh;
+  --status-bar-height: 2rem;
+  --footer-padding-x: 1rem;
 
   @include screen(tablet) {
     --header-height: 3.85rem;
-		--player-container-height: 400px;
+    --player-container-height: 400px;
   }
 
-	@include screen(mobile) {
-		--player-container-height: 250px;
-	}
+  @include screen(mobile) {
+    --player-container-height: 250px;
+  }
 }
 
 ::selection {

web/styles/mixins.scss

@@ -1,11 +1,11 @@
-@mixin flexCenter {
+@mixin flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-@mixin screen($breakpoint) { 
-    @if $breakpoint == desktop {    
+@mixin screen($breakpoint) {
+  @if $breakpoint == desktop {
     @media only screen and (width >= 768px) {
       @content;
     }