From 5df76d0b0b0c84c039759f858830986505d0fba5 Mon Sep 17 00:00:00 2001
From: Kostya Bats <kbats@bk.ru>
Date: Sat, 7 Dec 2024 17:58:42 +0300
Subject: [PATCH] Use different color for horizontal queue

---
 .github/workflows/test.yml                             |  2 +-
 .../overlay/src/components/organisms/widgets/Queue.tsx | 10 +++++-----
 src/frontend/overlay/src/config.ts                     |  1 +
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index c59e490ee..64db33e11 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -73,7 +73,7 @@ jobs:
           script: |
             const images_grid = '${{steps.pr_playwright-upload.outputs.pr_playwright_images}}'
               .split(',')
-              .map(i => '<img src="' + i.replace("https://i.ibb.co/", "https://kbats.ru/imgbb/") + '" width="400" />')
+              .map(i => '<img src="' + i + '" width="400" />') // .replace("https://i.ibb.co/", "https://kbats.ru/imgbb/")
               .join(' ');
 
             github.rest.issues.createComment({
diff --git a/src/frontend/overlay/src/components/organisms/widgets/Queue.tsx b/src/frontend/overlay/src/components/organisms/widgets/Queue.tsx
index cba6fa297..f25a4125e 100644
--- a/src/frontend/overlay/src/components/organisms/widgets/Queue.tsx
+++ b/src/frontend/overlay/src/components/organisms/widgets/Queue.tsx
@@ -381,7 +381,7 @@ const QueueScoreLabel = styled(ShrinkingBox)`
 const QueueProblemLabel = styled(ProblemLabel)`
   width: ${c.QUEUE_ROW_PROBLEM_LABEL_WIDTH}px;
   font-size: ${c.QUEUE_PROBLEM_LABEL_FONT_SIZE};
-  font-family: ${c.GLOBAL_DEFAULT_FONT_FAMILY};  
+  font-family: ${c.GLOBAL_DEFAULT_FONT_FAMILY};
   line-height: ${c.QUEUE_ROW_HEIGHT}px;
   flex-shrink: 0;
   background-image: ${({ isFts }) => isFts ? `url(${star})` : null};
@@ -427,11 +427,11 @@ export const QueueRow = ({ runInfo }) => {
     </StyledQueueRow>;
 };
 
-const QueueWrap = styled.div<{ hasFeatured: boolean }>`
+const QueueWrap = styled.div<{ hasFeatured: boolean; variant: "vertical" | "horizontal" }>`
   width: 100%;
   height: 100%;
   position: absolute;
-  background-color: ${c.QUEUE_BACKGROUND_COLOR};
+  background-color: ${({ variant }) => variant === "horizontal" ? c.QUEUE_HORIZONTAL_BACKGROUND_COLOR : c.QUEUE_BACKGROUND_COLOR};
   background-repeat: no-repeat;
   border-radius: ${c.GLOBAL_BORDER_RADIUS};
   border-top-right-radius: ${props => props.hasFeatured ? "0" : c.GLOBAL_BORDER_RADIUS};
@@ -458,7 +458,7 @@ const HorizontalRowsContainer = styled.div`
 const QueueHeader = styled.div`
   font-size: ${c.QUEUE_HEADER_FONT_SIZE};
   font-weight: ${c.GLOBAL_DEFAULT_FONT_WEIGHT_BOLD};
-  font-family: ${c.GLOBAL_DEFAULT_FONT_FAMILY};  
+  font-family: ${c.GLOBAL_DEFAULT_FONT_FAMILY};
   line-height: ${c.QUEUE_HEADER_LINE_HEIGHT};
   color: white;
   width: fit-content;
@@ -562,7 +562,7 @@ const QueueComponent = (VARIANT: "vertical" | "horizontal") => ({ location, shou
     return (
         <>
             <HorizontalFeatured runInfo={featured}/>
-            <QueueWrap hasFeatured={!!featured}>
+            <QueueWrap hasFeatured={!!featured} variant={VARIANT}>
                 <QueueHeader ref={(el) => (el != null) && setHeaderWidth(el.getBoundingClientRect().width)}>
                     <Title>
                         {c.QUEUE_TITLE}
diff --git a/src/frontend/overlay/src/config.ts b/src/frontend/overlay/src/config.ts
index a00765280..d89c5b230 100644
--- a/src/frontend/overlay/src/config.ts
+++ b/src/frontend/overlay/src/config.ts
@@ -127,6 +127,7 @@ config.QUEUE_HORIZONTAL_ROW_X_PADDING = config.QUEUE_WRAP_PADDING; // px
 config.QUEUE_OPACITY = 0.95;
 config.QUEUE_FEATURED_RUN_ASPECT = 16 / 9;
 config.QUEUE_BACKGROUND_COLOR = config.CONTEST_COLOR;
+config.QUEUE_HORIZONTAL_BACKGROUND_COLOR = config.QUEUE_BACKGROUND_COLOR;
 config.QUEUE_ROW_PROBLEM_LABEL_WIDTH = 28; // px
 config.QUEUE_HEADER_FONT_SIZE = "32px";
 config.QUEUE_HEADER_LINE_HEIGHT = "44px";