Merge pull request #2239 from HaudinFlorence/change_the_colors_of_the…

…_filtering_buttons Change the colors of the filter buttons and change the migration details bar (colors and tooltips)
conda-forge · Jul 26, 2024 · 8837337 · 8837337
2 parents 101c4ef + 1a45f8a
commit 8837337
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 59 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "react-dom": "^18.3.1",
     "react-inlinesvg": "^4.1.3",
     "react-markdown": "^9.0.1",
+    "react-tooltip": "^5.27.1",
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -38,7 +38,7 @@
   --ifm-color-success: #388e3c;
   --ifm-color-info: #1976d2;
   --ifm-color-warning: #ef6c00;
-  --ifm-color-danger: #d84315;
+  --ifm-color-danger: var(--ifm-color-danger-darkest);
   --ifm-code-font-size: 95%;
   --ifm-footer-link-hover-color: #4db6ac; /* Same as dark theme primary */
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
@@ -69,7 +69,7 @@
   --ifm-color-success: #81c784;
   --ifm-color-info: #64b5f6;
   --ifm-color-warning: #ffb74d;
-  --ifm-color-danger: #ff8a65;
+  --ifm-color-danger: var(--ifm-color-danger-light);
   --ifm-badge-color: var(--ifm-color-black);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   --gradient: linear-gradient(

diff --git a/src/pages/status/migration/index.jsx b/src/pages/status/migration/index.jsx
@@ -5,6 +5,7 @@ import Layout from "@theme/Layout";
 import React, { useEffect, useState } from "react";
 import SVG from 'react-inlinesvg';
 import styles from "./styles.module.css";
+import { Tooltip } from "react-tooltip";
 
 // { Done, In PR, Awaiting PR, Awaiting parents, Not solvable, Bot error }
 // The third value is a boolean representing the default display state on load
@@ -111,13 +112,24 @@ function Bar({ details }) {
     <>
       <h4>PRs made {details.progress.percentage.toFixed(0)}%</h4>
       <div className={styles.migration_details_bar}>
-        {ORDERED.filter(([key]) => details[key]?.length)
-          .map(([key], index) => (
-            <div
-              title={TITLES[key]}
-              className={styles[`${prefix}${key.replace("-", "_")}`]}
-              style={{ flex: details[key].length }} key={index}></div>
-          ))}
+        {ORDERED.filter(([key]) => details[key]?.length).map(([key], index) => (
+          <>
+          <a
+            id={`migration-bar-element-${key}`}
+            className={styles[`${prefix}${key.replace("-", "_")}`]}
+            style={{ flex: details[key].length }}
+            key={index}
+            alt={TITLES[key] + " " + parseFloat(details[key].length*100/measureProgress(details).total).toFixed(1) + "% (" + details[key].length+" PRs over "+measureProgress(details).total + ")"}
+          ></a>
+          <Tooltip
+            anchorSelect={`#migration-bar-element-${key}`}
+            place="top"
+            className={styles.migration_details_bar_tooltip}
+          >
+            <div>{TITLES[key]}</div>
+          </Tooltip>
+          </>
+        ))}
       </div>
     </>
   );
@@ -156,16 +168,26 @@ function Filters({ counts, filters, onFilter }) {
         return (
         <div
           className={[
+            "button",
             styles.migration_details_filter_button,
-            styles[base],
-            filters[key] && styles[`${base}_on`]
-          ].join(" ")}
+            filters[key] ? "button--secondary" : "button--primary"
+            ].join(" ")}
           key={index}
           onClick={() => onFilter(key)}>
           {filters[key] ?
-            <i className={`${icon} fa-solid fa-filter-circle-xmark`}></i> :
-            <i className={`${icon} fa-solid fa-filter`}></i>
-          } {title} ({counts[key]})
+            <span className={[
+              styles[`${base}_on`],
+              styles.migration_details_filter_dot_on
+            ].join(" ")}></span>
+            :
+            <span className={[
+              styles[base],
+              styles.migration_details_filter_dot].join(" ")}>
+            </span>
+          }
+          <div className={styles.migration_details_filter_title_container}>
+            {title} ({counts[key]})
+          </div>
         </div>);
       })}
     </div>

