feat(web-devtools): tooltip-for-different-sections

Author: tractorss

web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx

@@ -77,7 +77,7 @@ const ChangeDeveloper: React.FC = () => {
   );
   return (
     <Container>
-      <Header text="Developer" />
+      <Header text="Developer" tooltipMsg="Address of the current ruler of the selected arbitrable" />
       <InputContainer>
         <StyledLabel>Current Developer : {currentDeveloper ?? "None"}</StyledLabel>
         <LabeledInput

web-devtools/src/app/(main)/ruler/Header.tsx

@@ -1,11 +1,25 @@
 import React from "react";
 import styled from "styled-components";
+import WithHelpTooltip from "components/WithHelpTooltip";
 
-const Container = styled.h2`
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
   border-bottom: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
   padding: 8px 0px;
 `;
 
-const Header: React.FC<{ text: string }> = ({ text }) => <Container>{text}</Container>;
+const Title = styled.h2`
+  margin: 0;
+`;
+
+const Header: React.FC<{ text: string; tooltipMsg: string }> = ({ text, tooltipMsg }) => (
+  <Container>
+    <WithHelpTooltip tooltipMsg={tooltipMsg} place="right">
+      <Title>{text}</Title>
+    </WithHelpTooltip>
+  </Container>
+);
 
 export default Header;

web-devtools/src/app/(main)/ruler/ManualRuling.tsx

@@ -102,7 +102,10 @@ const ManualRuling: React.FC = () => {
 
   return (
     <Container>
-      <Header text="Manual Ruling" />
+      <Header
+        text="Manual Ruling"
+        tooltipMsg="Provide Manual ruling for the arbitrator. This operation will change the ruling mode to Manual, if the ruling mode is not Manual"
+      />
       <SelectContainer>
         <LabeledInput
           label="Dispute ID"

web-devtools/src/app/(main)/ruler/RulingModes.tsx

@@ -212,7 +212,10 @@ const RulingModes: React.FC = () => {
 
   return (
     <Container>
-      <Header text="Ruling Mode" />
+      <Header
+        text="Ruling Mode"
+        tooltipMsg="Current Ruling mode of the arbitrator. Learn more about ruling modes here."
+      />
       <StyledLabel>
         Current mode: <small>{getRulingModeText(arbitrableSettings?.rulingMode)}</small>
       </StyledLabel>

web-devtools/src/assets/svgs/icons/help.svg

@@ -0,0 +1,46 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { Tooltip } from "@kleros/ui-components-library";
+
+import _HelpIcon from "svgs/icons/help.svg";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const HelpIcon = styled(_HelpIcon)`
+  display: flex;
+  align-items: center;
+  height: 12px;
+  width: 12px;
+  fill: ${({ theme }) => theme.klerosUIComponentsSecondaryText};
+  margin: 0 0 0 8px;
+
+  ${landscapeStyle(
+    () => css`
+      height: 14px;
+      width: 14px;
+    `
+  )}
+`;
+
+interface IWithHelpTooltip {
+  tooltipMsg: string;
+  place?: "bottom" | "left" | "right" | "top";
+  children?: React.ReactNode;
+}
+
+const WithHelpTooltip: React.FC<IWithHelpTooltip> = ({ tooltipMsg, children, place }) => (
+  <Container>
+    {children}
+    <Tooltip small text={tooltipMsg} {...{ place }}>
+      <HelpIcon />
+    </Tooltip>
+  </Container>
+);
+
+export default WithHelpTooltip;