Fix: Workspace and project header styling (#2839)

specklesystems · Sep 2, 2024 · 1ad990d · 1ad990d
1 parent 7c6ea46
commit 1ad990d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 28 deletions.
diff --git a/packages/frontend-2/components/common/TitleDescription.vue b/packages/frontend-2/components/common/TitleDescription.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col">
     <h2 class="text-heading">{{ title }}</h2>
-    <p class="text-body-sm text-foreground-2">
+    <p class="text-body-sm text-foreground-2 line-clamp-2">
       {{ description ? description : 'No description' }}
     </p>
   </div>

diff --git a/packages/frontend-2/components/global/icon/Sidebar.vue b/packages/frontend-2/components/global/icon/Sidebar.vue
@@ -10,11 +10,11 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M5 15V1H6.5V15H5Z"
-      fill="#626263"
+      fill="currentColor"
     />
     <path
       d="M10.9002 8.28183C11.0333 8.1154 11.0333 7.8846 10.9002 7.71817L8.87389 5.18369C8.59132 4.83026 8 5.02096 8 5.46552V10.5345C8 10.979 8.59132 11.1697 8.87389 10.8163L10.9002 8.28183Z"
-      fill="#626263"
+      fill="currentColor"
     />
     <rect
       x="0.75"

diff --git a/packages/frontend-2/components/projects/ProjectDashboardCard.vue b/packages/frontend-2/components/projects/ProjectDashboardCard.vue
@@ -36,7 +36,7 @@
               :default-logo-index="project.workspace.defaultLogoIndex"
               size="sm"
             />
-            <p class="text-body-2xs text-foreground ml-2">
+            <p class="text-body-2xs text-foreground ml-2 line-clamp-2">
               {{ project.workspace.name }}
             </p>
           </NuxtLink>

diff --git a/packages/frontend-2/components/workspace/header/Header.vue b/packages/frontend-2/components/workspace/header/Header.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="flex flex-col gap-4 sm:flex-row justify-between md:items-center">
+  <div
+    class="flex flex-col gap-6 justify-between"
+    :class="[
+      isWorkspaceAdmin ? 'xl:flex-row xl:items-center' : 'lg:flex-row lg:items-center'
+    ]"
+  >
     <div class="flex gap-2 md:mb-3 md:mt-2">
       <div class="flex items-center mr-2">
         <WorkspaceAvatar
@@ -9,19 +14,19 @@
         />
       </div>
       <div class="flex flex-col">
-        <h1 class="text-heading">{{ workspaceInfo.name }}</h1>
-        <div class="text-body-xs text-foreground-2">
+        <h1 class="text-heading line-clamp-2">{{ workspaceInfo.name }}</h1>
+        <div class="text-body-xs text-foreground-2 line-clamp-2">
           {{ workspaceInfo.description || 'No workspace description' }}
         </div>
       </div>
     </div>
     <div
-      class="flex md:items-center gap-x-3 md:flex-row"
-      :class="[isWorkspaceAdmin ? 'flex-col' : 'flex-row items-cenetr']"
+      class="flex justify-between md:items-center gap-x-3 md:flex-row"
+      :class="[isWorkspaceAdmin ? 'flex-col' : 'flex-row items-center']"
     >
       <div
         class="flex items-center gap-x-3 md:mb-0"
-        :class="[!isWorkspaceAdmin ? 'flex-1' : ' mb-3']"
+        :class="[isWorkspaceAdmin ? 'mb-3' : ' flex-1']"
       >
         <CommonBadge rounded :color-classes="'text-foreground-2 bg-primary-muted'">
           {{ workspaceInfo.totalProjects.totalCount || 0 }} Project{{

diff --git a/packages/frontend-2/pages/projects/[id]/index.vue b/packages/frontend-2/pages/projects/[id]/index.vue
@@ -8,26 +8,32 @@
         @processed="onInviteAccepted"
       />
       <div
-        class="flex flex-col md:flex-row md:justify-between md:items-center gap-4 my-2"
+        class="flex flex-col md:flex-row md:justify-between md:items-center gap-6 my-2"
       >
         <ProjectPageHeader :project="project" />
-        <div class="flex gap-x-3 items-center">
-          <CommonBadge rounded :color-classes="'text-foreground-2 bg-primary-muted'">
-            {{ project.modelCount.totalCount || 0 }} Model{{
-              project.modelCount.totalCount === 1 ? '' : 's'
-            }}
-          </CommonBadge>
-          <CommonBadge rounded :color-classes="'text-foreground-2 bg-primary-muted'">
-            <span class="capitalize">{{ project.role?.split(':').reverse()[0] }}</span>
-          </CommonBadge>
-          <UserAvatarGroup :users="teamUsers" class="max-w-[104px]" />
-          <FormButton
-            v-if="canEdit"
-            color="outline"
-            :to="projectCollaboratorsRoute(project.id)"
-          >
-            Manage
-          </FormButton>
+        <div class="flex gap-x-3 items-center justify-between">
+          <div class="flex flex-row gap-x-3">
+            <CommonBadge rounded :color-classes="'text-foreground-2 bg-primary-muted'">
+              {{ project.modelCount.totalCount || 0 }} Model{{
+                project.modelCount.totalCount === 1 ? '' : 's'
+              }}
+            </CommonBadge>
+            <CommonBadge rounded :color-classes="'text-foreground-2 bg-primary-muted'">
+              <span class="capitalize">
+                {{ project.role?.split(':').reverse()[0] }}
+              </span>
+            </CommonBadge>
+          </div>
+          <div class="flex flex-row gap-x-3">
+            <UserAvatarGroup :users="teamUsers" class="max-w-[104px]" />
+            <FormButton
+              v-if="canEdit"
+              color="outline"
+              :to="projectCollaboratorsRoute(project.id)"
+            >
+              Manage
+            </FormButton>
+          </div>
         </div>
       </div>
       <LayoutTabsHorizontal v-model:active-item="activePageTab" :items="pageTabItems">