From 1b116d225299c7a98bbbd5154200ecea4f7d0aba Mon Sep 17 00:00:00 2001
From: gingervitis <gingervitis@users.noreply.github.com>
Date: Mon, 15 Feb 2021 06:24:09 +0000
Subject: [PATCH] Prettified Code!

---
 web/styles/ant-overrides.scss         | 68 ++++++++++-----------------
 web/styles/config-public-details.scss |  4 +-
 web/styles/config-socialhandles.scss  |  8 ++--
 web/styles/home.scss                  |  9 ++--
 web/styles/main-layout.scss           | 20 +++-----
 5 files changed, 41 insertions(+), 68 deletions(-)

diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss
index 03e03f381..91eb5887e 100644
--- a/web/styles/ant-overrides.scss
+++ b/web/styles/ant-overrides.scss
@@ -1,6 +1,5 @@
 // GENERAL ANT OVERRIDES
 
-
 // RESET BG, TEXT COLORS
 .ant-layout,
 .ant-layout-header,
@@ -23,14 +22,14 @@ td.ant-table-column-sort,
 .ant-menu-submenu > .ant-menu,
 .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
   background-color: transparent;
-  color: var(--default-text-color)
+  color: var(--default-text-color);
 }
 
-h1.ant-typography, 
-h2.ant-typography, 
-h3.ant-typography, 
-h4.ant-typography, 
-h5.ant-typography, 
+h1.ant-typography,
+h2.ant-typography,
+h3.ant-typography,
+h4.ant-typography,
+h5.ant-typography,
 .ant-typography,
 .ant-typography h1,
 .ant-typography h2,
