style + hover fix

Author: Stan-l-e-y

components/forms/MiniProfile.tsx

@@ -7,35 +7,45 @@ import UserIcon from '../icons/UserIcon';
 import { SearchBar } from './Styles';
 
 // TODO: Once DMs are implemented, this component will need to be updated to handle DMs as well.
-function WrappedComponent({ profile, server_user, roles }: { profile: User, server_user: ServerUser, roles: Role[] }) {
+function WrappedComponent({
+  profile,
+  server_user,
+  roles,
+}: {
+  profile: User;
+  server_user: ServerUser;
+  roles: Role[];
+}) {
   return (
     <div className="flex flex-col space-y-2 items-center p-3">
-      <UserIcon user={profile} className='!w-9 !h-9'/>
-      { server_user.nickname && <h2 className='text-lg'>
-        {server_user.nickname}
-      </h2> }
-      <h2 className={server_user.nickname ? 'text-base' : 'text-lg'}>{profile.username}</h2>
-      <hr/>
-      <h2 className='text-sm text-gray-400 text-left w-full'>Roles</h2>
-      <div className='flex flex-col w-full items-center space-y-1'>
-        { roles.map(role => (
+      <UserIcon user={profile} className="!w-9 !h-9" />
+      {server_user.nickname && (
+        <h2 className="text-lg">{server_user.nickname}</h2>
+      )}
+      <h2 className={server_user.nickname ? 'text-base' : 'text-lg'}>
+        {profile.username}
+      </h2>
+      <hr />
+      <h2 className="text-sm text-gray-400 text-left w-full">Roles</h2>
+      <div className="flex flex-col w-full items-center space-y-1">
+        {roles.map((role) => (
           <span
             key={role.id}
-            className='text-sm text-gray-400 py-1 px-2 border-2 border-solid w-full rounded-sm'
+            className="text-sm text-gray-400 py-1 px-2 border-2 border-solid w-full rounded-sm"
             style={{
               border: `1px solid #${!!role.color ? role.color : 'cacacacc'}`,
               color: `#${!!role.color ? role.color : 'cacacacc'}`,
             }}
           >
             {role.name}
           </span>
-        )) }
+        ))}
       </div>
-      <hr/>
+      <hr />
       <form>
         <input
           type="text"
-          className={`${SearchBar}`}
+          className={`${SearchBar('bg-grey-900')}`}
           placeholder={`Message @${profile.username}`}
         />
       </form>

components/forms/Styles.ts

@@ -17,9 +17,10 @@ ${bg}
 flex-1`;
 }
 
-export const SearchBar = `w-full
+export function SearchBar(bg = 'bg-grey-950 ') {
+  return `w-full
 py-2 
-pl-6
+pl-5
 self-start
 text-base
 font-normal
@@ -30,5 +31,6 @@ transition
 ease-in-out
 m-0
 focus:outline-none
-bg-grey-950
+${bg}
 flex-1`;
+}

components/home/MessageHeader.tsx

@@ -10,20 +10,30 @@ export function MessageHeader({
   message_color,
   display_time,
   edited,
-  roles
+  roles,
 }: {
-  profile: User,
-  server_user: ServerUser,
-  message_id: number,
-  message_color: string,
-  display_time: string,
-  edited: boolean,
-  roles: Role[],
+  profile: User;
+  server_user: ServerUser;
+  message_id: number;
+  message_color: string;
+  display_time: string;
+  edited: boolean;
+  roles: Role[];
 }) {
   return (
     <div className="flex-grow flex flex-row">
-      <Tooltip id={profile.id} className='z-20 !w-12' clickable noArrow>
-        <MiniProfile profile={profile} server_user={server_user} roles={roles} />
+      <Tooltip
+        id={profile.id}
+        className="z-20 !w-12 !opacity-100 "
+        style={{ backgroundColor: '#21282b', borderRadius: '0.5rem' }}
+        clickable
+        noArrow
+      >
+        <MiniProfile
+          profile={profile}
+          server_user={server_user}
+          roles={roles}
+        />
       </Tooltip>
       <UserIcon user={profile} />
       <div className="flex-grow flex items-center">
@@ -39,9 +49,7 @@ export function MessageHeader({
         </div>
         <div className="text-xs tracking-wider text-grey-300 mt-1">
           {display_time}{' '}
-          {edited && (
-            <span className="text-gray-400">(edited)</span>
-          )}
+          {edited && <span className="text-gray-400">(edited)</span>}
         </div>
       </div>
     </div>

components/home/RenderDesktopView.tsx

@@ -16,11 +16,11 @@ export default function RenderDesktopView() {
   const [sideBarView, mainView] = renderContent(sideBarOption, channel);
 
   return (
-    <div className={`${styles.container} `}>
+    <div className={`${styles.container}`}>
       <div className="col-start-1 col-end-2 bg-grey-950 flex-col justify-center ">
         <NavBar type="vertical" />
       </div>
-      <div className="col-start-2 col-end-4 flex-col bg-grey-900 ">
+      <div className="col-start-2 col-end-4 flex-col bg-grey-900 h-screen overflow-y-scroll overflow-x-hidden">
         {sideBarView}
       </div>
       <div className="col-start-4 col-end-13 flex flex-col h-screen">

components/home/ServerList.tsx

@@ -69,7 +69,7 @@ export default function ServerList() {
       <div className="pt-4 pb-4">
         <input
           type="text"
-          className={`${SearchBar}`}
+          className={`${SearchBar()}`}
           placeholder="Search"
         ></input>
       </div>