From 68c64221e1c3d24c3d66dce7e49c8e6deeef297c Mon Sep 17 00:00:00 2001
From: vignesh anand <vigneshanand17@gmail.com>
Date: Mon, 5 Jul 2021 14:59:43 +0530
Subject: [PATCH 1/3] Scrollbar navigation for years in graph view

---
 source/libs/components/filter/graph/graph.module.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/source/libs/components/filter/graph/graph.module.css b/source/libs/components/filter/graph/graph.module.css
index ae39408..aac498d 100644
--- a/source/libs/components/filter/graph/graph.module.css
+++ b/source/libs/components/filter/graph/graph.module.css
@@ -6,8 +6,14 @@
 
 .year__container {
   display: flex;
-  justify-content: flex-end;
+  align-self: flex-end;
+  width: 97%;
   max-height: 75px;
+  overflow-x: auto;
+}
+
+.year__container::-webkit-scrollbar {
+  display: none;
 }
 
 .year {

From 9e7435c6ed89904e7ebcc0b6582e0ab8742b801a Mon Sep 17 00:00:00 2001
From: vignesh anand <vigneshanand17@gmail.com>
Date: Mon, 5 Jul 2021 15:00:01 +0530
Subject: [PATCH 2/3] Fixed input month dark background color

---
 source/content.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/content.css b/source/content.css
index 2f786a9..28ea468 100644
--- a/source/content.css
+++ b/source/content.css
@@ -389,7 +389,7 @@ body {
   --vandal-modal-background-color: #f3f0ea;
 
   /* Input Calendar */
-  --vandal-input-months-background-color: #4d4c4c;
+  --vandal-input-months-background-color: #444;
 }
 
 .vandal,

From 80ff54901ba07831c4e46a665c26ff2ca0e58dc9 Mon Sep 17 00:00:00 2001
From: vignesh anand <vigneshanand17@gmail.com>
Date: Sun, 11 Jul 2021 08:46:58 +0530
Subject: [PATCH 3/3] Added scroll button

---
 source/libs/components/common/icon/index.js   |  2 +-
 .../components/filter/graph/graph.module.css  | 26 +++++++-
 source/libs/components/filter/graph/index.js  | 64 +++++++++++--------
 source/libs/components/frame/frame.module.css |  1 -
 4 files changed, 62 insertions(+), 31 deletions(-)

diff --git a/source/libs/components/common/icon/index.js b/source/libs/components/common/icon/index.js
index abc6bda..29899d1 100644
--- a/source/libs/components/common/icon/index.js
+++ b/source/libs/components/common/icon/index.js
@@ -155,7 +155,7 @@ const icons = {
     </svg>
   ),
   leftNav: ({ ...props }) => (
-    <svg viewBox="13 -1.7 68 107" {...props}>
+    <svg viewBox="13 -1.7 68 107" style={{ transform: "rotate(180deg)" }} {...props}>
       <title>{props.title}</title>
       <polygon points="40.6,70.6 37.9,67.7 56.3,50 37.9,32.3 40.6,29.4 62.1,50" />
     </svg>
diff --git a/source/libs/components/filter/graph/graph.module.css b/source/libs/components/filter/graph/graph.module.css
index aac498d..58816b4 100644
--- a/source/libs/components/filter/graph/graph.module.css
+++ b/source/libs/components/filter/graph/graph.module.css
@@ -5,14 +5,20 @@
 }
 
 .year__container {
+  position: relative;
   display: flex;
-  align-self: flex-end;
-  width: 97%;
+  justify-content: flex-end;
   max-height: 75px;
+}
+
+.scroll__wrapper {
+  display: flex;
+  width: 97%;
   overflow-x: auto;
+  scroll-behavior: smooth;
 }
 
-.year__container::-webkit-scrollbar {
+.scroll__wrapper::-webkit-scrollbar {
   display: none;
 }
 
@@ -210,3 +216,17 @@
   margin-top: 30px;
   background: none;
 }
+
+.left__scroll__button {
+  position: absolute;
+  left: 0;
+  width: 25px;
+  height: 100%;
+  background: #545454;
+  border: 0;
+  cursor: pointer;
+}
+
+.left__nav__icon {
+  fill: #fff;
+}
diff --git a/source/libs/components/filter/graph/index.js b/source/libs/components/filter/graph/index.js
index e31ad25..ed4efbd 100644
--- a/source/libs/components/filter/graph/index.js
+++ b/source/libs/components/filter/graph/index.js
@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React, { memo, useRef } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import _ from "lodash";
@@ -90,6 +90,7 @@ const GraphFilter = memo((props) => {
 
   let { sparkline } = props;
 
+  const scrollRef = useRef();
   const { theme } = useTheme();
 
   if (showSparkError || showCalendarError) {
@@ -150,32 +151,43 @@ const GraphFilter = memo((props) => {
   return (
     <div className={styles.root}>
       <div className={styles.year__container}>
-        {_.map(years, (y) => (
-          <div
-            role="button"
-            tabIndex={0}
-            className={cx({
-              [styles.year]: true,
-              [styles.year___selected]: theme !== "dark" && currentYear === y,
-              [styles.year___selected___dark]:
-                  theme === "dark" && currentYear === y
-            })}
-            key={`year-${y}`}
-            onClick={onYearChange(y)}
-          >
-            <span className={styles.year__value}>{y}</span>
-            <Spark
-              data={sparkline[y]}
-              margin={0}
-              width={48}
-              height={75}
-              min={0}
-              max={maxcount}
+        <button
+          type="button"
+          className={styles.left__scroll__button}
+          onClick={() => {
+            scrollRef.current.scrollLeft = 0;
+          }}
+        >
+          <Icon name="leftNav" className={styles.left__nav__icon} />
+        </button>
+        <div ref={scrollRef} className={styles.scroll__wrapper}>
+          {_.map(years, (y) => (
+            <div
+              role="button"
+              tabIndex={0}
+              className={cx({
+                [styles.year]: true,
+                [styles.year___selected]: theme !== "dark" && currentYear === y,
+                [styles.year___selected___dark]:
+                    theme === "dark" && currentYear === y
+              })}
+              key={`year-${y}`}
+              onClick={onYearChange(y)}
             >
-              <Bars theme={theme} />
-            </Spark>
-          </div>
-        ))}
+              <span className={styles.year__value}>{y}</span>
+              <Spark
+                data={sparkline[y]}
+                margin={0}
+                width={48}
+                height={75}
+                min={0}
+                max={maxcount}
+              >
+                <Bars theme={theme} />
+              </Spark>
+            </div>
+          ))}
+        </div>
       </div>
       {showCalendarLoader && !isOverCapacity && (
         <div className={styles.loader__container}>
diff --git a/source/libs/components/frame/frame.module.css b/source/libs/components/frame/frame.module.css
index 7becf43..c5bf459 100644
--- a/source/libs/components/frame/frame.module.css
+++ b/source/libs/components/frame/frame.module.css
@@ -202,7 +202,6 @@
 .backward__nav__icon {
   width: 24px;
   height: 37px;
-  transform: rotate(180deg);
   fill: var(--vandal-primary-icon-color);
   stroke: var(--vandal-primary-icon-color);
   stroke-width: 3px;