From 9ca6afc48725407ca872cb662712d5dd6ef82a15 Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.felipeszsv@gmail.com>
Date: Tue, 10 Sep 2024 16:41:59 -0300
Subject: [PATCH] fix: only allow action bar button when at least one account
 is selected

---
 .../components/ActionBar/ActionBar.module.scss    | 10 +++++++---
 src/pages/home/components/ActionBar/ActionBar.tsx | 15 +++++++++++----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/pages/home/components/ActionBar/ActionBar.module.scss b/src/pages/home/components/ActionBar/ActionBar.module.scss
index 53cd01d1e..903f1aecd 100644
--- a/src/pages/home/components/ActionBar/ActionBar.module.scss
+++ b/src/pages/home/components/ActionBar/ActionBar.module.scss
@@ -33,15 +33,19 @@
 
     justify-content: center;
 
-    background-color: $secondaryPurple;
+    background: $secondaryPurple;
 
     border-radius: 50%;
 
-    .arrowIcon {
-      color: $primaryWhite;
+    &:disabled {
+      background: #1d1b201f;
     }
   }
 
+  .arrowIcon {
+    color: $primaryWhite;
+  }
+
   .submit {
     max-width: max-content;
 
diff --git a/src/pages/home/components/ActionBar/ActionBar.tsx b/src/pages/home/components/ActionBar/ActionBar.tsx
index 5a8b5ddcd..8d7d24d86 100644
--- a/src/pages/home/components/ActionBar/ActionBar.tsx
+++ b/src/pages/home/components/ActionBar/ActionBar.tsx
@@ -1,21 +1,28 @@
 import { ReactNode } from 'react';
 
+import { useAccountStore } from '~stores/useAccountStore/useAccountStore';
+
 import Button from '~components/Button/Button';
 import Icon from '~components/Icon/Icon';
 
 import scss from './ActionBar.module.scss';
 
 function ActionBar(): ReactNode {
+  const { accounts } = useAccountStore();
+
   return (
     <div className={scss.container}>
       <div className={scss.composeContainer}>
         <Icon className={scss.closeIcon} icon="close" size={14} />
         <p className={scss.composeLabel}>Compose</p>
       </div>
-      <button className={scss.navigationIconContainer}>
-        <Icon className={scss.arrowIcon} icon="arrow-right" size={12} />
-      </button>
-
+      <Button
+        circle
+        className={scss.navigationIconContainer}
+        color="secondary"
+        disabled={accounts.length === 0}
+        icon={<Icon className={scss.arrowIcon} icon="arrow-right" size={12} />}
+      />
       <Button className={scss.submit} variant="container">
         Postar
       </Button>