Fixing ESLint warnings (#2723)

* Fixing warnings * Reverting and disabling ESLint in some cases * Reverting Next Images * Reverting file, bad merge * Targeting ESLint to line * Additional warnings * New warning squished * More tweaks and major fixes * Uneeded conf Co-authored-by: Omar López <zomars@me.com>
2022-05-14 10:49:39 -03:00
parent 93bd4ed79e
commit 212fd1bc14
39 changed files with 211 additions and 116 deletions
--- a/apps/web/components/App.tsx
+++ b/apps/web/components/App.tsx
@@ -81,7 +81,7 @@ export default function App({
      }
    }
    getInstalledApp(type);
-  }, []);
+  }, [type]);
  return (
    <>
      <Shell large isPublic>
@@ -94,7 +94,10 @@ export default function App({
            </Link>
            <div className="items-center justify-between py-4 sm:flex sm:py-8">
              <div className="flex">
-                <img className="h-16 w-16" src={logo} alt={name} />
+                {
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img className="h-16 w-16" src={logo} alt={name} />
+                }
                <header className="px-4 py-2">
                  <h1 className="font-cal text-xl text-gray-900">{name}</h1>
                  <h2 className="text-sm text-gray-500">
--- a/apps/web/components/CustomBranding.tsx
+++ b/apps/web/components/CustomBranding.tsx
@@ -274,7 +274,17 @@ const BrandColor = ({
      "--brand-text-color-dark-mode",
      getContrastingTextColor(darkVal, true)
    );
-  }, [lightVal, darkVal]);
+  }, [
+    embedBrandingColors.highlightColor,
+    embedBrandingColors.lightestColor,
+    embedBrandingColors.lighterColor,
+    embedBrandingColors.lightColor,
+    embedBrandingColors.medianColor,
+    embedBrandingColors.darkColor,
+    embedBrandingColors.darkerColor,
+    lightVal,
+    darkVal,
+  ]);
  return null;
 };

--- a/apps/web/components/ImageUploader.tsx
+++ b/apps/web/components/ImageUploader.tsx
@@ -134,7 +134,10 @@ export default function ImageUploader({
                    {t("no_target", { target })}
                  </p>
                )}
