From 717ca9b16ebb76df8853cf001de5bd74abc53bf4 Mon Sep 17 00:00:00 2001
From: Sarmishta Velury <isc-svelury@users.noreply.github.com>
Date: Fri, 5 Nov 2021 09:51:54 -0400
Subject: [PATCH 1/4] Refresh button added to Remote Branches section that
 prunes refs to deleted remote branches.

---
 .../share/git-webui/webui/css/git-webui.css     |  4 ++--
 .../share/git-webui/webui/js/git-webui.js       | 17 +++++++++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/git-webui/release/share/git-webui/webui/css/git-webui.css b/git-webui/release/share/git-webui/webui/css/git-webui.css
index 3953233e..04f0d592 100644
--- a/git-webui/release/share/git-webui/webui/css/git-webui.css
+++ b/git-webui/release/share/git-webui/webui/css/git-webui.css
@@ -78,7 +78,7 @@ body {
   flex-direction: column;
   -webkit-flex-direction: column;
   padding: 0 0.5% 0 0.5%;
-  width: 17em;
+  width: 18em;
   background-color: #333333;
 }
 #sidebar #sidebar-logo {
@@ -214,7 +214,7 @@ body {
   border-radius: .2rem;
 }
 
-.btn-add {
+.btn-sidebar-icon {
   padding: 0% 0% 2% 5%;
 }
 
diff --git a/git-webui/release/share/git-webui/webui/js/git-webui.js b/git-webui/release/share/git-webui/webui/js/git-webui.js
index 62b16f86..3f20368e 100644
--- a/git-webui/release/share/git-webui/webui/js/git-webui.js
+++ b/git-webui/release/share/git-webui/webui/js/git-webui.js
@@ -370,14 +370,20 @@ webui.SideBarView = function(mainView) {
                                 '</section>' +
                                 '<section id="sidebar-local-branches">' +
                                     '<h4 class="mt-3">Local Branches' +
-                                    '<button type="button" class="btn btn-default btn-add" >' +
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-add" >' +
                                         '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#eee" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">'+
                                             '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>'+
                                         '</svg>'+
                                     '</button>' + '</h4>' +
                                 '</section>' +
                                 '<section id="sidebar-remote-branches">' +
-                                    '<h4 class="mt-3">Remote Branches</h4>' +
+                                    '<h4 class="mt-3">Remote Branches' +
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches" >'+
+                                        '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#eee" class="bi bi-arrow-repeat" viewBox="0 0 16 16">'+
+                                        '<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>'+
+                                        '<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>'+
+                                        '</svg>'+
+                                      '</button>' +'</h4>' +
                                 '</section>' +
                                 '<section id="sidebar-tags">' +
                                     '<h4>Tags</h4>' +
@@ -1839,6 +1845,13 @@ $(function()
         webui.git("checkout -b " + $('#newBranchName').val());
         updateSideBar();
     });
+
+    $(document).on('click', '.btn-sidebar-icon', function(e){
+        e.preventDefault();
+        webui.git("fetch --prune", function() {
+            updateSideBar();
+        });
+    })
 });
 
 $(function () {

From 401780a543deee1350ff95665aa6e349c6fadca0 Mon Sep 17 00:00:00 2001
From: Sarmishta Velury <isc-svelury@users.noreply.github.com>
Date: Fri, 5 Nov 2021 09:52:47 -0400
Subject: [PATCH 2/4] Propagated changes to src/

---
 .../src/share/git-webui/webui/js/git-webui.js   | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/git-webui/src/share/git-webui/webui/js/git-webui.js b/git-webui/src/share/git-webui/webui/js/git-webui.js
index 62b16f86..3f20368e 100644
--- a/git-webui/src/share/git-webui/webui/js/git-webui.js
+++ b/git-webui/src/share/git-webui/webui/js/git-webui.js
@@ -370,14 +370,20 @@ webui.SideBarView = function(mainView) {
                                 '</section>' +
                                 '<section id="sidebar-local-branches">' +
                                     '<h4 class="mt-3">Local Branches' +
-                                    '<button type="button" class="btn btn-default btn-add" >' +
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-add" >' +
                                         '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#eee" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">'+
                                             '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>'+
                                         '</svg>'+
                                     '</button>' + '</h4>' +
                                 '</section>' +
                                 '<section id="sidebar-remote-branches">' +
-                                    '<h4 class="mt-3">Remote Branches</h4>' +
+                                    '<h4 class="mt-3">Remote Branches' +
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches" >'+
+                                        '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#eee" class="bi bi-arrow-repeat" viewBox="0 0 16 16">'+
+                                        '<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>'+
+                                        '<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>'+
+                                        '</svg>'+
+                                      '</button>' +'</h4>' +
                                 '</section>' +
                                 '<section id="sidebar-tags">' +
                                     '<h4>Tags</h4>' +
@@ -1839,6 +1845,13 @@ $(function()
         webui.git("checkout -b " + $('#newBranchName').val());
         updateSideBar();
     });
+
+    $(document).on('click', '.btn-sidebar-icon', function(e){
+        e.preventDefault();
+        webui.git("fetch --prune", function() {
+            updateSideBar();
+        });
+    })
 });
 
 $(function () {

From 6a05628a594ca200ec68fae18df089109b642b91 Mon Sep 17 00:00:00 2001
From: Sarmishta Velury <isc-svelury@users.noreply.github.com>
Date: Fri, 5 Nov 2021 12:06:24 -0400
Subject: [PATCH 3/4] Ported over css changes to git-webui.less

---
 .../share/git-webui/webui/css/git-webui.css   | 174 ++++++++----------
 .../share/git-webui/webui/css/git-webui.less  | 119 ++++++++++--
 2 files changed, 184 insertions(+), 109 deletions(-)

diff --git a/git-webui/release/share/git-webui/webui/css/git-webui.css b/git-webui/release/share/git-webui/webui/css/git-webui.css
index 04f0d592..336a4024 100644
--- a/git-webui/release/share/git-webui/webui/css/git-webui.css
+++ b/git-webui/release/share/git-webui/webui/css/git-webui.css
@@ -31,28 +31,66 @@ body {
   margin: 0;
   font: 10pt sans-serif;
 }
-
-#confirm-branch-delete p{
-  font-size:105%;
+#confirm-branch-delete p {
+  font-size: 105%;
 }
-
-#confirm-delete, #cancel-delete, #confirm-force-delete {
+#confirm-delete,
+#cancel-delete,
+#confirm-force-delete {
   margin-left: 1rem;
   margin-top: 0.5rem;
 }
