From 6973c3d8df2d47ce296bbfb512a1849edaf9832c Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 14 Mar 2023 21:34:24 -0700
Subject: [PATCH] Update styling of video settings admin page. Closes #2803

---
 web/components/admin/VideoLatency.tsx             | 6 +++---
 web/pages/admin/config-video.tsx                  | 2 +-
 web/public/styles/admin/config-video-variants.css | 8 ++++++++
 web/public/styles/admin/home.css                  | 2 +-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/web/components/admin/VideoLatency.tsx b/web/components/admin/VideoLatency.tsx
index 6564823ce..27a99ea89 100644
--- a/web/components/admin/VideoLatency.tsx
+++ b/web/components/admin/VideoLatency.tsx
@@ -20,9 +20,9 @@ const { Title } = Typography;
 
 const SLIDER_MARKS = {
   0: 'Lowest',
-  1: '',
-  2: '',
-  3: '',
+  1: ' ',
+  2: ' ',
+  3: ' ',
   4: 'Highest',
 };
 
diff --git a/web/pages/admin/config-video.tsx b/web/pages/admin/config-video.tsx
index b0cafd1cd..eb1319e0a 100644
--- a/web/pages/admin/config-video.tsx
+++ b/web/pages/admin/config-video.tsx
@@ -27,7 +27,7 @@ export default function ConfigVideoSettings() {
         qualities.
       </p>
 
-      <Row gutter={[16, 16]}>
+      <Row gutter={[45, 16]}>
         <Col md={24} lg={12}>
           <div className="form-module variants-table-module">
             <CurrentVariantsTable />
diff --git a/web/public/styles/admin/config-video-variants.css b/web/public/styles/admin/config-video-variants.css
index f1fc50eb6..d3647ff11 100644
--- a/web/public/styles/admin/config-video-variants.css
+++ b/web/public/styles/admin/config-video-variants.css
@@ -67,3 +67,11 @@
 .video-varient-alert-button-container {
   width: 100vh;
 }
+
+.config-video-latency-container .segment-slider-container .ant-slider-mark-text:first-of-type {
+	margin-left: 20px;
+}
+
+.config-video-latency-container .segment-slider-container .ant-slider-mark-text:last-of-type {
+	left: 95% !important;
+}
diff --git a/web/public/styles/admin/home.css b/web/public/styles/admin/home.css
index 319c2882f..9b8e2f4de 100644
--- a/web/public/styles/admin/home.css
+++ b/web/public/styles/admin/home.css
@@ -105,7 +105,7 @@
 
 .ant-collapse > .ant-collapse-item:last-child,
 .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
-  background-color: var(--theme-color-palette-3);
+  background-color: var(--theme-color-palette-5);
   border-radius: var(--theme-rounded-corners);
 }