From 03b16ac2363fb78a01d1b0bf95e0c857a78437f9 Mon Sep 17 00:00:00 2001
From: Lokesh Agarwal <lokesh@beingzero.in>
Date: Sat, 27 Jul 2024 15:22:20 +0530
Subject: [PATCH] added meaning of colors in the grid

---
 .../src/pages/TablePage/index.tsx             | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/atcoder-problems-frontend/src/pages/TablePage/index.tsx b/atcoder-problems-frontend/src/pages/TablePage/index.tsx
index e1c899941..3d369dab8 100644
--- a/atcoder-problems-frontend/src/pages/TablePage/index.tsx
+++ b/atcoder-problems-frontend/src/pages/TablePage/index.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from "react";
 import { List } from "immutable";
+import { Collapse, Button, CardBody, Card } from "reactstrap";
 import {
   useContests,
   useContestToMergedProblems,
@@ -33,6 +34,10 @@ interface OuterProps {
 }
 
 export const TablePage: React.FC<OuterProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = () => setIsOpen(!isOpen);
+
   const [activeTab, setActiveTab] = useLocalStorage<ContestCategory>(
     "contestTableTab",
     "ABC"
@@ -99,6 +104,48 @@ export const TablePage: React.FC<OuterProps> = (props) => {
 
   return (
     <div>
+      <Button color="primary" onClick={toggle} style={{ marginBottom: "1rem" }}>
+        Info
+      </Button>
+      <Collapse isOpen={isOpen}>
+        <Card>
+          <CardBody>
+            <p>
+              By Default, User ID takes the AtCoder User ID of the logged in
+              user. If the user is not logged in or we want to compare two
+              different users, then we can specify AtCoder User ID of a user and
+              a list of User IDs in Rivals.
+            </p>
+            <p>
+              After adding the User IDs, the grid below shows cells in 3
+              different colors.
+            </p>
+            <ol>
+              <li>Green</li>
+              <li>Yellow</li>
+              <li>Red</li>
+            </ol>
+            Lets say User ID of user = abcd, and User ID of Rivals = [acde,
+            tourist]
+            <ul>
+              <li>
+                A cell is colored Green when user with User ID = abcd has solved
+                that Problem
+              </li>
+              <li>
+                A cell is colored Red when user with User ID = abcd have not
+                solved the problem but the Rivals have solved the problem. could
+                not solve it and someone from the Rival list has solved that
+                problem.
+              </li>
+              <li>
+                A cell is colored Yello when the person with User ID = abcd has
+                tried but could not solve the problem
+              </li>
+            </ul>
+          </CardBody>
+        </Card>
+      </Collapse>
       <Options
         hideCompletedContest={hideCompletedContest}
         toggleHideCompletedContest={(): void =>