-
-.modal-title pre{
-  display:inline;
-}
-#error-modal .modal-body {
-  margin-bottom: 0;
+.modal-title pre {
+  display: inline;
 }
 .modal-header .close {
   padding: 1.25rem 1.5rem;
   margin: -1rem -1rem -1rem auto;
 }
-.alert-dismissible .close {
-  padding: .3rem 1.25rem;
+#newBranchName {
+  background-color: inherit;
+  max-width: 12em;
+  color: inherit;
+  overflow: hidden;
+  margin: 0 3% 0 12%;
+}
+.form-control-xs {
+  height: calc(1em + 0.375rem + 2px) !important;
+  padding: 0.125rem 0.25rem !important;
+  font-size: 0.75rem !important;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+}
+.btn-refresh {
+  color: #B39D5C;
+  background-color: #fff3cd;
+  border: solid 1px;
+  border-color: #B39D5C;
+  margin-left: 0.5%;
+}
+.btn-xxs {
+  height: calc(1.2em + 0.175rem + 2px) !important;
+  padding: 0.2rem 0.1rem !important;
+  font-size: 0.7rem !important;
+  line-height: 1;
+  border-radius: 0.2rem;
+}
+.btn-xs {
+  height: calc(1.5em + 0.375rem + 2px) !important;
+  padding: 0.125rem 0.25rem !important;
+  font-size: 0.75rem !important;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+}
+.btn-sidebar-icon {
+  padding: 0% 0% 2% 5%;
+}
+.btn-ok {
+  float: right;
+  margin-top: -3%;
+}
+#error-modal .modal-body {
+  margin-bottom: 0;
 }
 #help-modal img {
   display: block;
@@ -62,6 +100,9 @@ body {
 #message-box .alert {
   margin: 0;
 }
+#message-box .alert-dismissible .close {
+  padding: 0.3rem 1.25rem;
+}
 #global-container {
   display: flex;
   display: -webkit-flex;
@@ -77,9 +118,9 @@ body {
   min-width: 0;
   flex-direction: column;
   -webkit-flex-direction: column;
+  background-color: #333333;
   padding: 0 0.5% 0 0.5%;
   width: 18em;
-  background-color: #333333;
 }
 #sidebar #sidebar-logo {
   display: block;
@@ -115,33 +156,6 @@ body {
   cursor: pointer;
   padding: 10px 0;
 }
-#sidebar-switch-branches > h4 a {
-  color: inherit;
-}
-
-.custom-card, .card {
-  background-color:inherit !important;
-  color: inherit !important;
-  padding-bottom:1%;
-  margin: 0%;
-  border: none;
-}
-
-.card-header {
-  padding: 1% 2% 0% 14%;
-  background-color: inherit !important;
-  color: inherit !important;
-  border:none;
-}
-
-.btn-branch {
-  background-color: inherit !important;
-  color: inherit !important;
-  padding: 0%;
-  margin: 0%;
-  border: none;
-}
-
 #sidebar #sidebar-content #sidebar-workspace h4:before {
   content: url(../img/computer.svg);
 }
@@ -174,55 +188,30 @@ body {
 #sidebar #sidebar-content .active {
   background-color: #0d6efd;
 }
-#newBranchName {
-  background-color: inherit;
-  max-width: 12em;
+#sidebar #sidebar-switch-branches > h4 a {
   color: inherit;
-  overflow: hidden;
-  margin: 0 3% 0 12%
-}
-
-.form-control-xs {
-  height: calc(1em + .375rem + 2px) !important;
-  padding: .125rem .25rem !important;
-  font-size: .75rem !important;
-  line-height: 1.5;
-  border-radius: .2rem;
-}
-
-.btn-refresh {
-  color: #B39D5C;
-  background-color: #fff3cd;
-  border: solid 1px;
-  border-color: #B39D5C;
-  margin-left: 0.5%;
 }
-
-.btn-xxs {
-  height: calc(1.2em + .175rem + 2px) !important;
-  padding: .2rem .1rem !important;
-  font-size: .7rem !important;
-  line-height: 1;
-  border-radius: .2rem;
-}
-
-.btn-xs {
-  height: calc(1.5em + .375rem + 2px) !important;
-  padding: .125rem .25rem !important;
-  font-size: .75rem !important;
-  line-height: 1.5;
-  border-radius: .2rem;
+#sidebar .custom-card,
+#sidebar .card {
+  background-color: inherit !important;
+  color: inherit !important;
+  padding-bottom: 1%;
+  margin: 0%;
+  border: none;
 }
-
-.btn-sidebar-icon {
-  padding: 0% 0% 2% 5%;
+#sidebar .card-header {
+  padding: 1% 2% 0% 14%;
+  background-color: inherit !important;
+  color: inherit !important;
+  border: none;
 }
-
-.btn-ok {
-  float: right;
-  margin-top:-3%
+#sidebar .btn-branch {
+  background-color: inherit !important;
+  color: inherit !important;
+  padding: 0%;
+  margin: 0%;
+  border: none;
 }
-
 #main-view {
   display: flex;
   display: -webkit-flex;
@@ -277,11 +266,11 @@ body {
   border-top-width: 0;
 }
 #log-view .log-entry:hover {
-  background-color: rgba(244, 244, 244, 0.9);
+  background-color: rgba(219 / 0.9, 219 / 0.9, 219 / 0.9, 0.9);
 }
 #log-view .log-entry.active {
-  background-color: rgba(2, 82, 202, 0.9);
-  color:#ffffff;
+  background-color: rgba(13, 110, 253, 0.9) !important;
+  color: #ffffff;
 }
 #log-view .log-entry.active header h6 a {
   color: #ffffff;
