UI updates

packages/frontend-2/components/workspace/Card.vue

@@ -4,7 +4,7 @@
     :class="{
       'cursor-pointer hover:border-outline-3 shadow-sm hover:border-zinc-400 bg-foundation':
         clickable,
-      '!py-2 !px-4': condensed
+      '!py-3 !px-4': condensed
     }"
     @click="clickable && onClick"
   >

packages/frontend-2/components/workspace/JoinPage.vue

@@ -25,12 +25,21 @@
         {{ description }}
       </p>
       <WorkspaceDiscoverableWorkspacesCard
-        v-for="workspace in discoverableWorkspacesAndJoinRequests"
+        v-for="workspace in workspacesToShow"
         :key="`discoverable-${workspace.id}`"
         :workspace="workspace"
         :request-status="workspace.requestStatus"
         location="workspace_join_page"
       />
+      <FormButton
+        v-if="!showAllWorkspaces && discoverableWorkspacesAndJoinRequestsCount > 5"
+        color="subtle"
+        size="lg"
+        full-width
+        @click="showAllWorkspaces = true"
+      >
+        Show all ({{ discoverableWorkspacesAndJoinRequestsCount }})
+      </FormButton>
       <div class="mt-2 w-full flex flex-col gap-2">
         <FormButton
           v-if="hasDiscoverableJoinRequests && !isWorkspaceNewPlansEnabled"
@@ -77,6 +86,14 @@ const {
   hasDiscoverableJoinRequests
 } = useDiscoverableWorkspaces()
 
+const showAllWorkspaces = ref(false)
+
+const workspacesToShow = computed(() => {
+  return showAllWorkspaces.value
+    ? discoverableWorkspacesAndJoinRequests.value
+    : discoverableWorkspacesAndJoinRequests.value.slice(0, 5)
+})
+
 const description = computed(() => {
   if (discoverableWorkspacesAndJoinRequestsCount.value === 1) {
     return 'We found a workspace that matches your email domain'

packages/frontend-2/components/workspace/discoverableWorkspaces/Card.vue

@@ -7,19 +7,19 @@
   >
     <template #text>
       <div class="flex flex-col gap-y-1">
-        <div class="text-body-2xs line-clamp-3">
+        <div v-if="workspace.description" class="text-body-2xs line-clamp-3">
           {{ workspace.description }}
         </div>
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-1 mt-2">
           <div class="flex flex-col">
-            <span class="text-body-3xs text-foreground-2">Contacts:</span>
+            <span class="text-body-3xs text-foreground-2 font-medium">Admins</span>
             <UserAvatarGroup :users="adminTeam" :max-count="3" size="sm" />
           </div>
           <div
             v-if="members.length > 0 && requestStatus !== 'pending'"
             class="flex flex-col"
           >
-            <span class="text-body-3xs text-foreground-2">Members:</span>
+            <span class="text-body-3xs text-foreground-2 font-medium">Members</span>
             <UserAvatarGroup :users="members" :max-count="5" size="sm" />
           </div>
         </div>

packages/frontend-2/components/workspace/wizard/step/Invites.vue

@@ -30,11 +30,30 @@
         </div>
       </div>
       <div v-if="verifiedDomain" class="flex flex-col gap-2 w-full">
-        <FormCheckbox
-          v-model="enableDomainDiscoverabilityModel"
-          name="enableDomainDiscoverability"
-          :label="`Allow users with the @${verifiedDomain} domain to request to join workspace`"
-        />
+        <CommonCard class="flex flex-col gap-2 !p-3">
+          <FormCheckbox
+            v-model="enableDomainDiscoverabilityModel"
+            name="enableDomainDiscoverability"
+            :label="`Make workspace discoverable to @${verifiedDomain} users`"
+          />
+          <div class="ml-6 text-body-2xs text-foreground-2">
+            <p class="font-medium">When enabled:</p>
+            <ul class="list-disc ml-4 mt-1 space-y-1">
+              <li>
+                Users with the
+                <span class="font-medium">@{{ verifiedDomain }}</span>
+                domain can find and request to join this workspace
+              </li>
+              <li>Workspace admins must approve all join requests</li>
+              <li>
+                Your workspace name, members and description will be visible to users
+                with the
+                <span class="font-medium">@{{ verifiedDomain }}</span>
+                domain
+              </li>
+            </ul>
+          </div>
+        </CommonCard>
       </div>
       <div class="flex flex-col gap-3 mt-4 w-full md:max-w-96">
         <FormButton size="lg" submit full-width>{{ nextButtonText }}</FormButton>