-                {imageSrc && <img className="h-20 w-20 rounded-full" src={imageSrc} alt={target} />}
+                {imageSrc && (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img className="h-20 w-20 rounded-full" src={imageSrc} alt={target} />
+                )}
              </div>
            )}
            {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
--- a/apps/web/components/Logo.tsx
+++ b/apps/web/components/Logo.tsx
@@ -3,8 +3,10 @@ export default function Logo({ small, icon }: { small?: boolean; icon?: boolean
    <h1 className="inline">
      <strong>
        {icon ? (
+          // eslint-disable-next-line @next/next/no-img-element
          <img className="mx-auto w-9" alt="Cal" title="Cal" src="/cal-com-icon-white.svg" />
        ) : (
+          // eslint-disable-next-line @next/next/no-img-element
          <img
            className={small ? "h-4 w-auto" : "h-5 w-auto"}
            alt="Cal"
--- a/apps/web/components/Shell.tsx
+++ b/apps/web/components/Shell.tsx
@@ -197,7 +197,7 @@ const Layout = ({
                  </Link>
                  {/* logo icon for tablet */}
                  <Link href="/event-types">
-                    <a className="md:inline lg:hidden">
+                    <a className="text-center md:inline lg:hidden">
                      <Logo small icon />
                    </a>
                  </Link>
@@ -460,7 +460,6 @@ function UserDropdown({ small }: { small?: boolean }) {
    },
  });
  const utils = trpc.useContext();
-
  return (
    <Dropdown>
      <DropdownMenuTrigger asChild>
@@ -470,11 +469,14 @@ function UserDropdown({ small }: { small?: boolean }) {
              small ? "h-8 w-8" : "h-10 w-10",
              "relative flex-shrink-0 rounded-full bg-gray-300  ltr:mr-3 rtl:ml-3"
            )}>
-            <img
-              className="rounded-full"
-              src={process.env.NEXT_PUBLIC_WEBSITE_URL + "/" + user?.username + "/avatar.png"}
-              alt={user?.username || "Nameless User"}
-            />
+            {
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                className="rounded-full"
+                src={process.env.NEXT_PUBLIC_WEBSITE_URL + "/" + user?.username + "/avatar.png"}
+                alt={user?.username || "Nameless User"}
+              />
+            }
            {!user?.away && (
              <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-green-500"></div>
            )}
--- a/apps/web/components/apps/AppCard.tsx
+++ b/apps/web/components/apps/AppCard.tsx
@@ -20,7 +20,10 @@ export default function AppCard(props: AppCardProps) {
        className="block h-full rounded-sm border border-gray-300 p-5 hover:bg-neutral-50"
        data-testid={`app-store-app-card-${props.slug}`}>
        <div className="flex">
-          <img src={props.logo} alt={props.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
+          {
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={props.logo} alt={props.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
+          }
          <Button
            color="secondary"
            className="ml-auto flex self-start"
--- a/apps/web/components/availability/Schedule.tsx
+++ b/apps/web/components/availability/Schedule.tsx
@@ -57,7 +57,7 @@ const useOptions = () => {
      t = t.add(increment, "minutes");
    }
    return options;
-  }, []);
+  }, [timeFormat]);

  const filter = useCallback(
    ({ offset, limit, current }: { offset?: ConfigType; limit?: ConfigType; current?: ConfigType }) => {
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -76,7 +76,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
      if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
        router.replace(`/${eventOwner.username}`);
    }
-  }, [contracts, eventType.metadata.smartContractAddress, router]);
+  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);

  const selectedDate = useMemo(() => {
    const dateString = asStringOrNull(router.query.date);
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -89,6 +89,7 @@ const BookingPage = ({
  const { contracts } = useContracts();
  const { data: session } = useSession();
  const isBackgroundTransparent = useIsBackgroundTransparent();
+  const telemetry = useTelemetry();

  useEffect(() => {
    telemetry.withJitsu((jitsu) =>
@@ -97,6 +98,7 @@ const BookingPage = ({
        collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
      )
    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
@@ -107,7 +109,7 @@ const BookingPage = ({
        /* @ts-ignore */
        router.replace(`/${eventOwner.username}`);
    }
-  }, [contracts, eventType.metadata.smartContractAddress, router]);
+  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);

  const mutation = useMutation(createBooking, {
    onSuccess: async (responseData) => {
@@ -204,8 +206,6 @@ const BookingPage = ({
    }
  }, [router.query.guest]);

-  const telemetry = useTelemetry();
-
  const locationInfo = (type: LocationType) => locations.find((location) => location.type === type);
  const loggedInIsOwner = eventType?.users[0]?.name === session?.user?.name;
  const guestListEmails = !isDynamicGroupBooking
--- a/apps/web/components/integrations/IntegrationListItem.tsx
+++ b/apps/web/components/integrations/IntegrationListItem.tsx
@@ -14,7 +14,10 @@ function IntegrationListItem(props: {
  return (
    <ListItem expanded={!!props.children} className={classNames("flex-col")}>
      <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
-        {props.imageSrc && <img className="h-10 w-10" src={props.imageSrc} alt={props.title} />}
+        {
+          // eslint-disable-next-line @next/next/no-img-element
+          props.imageSrc && <img className="h-10 w-10" src={props.imageSrc} alt={props.title} />
+        }
        <div className="flex-grow truncate pl-2">
          <ListItemTitle component="h3">{props.title}</ListItemTitle>
          <ListItemText component="p">{props.description}</ListItemText>
--- a/apps/web/components/security/EnableTwoFactorModal.tsx
+++ b/apps/web/components/security/EnableTwoFactorModal.tsx
@@ -150,7 +150,10 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
        <WithStep step={SetupStep.DisplayQrCode} current={step}>
          <>
            <div className="flex justify-center">
-              <img src={dataUri} />
+              {
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={dataUri} alt="" />
+              }
            </div>
            <p className="text-center font-mono text-xs">{secret}</p>
          </>
--- a/apps/web/components/team/TeamSettingsRightSidebar.tsx
+++ b/apps/web/components/team/TeamSettingsRightSidebar.tsx
@@ -118,6 +118,7 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
        )}
      </div>
      {props.team?.id && props.role !== MembershipRole.MEMBER && (
+        // eslint-disable-next-line @next/next/link-passhref
        <Link href={`/settings/teams/${props.team.id}/availability`}>
          <div className="mt-5 hidden space-y-1 sm:block">
            <LinkIconButton Icon={ClockIcon}>{"View Availability"}</LinkIconButton>
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -37,6 +37,7 @@ const Team = ({ team }: TeamPageProps) => {
    );

    return (
+      // eslint-disable-next-line @next/next/link-passhref
      <Link key={member.id} href={`/${member.username}`}>
        <div className={classes}>
          <ArrowRightIcon
--- a/apps/web/components/ui/AuthContainer.tsx
+++ b/apps/web/components/ui/AuthContainer.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React from "react";

 import Loader from "@components/Loader";
@@ -16,8 +17,9 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
  return (
    <div className="flex min-h-screen flex-col justify-center bg-neutral-50 py-12 sm:px-6 lg:px-8">
      <HeadSeo title={props.title} description={props.description} />
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+      <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
        {props.showLogo && (
+          // eslint-disable-next-line @next/next/no-img-element
          <img className="mx-auto h-6" src="/calendso-logo-white-word.svg" alt="Cal.com Logo" />
        )}
        {props.heading && (
--- a/apps/web/components/ui/Avatar.tsx
+++ b/apps/web/components/ui/Avatar.tsx
@@ -27,6 +27,7 @@ export default function Avatar(props: AvatarProps) {
      />
      <AvatarPrimitive.Fallback delayMs={600}>
        {gravatarFallbackMd5 && (
+          // eslint-disable-next-line @next/next/no-img-element
          <img src={defaultAvatarSrc({ md5: gravatarFallbackMd5 })} alt={alt} className={className} />
        )}
      </AvatarPrimitive.Fallback>
--- a/apps/web/components/ui/AvatarSSR.tsx
+++ b/apps/web/components/ui/AvatarSSR.tsx
@@ -28,5 +28,6 @@ export function AvatarSSR(props: AvatarProps) {
  } else if (user.emailMd5) {
    imgSrc = defaultAvatarSrc(user.emailMd5);
  }
+  // eslint-disable-next-line @next/next/no-img-element
  return imgSrc ? <img alt={alt} className={className} src={imgSrc}></img> : null;
 }
--- a/apps/web/components/ui/PoweredByCal.tsx
+++ b/apps/web/components/ui/PoweredByCal.tsx
@@ -12,16 +12,22 @@ const PoweredByCal = () => {
      <Link href={`https://cal.com?utm_source=embed&utm_medium=powered-by-button`}>
        <a target="_blank" className="text-bookinglight opacity-50 hover:opacity-100 dark:text-white">
          {t("powered_by")}{" "}
-          <img
-            className="relative -mt-px inline h-[10px] w-auto dark:hidden"
-            src="https://cal.com/logo.svg"
-            alt="Cal.com Logo"
-          />
-          <img
-            className="relativ -mt-px hidden h-[10px] w-auto dark:inline"
-            src="https://cal.com/logo-white.svg"
-            alt="Cal.com Logo"
-          />
+          {
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              className="relative -mt-px inline h-[10px] w-auto dark:hidden"
+              src="/cal-logo-word.svg"
+              alt="Cal.com Logo"
+            />
+          }
+          {
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              className="relativ -mt-px hidden h-[10px] w-auto dark:inline"
+              src="/cal-logo-word-dark.svg"
+              alt="Cal.com Logo"
+            />
+          }
        </a>
      </Link>
    </div>
--- a/apps/web/components/ui/WeekdaySelect.tsx
+++ b/apps/web/components/ui/WeekdaySelect.tsx
@@ -6,6 +6,7 @@ interface WeekdaySelectProps {
 }

 export const WeekdaySelect = (props: WeekdaySelectProps) => {
+  const { onSelect } = props;
  const [activeDays, setActiveDays] = useState<boolean[]>(
    Array.from(Array(7).keys()).map((v, i) => (props.defaultValue || []).includes(i))
  );
@@ -13,8 +14,8 @@ export const WeekdaySelect = (props: WeekdaySelectProps) => {
  const days = ["S", "M", "T", "W", "T", "F", "S"];

  useEffect(() => {
-    props.onSelect(activeDays.map((v, idx) => (v ? idx : -1)).filter((v) => v !== -1));
-  }, [activeDays]);
+    onSelect(activeDays.map((v, idx) => (v ? idx : -1)).filter((v) => v !== -1));
+  }, [onSelect, activeDays]);

  const toggleDay = (idx: number) => {
    activeDays[idx] = !activeDays[idx];
--- a/apps/web/components/ui/form/CheckedSelect.tsx
+++ b/apps/web/components/ui/form/CheckedSelect.tsx
@@ -24,12 +24,13 @@ export type CheckedSelectProps = {
 };

 export const CheckedSelect = (props: CheckedSelectProps) => {
+  const { onChange } = props;
  const [selectedOptions, setSelectedOptions] = useState<CheckedSelectValue>(props.defaultValue || []);
  const { t } = useLocale();

  useEffect(() => {
-    props.onChange(selectedOptions);
-  }, [selectedOptions]);
+    onChange(selectedOptions);
+  }, [onChange, selectedOptions]);

  const options = props.options.map((option) => ({
    ...option,
--- a/apps/web/ee/components/stripe/PaymentPage.tsx
+++ b/apps/web/ee/components/stripe/PaymentPage.tsx
@@ -49,7 +49,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
        embedIframeWidth = e.detail.data.iframeWidth as number;
      });
    }
-  }, [isEmbed]);
+  }, [date, isEmbed]);

  const eventName = props.booking.title;

--- a/apps/web/ee/components/web3/CryptoSection.tsx
+++ b/apps/web/ee/components/web3/CryptoSection.tsx
@@ -89,12 +89,15 @@ const CryptoSection = (props: CryptoSectionProps) => {
    }

    return <div />;
-  }, [props.verified]);
+  }, [props.pathname, props.verified]);

  const verifyButton = useMemo(() => {
    return (
      <Button color="secondary" onClick={verifyWallet} type="button" id="hasToken" name="hasToken">
-        <img className="mr-1 h-5" src="/apps/metamask.svg" />
+        {
+          // eslint-disable-next-line @next/next/no-img-element
+          <img className="mr-1 h-5" src="/apps/metamask.svg" alt="MetaMask" />
+        }
        {t("verify_wallet")}
      </Button>
    );
@@ -103,7 +106,10 @@ const CryptoSection = (props: CryptoSectionProps) => {
  const connectButton = useMemo(() => {
    return (
      <Button color="secondary" onClick={connectMetamask} type="button">
-        <img className="mr-1 h-5" src="/apps/metamask.svg" />
+        {
+          // eslint-disable-next-line @next/next/no-img-element
+          <img className="mr-1 h-5" src="/apps/metamask.svg" alt="MetaMask" />
+        }
        {t("connect_metamask")}
      </Button>
    );
@@ -118,7 +124,10 @@ const CryptoSection = (props: CryptoSectionProps) => {
          await connectMetamask();
          await verifyWallet();
        }}>
-        <img className="mr-1 h-5" src="/apps/metamask.svg" />
+        {
+          // eslint-disable-next-line @next/next/no-img-element
+          <img className="mr-1 h-5" src="/apps/metamask.svg" alt="MetaMask" />
+        }
        {t("verify_wallet")}
      </Button>
    );
--- a/apps/web/lib/hooks/useSlots.ts
+++ b/apps/web/lib/hooks/useSlots.ts
@@ -122,6 +122,31 @@ export const useSlots = (props: UseSlotsProps) => {
    const dateTo = date.endOf("day").format();
    const query = stringify({ dateFrom, dateTo, eventTypeId });

+    const handleAvailableSlots = async (res: Response) => {
+      const responseBody: AvailabilityUserResponse = await res.json();
+      const times = getSlots({
+        frequency: slotInterval || eventLength,
+        inviteeDate: date,
+        workingHours: responseBody.workingHours,
+        minimumBookingNotice,
+        eventLength,
+      });
+      const filterTimeProps = {
+        times,
+        busy: responseBody.busy,
+        eventLength,
+        beforeBufferTime,
+        afterBufferTime,
+      };
+      const filteredTimes = getFilteredTimes(filterTimeProps);
+      // temporary
+      const user = res.url.substring(res.url.lastIndexOf("/") + 1, res.url.indexOf("?"));
+      return filteredTimes.map((time) => ({
+        time,
+        users: [user],
+      }));
+    };
+
    Promise.all<Slot[]>(
      users.map((user) => fetch(`/api/availability/${user.username}?${query}`).then(handleAvailableSlots))
    )
@@ -173,32 +198,17 @@ export const useSlots = (props: UseSlotsProps) => {
        console.error(e);
        setError(e);
      });
-  }, [date]);
-
-  const handleAvailableSlots = async (res: Response) => {
-    const responseBody: AvailabilityUserResponse = await res.json();
-    const times = getSlots({
-      frequency: slotInterval || eventLength,
-      inviteeDate: date,
-      workingHours: responseBody.workingHours,
-      minimumBookingNotice,
-      eventLength,
-    });
-    const filterTimeProps = {
-      times,
-      busy: responseBody.busy,
-      eventLength,
-      beforeBufferTime,
-      afterBufferTime,
-    };
-    const filteredTimes = getFilteredTimes(filterTimeProps);
-    // temporary
-    const user = res.url.substring(res.url.lastIndexOf("/") + 1, res.url.indexOf("?"));
-    return filteredTimes.map((time) => ({
-      time,
-      users: [user],
-    }));
-  };
+  }, [
+    afterBufferTime,
+    beforeBufferTime,
+    eventLength,
+    minimumBookingNotice,
+    slotInterval,
+    eventTypeId,
+    props.schedulingType,
+    users,
+    date,
+  ]);

  return {
    slots,
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -35,7 +35,7 @@ export default function Custom404() {
  const [url, setUrl] = useState("https://cal.com/signup?username=");
  useEffect(() => {
    setUrl(`https://cal.com/signup?username=${username.replace("/", "")}`);
-  }, [router.query]);
+  }, [username, router.query]);

  const isSubpage = router.asPath.includes("/", 2);
  const isSignup = router.asPath.includes("/signup");
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -11,7 +11,12 @@ export default function Error500() {
      </Head>
      <div className="m-auto text-center">
        <h1 className="font-cal text-[250px] text-gray-900">
-          5<img src="/error.svg" className="-mt-10 inline w-60" />0
+          5
+          {
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src="/error.svg" className="-mt-10 inline w-60" alt="0" />
+          }
+          0
        </h1>
        <h2 className="mb-2 -mt-16 text-3xl text-gray-600">It&apos;s not you, it&apos;s us.</h2>
        <p className="mb-4 max-w-2xl text-gray-500">
--- a/apps/web/pages/auth/error.tsx
+++ b/apps/web/pages/auth/error.tsx
@@ -32,7 +32,7 @@ export default function Error() {
        </div>
      </div>
      <div className="mt-5 sm:mt-6">
-        <Link href="/auth/login">
+        <Link href="/auth/login" passHref>
          <Button className="flex w-full justify-center">{t("go_back_login")}</Button>
        </Link>
      </div>
--- a/apps/web/pages/auth/forgot-password/[id].tsx
+++ b/apps/web/pages/auth/forgot-password/[id].tsx
@@ -63,13 +63,16 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
            </h2>
          </div>
          <p>{t("password_has_been_reset_login")}</p>
-          <Link href="/auth/login">
-            <button
-              type="button"
-              className="flex w-full justify-center px-4 py-2 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
-              {t("login")}
-            </button>
-          </Link>
+          {
+            // eslint-disable-next-line @next/next/link-passhref
+            <Link href="/auth/login">
+              <button
+                type="button"
+                className="flex w-full justify-center px-4 py-2 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
+                {t("login")}
+              </button>
+            </Link>
+          }
        </div>
      </>
    );
@@ -84,7 +87,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
            <h2 className="text-center text-3xl font-extrabold text-gray-900">{t("request_is_expired")}</h2>
          </div>
          <p>{t("request_is_expired_instructions")}</p>
-          <Link href="/auth/forgot-password">
+          <Link href="/auth/forgot-password" passHref>
            <button
              type="button"
              className="flex w-full justify-center px-4 py-2 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -25,7 +25,7 @@ export default function Logout(props: Props) {
    if (props.query?.survey === "true") {
      router.push("https://cal.com/cancellation");
    }
-  }, []);
+  }, [props.query?.survey, router]);
  const { t } = useLocale();

  return (
@@ -43,7 +43,7 @@ export default function Logout(props: Props) {
          </div>
        </div>
      </div>
-      <Link href="/auth/login">
+      <Link href="/auth/login" passHref>
        <Button className="flex w-full justify-center"> {t("go_back_login")}</Button>
      </Link>
    </AuthContainer>
--- a/apps/web/pages/auth/sso/[provider].tsx
+++ b/apps/web/pages/auth/sso/[provider].tsx
@@ -38,7 +38,7 @@ export default function Provider(props: SSOProviderPageProps) {
    } else {
      signIn(props.provider);
    }
-  }, []);
+  }, [props.isSAMLLoginEnabled, props.product, props.provider, props.tenant, router]);
  return null;
 }

--- a/apps/web/pages/availability/troubleshoot.tsx
+++ b/apps/web/pages/availability/troubleshoot.tsx
@@ -48,7 +48,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
        });
    };
    fetchAvailability(selectedDate);
