From 6c0aee308fb4258fb4053e46fb264fefb719bdb1 Mon Sep 17 00:00:00 2001
From: Daniel Dietrich <daniel.dietrich@typefox.io>
Date: Mon, 25 Oct 2021 17:54:07 +0200
Subject: [PATCH] Use a TailwindCSS managed class to centralize layout styling
 and to reduce redundant code

---
 components/dashboard/src/FromReferrer.tsx               | 2 +-
 components/dashboard/src/Menu.tsx                       | 2 +-
 components/dashboard/src/components/Header.tsx          | 2 +-
 components/dashboard/src/components/PageWithSubMenu.tsx | 2 +-
 components/dashboard/src/index.css                      | 3 +++
 components/dashboard/src/prebuilds/InstallGitHubApp.tsx | 4 ++--
 components/dashboard/src/projects/ConfigureProject.tsx  | 2 +-
 components/dashboard/src/projects/Prebuild.tsx          | 2 +-
 components/dashboard/src/projects/Prebuilds.tsx         | 2 +-
 components/dashboard/src/projects/Project.tsx           | 2 +-
 components/dashboard/src/projects/Projects.tsx          | 2 +-
 components/dashboard/src/teams/Members.tsx              | 2 +-
 components/dashboard/src/workspaces/Workspaces.tsx      | 6 +++---
 13 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/components/dashboard/src/FromReferrer.tsx b/components/dashboard/src/FromReferrer.tsx
index fdabe9c29d26d8..0bf42c32961e67 100644
--- a/components/dashboard/src/FromReferrer.tsx
+++ b/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>
diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
index 42c3c8c39a2b7a..6bf2c67a37ce90 100644
--- a/components/dashboard/src/Menu.tsx
+++ b/components/dashboard/src/Menu.tsx
@@ -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()}>
diff --git a/components/dashboard/src/components/Header.tsx b/components/dashboard/src/components/Header.tsx
index 1df0553c6020b0..a98b60baea24a8 100644
--- a/components/dashboard/src/components/Header.tsx
+++ b/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}
diff --git a/components/dashboard/src/components/PageWithSubMenu.tsx b/components/dashboard/src/components/PageWithSubMenu.tsx
index 7d36bd2fe9c0d6..c43aa26eb181f0 100644
--- a/components/dashboard/src/components/PageWithSubMenu.tsx
+++ b/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 => {
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index 08181173cee08d..7e5035bb1b0689 100644
--- a/components/dashboard/src/index.css
+++ b/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;
     }
diff --git a/components/dashboard/src/prebuilds/InstallGitHubApp.tsx b/components/dashboard/src/prebuilds/InstallGitHubApp.tsx
index 35229d61262a3f..13a27c045f61d7 100644
--- a/components/dashboard/src/prebuilds/InstallGitHubApp.tsx
+++ b/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>
diff --git a/components/dashboard/src/projects/ConfigureProject.tsx b/components/dashboard/src/projects/ConfigureProject.tsx
index 18dae4b2604188..27124d8ff497f8 100644
--- a/components/dashboard/src/projects/ConfigureProject.tsx
+++ b/components/dashboard/src/projects/ConfigureProject.tsx
@@ -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')} />
diff --git a/components/dashboard/src/projects/Prebuild.tsx b/components/dashboard/src/projects/Prebuild.tsx
index 0fc935dce08799..c3a29fb7af734c 100644
--- a/components/dashboard/src/projects/Prebuild.tsx
+++ b/components/dashboard/src/projects/Prebuild.tsx
@@ -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} />
diff --git a/components/dashboard/src/projects/Prebuilds.tsx b/components/dashboard/src/projects/Prebuilds.tsx
index 70dcf8164595eb..45dec252ec521e 100644
--- a/components/dashboard/src/projects/Prebuilds.tsx
+++ b/components/dashboard/src/projects/Prebuilds.tsx
@@ -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">
diff --git a/components/dashboard/src/projects/Project.tsx b/components/dashboard/src/projects/Project.tsx
index fa277fdca85907..3bd883400f5745 100644
--- a/components/dashboard/src/projects/Project.tsx
+++ b/components/dashboard/src/projects/Project.tsx
@@ -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">
diff --git a/components/dashboard/src/projects/Projects.tsx b/components/dashboard/src/projects/Projects.tsx
index addf02882b256e..cc521b150d9fd4 100644
--- a/components/dashboard/src/projects/Projects.tsx
+++ b/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">
diff --git a/components/dashboard/src/teams/Members.tsx b/components/dashboard/src/teams/Members.tsx
index 28c47e02c39c5a..1c1bbab950e5cc 100644
--- a/components/dashboard/src/teams/Members.tsx
+++ b/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">
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
index 4b8bf3665e4a1b..2cb426571c31e5 100644
--- a/components/dashboard/src/workspaces/Workspaces.tsx
+++ b/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">