turned teams page into flex from grid to center it (#828)

* turned teams page into flex from grid to center it, removed h-screen from user page

* new icon button

Co-authored-by: Alex van Andel <me@alexvanandel.com>

components/team/TeamListItem.tsx

@@ -72,7 +72,7 @@ export default function TeamListItem(props: {
             <div className="inline-block ml-3">
               <span className="text-sm font-bold text-neutral-700">{props.team.name}</span>
               <span className="block -mt-1 text-xs text-gray-400">
-                {process.env.NEXT_PUBLIC_APP_URL}/{props.team.slug}
+                {process.env.NEXT_PUBLIC_APP_URL}/team/{props.team.slug}
               </span>
             </div>
           </div>
@@ -94,7 +94,7 @@ export default function TeamListItem(props: {
             </div>
           )}
           {props.team.role === "OWNER" && (
-            <div className="flex">
+            <div className="flex space-x-4">
               <span className="self-center h-6 px-3 py-1 text-xs text-gray-700 capitalize rounded-md bg-gray-50">
                 Owner
               </span>
@@ -106,13 +106,14 @@ export default function TeamListItem(props: {
                     );
                     showToast("Link copied!", "success");
                   }}
+                  size="icon"
                   color="minimal"
-                  className="w-full pl-5 ml-8"
                   StartIcon={LinkIcon}
-                  type="button"></Button>
+                  type="button"
+                />
               </Tooltip>
               <Dropdown>
-                <DropdownMenuTrigger>
+                <DropdownMenuTrigger className="group w-10 h-10 p-0 border border-transparent text-neutral-400 hover:border-gray-200">
                   <DotsHorizontalIcon className="w-5 h-5" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
@@ -123,7 +124,6 @@ export default function TeamListItem(props: {
                       className="w-full"
                       onClick={() => props.onActionSelect("edit")}
                       StartIcon={PencilAltIcon}>
-                      {" "}
                       Edit team
                     </Button>
                   </DropdownMenuItem>
@@ -131,7 +131,6 @@ export default function TeamListItem(props: {
                     <Link href={`${process.env.NEXT_PUBLIC_APP_URL}/team/${props.team.slug}`} passHref={true}>
                       <a target="_blank">
                         <Button type="button" color="minimal" className="w-full" StartIcon={ExternalLinkIcon}>
-                          {" "}
                           Preview team page
                         </Button>
                       </a>

components/team/screens/Team.tsx

@@ -57,9 +57,9 @@ const Team = ({ team }) => {
     }
 
     return (
-      <section className="mx-auto min-w-full lg:min-w-lg max-w-5xl grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-6">
+      <section className="mx-auto min-w-full lg:min-w-lg max-w-5xl flex flex-wrap gap-x-12 gap-y-6 justify-center">
         {members.map((member) => {
-          return <Member key={member.id} member={member} />;
+          return member.user.username !== null && <Member key={member.id} member={member} />;
         })}
       </section>
     );

components/ui/Button.tsx

@@ -6,7 +6,7 @@ import { SVGComponent } from "@lib/types/SVGComponent";
 
 export type ButtonProps = {
   color?: "primary" | "secondary" | "minimal" | "warn";
-  size?: "base" | "sm" | "lg" | "fab";
+  size?: "base" | "sm" | "lg" | "fab" | "icon";
   loading?: boolean;
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
@@ -52,6 +52,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-sm",
         size === "base" && "px-3 py-2 text-sm font-medium rounded-sm",
         size === "lg" && "px-4 py-2 text-base font-medium rounded-sm",
+        size === "icon" && "group p-2 border border-transparent text-neutral-400 hover:border-gray-200",
         // turn button into a floating action button (fab)
         size === "fab" ? "fixed" : "relative",
         size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
@@ -85,7 +86,14 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         : props.onClick,
     },
     <>
-      {StartIcon && <StartIcon className="inline w-5 h-5 mr-2 -ml-1" />}
+      {StartIcon && (
+        <StartIcon
+          className={classNames(
+            "inline",
+            size === "icon" ? "w-5 h-5 group-hover:text-black" : "w-5 h-5 mr-2 -ml-1"
+          )}
+        />
+      )}
       {props.children}
       {loading && (
         <div className="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">

pages/[user].tsx

@@ -33,7 +33,7 @@ export default function User(props: inferSSRProps<typeof getStaticProps>) {
         avatar={user.avatar}
       />
       {isReady && (
-        <div className="bg-neutral-50 dark:bg-black h-screen">
+        <div className="bg-neutral-50 dark:bg-black">
           <main className="max-w-3xl mx-auto py-24 px-4">
             <div className="mb-8 text-center">
               <Avatar