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 1/3] 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>

From 0d93ee3b50362b8d648497635b5b67e92c493af1 Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.felipeszsv@gmail.com>
Date: Tue, 10 Sep 2024 22:03:19 -0300
Subject: [PATCH 2/3] fix: action bar styles

---
 .../home/components/ActionBar/ActionBar.module.scss | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/components/ActionBar/ActionBar.module.scss b/src/pages/home/components/ActionBar/ActionBar.module.scss
index 903f1aecd..cc97171d4 100644
--- a/src/pages/home/components/ActionBar/ActionBar.module.scss
+++ b/src/pages/home/components/ActionBar/ActionBar.module.scss
@@ -9,7 +9,7 @@
 
   justify-content: space-between;
 
-  padding: 1.1rem;
+  padding: 0.8rem;
   border-bottom: 1px solid $secondaryGray;
 
   .composeContainer {
@@ -18,8 +18,17 @@
 
     align-items: center;
 
+    padding-left: 1.2rem;
+
+    .closeIcon {
+      color: $tertiaryGray;
+    }
+
     .composeLabel {
       font-size: 1.6rem;
+
+      margin: 0;
+      padding: 0;
     }
   }
 
@@ -33,7 +42,7 @@
 
     justify-content: center;
 
-    background: $secondaryPurple;
+    background-color: $secondaryPurple;
 
     border-radius: 50%;
 

From ce426ebeb209f8d824265c06e605ec62f1756e8f Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.felipeszsv@gmail.com>
Date: Mon, 16 Sep 2024 17:28:07 -0300
Subject: [PATCH 3/3] fix: cr issues

---
 src/pages/home/components/ActionBar/ActionBar.module.scss | 4 +++-
 src/pages/home/components/ActionBar/ActionBar.tsx         | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/components/ActionBar/ActionBar.module.scss b/src/pages/home/components/ActionBar/ActionBar.module.scss
index cc97171d4..0f72fad74 100644
--- a/src/pages/home/components/ActionBar/ActionBar.module.scss
+++ b/src/pages/home/components/ActionBar/ActionBar.module.scss
@@ -47,7 +47,9 @@
     border-radius: 50%;
 
     &:disabled {
-      background: #1d1b201f;
+      background-color: rgba($color: $secondaryGray, $alpha: 0.12);
+
+      cursor: not-allowed;
     }
   }
 
diff --git a/src/pages/home/components/ActionBar/ActionBar.tsx b/src/pages/home/components/ActionBar/ActionBar.tsx
index 8d7d24d86..53f898dad 100644
--- a/src/pages/home/components/ActionBar/ActionBar.tsx
+++ b/src/pages/home/components/ActionBar/ActionBar.tsx
@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 
+import isEmpty from 'lodash.isempty';
+
 import { useAccountStore } from '~stores/useAccountStore/useAccountStore';
 
 import Button from '~components/Button/Button';
@@ -20,7 +22,7 @@ function ActionBar(): ReactNode {
         circle
         className={scss.navigationIconContainer}
         color="secondary"
-        disabled={accounts.length === 0}
+        disabled={isEmpty(accounts.length)}
         icon={<Icon className={scss.arrowIcon} icon="arrow-right" size={12} />}
       />
       <Button className={scss.submit} variant="container">