@@ -39,7 +38,7 @@ h5.ant-typography,
 .ant-typography h5 {
   color: var(--white);
   font-weight: 400;
-  margin: .5em 0;
+  margin: 0.5em 0;
 }
 .ant-typography.ant-typography-secondary {
   color: var(--white);
@@ -71,15 +70,11 @@ h3.ant-typography {
   font-size: 1.25em;
 }
 
-
-
 .ant-progress-text,
 .ant-progress-circle .ant-progress-text {
   color: var(--default-text-color);
 }
 
-
-
 // ANT MENU
 // menu base
 .ant-menu-item {
@@ -87,7 +82,7 @@ h3.ant-typography {
 
   .anticon {
     transition-duration: var(--ant-transition-duration);
-    color: var(--nav-text); 
+    color: var(--nav-text);
   }
 
   a {
@@ -106,7 +101,7 @@ h3.ant-typography {
     }
   }
 }
-.ant-menu-item:active, 
+.ant-menu-item:active,
 .ant-menu-submenu-title:active {
   background-color: var(--black-50);
 }
@@ -130,14 +125,14 @@ h3.ant-typography {
 }
 // submenu items
 .ant-menu-submenu {
-  &> .ant-menu {
+  & > .ant-menu {
     border-left: 1px solid var(--white-50);
     background-color: var(--black-35);
   }
   .ant-menu-submenu-title {
     transition-duration: var(--ant-transition-duration);
     color: var(--nav-text);
-    
+
     .anticon {
       color: var(--nav-text);
     }
@@ -165,7 +160,6 @@ h3.ant-typography {
   }
 }
 
-
 // ANT RESULT
 .ant-result-title {
   color: var(--default-text-color);
@@ -174,7 +168,6 @@ h3.ant-typography {
   color: var(--white-75);
 }
 
-
 // ANT CARD
 .ant-card {
   border-radius: var(--container-border-radius);
@@ -196,7 +189,6 @@ h3.ant-typography {
   border-color: var(--white-25);
 }
 
-
 // ANT INPUT
 input.ant-input,
 textarea.ant-input {
@@ -235,7 +227,7 @@ textarea.ant-input {
 }
 .ant-input,
 .ant-input-number:focus,
-.ant-input-affix-wrapper:focus, 
+.ant-input-affix-wrapper:focus,
 .ant-input-affix-wrapper-focused {
   border-color: var(--owncast-purple);
   input,
@@ -252,9 +244,6 @@ textarea.ant-input {
   padding-right: 25px;
 }
 
-
-
-
 // ANT BUTTON
 .ant-btn {
   background-color: var(--owncast-purple-25);
@@ -270,7 +259,7 @@ textarea.ant-input {
   background-color: var(--owncast-purple);
   border-color: var(--owncast-purple);
 }
-.ant-btn-primary:hover, 
+.ant-btn-primary:hover,
 .ant-btn-primary:focus {
   background-color: var(--button-focused);
   color: var(--white);
@@ -299,8 +288,7 @@ textarea.ant-input {
   transition-duration: 0.15s;
 }
 
-
-// ANT TABLE 
+// ANT TABLE
 .ant-table-thead > tr > th,
 .ant-table-small .ant-table-thead > tr > th {
   transition-duration: var(--ant-transition-duration);
@@ -339,10 +327,9 @@ textarea.ant-input {
 }
 .ant-table-thead th.ant-table-column-sort {
   background-color: var(--owncast-purple-25);
-  opacity: .75;
+  opacity: 0.75;
 }
 
-
 // MODAL
 .ant-modal,
 .ant-modal-body {
@@ -384,7 +371,7 @@ textarea.ant-input {
 }
 .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
   background-color: var(--black);
-  border-color:  var(--owncast-purple-50);
+  border-color: var(--owncast-purple-50);
 }
 .ant-select-arrow {
   color: var(--owncast-purple);
@@ -409,10 +396,10 @@ textarea.ant-input {
 //   margin-right: 2em;
 // }
 .ant-slider-mark-text {
-  font-size: .85em;
+  font-size: 0.85em;
   white-space: nowrap;
   color: var(--white);
-  opacity: .5;
+  opacity: 0.5;
 }
 .ant-slider-handle {
   border-color: var(--blue);
@@ -441,15 +428,14 @@ textarea.ant-input {
   }
 }
 
-
 // ANT COLLAPSE
 .ant-collapse {
   font-size: 1em;
   border-color: transparent;
-  &> .ant-collapse-item,
+  & > .ant-collapse-item,
   .ant-collapse-content {
     border-color: transparent;
-    &> .ant-collapse-header {
+    & > .ant-collapse-header {
       border-radius: var(--container-border-radius);
       border-color: transparent;
       background-color: var(--purple-dark);
@@ -461,15 +447,14 @@ textarea.ant-input {
 .ant-collapse-content {
   background-color: var(--black-35); //#181231;
 }
-.ant-collapse > .ant-collapse-item:last-child, .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
+.ant-collapse > .ant-collapse-item:last-child,
+.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
   border-radius: var(--container-border-radius) var(--container-border-radius) 0 0;
 }
 .ant-collapse-item:last-child > .ant-collapse-content {
   border-radius: 0 0 var(--container-border-radius) var(--container-border-radius);
 }
 
-
-
 // ANT POPOVER
 .ant-popover-inner {
   background-color: var(--black);
@@ -477,14 +462,11 @@ textarea.ant-input {
 .ant-popover-message,
 .ant-popover-inner-content {
   color: var(--default-text-color);
-
 }
 .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow {
   border-color: var(--black);
 }
 
-
-
 // ANT TAGS
 .ant-tag-red,
 .ant-tag-orange,
@@ -493,7 +475,6 @@ textarea.ant-input {
   background-color: var(--black);
 }
 
-
 // ANT PAGINATOR
 .ant-pagination-item-active {
   color: var(--white);
@@ -503,16 +484,15 @@ textarea.ant-input {
     color: var(--white);
     &:hover {
       color: var(--white);
-      opacity: .75;
+      opacity: 0.75;
     }
   }
 }
 
-
 // ANT CHECKBOX
 .ant-checkbox-wrapper {
   color: var(--white-75);
-  margin: .5em 0;
+  margin: 0.5em 0;
 }
 .ant-checkbox-group {
   .ant-checkbox-group-item {
diff --git a/web/styles/config-public-details.scss b/web/styles/config-public-details.scss
index c97ad7e4d..c03d9a13b 100644
--- a/web/styles/config-public-details.scss
+++ b/web/styles/config-public-details.scss
@@ -48,7 +48,7 @@
   }
   .social-items-container {
     background-color: var(--container-bg-color-alt);
-    padding: 0 .75em;
+    padding: 0 0.75em;
     margin-left: 1em;
     max-width: 450px;
     .form-module {
@@ -72,5 +72,5 @@
 }
 
 .other-field-container {
-  margin: .5em 0;
+  margin: 0.5em 0;
 }
diff --git a/web/styles/config-socialhandles.scss b/web/styles/config-socialhandles.scss
index 188d0d92a..8e18128dd 100644
--- a/web/styles/config-socialhandles.scss
+++ b/web/styles/config-socialhandles.scss
@@ -8,7 +8,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    padding: .25em;
+    padding: 0.25em;
     line-height: normal;
 
     .option-icon {
@@ -33,7 +33,7 @@
       justify-content: flex-start;
       color: var(--white-75);
 
-      .option-icon {        
+      .option-icon {
         height: 2em;
         width: 2em;
         line-height: normal;
@@ -43,7 +43,7 @@
         flex-direction: column;
         margin: 0 0 0 1em;
         line-height: 2;
-        font-size: .85em;
+        font-size: 0.85em;
       }
     }
     .actions {
@@ -54,4 +54,4 @@
       width: 6em;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/web/styles/home.scss b/web/styles/home.scss
index dbb9f9643..19477b914 100644
--- a/web/styles/home.scss
+++ b/web/styles/home.scss
@@ -38,13 +38,12 @@
 
   .outbound-details,
   .inbound-details {
-    >.ant-card-bordered {
-      border-color: rgba(255,255,255,.1);
+    > .ant-card-bordered {
+      border-color: rgba(255, 255, 255, 0.1);
     }
   }
 }
 
-
 .offline-content {
   max-width: 1000px;
 
@@ -64,12 +63,12 @@
     background-color: var(--container-bg-color-alt);
     border-radius: var(--container-border-radius);
     padding: 1em;
-    
+
     > .ant-card {
       background-color: var(--black);
       margin-bottom: 1em;
       .ant-card-meta-avatar {
-        margin-top: .25rem;
+        margin-top: 0.25rem;
         svg {
           height: 1.5em;
           width: 1.5em;
diff --git a/web/styles/main-layout.scss b/web/styles/main-layout.scss
index a17425a3e..9878c4099 100644
--- a/web/styles/main-layout.scss
+++ b/web/styles/main-layout.scss
@@ -1,5 +1,4 @@
 .app-container {
-  
   .side-nav {
     position: fixed;
     height: 100vh;
@@ -21,7 +20,7 @@
 
     .logo-container {
       background-color: var(--white);
-      padding: .35rem;
+      padding: 0.35rem;
       border-radius: 9999px;
     }
 
@@ -33,7 +32,7 @@
       font-weight: 200;
       text-transform: uppercase;
       line-height: normal;
-      letter-spacing: .05em;
+      letter-spacing: 0.05em;
     }
   }
 
@@ -48,7 +47,6 @@
     background-color: var(--nav-bg-color);
   }
 
-
   .main-content-container {
     padding: 2em 3em 3em;
   }
@@ -57,8 +55,6 @@
     text-align: center;
   }
 
-
-
   .online-status-indicator {
     display: flex;
     flex-direction: row;
@@ -72,9 +68,9 @@
     .status-label {
       color: var(--white);
       text-transform: uppercase;
-      font-size: .75rem;
+      font-size: 0.75rem;
       display: inline-block;
-      margin-right: .5rem;
+      margin-right: 0.5rem;
       color: var(--offline-color);
     }
     .status-icon {
@@ -99,7 +95,6 @@
   }
 }
 
-
 // stream title form field in header
 .global-stream-title-container {
   display: flex;
@@ -149,10 +144,9 @@
       }
       .update-button-container {
         margin: 0;
-        margin-left: .5em;
+        margin-left: 0.5em;
         line-height: 1;
       }
-    } 
-  }  
+    }
+  }
 }
-