fix: only allow action bar button when at least one account is selected

devhatt · Sep 10, 2024 · 9ca6afc · 9ca6afc
1 parent 19a8e0f
commit 9ca6afc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git 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
@@ -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>