From 387ca17a59a515c659613e049ae9545c5273c02f Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Wed, 15 Mar 2023 14:38:16 +0700
Subject: [PATCH] updated account column

---
 src/components/columns/account/account.tsx | 15 +++------------
 src/components/columns/account/index.tsx   |  4 +---
 src/components/user/mini.tsx               |  2 +-
 3 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/src/components/columns/account/account.tsx b/src/components/columns/account/account.tsx
index 493e1d5d..22272863 100644
--- a/src/components/columns/account/account.tsx
+++ b/src/components/columns/account/account.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { memo } from 'react';
 
-export const Account = memo(function Account({ user, current }: { user: any; current: string }) {
+export const Account = memo(function Account({ user }: { user: any }) {
   const userData = JSON.parse(user.metadata);
 
   const setCurrentUser = () => {
@@ -9,17 +9,8 @@ export const Account = memo(function Account({ user, current }: { user: any; cur
   };
 
   return (
-    <button
-      onClick={() => setCurrentUser()}
-      className={`relative h-11 w-11 shrink overflow-hidden rounded-full ${
-        current === user.pubkey ? 'ring-1 ring-fuchsia-500 ring-offset-4 ring-offset-black' : ''
-      }`}
-    >
-      {userData?.picture !== undefined ? (
-        <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-full object-cover" />
-      ) : (
-        <div className="h-11 w-11 animate-pulse rounded-full bg-zinc-700" />
-      )}
+    <button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-full">
+      <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-full object-cover" />
     </button>
   );
 });
diff --git a/src/components/columns/account/index.tsx b/src/components/columns/account/index.tsx
index d7c5669d..0d52d63f 100644
--- a/src/components/columns/account/index.tsx
+++ b/src/components/columns/account/index.tsx
@@ -2,14 +2,12 @@ import { Account } from '@components/columns/account/account';
 
 import LumeSymbol from '@assets/icons/Lume';
 import { PlusIcon } from '@radix-ui/react-icons';
-import { useLocalStorage } from '@rehooks/local-storage';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import Database from 'tauri-plugin-sql-api';
 
 export default function AccountColumn() {
   const [users, setUsers] = useState([]);
-  const [currentUser]: any = useLocalStorage('current-user');
 
   const getAccounts = useCallback(async () => {
     const db = await Database.load('sqlite:lume.db');
@@ -26,7 +24,7 @@ export default function AccountColumn() {
     <div className="flex h-full flex-col items-center justify-between px-2 pt-4 pb-4">
       <div className="flex flex-col gap-4">
         {users.map((user, index) => (
-          <Account key={index} user={user} current={currentUser.id} />
+          <Account key={index} user={user} />
         ))}
         <Link
           href="/onboarding"
diff --git a/src/components/user/mini.tsx b/src/components/user/mini.tsx
index 824ea181..f211a060 100644
--- a/src/components/user/mini.tsx
+++ b/src/components/user/mini.tsx
@@ -53,7 +53,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
 
   return (
     <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
-      <div className="relative h-5 w-5">
+      <div className="relative h-5 w-5 rounded-full">
         {profile.picture ? (
           <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
         ) : (