diff --git a/src/pages/status/migration/styles.module.css b/src/pages/status/migration/styles.module.css
@@ -20,19 +20,18 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: space-evenly;
-  text-align: center;
+  text-align: left;
 }
 
 .migration_details_filter_button {
-  background-color: inherit;
+  display: flex;
   border-radius: 25px;
   cursor: pointer;
   font-size: smaller;
   font-weight: 600;
   margin: 3px;
   margin-bottom: 10px;
-  width: 195px;
+  width: 200px;
   user-select: none;
   text-align: right;
   padding: 2px;
@@ -48,81 +47,59 @@
 .migration_details_filter_button:hover {
   text-decoration: underline;
 }
-/*
-  Filter buttons in order:
-  { Done, In PR, Awaiting PR, Awaiting parents, Not solvable, Bot error }
-*/
 
 .migration_details_filter_done {
-  background-color: rgb(60, 1, 74);
-  border: 3px solid rgb(60, 1, 74, 0.4);
-  color: var(--ifm-color-secondary);
+  background-color: var(--ifm-color-success);
 }
 
 .migration_details_filter_done_on {
-  background-color: rgb(60, 1, 74, 0.4);
-  border: 3px solid rgb(60, 1, 74);
-  color: var(--ifm-color-primary-darkest);
+  background-color: var(--ifm-color-success);
+  opacity: 0.6;
 }
 
 .migration_details_filter_in_pr {
-  background-color: rgb(43, 93, 131);
-  border: 3px solid rgb(43, 93, 131, 0.4);
-  color: var(--ifm-color-secondary);
+  background-color: var(--ifm-color-emphasis-400);
 }
 
 .migration_details_filter_in_pr_on {
-  background-color: rgb(43, 93, 131, 0.4);
-  border: 3px solid rgb(43, 93, 131);
-  color: var(--ifm-color-primary-dark);
+  background-color: var(--ifm-color-emphasis-400);
+  opacity: 0.6;
 }
 
 .migration_details_filter_awaiting_pr {
-  background-color: rgb(47, 174, 110);
-  border: 3px solid rgb(47, 174, 110, 0.4);
-  color: var(--ifm-color-secondary);
+  background-color: var(--ifm-color-emphasis-600);
 }
 
 .migration_details_filter_awaiting_pr_on {
-  background-color: rgb(47, 174, 110, 0.4);
-  border: 3px solid rgb(47, 174, 110);
-  color: var(--ifm-color-primary-dark);
+  background-color: var(--ifm-color-emphasis-600);
+  opacity: 0.6;
 }
 
 .migration_details_filter_awaiting_parents {
-  background-color: rgb(253, 227, 33);
-  border: 3px solid rgb(253, 227, 33, 0.9);
-  color: var(--ifm-color-primary-darker);
+  background-color: var(--ifm-color-emphasis-800);
 }
 
 .migration_details_filter_awaiting_parents_on {
-  background-color: rgb(253, 227, 33, 0.4);
-  border: 3px solid rgb(253, 227, 33);
-  color: var(--ifm-color-primary-darker);
+  background-color: var(--ifm-color-emphasis-800);
+  opacity: 0.6;
 }
 
 .migration_details_filter_not_solvable {
-  background-color: rgb(255, 129, 0);
-  border: 3px solid rgb(255, 129, 0, 0.4);
-  color: var(--ifm-color-secondary);
+  background-color: var(--ifm-color-warning);
 }
 
 .migration_details_filter_not_solvable_on {
-  background-color: rgb(255, 129, 0, 0.4);
-  border: 3px solid rgb(255, 129, 0);
-  color: var(--ifm-color-primary-dark);
+  background-color: var(--ifm-color-warning);
+  opacity: 0.6;
 }
 
 .migration_details_filter_bot_error {
-  background-color: rgb(242, 59, 47);
-  border: 3px solid rgb(242, 59, 47, 0.4);
-  color: var(--ifm-color-secondary);
+  background-color: var(--ifm-color-danger);
 }
 
 .migration_details_filter_bot_error_on {
-  background-color: rgb(242, 59, 47, 0.4);
-  border: 3px solid rgb(242, 59, 47);
-  color: var(--ifm-color-primary-dark);
+  background-color: var(--ifm-color-danger);
+  opacity: 0.6;
 }
 
 .migration_details_filter_icon {
@@ -177,3 +154,37 @@
   font-size: smaller;
   content: " ▿";
 }
+
+.migration_details_bar .migration_details_bar_tooltip {
+  color: var(--ifm-color-emphasis-100);
+  background-color: var(--ifm-color-emphasis-900);
+}
+
+.migration_details_filter_dot {
+  display: flex;
+  position: relative;
+  border: solid 2px var(--ifm-button-color);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  position: relative;
+  left: 8px;
+  top: 2px;
+}
+
+.migration_details_filter_dot_on {
+  display: flex;
+  position: relative;
+  border: solid 2px red;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  left: 8px;
+  top: 2px;
+}
+
+.migration_details_filter_title_container {
+  display: inline;
+  position: relative;
+  left: 14px;
+}