Make quick ui updates

CONTRIBUTING.md

@@ -28,7 +28,7 @@ To get started with this project, follow these steps:
 3. Install the dependencies by running `npm install`.
 4. Create a new branch for your changes by running `git checkout -b my-new-branch`.
 5. Create a new Firebase project and enable Google authentication. (See [this guide](https://firebase.google.com/docs/web/setup) to get started with Firebase.)
-6. Change `.env.example` to `.env` and fill in the required values from your Firebase project.
+6. Copy `.env.example` to `.env` and fill in the required values from your Firebase project.
 7. Start the development server by running `npm start`.
 8. Push your changes to your fork.
 9. Submit a pull request to the original repository.

src/components/Sidebar.tsx

@@ -44,7 +44,7 @@ const Sidebar = () => {
               <div
                 className={cn(
                   "absolute left-0 top-1/2 w-1 -translate-y-1/2 rounded-r-full bg-secondary transition-all group-hover:h-8",
-                  isActive(href) ? "h-6" : "h-0",
+                  isActive(href) ? "h-6" : "h-2",
                 )}
               />
               <Link
@@ -65,7 +65,8 @@ const Sidebar = () => {
             </li>
           ))}
         </ul>
-        <ul className="mt-auto flex w-full flex-col items-center justify-center gap-2 border-t border-dark-300 pt-8">
+        <ul className="mt-auto flex w-full flex-col items-center justify-center gap-2 px-1 pt-8">
+          <hr className="w-full border border-dark-400" />
           {authStatus === AuthStatus.SignedIn && (
             <li className="group relative flex h-12 w-12 items-center justify-center rounded-full bg-dark-700">
               <UserButton />
@@ -77,13 +78,15 @@ const Sidebar = () => {
               />
             </li>
           )}
-          <li className="flex items-center justify-center rounded-full border border-gray-600 p-2">
-            <button onClick={onSignOut}>
-              <span className="sr-only">Sign Out</span>
-              <BiLogOutCircle size={30} />
-            </button>
-          </li>
         </ul>
+        <button
+          onClick={onSignOut}
+          className="group relative mt-2 flex items-center justify-center rounded-full p-2 hover:text-red-600"
+        >
+          <span className="sr-only">Sign Out</span>
+          <BiLogOutCircle size={30} />
+          <Tooltip text="Sign Out" position="right" variant="light" size="lg" />
+        </button>
       </div>
     </aside>
   );

src/features/Channels/utils.ts

@@ -66,7 +66,7 @@ export const leaveChannel = async (channel: Channel, userId: string) => {
   }
 
   if (channel.type === "static" || channel.type === "announcement") {
-    throw new Error("All members must be in this channel.");
+    throw new Error("All users must be in this channel.");
   }
 
   const newChannel = validateChannel({

src/features/Chat/ChannelList.tsx

@@ -41,7 +41,7 @@ const ChannelList = ({ heading, channels }: Props) => {
               `cursor-pointer rounded transition-all hover:bg-gray-400/10 hover:text-white`,
               pathname === href(id)
                 ? "bg-gray-400/10 text-white"
-                : "text-gray-300",
+                : "text-gray-400",
             )}
           >
             <Link to={href(id)} className="flex items-center gap-3 p-2">

src/features/Chat/Sidebar.tsx

@@ -69,8 +69,8 @@ const Sidebar = () => {
           placeholder="Browse channels"
         />
       </div>
-      <ChannelList heading="Welcome 👋" channels={staticChannels} />
-      <ChannelList heading="My Channels" channels={joinedChannels} />
+      <ChannelList heading="👋 Welcome" channels={staticChannels} />
+      <ChannelList heading="🚀 My Channels" channels={joinedChannels} />
     </aside>
   );
 };

src/lib/constants.ts

@@ -1,11 +1,11 @@
-import { FaCog, FaHashtag, FaRegCompass } from "react-icons/fa";
+import { FaRegCompass } from "react-icons/fa";
 import {
   HiHashtag,
   HiLockClosed,
   HiOutlineChat,
   HiSpeakerphone,
 } from "react-icons/hi";
-import { HiMiniChatBubbleLeftRight } from "react-icons/hi2";
+import { HiMiniChatBubbleLeftRight, HiCog6Tooth } from "react-icons/hi2";
 
 import {
   bandit,
@@ -37,12 +37,12 @@ export const NavLinks = [
   {
     href: "/channels",
     label: "Channels",
-    icon: FaHashtag,
+    icon: HiHashtag,
   },
   {
     href: "/settings",
     label: "Settings",
-    icon: FaCog,
+    icon: HiCog6Tooth,
   },
 ];
 

src/lib/firestore-utils.ts

@@ -1,6 +1,6 @@
-import { doc, getDoc, limit, query, where } from "firebase/firestore";
+import { and, doc, getDoc, limit, or, query, where } from "firebase/firestore";
 
-import { usersRef } from "./firebase";
+import { channelsRef, usersRef } from "./firebase";
 
 import type { CollectionReference, DocumentData } from "firebase/firestore";
 import type { Channel, User } from "../schema";
@@ -17,6 +17,21 @@ export const getDocIfExists = async (ref: CollectionReference, id: string) => {
 export const queryUserById = (id: string) =>
   query(usersRef, where("id", "==", id), limit(1));
 
+export const queryUserChannels = (userId: string) =>
+  query(
+    channelsRef,
+    or(
+      where("type", "!=", "private"),
+      where("members", "array-contains", userId),
+    ),
+  );
+
+export const queryUnjoinedChannels = (userId: string) =>
+  query(
+    channelsRef,
+    and(where("type", "!=", "private"), where(userId, "not-in", "members")),
+  );
+
 export const mapDocToUser = (docData: DocumentData): User => {
   return {
     id: docData.id,

src/pages/Profile.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react';
+import { useState } from "react";
 
-import ChangeAvatar from '../features/User/ChangeAvatar';
-import { selectUser } from '../features/User/userSlice';
-import { avatars } from '../lib/constants';
-import { useAppSelector } from '../lib/store';
+import ChangeAvatar from "../features/User/ChangeAvatar";
+import { selectUser } from "../features/User/userSlice";
+import { avatars } from "../lib/constants";
+import { useAppSelector } from "../lib/store";
 
 const Profile = () => {
   const currentUser = useAppSelector(selectUser);
@@ -18,13 +18,13 @@ const Profile = () => {
         <header className="overflow-hidden rounded-md bg-indigo-500 lg:rounded-xl">
           <div className="h-40" />
           <div className="relative flex items-center justify-between bg-dark-700 p-2">
-            <div className="flex items-center">
-              <img
-                src={avatars[currentUser?.avatarId ?? 0]}
-                alt=""
-                className="h-24 w-24 rounded-full border border-white bg-dark-700 p-2"
-              />
-              <h2 className="ml-4 text-2xl font-bold">{currentUser?.name}</h2>
+            <img
+              src={avatars[currentUser?.avatarId ?? 0]}
+              alt={currentUser?.name}
+              className="absolute -top-10 h-24 w-24 rounded-full border border-white bg-dark-700 p-2"
+            />
+            <div className="ml-24 flex items-center p-4">
+              <h2 className="text-2xl font-bold">{currentUser?.name}</h2>
             </div>
             <button
               type="button"
@@ -56,9 +56,11 @@ const Profile = () => {
           </div>
           <div className="flex items-center justify-between p-1">
             <div className="flex flex-col gap-1">
-              <h4 className="text-lg font-semibold">Bio</h4>
+              <h4 className="text-lg font-semibold">About Me</h4>
               <p className="text-sm text-gray-400">
-                {currentUser?.bio ?? "No information yet"}
+                {currentUser?.bio.length === 0
+                  ? "No information yet"
+                  : currentUser?.bio}
               </p>
             </div>
           </div>

src/styles/index.css

@@ -48,7 +48,7 @@ html {
   }
 
   .btn {
-    @apply inline-block appearance-none rounded-md bg-blue-500 px-4 py-2 text-center font-medium text-white focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500;
+    @apply inline-block appearance-none rounded-md bg-primary px-4 py-2 text-center font-medium text-white focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary;
   }
 }