Fix: Project page styling polish (#4666)

* Reduce heading size on project tabs

* Adjust spacings of project title area

* Adjust workspace icon on project page

- Don't link to workspace
- Only show if viewing a project from a workspace that you're not a member of

packages/frontend-2/components/common/TitleDescription.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col gap-1">
     <h2 class="text-heading">{{ title }}</h2>
     <p class="text-body-sm text-foreground-2 line-clamp-2">
       {{ description ? description : 'No description' }}

packages/frontend-2/components/project/page/Header.vue

@@ -21,17 +21,14 @@
     </Portal>
 
     <div class="flex gap-x-3">
-      <NuxtLink
-        v-if="project.workspace && isWorkspacesEnabled"
-        :to="workspaceRoute(project.workspace.slug)"
-      >
-        <WorkspaceAvatar
-          :logo="project.workspace.logo"
-          :name="project.workspace.name"
-          size="sm"
-          class="mt-0.5"
-        />
-      </NuxtLink>
+      <WorkspaceAvatar
+        v-if="project.workspace && isWorkspacesEnabled && !project.workspace.role"
+        v-tippy="project.workspace.name"
+        :logo="project.workspace.logo"
+        :name="project.workspace.name"
+        size="sm"
+        class="mt-0.5"
+      />
       <CommonTitleDescription
         :title="project.name"
         :description="project.description"

packages/frontend-2/components/project/page/automations/Header.vue

@@ -2,7 +2,7 @@
   <div
     class="flex flex-col gap-y-2 md:gap-y-0 md:flex-row md:justify-between md:items-center mt-3"
   >
-    <h1 class="block text-heading-lg md:text-heading-xl flex items-center gap-3">
+    <h1 class="block text-heading-lg flex items-center gap-3">
       Automations
       <CommonBadge
         v-tippy="

packages/frontend-2/components/project/page/collaborators/Collaborators.vue

@@ -2,7 +2,7 @@
   <div>
     <div v-if="project" class="pt-3">
       <div class="flex justify-between space-x-2 items-center">
-        <h1 class="block text-heading-lg md:text-heading-xl">Collaborators</h1>
+        <h1 class="block text-heading-lg">Collaborators</h1>
         <div v-tippy="tooltipText">
           <FormButton :disabled="!canInvite" @click="toggleInviteDialog">
             Invite to project

packages/frontend-2/components/project/page/discussions/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex justify-between items-center mb-8 mt-3">
-      <h1 class="block text-heading-lg md:text-heading-xl">Discussions</h1>
+      <h1 class="block text-heading-lg">Discussions</h1>
       <div class="space-x-2 flex items-center">
         <FormCheckbox
           :id="checkboxId"

packages/frontend-2/components/project/page/models/Header.vue

@@ -4,7 +4,7 @@
       class="flex flex-col space-y-2 xl:space-y-0 xl:flex-row xl:justify-between xl:items-center mb-4 mt-3"
     >
       <div class="flex justify-between items-center flex-wrap xl:flex-nowrap">
-        <h1 class="block text-heading-lg md:text-heading-xl">Models</h1>
+        <h1 class="block text-heading-lg">Models</h1>
         <div class="flex items-center space-x-2 w-full mt-2 sm:w-auto sm:mt-0">
           <FormButton
             color="outline"

packages/frontend-2/pages/projects/[id]/index.vue

@@ -16,7 +16,7 @@
       />
 
       <div
-        class="flex flex-col md:flex-row md:justify-between md:items-center gap-6 mt-2 mb-6"
+        class="flex flex-col md:flex-row md:justify-between md:items-center gap-6 mb-6"
       >
         <ProjectPageHeader :project="project" />
         <div class="flex gap-x-3 items-center justify-between">

packages/frontend-2/pages/projects/[id]/index/settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mt-3">
-    <h1 class="block text-heading-lg md:text-heading-xl mb-4 sm:mb-8">Settings</h1>
+    <h1 class="block text-heading-lg mb-4 sm:mb-8">Settings</h1>
     <LayoutTabsVertical
       v-model:active-item="activeSettingsPageTab"
       :items="settingsTabItems"