Skip to content

Use a TailwindCSS managed class to centralize layout styling #6390

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

Merged
merged 1 commit into from
Oct 26, 2021
Merged

Use a TailwindCSS managed class to centralize layout styling #6390

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
2 changes: 1 addition & 1 deletion components/dashboard/src/FromReferrer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function FromReferrer() {
return <></>;
}

return <div className="lg:px-28 px-10 flex flex-col space-y-2">
return <div className="app-container flex flex-col space-y-2">
<div className="px-6 py-3 flex justify-between space-x-2 text-gray-400 h-96">
<div className="flex flex-col items-center w-96 m-auto mt-40">
<h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Referrer Found</h3>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ export default function Menu() {
}

return <>
<header className={`lg:px-28 px-10 flex flex-col pt-4 space-y-4 ${isMinimalUI || !!prebuildId ? 'pb-4' : ''}`} data-analytics='{"button_type":"menu"}'>
<header className={`app-container flex flex-col pt-4 space-y-4 ${isMinimalUI || !!prebuildId ? 'pb-4' : ''}`} data-analytics='{"button_type":"menu"}'>
<div className="flex h-10">
<div className="flex justify-between items-center pr-3">
<Link to={gitpodIconUrl()}>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function Header(p: HeaderProps) {
}
document.title = `${p.title} — Gitpod`;
}, []);
return <div className="lg:px-28 px-10 border-gray-200 dark:border-gray-800">
return <div className="app-container border-gray-200 dark:border-gray-800">
<div className="flex pb-8 pt-6">
<div className="">
{typeof p.title === "string" ? (<h1 className="tracking-tight">{p.title}</h1>) : p.title}
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/components/PageWithSubMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function PageWithSubMenu(p: PageWithSubMenuProps) {
const location = useLocation();
return <div className="w-full">
<Header title={p.title} subtitle={p.subtitle} />
<div className='lg:px-28 px-10 flex pt-9'>
<div className='app-container flex pt-9'>
<div>
<ul className="flex flex-col text tracking-wide text-gray-500 pt-4 lg:pt-0 w-48 space-y-2">
{p.subMenu.map(e => {
Expand Down
3 changes: 3 additions & 0 deletions components/dashboard/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
@apply text-sm text-gray-400 dark:text-gray-600;
}

.app-container {
@apply lg:px-28 px-10;
}
.btn-login {
@apply rounded-md border-none bg-gray-100 hover:bg-gray-200 text-gray-500 dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600;
}
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/prebuilds/InstallGitHubApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function InstallGitHubApp() {
const params = new URLSearchParams(location.search);
const installationId = params.get("installation_id") || undefined;
if (!installationId) {
return <div className="lg:px-28 px-10 flex flex-col space-y-2">
return <div className="app-container flex flex-col space-y-2">
<div className="px-6 py-3 flex justify-between space-x-2 text-gray-400 border-t border-gray-200 dark:border-gray-800 h-96">
<div className="flex flex-col items-center w-96 m-auto">
<h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Installation ID Found</h3>
Expand All @@ -61,7 +61,7 @@ export default function InstallGitHubApp() {
const goToApp = () => window.location.href = gitpodHostUrl.toString();

return <>
<div className="lg:px-28 px-10 flex flex-col space-y-2">
<div className="app-container flex flex-col space-y-2">
<div className="px-6 py-3 flex justify-between space-x-2 text-gray-400">
<div className="flex flex-col items-center m-auto max-w-lg mt-40">
<h3 className="text-center pb-3 text-gray-500">Install GitHub App</h3>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/projects/ConfigureProject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export default function () {

return <>
<Header title="Configuration" subtitle="View and edit project configuration." />
<div className="lg:px-28 px-10 mt-8 flex space-x-4">
<div className="app-container mt-8 flex space-x-4">
<div className="flex-1 h-96 rounded-xl overflow-hidden relative flex flex-col">
<div className="flex bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-600 px-6 pt-3">
<TabMenuItem name=".gitpod.yml" selected={selectedEditor === '.gitpod.yml'} onClick={() => setSelectedEditor('.gitpod.yml')} />
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/projects/Prebuild.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default function () {

return <>
<Header title={renderTitle()} subtitle={renderSubtitle()} />
<div className="lg:px-28 px-10 mt-8">
<div className="app-container mt-8">
<div className="rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-800 flex flex-col">
<div className="h-96 flex">
<PrebuildLogs workspaceId={prebuild?.info?.buildWorkspaceId} onInstanceUpdate={onInstanceUpdate} />
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/projects/Prebuilds.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default function () {

return <>
<Header title="Prebuilds" subtitle={`View recent prebuilds for active branches.`} />
<div className="lg:px-28 px-10">
<div className="app-container">
<div className="flex mt-8">
<div className="flex">
<div className="py-4">
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/projects/Project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export default function () {

return <>
<Header title="Branches" subtitle={<h2 className="tracking-wide">View recent active branches for <a className="gp-link" href={project?.cloneUrl!}>{toRemoteURL(project?.cloneUrl || '')}</a>.</h2>} />
<div className="lg:px-28 px-10">
<div className="app-container">
{showAuthBanner ? (
<div className="mt-8 rounded-xl text-gray-500 bg-gray-50 dark:bg-gray-800 flex-col">
<div className="p-8 text-center">
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/projects/Projects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export default function () {

)}
{projects.length > 0 && (
<div className="lg:px-28 px-10">
<div className="app-container">
<div className="mt-8 pb-2 flex border-b border-gray-200 dark:border-gray-800">
<div className="flex">
<div className="py-4">
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/teams/Members.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export default function() {

return <>
<Header title="Members" subtitle="Manage team members." />
<div className="lg:px-28 px-10">
<div className="app-container">
<div className="flex mt-8">
<div className="flex">
<div className="py-4">
Expand Down
6 changes: 3 additions & 3 deletions components/dashboard/src/workspaces/Workspaces.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export default function () {
{workspaceModel?.initialized && (
activeWorkspaces.length > 0 || inactiveWorkspaces.length > 0 || workspaceModel.searchTerm ?
<>
<div className="lg:px-28 px-10 py-2 flex">
<div className="app-container py-2 flex">
<div className="flex">
<div className="py-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="16" height="16"><path fill="#A8A29E" d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z" /></svg>
Expand All @@ -167,7 +167,7 @@ export default function () {
</div>
<button onClick={showStartWSModal} className="ml-2">New Workspace</button>
</div>
<ItemsList className="lg:px-28 px-10">
<ItemsList className="app-container">
<div className="border-t border-gray-200 dark:border-gray-800"></div>
{
teamsWorkspaceModel?.initialized && <ActiveTeamWorkspaces teams={teams} teamProjects={teamsProjects} teamWorkspaces={teamsActiveWorkspaces} />
Expand All @@ -191,7 +191,7 @@ export default function () {
</ItemsList>
</>
:
<div className="lg:px-28 px-10 flex flex-col space-y-2">
<div className="app-container flex flex-col space-y-2">
<div className="px-6 py-3 flex flex-col text-gray-400 border-t border-gray-200 dark:border-gray-800">
{teamsWorkspaceModel?.initialized && <ActiveTeamWorkspaces teams={teams} teamProjects={teamsProjects} teamWorkspaces={teamsActiveWorkspaces} />}
<div className="flex flex-col items-center justify-center h-96 w-96 mx-auto">
Expand Down