ronantakizawa/codereview-bench huggingface dataset:
Repository: benawad/dogehouse
File: kibbeh/src/ui/ProfileTabs.tsx (TypeScript)

Code before:
import React from "react";

export interface ProfileTabsProps {
   activeTab: string
};

export const ProfileTabs: React.FC<ProfileTabsProps> = ({ activeTab }) => {
   return (
      <div className="w-full flex items-center justify-around">
         <button 
            className={`py-1 text-primary-100 text-base font-bold hover:text-accent-hover 
               ${activeTab == "about" && `border-b border-accent text-accent`}`
            }
         >
            About
         </button>
         <button 
            className={`py-1 text-primary-100 text-base font-bold hover:text-accent-hover 
               ${activeTab == "rooms" && `border-b border-accent text-accent`}`
            }
         >
            Rooms
         </button>
         <button 
            className={`py-1 text-primary-100 text-base font-bold hover:text-accent-hover 
               ${activeTab == "scheduled" && `border-b border-accent text-accent`}`
            }
         >
            Scheduled
         </button>
         <button 
            className={`py-1 text-primary-100 text-base font-bold hover:text-accent-hover 
               ${activeTab == "recorded" && `border-b border-accent text-accent`}`
            }
         >
            Recorded

Review comment (suggestion):
Change hover effect to add border instead of changing the color.

```suggestion
            className={`py-1 text-primary-100 text-base font-bold border-b-2 border-primary-900 hover:border-accent transition
```

Code after:
import React from "react";

export interface ProfileTabsProps {
   activeTab: string
};

export const ProfileTabs: React.FC<ProfileTabsProps> = ({ activeTab }) => {
   return (
      <div className="w-full flex items-center justify-around">
         <button 
            className={`py-1 text-primary-100 text-base font-bold border-b-2 border-primary-900 transition hover:border-accent 
               ${activeTab == "about" && `border-accent text-accent`}`
            }
         >
            About
         </button>
         <button 
            className={`py-1 text-primary-100 text-base font-bold border-b-2 border-primary-900 transition hover:border-accent 
               ${activeTab == "rooms" && `border-accent text-accent`}`
            }
         >
            Rooms
         </button>
         <button 
            className={`py-1 text-primary-100 text-base font-bold border-b-2 border-primary-900 transition hover:border-accent 
               ${activeTab == "scheduled" && `border-accent text-accent`}`
            }
         >
            Scheduled
         </button>
         <button 
            className={`py-1 text-primary-100 text-base font-bold border-b-2 border-primary-900 transition hover:border-accent 
               ${activeTab == "recorded" && `border-accent text-accent`}`
            }
         >
            Recorded
Repository: benawad/dogehouse
File: kibbeh/src/ui/ChangeBannerCard.tsx (TypeScript)

Code before:

  const changeProfileButtonClickHandler = () => {
    if (!fileInputRef.current) return;
    fileInputRef.current.click();
  };

  return (
    <div className="rounded-8 flex flex-col bg-primary-900">
      <img
        src={banner}
        alt="banner"
        style={{ maxHeight: "145px" }}
        className="w-full h-full rounded-t-8 object-cover"
      />
      <div className="flex justify-between items-center p-4">
        <div className="flex">
          <Button
            size="small"
            color="secondary"
            onClick={changeProfileButtonClickHandler}
          >
            Change profile header
          </Button>
          <Button
            className="ml-2"
            color="secondary"
            size="small"
            onClick={deleteHandler}
          >
            <SolidTrash />
          </Button>
          <input
            type="file"
            ref={fileInputRef}
            onChange={fileChangeHandler}
            className="w-0 h-0 invisible"
            accept="image/jpeg, image/jpg, image/png"
          />
        </div>
        <span className="text-primary-300 font-medium text-sm">
          Only JPG or PNG and maximum 5MB.
        </span>
      </div>
    </div>
  );
};


Review comment (suggestion):
Change the ring color to `primary-300`, `secondary` is for errors

Code after:
      setBanner(URL.createObjectURL(file));
      // upload the new banner
    }
  };

  const changeProfileButtonClickHandler = () => {
    if (!fileInputRef.current) return;
    fileInputRef.current.click();
  };

  return (
    <div className="rounded-8 flex flex-col bg-primary-900">
      <img
        src={banner}
        alt="banner"
        style={{ maxHeight: "145px" }}
        className="w-full h-full rounded-t-8 object-cover"
      />
      <div className="flex justify-between items-center p-4">
        <div className="flex">
          <Button
            size="small"
            color="primary-300"
            onClick={changeProfileButtonClickHandler}
          >
            Change profile header
          </Button>
          <Button
            className="ml-2"
            color="primary-300"
            size="small"
            onClick={deleteHandler}
          >
            <SolidTrash />
          </Button>
          <input
            type="file"
            ref={fileInputRef}
            onChange={fileChangeHandler}
            className="w-0 h-0 invisible"
            accept="image/jpeg, image/jpg, image/png"
          />
        </div>
        <span className="text-primary-300 font-medium text-sm">
          Only JPG or PNG and maximum 5MB.
        </span>
      </div>
    </div>
  );
};
Repository: benawad/dogehouse
File: kibbeh/src/ui/BaseSettingsItem.tsx (TypeScript)

Code before:
import React, { ReactNode } from "react";

export interface BaseSettingsItemProps {
  children: ReactNode;
}

export const BaseSettingsItem: React.FC<BaseSettingsItemProps> = ({
  children,
  ...props
}) => {
  return (
    <div className="bg-primary-900 rounded-8" {...props}>
      {children}
    </div>
  );
};


Review comment (suggestion):
Can you add `className` as a prop?
```suggestion
    <div className={`bg-primary-900 rounded-8 ${className}`} {...props}>
```

Code after:
import React, { ReactNode } from "react";

export interface BaseSettingsItemProps {
  children: ReactNode;
  className: string;
}

export const BaseSettingsItem: React.FC<BaseSettingsItemProps> = ({
  children,
  className = "",
  ...props
}) => {
  return (
    <div className={`bg-primary-900 rounded-8 ${className}`} {...props}>
      {children}
    </div>
  );
};
Repository: benawad/dogehouse
File: kibbeh/src/ui/BaseSettingsItem.tsx (TypeScript)

Code before:
import React, { ReactNode } from "react";

export interface BaseSettingsItemProps {
  children: ReactNode;
}

export const BaseSettingsItem: React.FC<BaseSettingsItemProps> = ({
  children,
  ...props
}) => {
  return (
    <div className="bg-primary-900 rounded-8" {...props}>
      {children}
    </div>
  );
};


Review comment (suggestion):
```suggestion
  children: ReactNode;
  className: string;
```

Code after:
import React, { ReactNode } from "react";

export interface BaseSettingsItemProps {
  children: ReactNode;
  className: string;
}

export const BaseSettingsItem: React.FC<BaseSettingsItemProps> = ({
  children,
  className = "",
  ...props
}) => {
  return (
    <div className={`bg-primary-900 rounded-8 ${className}`} {...props}>
      {children}
    </div>
  );
};
Repository: benawad/dogehouse
File: kibbeh/src/ui/UserWideButton.tsx (TypeScript)

Code before:
import React, { useState } from "react";
import { SingleUser } from "./UserAvatar";
import { Button } from "./Button";
import { BaseUser } from "@dogehouse/kebab";

export interface UserWideButtonInfoProps {
  user: BaseUser;
}

const divStyle = {
  width: "719px",
  height: "143px",
  background: "#151A21",
};

const avatarStyle = {
  width: "44px",
  height: "44px",
  left: "-2px",
  top: "-3px",
  marginLeft: "57px",
  marginBottom: "53px",
  marginTop: "46px",
};

const buttonStyle = {
  width: "90px",
  height: "22px",
  marginTop: "60px",
  marginRight: "79px",
  left: "531px",
  top: "11px",
  marginLeft: "350px",
  marginBottom: "61px",
};

const displayStyle = {
  height: "22px",
  left: "70px",
  fontSize: "14px",
  lineHeight: "22px",
  top: "0px",
  color: "#DEE3EA",
};

const nameStyle = {
  height: "22px",
  left: "70px",
  top: "22px",
  fontSize: "12px",
  lineHeight: "22px",

Review comment (suggestion):
Please read again the instructions in the issue. You have to use tailwind and all of those margins, tops, height, etc, make no sense. Take the context from where this will be placed and implement it as such.

Adding 100% width and flex should be enough to make this work.

Code after:
import React, { useState } from "react";
import { SingleUser } from "./UserAvatar";
import { Button } from "./Button";
import { BaseUser } from "@dogehouse/kebab";

export interface UserWideButtonInfoProps {
  user: BaseUser;
  unblock: () => void;
}

export const UserWideButton: React.FC<UserWideButtonInfoProps> = ({
  user,
  unblock,
}) => {
  return (
    <>
      <div className="flex items-center justify-between px-4 w-full">
        <div className="flex">
          <SingleUser size="sm" src={user.avatarUrl} username={user.username} />
          <div className="flex flex-col ml-2">
            <span className="font-bold text-primary-100 whitespace-nowrap">
              {user.displayName}
            </span>
            <span className="text-primary-300 text-sm whitespace-nowrap">
              @{user.username}
            </span>
          </div>
        </div>
        <Button size="small" onClick={unblock}>
          Unblock
        </Button>
      </div>
    </>
  );
};
Repository: benawad/dogehouse
File: kibbeh/src/ui/SettingsItemButton.tsx (TypeScript)

Code before:
import React from "react";
import { BaseSettingsItem } from "./BaseSettingsItem";
import { Button } from "./Button";

export type SettingsItemButtonProps = {
  text: string,
  buttonText: string,
  disabled?: boolean,
  className: string,
  onClick: (e: React.MouseEvent | React.TouchEvent) => void,
};

export const SettingsItemButton: React.FC<SettingsItemButtonProps> = ({
  text,
  buttonText,
  disabled = false,
  className = "",
  onClick,
}) => {
  return (
    <BaseSettingsItem className={`p-4 ${className}`}>
      <p className="text-primary-200 mb-4">
        {text}
      </p>
      <Button
        color="secondary-accent"
        size="small"
        onClick={onClick}
        disabled={disabled}
        className="py-2"
      >
        <p className="font-bold">
          {buttonText}
        </p>
      </Button>
    </BaseSettingsItem>
  );
};


Review comment (suggestion):
```suggestion
      <p className="text-primary-100 mb-4">
```

Code after:
import React from "react";
import { BaseSettingsItem } from "./BaseSettingsItem";
import { Button } from "./Button";

export type SettingsItemButtonProps = {
  text: string,
  buttonText: string,
  disabled?: boolean,
  className: string,
  onClick: (e: React.MouseEvent | React.TouchEvent) => void,
};

export const SettingsItemButton: React.FC<SettingsItemButtonProps> = ({
  children,
  buttonText,
  disabled = false,
  className = "",
  onClick,
}) => {
  return (
    <BaseSettingsItem className={`p-4 ${className}`}>
      <p className="text-primary-100 mb-4">
        {children}
      </p>
      <Button
        color="accent-secondary"
        size="small"
        onClick={onClick}
        disabled={disabled}
        className="py-2"
      >
        {buttonText}
      </Button>
    </BaseSettingsItem>
  );
};
Repository: benawad/dogehouse
File: kibbeh/src/modules/layouts/MainLayout.tsx (TypeScript)

Code before:
          {children}
        </>
      );
      break;
    case "fullscreen":
      console.log("FULLSCREEN");
      prepend = (
        <>
          {mHeader}
          <MobileNav items={items}></MobileNav>
        </>
      );
      middle = (
        <>
          {children}
          {floatingRoomInfo}
          <AccountOverlay />
        </>
      );
  }

  return (
    <>
      <ElectronHeader />
      <div
        className={`fixed left-0 w-full z-50`}
        style={
          isElectron() && !useHostStore.getState().isLinux
            ? { top: 30 }
            : { top: 0 }
        }
      >
        {prepend}
      </div>
      <div
        className={
          isElectron() && !useHostStore.getState().isLinux
            ? `default-desktop-layout flex flex-col items-center w-full scrollbar-thin scrollbar-thumb-primary-700 ${
                prepend ? "mb-7" : ""
              }`
            : `flex flex-col items-center w-full scrollbar-thin scrollbar-thumb-primary-700 ${
                prepend ? "mt-8 mb-7" : ""
              }`
        }
        style={
          screenType === "fullscreen" &&
          isElectron() &&
          !useHostStore.getState().isLinux
            ? { marginTop: "38px" }
            : {}
        }

Review comment (suggestion):
```suggestion
        className={`fixed left-0 w-full z-10`}
```

Why did you add a higher z-index? It messes up the black thing that darkens the screen when you open the AccountOverlay. If it's an electron thing, make it electron exclusive

Code after:
          <LeftPanel>{tabletSidebar}</LeftPanel>
          {children}
        </>
      );
      break;
    case "fullscreen":
      prepend = (
        <>
          {mHeader}
          <MobileNav items={items}></MobileNav>
        </>
      );
      middle = (
        <>
          {children}
          {floatingRoomInfo}
          <AccountOverlay />
        </>
      );
  }

  return (
    <>
      <ElectronHeader />
      <div
        className={`fixed left-0 w-full z-10`}
        style={
          isElectron() && !useHostStore.getState().isLinux
            ? { top: 30 }
            : { top: 0 }
        }
      >
        {prepend}
      </div>
      <div
        className={
          isElectron() && !useHostStore.getState().isLinux
            ? `default-desktop-layout flex flex-col items-center w-full scrollbar-thin scrollbar-thumb-primary-700 ${
                prepend ? "mb-7" : ""
              }`
            : `flex flex-col items-center w-full scrollbar-thin scrollbar-thumb-primary-700 ${
                prepend ? "mt-8 mb-7" : ""
              }`
        }
        style={useIsElectronMobile() ? { marginTop: "38px" } : {}}
      >
        <MainInnerGrid>{middle}</MainInnerGrid>
      </div>
    </>
  );
};
Repository: benawad/dogehouse
File: kibbeh/src/ui/mobile/AccountOverlay.tsx (TypeScript)

Code before:
  );

  const display = y.to((py) => (py < height ? "block" : "none"));

  const bgStyle = {
    opacity: y.to([0, height], [0.8, 0], "clamp"),
  };

  useEffect(() => {
    if (isOpen) {
      open();
    }
  }, [isOpen, open]);

  return createPortal(
    <a.div className="absolute w-screen h-full" style={{ display }}>
      <a.div
        className="w-screen h-screen absolute left-0 bg-black z-10 opacity-100"
        onClick={() => close()}
        style={bgStyle}
      ></a.div>
      <a.div
        className="bg-primary-800 w-full h-full rounded-t-20 relative pt-5"
        {...bind()}
        style={{
          bottom: `calc(-100% + ${height - 70}px)`,
          y,
          zIndex: 11,
          touchAction: "none",
        }}
      >
        <div className="bg-primary-600 rounded-full w-6 h-1 absolute top-3 left-2/4 transform -translate-x-1/2"></div>
        <div>
          <ApiPreloadLink
            data-testid="profile-link"
            route="profile"
            data={{ username: conn ? conn.user.username : "" }}
          >
            <SettingsIcon
              icon={
                <SolidUser
                  className="text-primary-100"
                  width="20"
                  height="20"
                />
              }
              label={t("components.settingsDropdown.profile")}
              onClick={() => close()}
            />
          </ApiPreloadLink>
          <SettingsIcon

Review comment (suggestion):
```suggestion
          bottom: `calc(-100% + ${height - 100}px)`,
```

The margin below logout was intentional. If it's an electron thing, make it electron exclusive

Code after:
  );

  const display = y.to((py) => (py < height ? "block" : "none"));

  const bgStyle = {
    opacity: y.to([0, height], [0.8, 0], "clamp"),
  };

  useEffect(() => {
    if (isOpen) {
      open();
    }
  }, [isOpen, open]);

  return createPortal(
    <a.div className="absolute w-screen h-full" style={{ display }}>
      <a.div
        className="w-screen h-screen absolute left-0 bg-black z-10 opacity-100"
        onClick={() => close()}
        style={bgStyle}
      ></a.div>
      <a.div
        className="bg-primary-800 w-full h-full rounded-t-20 relative pt-5"
        {...bind()}
        style={{
          bottom: `calc(-100% + ${height - 100}px)`,
          y,
          zIndex: 11,
          touchAction: "none",
        }}
      >
        <div className="bg-primary-600 rounded-full w-6 h-1 absolute top-3 left-2/4 transform -translate-x-1/2"></div>
        <div>
          <ApiPreloadLink
            data-testid="profile-link"
            route="profile"
            data={{ username: conn ? conn.user.username : "" }}
          >
            <SettingsIcon
              icon={
                <SolidUser
                  className="text-primary-100"
                  width="20"
                  height="20"
                />
              }
              label={t("components.settingsDropdown.profile")}
              onClick={() => close()}
            />
          </ApiPreloadLink>
          <SettingsIcon
Repository: benawad/dogehouse
File: kibbeh/src/ui/ProfileScheduled.tsx (TypeScript)

Code before:
import { ScheduledRoom, UserWithFollowInfo, wrap } from "@dogehouse/kebab";
import React, { useEffect, useState } from "react";
import { useConn } from "../shared-hooks/useConn";
import { useTypeSafeTranslation } from "../shared-hooks/useTypeSafeTranslation";
import { ScheduledRoomCard } from "../modules/scheduled-rooms/ScheduledRoomCard";

export interface ProfileScheduledProps
  extends React.HTMLAttributes<HTMLDivElement> {
  user: UserWithFollowInfo;
}

export const ProfileScheduled: React.FC<ProfileScheduledProps> = ({
  user,
  className = "",
}) => {
  const { t } = useTypeSafeTranslation();
  const conn = useConn();
  const wrapper = wrap(conn);

  const [scheduledRooms, setScheduledRooms] = useState([]);
  useEffect(() => {
    wrapper.connection
      .sendCall("room:get_scheduled", {
        cursor: "",
        range: "all",
        userId: user.id,
      })
      .then((res: any) => {
        setScheduledRooms(res.rooms);
      });
  }, []);

  return (
    <div
      className={`mt-2 rounded-8 w-full leading-8 ${className}`}
      style={{ maxWidth: 640 }}
    >
      {scheduledRooms &&
        scheduledRooms.map((r: ScheduledRoom) => (
          <div className={`mb-4`} key={r.id}>
            <ScheduledRoomCard
              noEditOrDeleteButton={true}
              info={r}
              onEdit={() => {}}
              onDeleteComplete={() => {}}
            />

Review comment (suggestion):
`React Hook useEffect has missing dependencies: 'user.id' and 'wrapper.connection'. Either include them or remove the dependency array`

Code after:
import { ScheduledRoom, UserWithFollowInfo } from "@dogehouse/kebab";
import React, { useState } from "react";
import { useTypeSafeTranslation } from "../shared-hooks/useTypeSafeTranslation";
import { ScheduledRoomCard } from "../modules/scheduled-rooms/ScheduledRoomCard";
import { useTypeSafeQuery } from "../shared-hooks/useTypeSafeQuery";
import { useTypeSafeUpdateQuery } from "../shared-hooks/useTypeSafeUpdateQuery";
import { Button } from "./Button";
import { CenterLoader } from "./CenterLoader";
import { EditScheduleRoomModalController } from "../modules/scheduled-rooms/EditScheduleRoomModalController";

export interface ProfileScheduledProps
  extends React.HTMLAttributes<HTMLDivElement> {
  user: UserWithFollowInfo;
}

const List = ({
  onLoadMore,
  cursor,
  isLastPage,
  isOnlyPage,
  userId,
  onEdit,
}: {
  onEdit: (sr: { scheduleRoomToEdit: ScheduledRoom; cursor: string }) => void;
  userId: string;
  cursor: string;
  isLastPage: boolean;
  isOnlyPage: boolean;
  onLoadMore: (o: string) => void;
}) => {
  const { isLoading, data } = useTypeSafeQuery(
    ["getScheduledRooms", cursor, "all", userId],
    { staleTime: Infinity, refetchOnMount: "always" },
    [cursor, "all", userId]
  );
  const update = useTypeSafeUpdateQuery();
  const { t } = useTypeSafeTranslation();

  if (isLoading) {
    return <CenterLoader />;
  }

  if (!data) {
    return null;
  }
Repository: benawad/dogehouse
File: kibbeh/src/ui/UserProfile.tsx (TypeScript)

Code before:
  isCurrentUser,
}) => {
  const { t } = useTypeSafeTranslation();
  const badges: badge[] = [];
  const tags: UserBadgeLgProps[] = [];

  if (user.staff) {
    badges.push({
      content: <StaffBadge />,
      variant: "primary",
      color: "white",
      title: t("components.userBadges.dhStaff"),
      naked: true,
    });
    tags.push({
      icon: "dogeStaff",
      children: t("components.userBadges.dhStaff"),
    });
  }

  if (user.contributions > 0) {
    badges.push({
      content: <ContributorBadge contributions={user.contributions} />,
      variant: "primary",
      color: "white",
      title: t("components.userBadges.dhContributor"),
      naked: true,
    });
    tags.push({
      icon: "dogeContributor",
      contributions: user.contributions,
      children: t("components.userBadges.dhContributor"),
    });
  }

  if (user.botOwnerId) {
    badges.push({
      content: t("pages.viewUser.bot"),
      variant: "primary",
      color: "white",
      title: t("pages.viewUser.bot"),
    });
  }
  return (
    <>
      <ProfileHeader
        user={user}
        pfp={user.avatarUrl}
        displayName={user.displayName}
        isCurrentUser={isCurrentUser}
        username={user.username}

Review comment (suggestion):
```suggestion
      title: `${t("components.userBadges.dhContributor")} (${user.contributions} ${t("pages.admin.contributions")})`,
```

Code after:
  isCurrentUser,
}) => {
  const { t } = useTypeSafeTranslation();
  const badges: badge[] = [];
  const tags: UserBadgeLgProps[] = [];

  if (user.staff) {
    badges.push({
      content: <StaffBadge />,
      variant: "primary",
      color: "white",
      title: t("components.userBadges.dhStaff"),
      naked: true,
    });
    tags.push({
      icon: "dogeStaff",
      children: t("components.userBadges.dhStaff"),
    });
  }

  if (user.contributions > 0) {
    badges.push({
      content: <ContributorBadge contributions={user.contributions} />,
      variant: "primary",
      color: "white",
      title: `${t("components.userBadges.dhContributor")} (${user.contributions} ${t("pages.admin.contributions")})`,
      naked: true,
    });
    tags.push({
      icon: "dogeContributor",
      contributions: user.contributions,
      children: t("components.userBadges.dhContributor"),
    });
  }

  if (user.botOwnerId) {
    badges.push({
      content: t("pages.viewUser.bot"),
      variant: "primary",
      color: "white",
      title: t("pages.viewUser.bot"),
    });
  }
  return (
    <>
      <ProfileHeader
        user={user}
        pfp={user.avatarUrl}
        displayName={user.displayName}
        isCurrentUser={isCurrentUser}
        username={user.username}