Run prettier

2 files changed, 14 insertions, 13 deletions

diff --git a/src/components/rules/RuleProviderItem.module.scss b/src/components/rules/RuleProviderItem.module.scss
index 532ec8a..c3e1f07 100644
--- a/src/components/rules/RuleProviderItem.module.scss
+++ b/src/components/rules/RuleProviderItem.module.scss
@@ -13,6 +13,7 @@
 
 .middle {
   display: grid;
+  gap: 6px;
   grid-template-rows: 1fr auto auto;
   align-items: center;
 }
@@ -21,13 +22,13 @@
   color: #777;
 }
 
-.refreshButtonWrapper {
+.action {
   display: grid;
-  place-items: center;
-  opacity: 0;
-  transition: opacity 0.2s;
+  gap: 4px;
+  grid-template-columns: auto 1fr;
+  align-items: center;
 }
 
-.RuleProviderItem:hover .refreshButtonWrapper {
-  opacity: 1;
+.refreshBtn {
+  padding: 5px;
 }
diff --git a/src/components/rules/RuleProviderItem.tsx b/src/components/rules/RuleProviderItem.tsx
index fc88ae1..c27e464 100644
--- a/src/components/rules/RuleProviderItem.tsx
+++ b/src/components/rules/RuleProviderItem.tsx
@@ -24,14 +24,14 @@ export function RuleProviderItem({
       <div className={s.middle}>
         <SectionNameType name={name} type={`${vehicleType} / ${behavior}`} />
         <div className={s.gray}>{ruleCount < 2 ? `${ruleCount} rule` : `${ruleCount} rules`}</div>
-        <small className={s.gray}>Updated {timeAgo} ago</small>
+        <div className={s.action}>
+          <Button onClick={onClickRefreshButton} disabled={isRefreshing} className={s.refreshBtn}>
+            <RotateIcon isRotating={isRefreshing} size={13} />
+            <span className="visually-hidden">Refresh</span>
+          </Button>
+          <small className={s.gray}>Updated {timeAgo} ago</small>
+        </div>
       </div>
-      <span className={s.refreshButtonWrapper}>
-        <Button onClick={onClickRefreshButton} disabled={isRefreshing} kind="circular">
-          <RotateIcon isRotating={isRefreshing} />
-          <span className="visually-hidden">Refresh</span>
-        </Button>
-      </span>
     </div>
   );
 }