fix: onboarding invitations overflow (#1575)

* fix: onboarding invitations overflow

* fix: user avatar in the notification card

* style: update graph grid color

apps/app/components/account/email-code-form.tsx

@@ -120,7 +120,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
           Please check your inbox at <span className="font-medium">{watch("email")}</span>
         </p>
       )}
-      <form className="space-y-4 mt-10">
+      <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
         <div className="space-y-1">
           <Input
             id="email"

apps/app/components/notifications/notification-card.tsx

@@ -90,13 +90,15 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         <div className="relative w-12 h-12 rounded-full">
           {notification.triggered_by_details.avatar &&
           notification.triggered_by_details.avatar !== "" ? (
+            <div className="h-12 w-12 rounded-full">
               <Image
                 src={notification.triggered_by_details.avatar}
-              alt="profile image"
+                alt="Profile Image"
                 layout="fill"
                 objectFit="cover"
                 className="rounded-full"
               />
+            </div>
           ) : (
             <div className="w-12 h-12 bg-custom-background-100 rounded-full flex justify-center items-center">
               <span className="text-custom-text-100 font-medium text-lg">

apps/app/components/onboarding/join-workspaces.tsx

@@ -88,7 +88,7 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange }) => {
     <div className="w-full space-y-7 sm:space-y-10">
       <h5 className="sm:text-lg">We see that someone has invited you to</h5>
       <h4 className="text-xl sm:text-2xl font-semibold">Join a workspace</h4>
-      <div className="md:w-3/5 space-y-4">
+      <div className="max-h-[37vh] overflow-y-auto md:w-3/5 space-y-4">
         {invitations &&
           invitations.map((invitation) => {
             const isSelected = invitationsRespond.includes(invitation.id);
@@ -146,7 +146,11 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange }) => {
         >
           Accept & Join
         </PrimaryButton>
-        <SecondaryButton className="border border-none bg-transparent" size="md" onClick={finishOnboarding} >
+        <SecondaryButton
+          className="border border-none bg-transparent"
+          size="md"
+          onClick={finishOnboarding}
+        >
           Skip for now
         </SecondaryButton>
       </div>

apps/app/constants/graph.ts

@@ -17,12 +17,12 @@ export const CHARTS_THEME: Theme = {
       background: "rgb(var(--color-background-80))",
       color: "rgb(var(--color-text-200))",
       fontSize: "0.8rem",
-      border: "1px solid rgb(var(--color-background-80))",
+      border: "1px solid rgb(var(--color-border-300))",
     },
   },
   grid: {
     line: {
-      stroke: "rgb(var(--color-background-80))",
+      stroke: "rgb(var(--color-border-100))",
     },
   },
 };

apps/app/pages/index.tsx

@@ -145,11 +145,11 @@ const HomePage: NextPage = () => {
                   <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
                     Sign in to Plane
                   </h1>
-                  <div className="flex flex-col divide-y divide-custom-border-200 sm:w-[360px] mx-auto">
+                  <div className="flex flex-col divide-y divide-custom-border-200">
                     <div className="pb-7">
                       <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
                     </div>
-                    <div className="flex flex-col items-center justify-center gap-4 pt-7 overflow-hidden">
+                    <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
                       <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
                       <GithubLoginButton handleSignIn={handleGitHubSignIn} />
                     </div>

apps/app/pages/invitations.tsx

@@ -105,12 +105,13 @@ const OnBoard: NextPage = () => {
               {user?.email}
             </div>
           </div>
-          {invitations && invitations.length > 0 ? (
+          {invitations ? (
+            invitations.length > 0 ? (
               <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
                 <div className="w-full space-y-10">
                   <h5 className="text-lg">We see that someone has invited you to</h5>
                   <h4 className="text-2xl font-semibold">Join a workspace</h4>
-                <div className="md:w-3/5 space-y-4">
+                  <div className="max-h-[37vh] md:w-3/5 space-y-4 overflow-y-auto">
                     {invitations.map((invitation) => {
                       const isSelected = invitationsRespond.includes(invitation.id);
 
@@ -189,7 +190,8 @@ const OnBoard: NextPage = () => {
                   onClick={() => router.push("/")}
                 />
               </div>
-          )}
+            )
+          ) : null}
         </div>
       </DefaultLayout>
     </UserAuthorizationLayout>