chore(ui): make workspace state tabs look nicer

leg100 · Aug 1, 2023 · bbe38b4 · bbe38b4
1 parent fee491f
commit bbe38b4
Show file tree

Hide file tree

Showing 28 changed files with 28 additions and 11 deletions.
diff --git a/docs/images/connected_workspace_main_page.png b/docs/images/connected_workspace_main_page.png
diff --git a/docs/images/modules_confirm.png b/docs/images/modules_confirm.png
diff --git a/docs/images/modules_list.png b/docs/images/modules_list.png
diff --git a/docs/images/modules_select_provider.png b/docs/images/modules_select_provider.png
diff --git a/docs/images/modules_select_repo.png b/docs/images/modules_select_repo.png
diff --git a/docs/images/new_github_vcs_provider_form.png b/docs/images/new_github_vcs_provider_form.png
diff --git a/docs/images/new_org_created.png b/docs/images/new_org_created.png
diff --git a/docs/images/newly_created_module_page.png b/docs/images/newly_created_module_page.png
diff --git a/docs/images/org_token_created.png b/docs/images/org_token_created.png
diff --git a/docs/images/org_token_new.png b/docs/images/org_token_new.png
diff --git a/docs/images/organization_main_menu.png b/docs/images/organization_main_menu.png
diff --git a/docs/images/owners_team_page.png b/docs/images/owners_team_page.png
diff --git a/docs/images/run_page_planned_and_finished_state.png b/docs/images/run_page_planned_and_finished_state.png
diff --git a/docs/images/run_page_planned_state.png b/docs/images/run_page_planned_state.png
diff --git a/docs/images/run_page_started.png b/docs/images/run_page_started.png
diff --git a/docs/images/team_permissions_added_workspace_manager.png b/docs/images/team_permissions_added_workspace_manager.png
diff --git a/docs/images/terraform_login_consent.png b/docs/images/terraform_login_consent.png
diff --git a/docs/images/user_token_created.png b/docs/images/user_token_created.png
diff --git a/docs/images/variables_entering_top_secret.png b/docs/images/variables_entering_top_secret.png
diff --git a/docs/images/vcs_providers_list.png b/docs/images/vcs_providers_list.png
diff --git a/docs/images/workspace_main_page.png b/docs/images/workspace_main_page.png
diff --git a/docs/images/workspace_page.png b/docs/images/workspace_page.png
diff --git a/docs/images/workspace_permissions.png b/docs/images/workspace_permissions.png
diff --git a/docs/images/workspace_settings.png b/docs/images/workspace_settings.png
diff --git a/docs/images/workspace_vcs_providers_list.png b/docs/images/workspace_vcs_providers_list.png
diff --git a/docs/images/workspace_vcs_repo_list.png b/docs/images/workspace_vcs_repo_list.png
diff --git a/internal/http/html/static/css/output.css b/internal/http/html/static/css/output.css
@@ -770,6 +770,10 @@ th, td {
   position: relative;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .col-start-2 {
   grid-column-start: 2;
 }
@@ -807,6 +811,10 @@ th, td {
   margin-bottom: 1.25rem;
 }
 
+.-mb-\[1px\] {
+  margin-bottom: -1px;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1027,6 +1035,11 @@ th, td {
   border-width: 1px;
 }
 
+.border-x {
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1035,6 +1048,10 @@ th, td {
   border-bottom-width: 2px;
 }
 
+.border-l {
+  border-left-width: 1px;
+}
+
 .border-t {
   border-top-width: 1px;
 }

diff --git a/internal/http/html/static/templates/content/state_get.tmpl b/internal/http/html/static/templates/content/state_get.tmpl
@@ -1,15 +1,15 @@
 <div class="" x-data="{ activeTab: 'resources' }">
-  <div class="flex">
+  <div class="flex -mb-[1px]">
       <label
-          class="p-2 border cursor-pointer" for="resources-tab"
+          class="p-2 border-l border-t border-black cursor-pointer" for="resources-tab"
           @click="activeTab = 'resources'"
-          :class="{ 'bg-gray-200 text-black border-black': activeTab == 'resources' }"
+          :class="{ 'bg-gray-200 text-black relative z-10': activeTab == 'resources' }"
           id="resources-label"
       >Resources ({{ len .Resources }})</label>
       <label
-          class="p-2 border cursor-pointer" for="outputs-tab"
+          class="p-2 border-x border-t border-black cursor-pointer" for="outputs-tab"
           @click="activeTab = 'outputs'"
-          :class="{ 'bg-gray-200 text-black border-black': activeTab == 'outputs' }"
+          :class="{ 'bg-gray-200 text-black': activeTab == 'outputs' }"
           id="outputs-label"
       >Outputs ({{ len .Outputs }})</label>
   </div>
@@ -19,7 +19,7 @@
     id="resources-table"
   >
     {{ with .Resources }}
-      <thead class="bg-gray-200 border-t border-b border-slate-900">
+      <thead class="bg-gray-200 border border-slate-900">
         <tr>
           <th>Name</th>
           <th>Provider</th>
@@ -28,7 +28,7 @@
         </tr>
       </thead>
     {{ end }}
-    <tbody>
+    <tbody class="border border-slate-900">
       {{ range .Resources }}
         <tr class="even:bg-gray-100">
           <td>{{ .Name }}</td>
@@ -37,7 +37,7 @@
           <td>{{ .ModuleName }}</td>
         </tr>
       {{ else }}
-        <tr>
+        <tr class="bg-gray-200">
           <td>No resources currently exist.</td>
         </tr>
       {{ end }}
@@ -49,23 +49,23 @@
     id="outputs-table"
   >
     {{ with .Outputs }}
-      <thead class="bg-gray-200 border-t border-b border-slate-900">
+      <thead class="bg-gray-200 border border-slate-900">
         <tr>
           <th>Name</th>
           <th>Type</th>
           <th>Value</th>
         </tr>
       </thead>
     {{ end }}
-    <tbody>
+    <tbody class="border border-slate-900">
       {{ range $k, $v := .Outputs }}
         <tr>
           <td>{{ $k }}</td>
           <td>{{ $v.Type }}</td>
           <td><span class="bg-gray-200">{{ $v.StringValue }}</span></td>
         </tr>
       {{ else }}
-        <tr>
+        <tr class="bg-gray-200">
           <td>No outputs currently exist.</td>
         </tr>
       {{ end }}