Use a TailwindCSS managed class to centralize layout styling and to reduce redundant code

Author: danieldietrich

components/dashboard/src/FromReferrer.tsx

@@ -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>

components/dashboard/src/Menu.tsx

@@ -244,7 +244,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()}>

components/dashboard/src/components/Header.tsx

@@ -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}

components/dashboard/src/components/PageWithSubMenu.tsx

@@ -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 => {

components/dashboard/src/index.css

@@ -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;
     }

components/dashboard/src/prebuilds/InstallGitHubApp.tsx

@@ -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>
@@ -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>

components/dashboard/src/projects/ConfigureProject.tsx

@@ -211,7 +211,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')} />

components/dashboard/src/projects/Prebuild.tsx

@@ -114,7 +114,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} />

components/dashboard/src/projects/Prebuilds.tsx

@@ -151,7 +151,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">

components/dashboard/src/projects/Project.tsx

@@ -173,7 +173,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">

components/dashboard/src/projects/Projects.tsx

@@ -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">

components/dashboard/src/teams/Members.tsx

@@ -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">

components/dashboard/src/workspaces/Workspaces.tsx

@@ -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>
@@ -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} />
@@ -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">