From b04df2528f561440450a5e28eb4fbccdece0b7ba Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Wed, 19 Jan 2022 03:21:08 -0800
Subject: [PATCH] bunch of touchups for the sizing and all

---
 components/Dashboard/Links.tsx | 75 ++++++++++++++++++----------------
 components/Dashboard/Rooms.tsx |  2 +-
 components/LinkCard.tsx        |  8 ++--
 pages/teams/[teamid].tsx       |  5 ++-
 styles/globals.css             |  1 +
 5 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/components/Dashboard/Links.tsx b/components/Dashboard/Links.tsx
index 6e21e43..0edb38e 100644
--- a/components/Dashboard/Links.tsx
+++ b/components/Dashboard/Links.tsx
@@ -145,12 +145,13 @@ export default function Links() {
           <span className="flex flex-col mr-20">
             <span className="text-white mr-auto">
               LINKS
-              {/* <button
+              <button
+                onClick={() => handleModalType(ShowModalType.createLink)}
                 className="right-1 rounded-lg py-1 px-2 ml-1 
                             shadow-md text-center text-white text-sm font-bold"
               >
                 CTRL + V
-              </button> */}
+              </button>
             </span>
 
             <span className="text-gray-300 text-xs">
@@ -158,8 +159,42 @@ export default function Links() {
             </span>
           </span>
 
+          <div className="ml-auto">
+            <Radio.Group
+              value={selectedTabPane}
+              onChange={(e) => setSelectedTabPane(e.target.value)}
+            >
+              <Radio.Button value={LinkTypeFilter.me}>
+                {LinkTypeFilter.me}{" "}
+                <span className="text-xs text-orange-500">
+                  {meLinks.length > 0 ? meLinks.length : ""}
+                </span>
+              </Radio.Button>
+              <Radio.Button value={LinkTypeFilter.team}>
+                {LinkTypeFilter.team}{" "}
+                <span className="text-xs text-orange-500">
+                  {teamLinks.length}
+                </span>
+              </Radio.Button>
+              <Tooltip title={"coming soon"}>
+                <Radio.Button disabled value={LinkTypeFilter.favorites}>
+                  {LinkTypeFilter.favorites}{" "}
+                  {/* <span className="text-xs text-orange-500">
+                {liveRooms.length > 0 ? fa.length : ""}
+              </span> */}
+                </Radio.Button>
+              </Tooltip>
+              <Radio.Button value={LinkTypeFilter.archived}>
+                {LinkTypeFilter.archived}{" "}
+                <span className="text-xs text-orange-500">
+                  {archivedLinks.length > 0 ? archivedLinks.length : ""}
+                </span>
+              </Radio.Button>
+            </Radio.Group>
+          </div>
+
           <Dropdown overlay={TimePeriodFilterMenu}>
-            <span className="text-sm text-gray-300 flex flex-row items-center uppercase hover:cursor-pointer">
+            <span className="ml-2 text-sm text-gray-300 flex flex-row items-center uppercase hover:cursor-pointer">
               Week <FaAngleDown />
             </span>
           </Dropdown>
@@ -186,40 +221,8 @@ export default function Links() {
         </span>
       </Tooltip>
 
-      <div className="mb-5">
-        <Radio.Group
-          value={selectedTabPane}
-          onChange={(e) => setSelectedTabPane(e.target.value)}
-        >
-          <Radio.Button value={LinkTypeFilter.me}>
-            {LinkTypeFilter.me}{" "}
-            <span className="text-xs text-orange-500">
-              {meLinks.length > 0 ? meLinks.length : ""}
-            </span>
-          </Radio.Button>
-          <Radio.Button value={LinkTypeFilter.team}>
-            {LinkTypeFilter.team}{" "}
-            <span className="text-xs text-orange-500">{teamLinks.length}</span>
-          </Radio.Button>
-          <Tooltip title={"coming soon"}>
-            <Radio.Button disabled value={LinkTypeFilter.favorites}>
-              {LinkTypeFilter.favorites}{" "}
-              {/* <span className="text-xs text-orange-500">
-                {liveRooms.length > 0 ? fa.length : ""}
-              </span> */}
-            </Radio.Button>
-          </Tooltip>
-          <Radio.Button value={LinkTypeFilter.archived}>
-            {LinkTypeFilter.archived}{" "}
-            <span className="text-xs text-orange-500">
-              {archivedLinks.length > 0 ? archivedLinks.length : ""}
-            </span>
-          </Radio.Button>
-        </Radio.Group>
-      </div>
-
       {/* table of links */}
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-row space-x-2 overflow-x-scroll py-2">
         {getFilteredContent().map((link) => (
           <LinkCard key={link.id} link={link} />
         ))}
diff --git a/components/Dashboard/Rooms.tsx b/components/Dashboard/Rooms.tsx
index 0afe572..c2a5821 100644
--- a/components/Dashboard/Rooms.tsx
+++ b/components/Dashboard/Rooms.tsx
@@ -154,7 +154,7 @@ export default function DashboardRoom() {
   }
 
   return (
-    <section className="p-5 flex-1 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
+    <section className="p-5 flex-1 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md flex-shrink-0">
       {/*  modal for creating room */}
       <CreateOrUpdateRoom
         show={showModalType == ShowModalType.createRoom}
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index f41641e..c0d2c53 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -121,17 +121,17 @@ export default function LinkCard(props: ILinkCardProps) {
   console.log(receiversNames);
 
   return (
-    <span className="flex flex-col rounded-lg ">
+    <span className="flex flex-col rounded-lg w-72 max-h-60 overflow-clip shrink-0">
       {/* attmnt header */}
       <Tooltip title={props.link.link}>
         <span
           onClick={() => window.open(props.link.link, "_blank")}
-          className="flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start hover:cursor-pointer"
+          className="flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start hover:cursor-pointer h-full"
         >
           <LinkIcon className="text-4xl mr-2" linkType={props.link.type} />
 
           <span className="flex flex-col items-baseline mr-10 space-y-1">
-            <span className="text-md font-bold text-white">
+            <span className="text-md font-bold text-white text-ellipsis overflow-hidden">
               {props.link.name}
             </span>
 
@@ -175,7 +175,7 @@ export default function LinkCard(props: ILinkCardProps) {
                 );
               })
             ) : (
-              <span className="text-xs my-3 text-white bg-emerald-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
+              <span className="text-xs text-white bg-emerald-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
                 <span>team</span>
               </span>
             )}
diff --git a/pages/teams/[teamid].tsx b/pages/teams/[teamid].tsx
index 76e0979..96dcd62 100644
--- a/pages/teams/[teamid].tsx
+++ b/pages/teams/[teamid].tsx
@@ -87,15 +87,16 @@ function TeamDashboard() {
       <div className="flex flex-row items-baseline space-x-5 space-y-5">
         <div className="flex flex-col max-w-sm space-y-5">
           <TeamVoiceLine />
-          <Links />
         </div>
 
-        <div className="flex flex-col space-y-5">
+        <div className="flex flex-col space-y-5 flex-1">
           <Announcements />
 
           <Rooms />
         </div>
       </div>
+
+      <Links />
     </div>
   );
 }
diff --git a/styles/globals.css b/styles/globals.css
index 8e31149..16de2cf 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -117,6 +117,7 @@ p {
 
 /* scrollbar customization */
 ::-webkit-scrollbar {
+  height: 5px;
   width: 5px;
 }