-  }, [selectedDate]);
+  }, [user.username, selectedDate]);

  return (
    <div className="max-w-xl overflow-hidden rounded-sm bg-white shadow">
--- a/apps/web/pages/event-types/[type].tsx
+++ b/apps/web/pages/event-types/[type].tsx
@@ -329,6 +329,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
    fetchTokens();

    !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0].id));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function deleteEventTypeHandler(event: React.MouseEvent<HTMLElement, MouseEvent>) {
--- a/apps/web/pages/getting-started.tsx
+++ b/apps/web/pages/getting-started.tsx
@@ -12,7 +12,7 @@ import { NextPageContext } from "next";
 import { useSession } from "next-auth/react";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import { useForm } from "react-hook-form";
 import TimezoneSelect from "react-timezone-select";
 import * as z from "zod";
@@ -102,21 +102,24 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
  const [selectedImport, setSelectedImport] = useState("");
  const [error, setError] = useState<Error | null>(null);

-  const updateUser = async (data: Prisma.UserUpdateInput) => {
-    const res = await fetch(`/api/user/${props.user.id}`, {
-      method: "PATCH",
-      body: JSON.stringify({ data: { ...data } }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
+  const updateUser = useCallback(
+    async (data: Prisma.UserUpdateInput) => {
+      const res = await fetch(`/api/user/${props.user.id}`, {
+        method: "PATCH",
+        body: JSON.stringify({ data: { ...data } }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });

-    if (!res.ok) {
-      throw new Error((await res.json()).message);
-    }
-    const responseData = await res.json();
-    return responseData.data;
-  };
+      if (!res.ok) {
+        throw new Error((await res.json()).message);
+      }
+      const responseData = await res.json();
+      return responseData.data;
+    },
+    [props.user.id]
+  );

  const createEventType = async (data: Prisma.EventTypeCreateInput) => {
    const res = await fetch(`/api/availability/eventtype`, {
@@ -288,7 +291,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
    if (username) {
      validateAndSave(username);
    }
-  }, []);
+  }, [updateUser]);

  const availabilityForm = useForm({ defaultValues: { schedule: DEFAULT_SCHEDULE } });
  const steps = [
--- a/apps/web/pages/success.tsx
+++ b/apps/web/pages/success.tsx
@@ -200,7 +200,7 @@ export default function Success(props: SuccessProps) {
    });
    setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()));
    setIs24h(!!localStorage.getItem("timeOption.is24hClock"));
-  }, [eventType, needsConfirmation]);
+  }, [date, eventType, needsConfirmation]);

  function eventLink(): string {
    const optional: { location?: string } = {};
@@ -284,7 +284,10 @@ export default function Success(props: SuccessProps) {
                          "mx-auto flex items-center justify-center",
                          !giphyImage ? "h-12 w-12 rounded-full bg-green-100" : ""
                        )}>
