Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[dashboard] Refactor Login layout and messaging for Gitpod Classic users #20388

Merged
merged 1 commit into from
Nov 25, 2024
Merged

[dashboard] Refactor Login layout and messaging for Gitpod Classic users #20388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 35 additions & 98 deletions components/dashboard/src/Login.tsx
View file
Open in desktop
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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

copy nit: "Hosted by us" could theoretically also be used for Gitpod Flex. Is that intentional?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could theoretically also be used for Gitpod Flex

I don't think so 🤔

As of now, Gitpod Flex is not "hosted" by us, it's hosted in customer's runners

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The point is to highligh that workspaces are hosted by us, one does not need to self host or run on local.

I do agree it looks out of the context though. Not sure how could be rephrased better.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the runners are hosted by users, but the app people use as the primary interface is hosted by us either way. It's not clear what is "Hosted by us" exactly. This is not that big of a deal though compared to my other comment, I think we can resolve.

</>
)}
</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.
filiptronicek marked this conversation as resolved.
Show resolved Hide resolved
</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
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading