feat: split refresh button with dropdown for hard refresh (argoproj#25445)

Signed-off-by: choejwoo <jaewoo45@gmail.com>

Author: choejwoo

ui/src/app/applications/components/application-details/application-details.scss

@@ -158,6 +158,28 @@ $header: 120px;
         }
     }
 
+    .argo-button:has(.application-details__dropdown-anchor-inner):hover .application-details__dropdown-anchor-inner {
+        background-color: $argo-color-gray-5;
+    }
+
+    &__dropdown-anchor-inner {
+        cursor: pointer;
+        border-radius: 0px 24px 24px 0px;
+        border-left: 1px solid #ccc;
+        justify-content: center;
+        position: absolute;
+        margin-left: 5px;
+        right: -10px;
+        top: 0;
+        bottom: 0;
+        width: 24px;
+        transition: background-color 0.2s;
+
+        &:hover {
+            background-color: $argo-color-gray-4 !important;
+        }
+    }
+
     .argo-table-list__row {
         .columns.small-1.xxxlarge-1 {
             width: 60px;

ui/src/app/applications/components/application-details/application-details.tsx

@@ -1214,7 +1214,11 @@ Are you sure you want to disable auto-sync and rollback application '${props.mat
                                         action: () => !refreshing && services.applications.get(app.metadata.name, app.metadata.namespace, 'hard')
                                     }
                                 ]}
-                                anchor={() => <i className='fa fa-caret-down' />}
+                                anchor={() => (
+                                    <button className='argo-button--base application-details__dropdown-anchor-inner'>
+                                        <i className='fa fa-caret-down' />
+                                    </button>
+                                )}
                             />
                         </React.Fragment>
                     ),