Fix: Minor workspace related styling tweaks (#2705)

specklesystems · Aug 20, 2024 · e957259 · e957259
1 parent b8be355
commit e957259
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 132 deletions.
diff --git a/packages/frontend-2/components/dashboard/Sidebar.vue b/packages/frontend-2/components/dashboard/Sidebar.vue
@@ -67,12 +67,8 @@
                 :label="item.label"
                 :active="isActive(item.to)"
               >
-                <template v-if="item.logo" #icon>
-                  <img
-                    :src="item.logo"
-                    :alt="`${item.label}'s logo`"
-                    class="w-5 h-5 mt-0.5 object-contain"
-                  />
+                <template #icon>
+                  <UserAvatar :logo="item.logo" size="sm" />
                 </template>
               </LayoutSidebarMenuGroupItem>
             </NuxtLink>

diff --git a/packages/frontend-2/components/projects/DashboardEmptyState.vue b/packages/frontend-2/components/projects/DashboardEmptyState.vue
@@ -1,29 +1,15 @@
 <template>
-  <div class="h-80 flex justify-center flex-col text-center">
-    <div class="w-full flex align-center justify-center">
-      <img
-        src="~~/assets/images/boxes/empty.png"
-        alt="No search results found image"
-        class="h-24"
-      />
-    </div>
-    <h2 class="text-heading mt-2">
-      {{ isGuest ? 'No projects found!' : 'Create your first project!' }}
+  <div class="flex justify-center flex-col text-center my-12">
+    <h2 class="text-heading mt-2 text-foreground">
+      {{ isGuest ? 'No projects found' : 'Create your first project' }}
     </h2>
-    <h4 class="text-body-xs mb-4 max-w-xs mx-auto">
+    <h4 class="text-body-xs mb-4 mt-2 max-w-xs mx-auto text-foreground-2">
       Projects are the place where your models and their versions live.
     </h4>
     <div class="flex flex-col items-center gap-2">
       <FormButton v-if="!isGuest" class="shadow-lg" @click="$emit('create-project')">
         Create a project
       </FormButton>
-      <FormButton text size="sm" to="/onboarding?force=true">
-        {{
-          isGuest
-            ? 'Go through the onboarding again?'
-            : 'Or go through the onboarding again'
-        }}
-      </FormButton>
     </div>
   </div>
 </template>

diff --git a/packages/frontend-2/components/projects/DashboardHeader.vue b/packages/frontend-2/components/projects/DashboardHeader.vue
@@ -1,9 +1,6 @@
 <template>
   <div>
     <div class="bg-foundation divide-y divide-outline-3 mb-8 empty:mb-0">
-      <div v-if="showChecklist">
-        <OnboardingChecklistV1 show-intro />
-      </div>
       <ProjectsInviteBanners
         v-if="projectsInvites?.projectInvites?.length"
         :invites="projectsInvites"
@@ -12,16 +9,11 @@
         v-if="workspacesInvites?.workspaceInvites?.length"
         :invites="workspacesInvites"
       />
-      <ProjectsNewSpeckleBanner
-        v-if="showNewSpeckleBanner"
-        @dismissed="onDismissNewSpeckleBanner"
-      />
     </div>
     <PromoBannersWrapper v-if="promoBanners.length" :banners="promoBanners" />
   </div>
 </template>
 <script setup lang="ts">
-import { useSynchronizedCookie } from '~/lib/common/composables/reactiveCookie'
 import { graphql } from '~/lib/common/generated/gql'
 import type {
   ProjectsDashboardHeaderProjects_UserFragment,
@@ -41,77 +33,10 @@ graphql(`
   }
 `)
 
-const props = defineProps<{
+defineProps<{
   projectsInvites?: ProjectsDashboardHeaderProjects_UserFragment
   workspacesInvites?: ProjectsDashboardHeaderWorkspaces_UserFragment
 }>()
 
-const promoBanners = ref<PromoBanner[]>([
-  {
-    id: 'speckleverse',
-    primaryText: 'Join our online hackathon!',
-    secondaryText: 'June 7 - 9, 2024',
-    url: 'https://beyond-the-speckleverse.devpost.com/',
-    priority: 1,
-    expiryDate: '2024-06-10'
-  }
-])
-
-const hasCompletedChecklistV1 = useSynchronizedCookie<boolean>(
-  `hasCompletedChecklistV1`,
-  {
-    default: () => false
-  }
-)
-
-const hasDismissedChecklistTime = useSynchronizedCookie<string | undefined>(
-  `hasDismissedChecklistTime`,
-  { default: () => undefined }
-)
-
-const hasDismissedChecklistForever = useSynchronizedCookie<boolean | undefined>(
-  `hasDismissedChecklistForever`,
-  {
-    default: () => false
-  }
-)
-
-const hasDismissedChecklistTimeAgo = computed(() => {
-  return (
-    new Date().getTime() -
-    new Date(hasDismissedChecklistTime.value || Date.now()).getTime()
-  )
-})
-
-const hasDismissedNewSpeckleBanner = useSynchronizedCookie<boolean | undefined>(
-  `hasDismissedNewSpeckleBanner`,
-  { default: () => false }
-)
-
-const showChecklist = computed(() => {
-  if (hasDismissedChecklistForever.value) return false
-  if (hasCompletedChecklistV1.value) return false
-  if (hasDismissedChecklistTime.value === undefined) return true
-  if (
-    hasDismissedChecklistTime.value !== undefined &&
-    hasDismissedChecklistTimeAgo.value > 86400000
-  )
-    return true
-  return false
-})
-
-const showNewSpeckleBanner = computed(() => {
-  if (hasDismissedNewSpeckleBanner.value) return false
-  if (
-    props.projectsInvites?.projectInvites.length ||
-    props.workspacesInvites?.workspaceInvites?.length
-  )
-    return false
-
-  return true
-})
-
-const onDismissNewSpeckleBanner = () => {
-  hasDismissedNewSpeckleBanner.value = true
-}
+const promoBanners = ref<PromoBanner[]>([])
 </script>
diff --git a/packages/frontend-2/components/workspace/ProjectList.vue b/packages/frontend-2/components/workspace/ProjectList.vue
@@ -10,20 +10,18 @@
       :workspace-info="workspace"
     />
     <div class="flex flex-col gap-4 mt-4">
-      <div class="flex flex-col sm:flex-row gap-2 sm:items-center justify-between">
-        <div class="flex flex-col sm:flex-row gap-2">
-          <FormTextInput
-            name="modelsearch"
-            :show-label="false"
-            placeholder="Search..."
-            :custom-icon="MagnifyingGlassIcon"
-            color="foundation"
-            wrapper-classes="grow md:grow-0 md:w-60"
-            show-clear
-            v-bind="bind"
-            v-on="on"
-          ></FormTextInput>
-        </div>
+      <div class="flex flex-row gap-2 sm:items-center justify-between">
+        <FormTextInput
+          name="modelsearch"
+          :show-label="false"
+          placeholder="Search..."
+          :custom-icon="MagnifyingGlassIcon"
+          color="foundation"
+          wrapper-classes="grow md:grow-0 md:w-60"
+          show-clear
+          v-bind="bind"
+          v-on="on"
+        />
         <FormButton v-if="!isGuest" @click="openNewProject = true">
           New project
         </FormButton>

diff --git a/packages/frontend-2/components/workspace/header/Header.vue b/packages/frontend-2/components/workspace/header/Header.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="flex flex-col sm:flex-row justify-between sm:items-center">
     <div class="flex gap-2 mb-3 mt-2">
-      <img
-        v-if="workspaceInfo.logo"
-        :src="workspaceInfo.logo || ''"
-        alt="Workspace logo"
-        class="w-5 h-5 mt-0.5"
-      />
+      <div class="flex items-center">
+        <UserAvatar :logo="workspaceInfo.logo" size="lg" />
+      </div>
       <div class="flex flex-col">
         <h1 class="text-heading-lg">{{ workspaceInfo.name }}</h1>
         <div class="text-body-xs text-foreground-2">

diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -101,10 +101,10 @@ const documents = {
     "\n  fragment SettingsUserProfileDetails_User on User {\n    id\n    name\n    company\n    ...UserProfileEditDialogAvatar_User\n  }\n": types.SettingsUserProfileDetails_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogAvatar_User on User {\n    id\n    avatar\n    ...ActiveUserAvatar\n  }\n": types.UserProfileEditDialogAvatar_UserFragmentDoc,
     "\n  fragment SettingsWorkspacesGeneral_Workspace on Workspace {\n    ...SettingsWorkspacesGeneralEditAvatar_Workspace\n    ...SettingsWorkspaceGeneralDeleteDialog_Workspace\n    id\n    name\n    description\n    logo\n  }\n": types.SettingsWorkspacesGeneral_WorkspaceFragmentDoc,
-    "\n  fragment SettingsWorkspaceGeneralDeleteDialog_Workspace on Workspace {\n    id\n    name\n  }\n": types.SettingsWorkspaceGeneralDeleteDialog_WorkspaceFragmentDoc,
-    "\n  fragment SettingsWorkspacesGeneralEditAvatar_Workspace on Workspace {\n    id\n    logo\n    name\n  }\n": types.SettingsWorkspacesGeneralEditAvatar_WorkspaceFragmentDoc,
     "\n  fragment SettingsWorkspacesMembers_Workspace on Workspace {\n    id\n    role\n  }\n": types.SettingsWorkspacesMembers_WorkspaceFragmentDoc,
     "\n  fragment SettingsWorkspacesProjects_ProjectCollection on ProjectCollection {\n    totalCount\n    items {\n      ...SettingsSharedProjects_Project\n    }\n  }\n": types.SettingsWorkspacesProjects_ProjectCollectionFragmentDoc,
+    "\n  fragment SettingsWorkspaceGeneralDeleteDialog_Workspace on Workspace {\n    id\n    name\n  }\n": types.SettingsWorkspaceGeneralDeleteDialog_WorkspaceFragmentDoc,
+    "\n  fragment SettingsWorkspacesGeneralEditAvatar_Workspace on Workspace {\n    id\n    logo\n    name\n  }\n": types.SettingsWorkspacesGeneralEditAvatar_WorkspaceFragmentDoc,
     "\n  fragment SettingsWorkspacesMembersGuestsTable_WorkspaceCollaborator on WorkspaceCollaborator {\n    id\n    role\n    user {\n      id\n      avatar\n      name\n      company\n      verified\n    }\n  }\n": types.SettingsWorkspacesMembersGuestsTable_WorkspaceCollaboratorFragmentDoc,
     "\n  fragment SettingsWorkspacesMembersGuestsTable_Workspace on Workspace {\n    id\n    ...SettingsWorkspacesMembersTableHeader_Workspace\n    team {\n      id\n      ...SettingsWorkspacesMembersGuestsTable_WorkspaceCollaborator\n    }\n  }\n": types.SettingsWorkspacesMembersGuestsTable_WorkspaceFragmentDoc,
     "\n  fragment SettingsWorkspacesMembersInvitesTable_PendingWorkspaceCollaborator on PendingWorkspaceCollaborator {\n    id\n    inviteId\n    role\n    title\n    updatedAt\n    user {\n      id\n      ...LimitedUserAvatar\n    }\n    invitedBy {\n      id\n      ...LimitedUserAvatar\n    }\n  }\n": types.SettingsWorkspacesMembersInvitesTable_PendingWorkspaceCollaboratorFragmentDoc,
@@ -669,19 +669,19 @@ export function graphql(source: "\n  fragment SettingsWorkspacesGeneral_Workspac
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment SettingsWorkspaceGeneralDeleteDialog_Workspace on Workspace {\n    id\n    name\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspaceGeneralDeleteDialog_Workspace on Workspace {\n    id\n    name\n  }\n"];
+export function graphql(source: "\n  fragment SettingsWorkspacesMembers_Workspace on Workspace {\n    id\n    role\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspacesMembers_Workspace on Workspace {\n    id\n    role\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment SettingsWorkspacesGeneralEditAvatar_Workspace on Workspace {\n    id\n    logo\n    name\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspacesGeneralEditAvatar_Workspace on Workspace {\n    id\n    logo\n    name\n  }\n"];
+export function graphql(source: "\n  fragment SettingsWorkspacesProjects_ProjectCollection on ProjectCollection {\n    totalCount\n    items {\n      ...SettingsSharedProjects_Project\n    }\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspacesProjects_ProjectCollection on ProjectCollection {\n    totalCount\n    items {\n      ...SettingsSharedProjects_Project\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment SettingsWorkspacesMembers_Workspace on Workspace {\n    id\n    role\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspacesMembers_Workspace on Workspace {\n    id\n    role\n  }\n"];
+export function graphql(source: "\n  fragment SettingsWorkspaceGeneralDeleteDialog_Workspace on Workspace {\n    id\n    name\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspaceGeneralDeleteDialog_Workspace on Workspace {\n    id\n    name\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment SettingsWorkspacesProjects_ProjectCollection on ProjectCollection {\n    totalCount\n    items {\n      ...SettingsSharedProjects_Project\n    }\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspacesProjects_ProjectCollection on ProjectCollection {\n    totalCount\n    items {\n      ...SettingsSharedProjects_Project\n    }\n  }\n"];
+export function graphql(source: "\n  fragment SettingsWorkspacesGeneralEditAvatar_Workspace on Workspace {\n    id\n    logo\n    name\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspacesGeneralEditAvatar_Workspace on Workspace {\n    id\n    logo\n    name\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -4216,14 +4216,14 @@ export type UserProfileEditDialogAvatar_UserFragment = { __typename?: 'User', id
 
 export type SettingsWorkspacesGeneral_WorkspaceFragment = { __typename?: 'Workspace', id: string, name: string, description?: string | null, logo?: string | null };
 
-export type SettingsWorkspaceGeneralDeleteDialog_WorkspaceFragment = { __typename?: 'Workspace', id: string, name: string };
-
-export type SettingsWorkspacesGeneralEditAvatar_WorkspaceFragment = { __typename?: 'Workspace', id: string, logo?: string | null, name: string };
-
 export type SettingsWorkspacesMembers_WorkspaceFragment = { __typename?: 'Workspace', id: string, role?: string | null };
 
 export type SettingsWorkspacesProjects_ProjectCollectionFragment = { __typename?: 'ProjectCollection', totalCount: number, items: Array<{ __typename?: 'Project', id: string, name: string, visibility: ProjectVisibility, createdAt: string, updatedAt: string, models: { __typename?: 'ModelCollection', totalCount: number }, versions: { __typename?: 'VersionCollection', totalCount: number }, team: Array<{ __typename?: 'ProjectCollaborator', id: string, user: { __typename?: 'LimitedUser', name: string, id: string, avatar?: string | null } }> }> };
 
+export type SettingsWorkspaceGeneralDeleteDialog_WorkspaceFragment = { __typename?: 'Workspace', id: string, name: string };
+
+export type SettingsWorkspacesGeneralEditAvatar_WorkspaceFragment = { __typename?: 'Workspace', id: string, logo?: string | null, name: string };
+
 export type SettingsWorkspacesMembersGuestsTable_WorkspaceCollaboratorFragment = { __typename?: 'WorkspaceCollaborator', id: string, role: string, user: { __typename?: 'LimitedUser', id: string, avatar?: string | null, name: string, company?: string | null, verified?: boolean | null } };
 
 export type SettingsWorkspacesMembersGuestsTable_WorkspaceFragment = { __typename?: 'Workspace', id: string, role?: string | null, team: Array<{ __typename?: 'WorkspaceCollaborator', id: string, role: string, user: { __typename?: 'LimitedUser', id: string, avatar?: string | null, name: string, company?: string | null, verified?: boolean | null } }>, invitedTeam?: Array<{ __typename?: 'PendingWorkspaceCollaborator', title: string, user?: { __typename?: 'LimitedUser', id: string } | null }> | null };

diff --git a/packages/frontend-2/pages/index.vue b/packages/frontend-2/pages/index.vue
@@ -6,7 +6,7 @@
     <PromoBannersWrapper v-if="promoBanners.length" :banners="promoBanners" />
     <div class="flex flex-col gap-y-12">
       <section>
-        <h2 class="text-heading-sm text-foreground-2">Quick start</h2>
+        <h2 class="text-heading-sm text-foreground-2">Quickstart</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 pt-5">
           <QuickStartCard
             v-for="quickStartItem in quickStartItems"