fix: 🐛 fix some styling issues

activecourses · Nov 11, 2024 · 939fba2 · 939fba2
1 parent ecbebe3
commit 939fba2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/apps/web/src/components/layouts/servers.tsx b/apps/web/src/components/layouts/servers.tsx
@@ -112,15 +112,15 @@ export const Servers = () => {
     // Listen for route changes and update state accordingly
 
     return (
-        <div className="flex overflow-hidden">
+        <>
             <Channels server={server} user={user} />
             {isChannel ? (
                 <Chat />
             ) : (
-                <p className="hidden w-full items-center justify-center bg-mainBlackHover md:flex">
+                <p className="hidden w-full items-center justify-center bg-zinc-600/50 md:flex">
                     Please Select A Channel To Continue
                 </p>
             )}
-        </div>
+        </>
     );
 };
diff --git a/apps/web/src/components/servers-layout/channel-bar.tsx b/apps/web/src/components/servers-layout/channel-bar.tsx
@@ -18,7 +18,7 @@ export const ChannelBar: FC<ChannelBarProps> = ({ setIsExpanded }) => {
     const serverId = 1;
     const { openNavs } = useResponsive();
     return (
-        <div className="custom-scrollbar flex h-[56px] w-full items-center justify-between gap-[8px] overflow-x-auto border-b-[#000] border-b-[1px] border-b-solid px-[16px]">
+        <div className="custom-scrollbar flex h-12 w-full items-center justify-between gap-[8px] overflow-x-auto border-b-[#000] border-b-[1px] border-b-solid px-[16px] py-3">
             <div className="flex items-center gap-[8px]">
                 <Link
                     to={`/app/channels/${String(serverId)}`}

diff --git a/apps/web/src/components/servers-layout/channels.tsx b/apps/web/src/components/servers-layout/channels.tsx
@@ -1,6 +1,6 @@
-import { isBasePath } from "@/lib/utils";
+// import { isBasePath } from "@/lib/utils";
 import { ChannelsProps } from "@/types/servers";
-import { useRouterState } from "@tanstack/react-router";
+// import { useRouterState } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 import React, { FC, useState } from "react";
 import { DiscordToggleDown } from "../svgs/discord-toggle-down";
@@ -14,21 +14,21 @@ import { ChannelItem } from "./channel-item";
 
 export const Channels: FC<ChannelsProps> = ({ server, user }) => {
     const { name, channels } = server;
-    const isBase = isBasePath(
-        "/app/channels/$serverId/$channelId",
-        useRouterState().location.pathname,
-    );
+    // const isBase = isBasePath(
+    //     "/app/channels/$serverId/$channelId",
+    //     useRouterState().location.pathname,
+    // );
 
     const [isUserHovered, setIsUserHovered] = useState(false);
     const [isMuted, setIsMuted] = useState(false);
     const [isDeafened, setIsDeafened] = useState(false);
 
     return (
         <div
-            className={`h-screen bg-orange-500 ${isBase ? "hidden md:block" : "w-full"} shrink-0 md:w-[232px]`}
+            className={`flex w-full flex-col bg-zinc-800 text-white lg:w-80 ${window.innerWidth < 1024 ? "slide-in-from-right animate-in duration-700" : ""}`}
         >
             <header
-                className={`flex h-[56px] w-full items-center justify-between border-b-[#000000] border-b-[1px] border-b-solid bg-mainBlack px-[16px] hover:bg-mainBlackHover`}
+                className={`flex h-12 w-full items-center justify-between border-b-[#000000] border-b-[1px] border-b-solid px-[16px] py-3`}
             >
                 <div className="flex items-center gap-[8px]">
                     <div>
@@ -39,7 +39,7 @@ export const Channels: FC<ChannelsProps> = ({ server, user }) => {
                 <DiscordToggleDown />
             </header>
 
-            <div className="custom-scrollbar flex h-[calc(100vh-56px-56px)] flex-col overflow-y-auto bg-mainBlack py-[16px]">
+            <div className="custom-scrollbar flex h-[calc(100vh-56px-56px)] flex-1 flex-col overflow-y-auto py-[16px]">
                 {Array.from({ length: 14 }).map((_, repeatIndex) => (
                     <React.Fragment key={repeatIndex}>
                         {channels.map((channel) => (

diff --git a/apps/web/src/components/servers-layout/chat.tsx b/apps/web/src/components/servers-layout/chat.tsx
@@ -49,9 +49,9 @@ const Chat = () => {
 
     return (
         <>
-            <div className="w-full bg-secondBlack">
+            <div className="flex w-full flex-col bg-zinc-600/50">
                 <ChannelBar setIsExpanded={setIsExpanded} />
-                <div className="flex">
+                <div className="flex h-full">
                     <div
                         className={`${isExpanded ? "hidden md:block md:w-full" : "w-full"}`}
                     >
@@ -99,7 +99,7 @@ const Chat = () => {
                         </div>
                     </div>
                     {isExpanded && (
-                        <div className="custom-scrollbar h-[calc(100vh-56px)] w-full shrink-0 overflow-y-auto bg-secondBlack px-[8px] py-[24px] md:w-[232px]">
+                        <div className="custom-scrollbar h-full w-full shrink-0 overflow-y-auto bg-zinc-800 px-[8px] py-[24px] md:w-[232px]">
                             <h3 className="mb-[12px] px-[8px] text-[12px] text-gray-400">
                                 ONLINE
                             </h3>