From 8f0bbb79a7739ef020104c8161b6f32069887c5b Mon Sep 17 00:00:00 2001
From: Bruno D'Luka <45696119+bdlukaa@users.noreply.github.com>
Date: Mon, 23 Aug 2021 21:04:21 -0300
Subject: [PATCH 1/2] Update scrollbar style

- Transparent background color
- Updated hovering thickness
- Updated cross axis margin
---
 lib/src/controls/utils/scrollbar.dart | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/lib/src/controls/utils/scrollbar.dart b/lib/src/controls/utils/scrollbar.dart
index 5ea771ace..7106d0fec 100644
--- a/lib/src/controls/utils/scrollbar.dart
+++ b/lib/src/controls/utils/scrollbar.dart
@@ -76,8 +76,7 @@ class _ScrollbarState extends RawScrollbarState<Scrollbar> {
   }
 
   Color _trackColor(ButtonStates state) {
-    if (state == ButtonStates.none) return Colors.transparent;
-    return _scrollbarTheme.backgroundColor ?? Colors.transparent;
+    return Colors.transparent;
   }
 
   Color _thumbColor(ButtonStates state) {
@@ -341,16 +340,16 @@ class ScrollbarThemeData with Diagnosticable {
           ? const Color(0xFF5d5d5d)
           : const Color(0xFFa4a4a4),
       thickness: 2.0,
-      hoveringThickness: 16.0,
+      hoveringThickness: 6.0,
       backgroundColor: brightness.isLight
           ? const Color(0xFFe9e9e9)
           : const Color(0xFF1b1b1b),
       radius: const Radius.circular(100.0),
-      hoveringRadius: const Radius.circular(0.0),
-      crossAxisMargin: 2.0,
-      hoveringCrossAxisMargin: 0.0,
+      hoveringRadius: const Radius.circular(100.0),
+      crossAxisMargin: 4.0,
+      hoveringCrossAxisMargin: 4.0,
       mainAxisMargin: 2.0,
-      hoveringMainAxisMargin: 0.0,
+      hoveringMainAxisMargin: 2.0,
       minThumbLength: 48.0,
       trackBorderColor: Colors.transparent,
       hoveringTrackBorderColor: Colors.transparent,

From d3ef734bd7172a8d70fba17efc4857573211b186 Mon Sep 17 00:00:00 2001
From: Bruno D'Luka <45696119+bdlukaa@users.noreply.github.com>
Date: Mon, 23 Aug 2021 21:10:29 -0300
Subject: [PATCH 2/2] Update documentation

---
 CHANGELOG.md | 1 +
 README.md    | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 82225a2c3..a6d145d01 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ Date format: DD/MM/YYYY
 - Updated Acrylic to support the web
 - Update `Checkbox` design
 - Update `ToggleSwitch` design
+- Update `Scrollbar` design
 
 ## [2.2.1] - [26/06/2021]
 
diff --git a/README.md b/README.md
index 92c66dc09..0634819d1 100644
--- a/README.md
+++ b/README.md
@@ -1298,11 +1298,14 @@ A scrollbar thumb indicates which portion of a [ScrollView] is actually visible.
 
 Depending on the situation, the scrollbar uses two different visualizations, shown in the following illustration: the panning indicator (left) and the traditional scrollbar (right).
 
-![Scrollbar Preview](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/scrollbar.png)
+> Note that the arrows aren't visible. See [this](https://github.com/flutter/flutter/issues/80370) and [this](https://github.com/bdlukaa/fluent_ui/issues/14) issues for more info.
+
+![Scrollbar Panning Indicator](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/scrollbar-panning.png)
+![Traditional Scrollbar](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/scrollbar-traditional.png)
 
 > When the scrollbar is visible it is overlaid as 16px on top of the content inside your ScrollView. In order to ensure good UX design you will want to ensure that no interactive content is obscured by this overlay. Additionally if you would prefer not to have UX overlap, leave 16px of padding on the edge of the viewport to allow for the scrollbar.
 
-### Example
+Here's an example of how to add a scrollbar to a ScrollView:
 
 ```dart
 final _controller = ScrollController();
@@ -1326,8 +1329,6 @@ Which produces the following:
 
 You can change the `isAlwaysVisible` property to either enable or disable the fade effect. It's disabled by default.
 
-> Note: Currently, the leading and trailing arrows are not implemented. See [this issue](https://github.com/bdlukaa/fluent_ui/issues/14) to learn more
-
 ## List Tile
 
 You can use a `ListTile` in a `ListView`.