@@ -388,8 +377,6 @@ body {
   border-left: 0;
   border-right: 0;
   white-space: nowrap;
-}
-.list-group-item{
   border-radius: 0;
 }
 .diff-view-container {
@@ -404,13 +391,10 @@ body {
   border: 0;
   margin: 0;
 }
-.panel-heading {
-  border-bottom: 1px solid #dddddd !important;
-}
 .diff-view-container .panel-heading {
   margin: 0;
   padding: 5px 16px;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid #dddddd !important;
   display: flex;
   display: -webkit-flex;
   min-height: 0;
@@ -667,8 +651,8 @@ body {
   padding: 5px 10px;
   border-left: 0;
   border-right: 0;
-  border-radius: 0;
   white-space: nowrap;
+  border-radius: 0;
 }
 #workspace-view #workspace-editor #working-copy-view .file-list-container .list-group .list-group-item.available,
 #commit-explorer-view #workspace-editor #working-copy-view .file-list-container .list-group .list-group-item.available,
diff --git a/git-webui/src/share/git-webui/webui/css/git-webui.less b/git-webui/src/share/git-webui/webui/css/git-webui.less
index 67dbbaad..37a072fe 100644
--- a/git-webui/src/share/git-webui/webui/css/git-webui.less
+++ b/git-webui/src/share/git-webui/webui/css/git-webui.less
@@ -28,11 +28,11 @@
 @padding-xs-horizontal: 5px;
 @padding-base-horizontal: 12px;
 @padding-base-vertical: 6px;
-@brand-primary: #428bca;
+@brand-primary: #0d6efd;
 @gray-dark: #333333;
 @gray-lighter: #eeeeee;
 @gray: #555555;
-@list-group-hover-bg: #f5f5f5;
+@list-group-hover-bg: #f4f4f4;
 @component-active-color: #ffffff;
 @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 
@@ -89,6 +89,73 @@ body {
     font: 10pt sans-serif;
 }
 
+#confirm-branch-delete p{
+    font-size:105%;
+}
+
+#confirm-delete, #cancel-delete, #confirm-force-delete {
+    margin-left: 1rem;
+    margin-top: 0.5rem;
+}
+
+.modal-title pre{
+    display:inline;
+}
+
+.modal-header .close {
+    padding: 1.25rem 1.5rem;
+    margin: -1rem -1rem -1rem auto;
+}
+
+#newBranchName {
+    background-color: inherit;
+    max-width: 12em;
+    color: inherit;
+    overflow: hidden;
+    margin: 0 3% 0 12%
+}
+  
+.form-control-xs {
+    height: calc(1em + .375rem + 2px) !important;
+    padding: .125rem .25rem !important;
+    font-size: .75rem !important;
+    line-height: 1.5;
+    border-radius: .2rem;
+}
+  
+.btn-refresh {
+    color: #B39D5C;
+    background-color: #fff3cd;
+    border: solid 1px;
+    border-color: #B39D5C;
+    margin-left: 0.5%;
+}
+  
+.btn-xxs {
+    height: calc(1.2em + .175rem + 2px) !important;
+    padding: .2rem .1rem !important;
+    font-size: .7rem !important;
+    line-height: 1;
+    border-radius: .2rem;
+}
+  
+.btn-xs {
+    height: calc(1.5em + .375rem + 2px) !important;
+    padding: .125rem .25rem !important;
+    font-size: .75rem !important;
+    line-height: 1.5;
+    border-radius: .2rem;
+}
+  
+.btn-sidebar-icon {
+    padding: 0% 0% 2% 5%;
+}
+  
+.btn-ok {
+    float: right;
+    margin-top:-3%
+}
+  
 #error-modal {
 
     .modal-body {
@@ -110,6 +177,9 @@ body {
     .alert {
         margin: 0;
     }
+    .alert-dismissible .close {
+        padding: .3rem 1.25rem;
+      }
 }
 
 #global-container {
@@ -120,8 +190,9 @@ body {
 #sidebar {
     .display-flex();
     .flex-direction(column);
-    width: 14em;
     background-color: @gray-dark;
+    padding: 0 0.5% 0 0.5%;
+    width: 18em;
 
     #sidebar-logo {
         display: block;
@@ -172,7 +243,7 @@ body {
             content: url(../img/daemon.svg);
         }
 
-        #sidebar-local-branches, #sidebar-remote-branches {
+        #sidebar-local-branches, #sidebar-remote-branches, #sidebar-switch-branches {
             h4:before {
                 content: url(../img/branch.svg);
             }
@@ -205,11 +276,31 @@ body {
         }
     }
 
-    .modal-dialog {
-
-        .list-group-item {
-            border: 0;
-        }
+    #sidebar-switch-branches > h4 a {
+        color: inherit;
+    }
+      
+    .custom-card, .card {
+        background-color:inherit !important;
+        color: inherit !important;
+        padding-bottom:1%;
+        margin: 0%;
+        border: none;
+    }
+    
+    .card-header {
+        padding: 1% 2% 0% 14%;
+        background-color: inherit !important;
+        color: inherit !important;
+        border:none;
+    }
+    
+    .btn-branch {
+        background-color: inherit !important;
+        color: inherit !important;
+        padding: 0%;
+        margin: 0%;
+        border: none;
     }
 }
 