-                        {giphyImage && !needsConfirmation && <img src={giphyImage} alt={"Gif from Giphy"} />}
+                        {giphyImage && !needsConfirmation && (
+                          // eslint-disable-next-line @next/next/no-img-element
+                          <img src={giphyImage} alt={"Gif from Giphy"} />
+                        )}
                        {!giphyImage && !needsConfirmation && (
                          <CheckIcon className="h-8 w-8 text-green-600" />
                        )}
--- a/apps/web/pages/video/[uid].tsx
+++ b/apps/web/pages/video/[uid].tsx
@@ -96,8 +96,14 @@ export default function JoinCall(props: JoinCallPageProps) {
        token: props.booking.dailyRef?.dailytoken,
      });
    }
-  }, []);
-
+  }, [
+    emptyBooking,
+    meetingUnavailable,
+    props.booking?.dailyRef?.dailytoken,
+    props.booking?.dailyRef?.dailyurl,
+    props.booking?.user?.id,
+    session?.userid,
+  ]);
  return (
    <>
      <Head>
@@ -116,16 +122,19 @@ export default function JoinCall(props: JoinCallPageProps) {
        <meta property="twitter:description" content={t("quick_video_meeting")} />
      </Head>
      <div style={{ zIndex: 2, position: "relative" }}>
-        <Link href="/">
-          <img
-            className="h-5·w-auto fixed z-10 hidden sm:inline-block"
-            src="https://cal.com/logo-white.svg"
-            alt="Cal.com Logo"
-            style={{
-              top: 46,
-              left: 24,
-            }}
-          />
+        <Link href="/" passHref>
+          {
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              className="h-5·w-auto fixed z-10 hidden sm:inline-block"
+              src="https://cal.com/logo-white.svg"
+              alt="Cal.com Logo"
+              style={{
+                top: 46,
+                left: 24,
+              }}
+            />
+          }
        </Link>
        {JoinCall}
      </div>
--- a/apps/web/public/cal-logo-word-dark.svg
+++ b/apps/web/public/cal-logo-word-dark.svg
@@ -0,0 +1,9 @@
+<svg width="101" height="22" viewBox="0 0 101 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0582 20.817C4.32115 20.817 0 16.2763 0 10.6704C0 5.04589 4.1005 0.467773 10.0582 0.467773C13.2209 0.467773 15.409 1.43945 17.1191 3.66311L14.3609 5.96151C13.2025 4.72822 11.805 4.11158 10.0582 4.11158C6.17833 4.11158 4.04533 7.08268 4.04533 10.6704C4.04533 14.2582 6.38059 17.1732 10.0582 17.1732C11.7866 17.1732 13.2577 16.5566 14.4161 15.3233L17.1375 17.7151C15.501 19.8453 13.2577 20.817 10.0582 20.817Z" fill="#fafafa"/>
+<path d="M29.0161 5.88601H32.7304V20.4612H29.0161V18.331C28.2438 19.8446 26.9566 20.8536 24.4927 20.8536C20.5577 20.8536 17.4133 17.4341 17.4133 13.2297C17.4133 9.02528 20.5577 5.60571 24.4927 5.60571C26.9383 5.60571 28.2438 6.61477 29.0161 8.12835V5.88601ZM29.1264 13.2297C29.1264 10.95 27.5634 9.06266 25.0995 9.06266C22.7274 9.06266 21.1828 10.9686 21.1828 13.2297C21.1828 15.4346 22.7274 17.3967 25.0995 17.3967C27.5451 17.3967 29.1264 15.4907 29.1264 13.2297Z" fill="#fafafa"/>
+<path d="M35.3599 0H39.0742V20.4427H35.3599V0Z" fill="#fafafa"/>
+<path d="M40.7291 18.5182C40.7291 17.3223 41.6853 16.3132 42.9908 16.3132C44.2964 16.3132 45.2158 17.3223 45.2158 18.5182C45.2158 19.7515 44.278 20.7605 42.9908 20.7605C41.7037 20.7605 40.7291 19.7515 40.7291 18.5182Z" fill="#fafafa"/>
+<path d="M59.4296 18.1068C58.0505 19.7885 55.9543 20.8536 53.4719 20.8536C49.0404 20.8536 45.7858 17.4341 45.7858 13.2297C45.7858 9.02528 49.0404 5.60571 53.4719 5.60571C55.8623 5.60571 57.9402 6.61477 59.3193 8.20309L56.4508 10.6136C55.7336 9.71667 54.7958 9.04397 53.4719 9.04397C51.0999 9.04397 49.5553 10.95 49.5553 13.211C49.5553 15.472 51.0999 17.378 53.4719 17.378C54.9062 17.378 55.8991 16.6306 56.6346 15.6215L59.4296 18.1068Z" fill="#fafafa"/>
+<path d="M59.7422 13.2297C59.7422 9.02528 62.9968 5.60571 67.4283 5.60571C71.8598 5.60571 75.1144 9.02528 75.1144 13.2297C75.1144 17.4341 71.8598 20.8536 67.4283 20.8536C62.9968 20.8349 59.7422 17.4341 59.7422 13.2297ZM71.3449 13.2297C71.3449 10.95 69.8003 9.06266 67.4283 9.06266C65.0563 9.04397 63.5117 10.95 63.5117 13.2297C63.5117 15.4907 65.0563 17.3967 67.4283 17.3967C69.8003 17.3967 71.3449 15.4907 71.3449 13.2297Z" fill="#fafafa"/>
+<path d="M100.232 11.5482V20.4428H96.518V12.4638C96.518 9.94119 95.3412 8.85739 93.576 8.85739C91.921 8.85739 90.7442 9.67958 90.7442 12.4638V20.4428H87.0299V12.4638C87.0299 9.94119 85.8346 8.85739 84.0878 8.85739C82.4329 8.85739 80.9802 9.67958 80.9802 12.4638V20.4428H77.2659V5.8676H80.9802V7.88571C81.7525 6.31607 83.15 5.53125 85.3014 5.53125C87.3425 5.53125 89.0525 6.5403 89.9903 8.24074C90.9281 6.50293 92.3072 5.53125 94.8079 5.53125C97.8603 5.54994 100.232 7.86702 100.232 11.5482Z" fill="#fafafa"/>
+</svg>
--- a/packages/app-store/googlevideo/_metadata.ts
+++ b/packages/app-store/googlevideo/_metadata.ts
@@ -12,9 +12,9 @@ export const metadata = {
  category: "video",
  type: "google_video",
  title: "Google Meet",
-  imageSrc: "https://cdn.iconscout.com/icon/free/png-256/google-meet-2923654-2416657.png",
+  imageSrc: "/api/app-store/googlevideo/logo.webp",
  variant: "conferencing",
-  logo: "https://cdn.iconscout.com/icon/free/png-256/google-meet-2923654-2416657.png",
+  logo: "/api/app-store/googlevideo/logo.webp",
  publisher: "Cal.com",
  rating: 5,
  reviews: 69,
--- a/packages/app-store/googlevideo/static/logo.webp
+++ b/packages/app-store/googlevideo/static/logo.webp
--- a/packages/app-store/metamask/_metadata.ts
+++ b/packages/app-store/metamask/_metadata.ts
@@ -14,7 +14,7 @@ export const metadata = {
  rating: 5,
  reviews: 69,
  slug: "metamask",
-  title: "Meta Mask",
+  title: "MetaMask",
  trending: true,
  type: "metamask_web3",
  url: "https://cal.com/",
--- a/packages/app-store/wipemycalother/_metadata.ts
+++ b/packages/app-store/wipemycalother/_metadata.ts
@@ -8,8 +8,8 @@ export const metadata = {
  installed: true,
  category: "other",
  // If using static next public folder, can then be referenced from the base URL (/).
-  imageSrc: "/api/app-store/_example/icon.svg",
-  logo: "/api/app-store/_example/icon.svg",
+  imageSrc: "/api/app-store/wipemycalother/icon.svg",
+  logo: "/api/app-store/wipemycalother/icon.svg",
  publisher: "Cal.com",
  rating: 0,
  reviews: 0,
--- a/packages/ui/Button.tsx
+++ b/packages/ui/Button.tsx
@@ -94,7 +94,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
        <StartIcon
          className={classNames(
            "inline",
-            size === "icon" ? "h-5 w-5 " : "-ml-1 h-5 w-5 ltr:mr-2 rtl:ml-2 rtl:ml-2 rtl:-mr-1"
+            size === "icon" ? "h-5 w-5 " : "-ml-1 h-5 w-5 ltr:mr-2 rtl:ml-2 rtl:-mr-1"
          )}
        />
      )}