From 4bda230e46a09a76789c00fb3c72d73a8a5edcfe Mon Sep 17 00:00:00 2001
From: Rajas Patil <rajasp98@gmail.com>
Date: Fri, 23 Aug 2024 18:14:03 -0400
Subject: [PATCH 1/2] Fixed issue: [UI] Add a message for violated rules #13

---
 src/App.css         | 13 +++++++++++++
 src/ui/headerBar.js | 10 +++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 15adfdc..6a8874e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -22,3 +22,16 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.headerDiv {
+  display: flex;
+  align-items: center;
+}
+
+.infoIcon {
+  margin-left: 10px;
+  position: relative;
+  top: 6px;
+  left: -5px;
+}
+
diff --git a/src/ui/headerBar.js b/src/ui/headerBar.js
index 64e7c4d..f64b3bb 100644
--- a/src/ui/headerBar.js
+++ b/src/ui/headerBar.js
@@ -11,7 +11,8 @@ import {connect} from "react-redux";
 import {GoAlert} from "react-icons/go";
 import {webSocketSendMessage} from "../core/coreConstants";
 import {hashConst} from "./uiConstants";
-
+import {FaInfoCircle} from "react-icons/fa";
+import ReactTooltip from "react-tooltip";
 export class HeaderBar extends Component {
     render() {
         return (
@@ -22,6 +23,8 @@ export class HeaderBar extends Component {
                 )}
                 <div className="headerDiv">
                     {this.renderHeader()}
+                    <ReactTooltip place="top" type="dark" effect="float" />
+                    <FaInfoCircle className="infoIcon" data-tip={this.props.tooltip} />
                 </div>
             </div>
         );
@@ -126,6 +129,7 @@ function mapStateToProps(state) {
         tag: "",
         title: "",
         content: "",
+        tooltip: "",
     };
 
     switch (state.currentHash[0]) {
@@ -140,6 +144,7 @@ function mapStateToProps(state) {
             break;
         case hashConst.rules:
             props.title = "All Rules";
+            props.tooltip = "View and manage all documentation rules.";
             break;
         case hashConst.tagJsonChanged:
             props.title = "tagTable.json is changed.";
@@ -149,9 +154,11 @@ function mapStateToProps(state) {
             break;
         case hashConst.index:
             props.title = "Active Documentation";
+            props.tooltip = "View the main index of the Active Documentation.";
             break;
         case hashConst.violatedRules:
             props.title = "Violated Rules";
+            props.tooltip = "Review all rules that have been violated.";
             break;
         case hashConst.rulesForFile:
             props.content = state.openFilePath.replace(state.projectPath, "");
@@ -162,6 +169,7 @@ function mapStateToProps(state) {
             break;
         case hashConst.learnDesignRules:
             props.title = "Learn Design Rules";
+            props.tooltip="Explore and learn about design rules.";
             break;
         default:
             props.content = "Error no page is found for: " + state.currentHash[0];

From c6478412f9ac2c85da427c8bcc05d0966c6c59ae Mon Sep 17 00:00:00 2001
From: Rajas Patil <rajasp98@gmail.com>
Date: Mon, 9 Sep 2024 10:49:10 -0400
Subject: [PATCH 2/2] Moved css for tooltip from App.css to index.css. Added a
 line after imports in headerBar.js for readability.

---
 src/App.css         | 12 ------------
 src/index.css       | 14 +++++++++++---
 src/ui/headerBar.js |  1 +
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/App.css b/src/App.css
index 6a8874e..b9f06de 100644
--- a/src/App.css
+++ b/src/App.css
@@ -23,15 +23,3 @@
   to { transform: rotate(360deg); }
 }
 
-.headerDiv {
-  display: flex;
-  align-items: center;
-}
-
-.infoIcon {
-  margin-left: 10px;
-  position: relative;
-  top: 6px;
-  left: -5px;
-}
-
diff --git a/src/index.css b/src/index.css
index 4f180d9..a0df80e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -204,11 +204,12 @@ body {
 }
 
 /*** HeaderBar ***/
-
 .headerDiv {
     padding-bottom: 10px;
     padding-top: 20px;
-    border-bottom: 3px double #bdbdbd
+    border-bottom: 3px double #bdbdbd;
+    display: flex;
+    align-items: center;
 }
 
 .text-24 {
@@ -234,6 +235,13 @@ body {
     color: #5d5d5d;
 }
 
+.infoIcon {
+    margin-left: 10px;
+    position: relative;
+    top: 6px;
+    left: -5px;
+}
+
 /*!*** Auto Complete ***!*/
 
 .monacoWrapper {
@@ -1041,4 +1049,4 @@ img.tutorialSmallImage {
 .minedRulesComponent .identifierContainer .identifierHeader {
     width: 100%;
     margin: auto;
-}
\ No newline at end of file
+}
diff --git a/src/ui/headerBar.js b/src/ui/headerBar.js
index f64b3bb..0dc0c6d 100644
--- a/src/ui/headerBar.js
+++ b/src/ui/headerBar.js
@@ -13,6 +13,7 @@ import {webSocketSendMessage} from "../core/coreConstants";
 import {hashConst} from "./uiConstants";
 import {FaInfoCircle} from "react-icons/fa";
 import ReactTooltip from "react-tooltip";
+
 export class HeaderBar extends Component {
     render() {
         return (