From de3f1808306e4c9f83d2e2bf65d8807ee4764e62 Mon Sep 17 00:00:00 2001
From: Benjamin Ottensten <benjamin@speckle.systems>
Date: Mon, 5 May 2025 21:57:33 +0200
Subject: [PATCH] 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
---
 .../components/common/TitleDescription.vue    |  2 +-
 .../components/project/page/Header.vue        | 19 ++++++++-----------
 .../project/page/automations/Header.vue       |  2 +-
 .../page/collaborators/Collaborators.vue      |  2 +-
 .../project/page/discussions/Header.vue       |  2 +-
 .../components/project/page/models/Header.vue |  2 +-
 .../frontend-2/pages/projects/[id]/index.vue  |  2 +-
 .../pages/projects/[id]/index/settings.vue    |  2 +-
 8 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/packages/frontend-2/components/common/TitleDescription.vue b/packages/frontend-2/components/common/TitleDescription.vue
index c71c390ff..5fc4424fa 100644
--- a/packages/frontend-2/components/common/TitleDescription.vue
+++ b/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' }}
diff --git a/packages/frontend-2/components/project/page/Header.vue b/packages/frontend-2/components/project/page/Header.vue
index 63b5a4565..3563cdbf0 100644
--- a/packages/frontend-2/components/project/page/Header.vue
+++ b/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"
diff --git a/packages/frontend-2/components/project/page/automations/Header.vue b/packages/frontend-2/components/project/page/automations/Header.vue
index d39707507..1e4023175 100644
--- a/packages/frontend-2/components/project/page/automations/Header.vue
+++ b/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="
diff --git a/packages/frontend-2/components/project/page/collaborators/Collaborators.vue b/packages/frontend-2/components/project/page/collaborators/Collaborators.vue
index 7991a8104..495f9e268 100644
--- a/packages/frontend-2/components/project/page/collaborators/Collaborators.vue
+++ b/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
diff --git a/packages/frontend-2/components/project/page/discussions/Header.vue b/packages/frontend-2/components/project/page/discussions/Header.vue
index 47ee552a2..01b9bff12 100644
--- a/packages/frontend-2/components/project/page/discussions/Header.vue
+++ b/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"
diff --git a/packages/frontend-2/components/project/page/models/Header.vue b/packages/frontend-2/components/project/page/models/Header.vue
index 8003f467c..43af477b8 100644
--- a/packages/frontend-2/components/project/page/models/Header.vue
+++ b/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"
diff --git a/packages/frontend-2/pages/projects/[id]/index.vue b/packages/frontend-2/pages/projects/[id]/index.vue
index 6fe438aae..92f62e670 100644
--- a/packages/frontend-2/pages/projects/[id]/index.vue
+++ b/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">
diff --git a/packages/frontend-2/pages/projects/[id]/index/settings.vue b/packages/frontend-2/pages/projects/[id]/index/settings.vue
index 63ff2b8f7..576495d4b 100644
--- a/packages/frontend-2/pages/projects/[id]/index/settings.vue
+++ b/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"