Use different color for horizontal queue

icpc · Dec 7, 2024 · 86c8b25 · 86c8b25
1 parent 6574f50
commit 86c8b25
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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";