@@ -271,10 +362,8 @@ body {
         }
 
         &.active {
-            background-color: rgba((  red(@brand-primary) - 25) / @log-view-opacity,
-                                   (green(@brand-primary) - 25) / @log-view-opacity,
-                                   ( blue(@brand-primary) - 25) / @log-view-opacity,
-                                   @log-view-opacity);
+            background-color: rgba(red(@brand-primary), green(@brand-primary), blue(@brand-primary), @log-view-opacity) !important;
+            color: @component-active-color;
 
             header h6 a {
                 color: @component-active-color;
@@ -372,6 +461,7 @@ body {
                 border-left: 0;
                 border-right: 0;
                 white-space: nowrap;
+                border-radius: 0;
             }
         }
     }
@@ -387,7 +477,7 @@ body {
     .panel-heading {
         margin: 0;
         padding: @padding-small-vertical @padding-large-horizontal;
-        border-bottom: 1px solid #dddddd;
+        border-bottom: 1px solid #dddddd !important;
         .display-flex();
 
         .btn-group {
@@ -583,6 +673,7 @@ body {
                         border-left: 0;
                         border-right: 0;
                         white-space: nowrap;
+                        border-radius: 0;
                     }
 
                     .list-group-item.available {

From a12c14d5c261a74b56e88d65c63c17148a4ed710 Mon Sep 17 00:00:00 2001
From: Sarmishta Velury <isc-svelury@users.noreply.github.com>
Date: Fri, 5 Nov 2021 15:20:05 -0400
Subject: [PATCH 4/4] Refresh button now rotates and provides some feedback to
 the user when pruning branches

---
 .../share/git-webui/webui/css/git-webui.css   | 17 ++++++++++++++++-
 .../share/git-webui/webui/js/git-webui.js     |  8 +++++---
 .../share/git-webui/webui/css/git-webui.less  | 19 ++++++++++++++++++-
 .../src/share/git-webui/webui/js/git-webui.js |  8 +++++---
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/git-webui/release/share/git-webui/webui/css/git-webui.css b/git-webui/release/share/git-webui/webui/css/git-webui.css
index 336a4024..d87b63f8 100644
--- a/git-webui/release/share/git-webui/webui/css/git-webui.css
+++ b/git-webui/release/share/git-webui/webui/css/git-webui.css
@@ -16,6 +16,21 @@
 /*
  * Modifications Copyright (C) 2021 InterSystems Corporation
  */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.refresh-start {
+  animation-name: rotate;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-play-state: running;
+}
 html,
 body {
   height: 100%;
@@ -83,7 +98,7 @@ body {
   border-radius: 0.2rem;
 }
 .btn-sidebar-icon {
-  padding: 0% 0% 2% 5%;
+  padding: 2% 5%;
 }
 .btn-ok {
   float: right;
diff --git a/git-webui/release/share/git-webui/webui/js/git-webui.js b/git-webui/release/share/git-webui/webui/js/git-webui.js
index 3f20368e..4257c2b5 100644
--- a/git-webui/release/share/git-webui/webui/js/git-webui.js
+++ b/git-webui/release/share/git-webui/webui/js/git-webui.js
@@ -370,7 +370,7 @@ webui.SideBarView = function(mainView) {
                                 '</section>' +
                                 '<section id="sidebar-local-branches">' +
                                     '<h4 class="mt-3">Local Branches' +
-                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-add" >' +
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-add shadow-none" >' +
                                         '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#eee" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">'+
                                             '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>'+
                                         '</svg>'+
@@ -378,7 +378,7 @@ webui.SideBarView = function(mainView) {
                                 '</section>' +
                                 '<section id="sidebar-remote-branches">' +
                                     '<h4 class="mt-3">Remote Branches' +
-                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches" >'+
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches shadow-none" >'+
                                         '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#eee" class="bi bi-arrow-repeat" viewBox="0 0 16 16">'+
                                         '<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>'+
                                         '<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>'+
@@ -1846,8 +1846,10 @@ $(function()
         updateSideBar();
     });
 
-    $(document).on('click', '.btn-sidebar-icon', function(e){
+    $(document).on('click', '.btn-prune-remote-branches', function(e){
         e.preventDefault();
+        $(".btn-prune-remote-branches").addClass("refresh-start");
+
         webui.git("fetch --prune", function() {
             updateSideBar();
         });
diff --git a/git-webui/src/share/git-webui/webui/css/git-webui.less b/git-webui/src/share/git-webui/webui/css/git-webui.less
index 37a072fe..5089b488 100644
--- a/git-webui/src/share/git-webui/webui/css/git-webui.less
+++ b/git-webui/src/share/git-webui/webui/css/git-webui.less
@@ -55,6 +55,23 @@
     user-select: none;
 }
 
+@keyframes rotate {
+
+    from {transform: rotate(0deg)}
+    to {transform: rotate(360deg)}
+    
+}    
+    
+.refresh-start {
+    
+    animation-name: rotate;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-play-state: running;
+    
+}
+
 .display-flex() {
     display: flex;
     display: -webkit-flex;
@@ -148,7 +165,7 @@ body {
 }
   
 .btn-sidebar-icon {
-    padding: 0% 0% 2% 5%;
+    padding: 2% 5%;
 }
   
 .btn-ok {
diff --git a/git-webui/src/share/git-webui/webui/js/git-webui.js b/git-webui/src/share/git-webui/webui/js/git-webui.js
index 3f20368e..4257c2b5 100644
--- a/git-webui/src/share/git-webui/webui/js/git-webui.js
+++ b/git-webui/src/share/git-webui/webui/js/git-webui.js
@@ -370,7 +370,7 @@ webui.SideBarView = function(mainView) {
                                 '</section>' +
                                 '<section id="sidebar-local-branches">' +
                                     '<h4 class="mt-3">Local Branches' +
-                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-add" >' +
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-add shadow-none" >' +
                                         '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#eee" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">'+
                                             '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>'+
                                         '</svg>'+
@@ -378,7 +378,7 @@ webui.SideBarView = function(mainView) {
                                 '</section>' +
                                 '<section id="sidebar-remote-branches">' +
                                     '<h4 class="mt-3">Remote Branches' +
-                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches" >'+
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches shadow-none" >'+
                                         '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#eee" class="bi bi-arrow-repeat" viewBox="0 0 16 16">'+
                                         '<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>'+
                                         '<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>'+
@@ -1846,8 +1846,10 @@ $(function()
         updateSideBar();
     });
 
-    $(document).on('click', '.btn-sidebar-icon', function(e){
+    $(document).on('click', '.btn-prune-remote-branches', function(e){
         e.preventDefault();
+        $(".btn-prune-remote-branches").addClass("refresh-start");
+
         webui.git("fetch --prune", function() {
             updateSideBar();
         });