Skip to content

Commit

Permalink
refactor(Login): update layout and messaging for Gitpod Classic users (…
Browse files Browse the repository at this point in the history 
…#20388)
  • Loading branch information
@Siddhant-K-code
Siddhant-K-code authored Nov 25, 2024
1 parent e389b85 commit bb65be7
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 98 deletions.
133 changes: 35 additions & 98 deletions components/dashboard/src/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,9 @@ import { cn } from "@podkit/lib/cn";
import { userClient } from "./service/public-api";
import { ProductLogo } from "./components/ProductLogo";
import { useIsDataOps } from "./data/featureflag-query";
import { LinkButton } from "@podkit/buttons/LinkButton";
import { IconGitpodEngraved } from "./icons/GitpodEngraved";
import { IconEarlyAccess } from "./icons/IconEarlyAccess";
import { useTheme } from "./theme-context";
import GitpodClassicCard from "./images/gitpod-classic-card.png";
import { LoadingState } from "@podkit/loading/LoadingState";
import { isGitpodIo } from "./utils";

export function markLoggedIn() {
document.cookie = GitpodCookie.generateCookie(window.location.hostname);
Expand Down Expand Up @@ -145,12 +143,11 @@ type LoginWrapperProps = LoginProps & {

const PAYGLoginWrapper: FC<LoginWrapperProps> = ({ providerFromContext, repoPathname, onLoggedIn }) => {
return (
<>
<LeftPanel />
<div className="flex flex-col md:flex-row w-full">
<div
id="login-section"
// for some reason, min-h-dvh does not work, so we need tailwind's arbitrary values
className="w-full min-h-[100dvh] lg:w-4/5 flex flex-col justify-center items-center bg-[#FDF1E7] dark:bg-[#23211e] p-2"
className="w-full min-h-[100dvh] lg:w-2/3 flex flex-col justify-center items-center bg-[#FDF1E7] dark:bg-[#23211e] p-2"
>
<div
id="login-section-column"
Expand All @@ -163,15 +160,13 @@ const PAYGLoginWrapper: FC<LoginWrapperProps> = ({ providerFromContext, repoPath
onLoggedIn={onLoggedIn}
repoPathname={repoPathname}
/>
<p className="text-sm text-[#64645F] mt-6 mb-6 lg:mb-0 lg:mt-8 max-w-sm text-center font-semibold">
Gitpod Classic will be sunset by April 1, 2025 and superseded by Gitpod Flex
</p>
</div>
}
<TermsOfServiceAndPrivacyPolicy />
</div>
</div>
</>
<RightProductDescriptionPanel />
</div>
);
};

Expand Down Expand Up @@ -212,6 +207,7 @@ const LoginContent = ({
}) => {
const { setUser } = useContext(UserContext);
const isDataOps = useIsDataOps();
const isGitpodIoUser = isGitpodIo();

const authProviders = useAuthProviderDescriptions();
const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
Expand Down Expand Up @@ -271,7 +267,7 @@ const LoginContent = ({
);

return (
<div className="rounded-xl px-10 py-10 mx-auto w-full max-w-md">
<div className="rounded-xl px-10 py-10 mx-auto w-full max-w-lg">
<div className="mx-auto pb-8">
<ProductLogo className="h-14 mx-auto block" />
</div>
Expand All @@ -284,8 +280,13 @@ const LoginContent = ({
<Heading2>Open a cloud development environment</Heading2>
<Subheading>for the repository {repoPathname?.slice(1)}</Subheading>
</>
) : (
) : !isGitpodIoUser ? (
<Heading1>Log in to Gitpod</Heading1>
) : (
<>
<Heading1>Log in to Gitpod Classic</Heading1>
<Subheading>Hosted by us</Subheading>
</>
)}
</div>

Expand Down Expand Up @@ -320,103 +321,39 @@ const LoginContent = ({
);
};

const LeftPanel = () => {
const { isDark } = useTheme();

const RightProductDescriptionPanel = () => {
return (
<div className="w-full lg:w-1/3 lg:max-w-lg flex flex-col justify-between p-4 lg:p-10 lg:pb-2 min-h-screen">
<div className="w-full lg:w-1/3 flex flex-col md:justify-center p-4 lg:p-10 lg:pb-2 md:min-h-screen">
<div>
<div className="p-[1px] bg-gradient-to-b from-white to-[#ECE7E5] dark:from-gray-700 dark:to-gray-600 rounded-2xl justify-center items-center mb-8">
<div className="bg-[#F9F9F9B2] dark:bg-gray-800 w-full p-4 rounded-2xl border border-gray-100 dark:border-gray-700">
<h2 className="bg-white dark:bg-gray-700 inline-flex text-xs font-semibold mb-4 border-[0.5px] shadow border-divider dark:border-gray-600 px-2 py-1 rounded-lg">
<span className="bg-gradient-to-l from-[#FFAE33] to-[#FF8A00] text-transparent bg-clip-text">
Did you know?
</span>
</h2>
<p className="text-pk-content-secondary dark:text-gray-300 mt-1">
We launched a new version of Gitpod in early access.
</p>
</div>
</div>
<div className="justify-center md:justify-start mb-6 md:mb-8">
<ProductLogo className="h-8 mb-4" />
<h2 className="text-2xl font-medium mb-2 dark:text-white inline-flex items-center gap-x-2">
Gitpod Flex
Gitpod Classic
</h2>
<p className="text-lg text-gray-600 dark:text-gray-300 mb-2">
Automated, standardized
<br /> development environments.
<p className="text-pk-content-secondary mb-2">
Automated, standardized development environments hosted by us in Gitpod’s infrastructure. Users
who joined before October 1, 2024 on non-Enterprise plans are considered Gitpod Classic users.
</p>
<div className="border border-pk-border-base rounded-xl p-4 bg-pk-surface-secondary mt-5">
<p className="text-gray-800 dark:text-gray-100">
<b>Please note:</b> Gitpod Classic will discontinued in April 2025 and replaced by{" "}
<a
className="gp-link font-semibold"
href="https://app.gitpod.io/login"
target="_blank"
rel="noopener noreferrer"
>
Gitpod Flex
</a>
.
</p>
</div>
</div>

<ul className="space-y-4">
{[
{
title: "Self-host in under 3 minutes",
description:
"All your source code, data, and intellectual property stays in your private network.",
},
{
title: "Local environments to replace Docker Desktop",
description:
"Built-in Linux virtualization to run Dev Container without Docker Desktop on macOS",
},
{
title: "Automate common development workflows",
description:
"Seed databases, provision infra, runbooks as one-click actions, configure code assistants, etc. ",
},
{
title: "Dev Container support",
description:
"Eliminate the need to manually install tools, dependencies and editor extensions.",
},
].map((feature, index) => (
<li key={index} className="flex items-start">
<GreenCheckIcon />
<div>
<span className="text-sm font-medium text-pk-content-primary">{feature.title}</span>
<p className="text-sm text-pk-content-secondary mt-0.5">{feature.description}</p>
</div>
</li>
))}
</ul>
<div className="flex w-full justify-center items-center mt-8 mb-2">
<LinkButton
variant="secondary"
className="text-pk-content-primary bg-pk-surface-primary dark:bg-gray-700 dark:text-white w-full shadow font-medium"
href="https://app.gitpod.io/login"
isExternalUrl={true}
>
Explore
</LinkButton>
</div>
</div>
<div className="justify-center items-center max-w-fit mx-auto flex flex-col pt-4">
<IconGitpodEngraved variant={isDark ? "dark" : "light"} className="shadow-engraving block h-6 w-6" />
<span className="py-1" />
<IconEarlyAccess className="dark:fill-pk-surface-01/30" variant={isDark ? "dark" : "light"} />
<img src={GitpodClassicCard} alt="Gitpod Classic" className="w-full" />
</div>
</div>
);
};

const GreenCheckIcon = () => {
return (
<div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0 mr-3 mt-1">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 20.5C16.2467 20.5 20.5 16.2467 20.5 11C20.5 5.75329 16.2467 1.5 11 1.5C5.75329 1.5 1.5 5.75329 1.5 11C1.5 16.2467 5.75329 20.5 11 20.5Z"
fill="#17C165"
stroke="#D5F6DB"
strokeWidth="3"
/>
<path d="M7 11.5L10 14L15 8" stroke="white" strokeWidth="2" strokeLinejoin="round" />
</svg>
</div>
);
};

const TermsOfServiceAndPrivacyPolicy = () => {
return (
<div className="flex-none mx-auto text-center px-4 pb-4">
Expand Down
Binary file added components/dashboard/src/images/gitpod-classic-card.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit bb65be7

Please sign in to comment.