From e6ae87e0be4048c08319f7899ba7d5397c1077be Mon Sep 17 00:00:00 2001
From: Paddy <ohanlon.paddy@gmail.com>
Date: Fri, 11 Oct 2024 13:31:53 +0200
Subject: [PATCH] Finish UI and UX iteration

---
 src/components/CollabAgenda.vue         |   6 +-
 src/components/ConversationList.vue     |  31 +--
 src/components/ConversationListItem.vue |  38 ++++
 src/components/ConversationTypeIcon.vue |   4 +-
 src/components/ManageChannelMembers.vue |  56 +++---
 src/components/ManageWorkspaces.vue     |   2 +-
 src/views/ChannelViewHome.vue           | 129 +++++++-----
 src/views/ConversationView.vue          |  82 ++++----
 src/views/HomeView.vue                  |  32 ++-
 src/views/NewChannelView.vue            |   5 +-
 src/views/NewConversationChooseView.vue |  35 ++--
 src/views/NewConversationView.vue       | 251 +++++++++++++-----------
 12 files changed, 357 insertions(+), 314 deletions(-)
 create mode 100644 src/components/ConversationListItem.vue

diff --git a/src/components/CollabAgenda.vue b/src/components/CollabAgenda.vue
index 00989d0..65eabee 100644
--- a/src/components/CollabAgenda.vue
+++ b/src/components/CollabAgenda.vue
@@ -122,17 +122,19 @@ async function addAgendaItem() {
       <DueDate label="Propose agenda items by" :dateString="collabAgenda.due" />
     </div>
 
-    <form @submit.prevent="addAgendaItem">
-      <BaseCard>
+    <form @submit.prevent="addAgendaItem" class="box-border w-full">
+      <BaseCard class="box-border w-full">
         <div>Propose agenda item</div>
         <TextInput label="Title" v-model="agendaItemTitle" />
         <!-- Description is optional -->
+        <!-- 556px max w is a temp fix to stop editor breaking out of container -->
         <ToastUiEditor
           @updateValue="(t) => (agendaItemText = t)"
           label="Agenda item text"
           height="auto"
           initialEditType="markdown"
           ref="editor"
+          class="max-w-[556px]"
         />
       </BaseCard>
       <button type="submit" class="btn mt-4">Add agenda item</button>
diff --git a/src/components/ConversationList.vue b/src/components/ConversationList.vue
index f21d1f8..628834f 100644
--- a/src/components/ConversationList.vue
+++ b/src/components/ConversationList.vue
@@ -1,39 +1,18 @@
 <script setup lang="ts">
-import { useKoreroStore } from '@/stores/korero'
 import type { Conversation } from '@/types'
-import ConversationTypeIcon from './ConversationTypeIcon.vue'
-import FormatDateString from './FormatDateString.vue'
+import ConversationListItem from './ConversationListItem.vue'
 
 defineProps<{ conversations: Conversation[] }>()
-
-const koreroStore = useKoreroStore()
 </script>
 
 <template>
   <div class="flex flex-col gap-3">
-    <div
+    <ConversationListItem
       v-for="conversation in conversations"
       :key="conversation.id"
-      class="flex gap-4 items-center [&:not(:last-child)]:border-b border-slate-200 [&:not(:last-child)]:pb-4"
-    >
-      <ConversationTypeIcon :type="conversation.type" class="flex-shrink-0" />
-      <div>
-        <h2 class="card-title">
-          <RouterLink :to="{ name: 'conversation', params: { conversationId: conversation.id } }">{{
-            conversation.title
-          }}</RouterLink>
-        </h2>
-        <div class="italic text-xs">
-          By {{ koreroStore.getUser(conversation.authorId).name }} on
-          <FormatDateString :dateString="conversation.created" :defaultCss="false" /> in
-          <RouterLink
-            :to="{ name: 'channel', params: { channelId: conversation.channelId } }"
-            class="link"
-            >{{ koreroStore.getChannelName(conversation.channelId) }}</RouterLink
-          >
-        </div>
-      </div>
-    </div>
+      :conversation="conversation"
+      class="[&:not(:last-child)]:border-b border-slate-200 [&:not(:last-child)]:pb-4"
+    />
   </div>
 </template>
 
diff --git a/src/components/ConversationListItem.vue b/src/components/ConversationListItem.vue
new file mode 100644
index 0000000..7c05402
--- /dev/null
+++ b/src/components/ConversationListItem.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { Conversation } from '@/types'
+import ConversationTypeIcon from './ConversationTypeIcon.vue'
+import FormatDateString from './FormatDateString.vue'
+import { useKoreroStore } from '@/stores/korero'
+
+const { conversation, iconWidth } = defineProps<{
+  conversation: Conversation
+  iconWidth?: string
+}>()
+
+const koreroStore = useKoreroStore()
+</script>
+
+<template>
+  <div class="flex gap-4 items-center">
+    <ConversationTypeIcon :type="conversation.type" class="flex-shrink-0" :width="iconWidth" />
+    <div>
+      <h2 class="card-title">
+        <!-- could make this not a link when on the conversation view -->
+        <RouterLink :to="{ name: 'conversation', params: { conversationId: conversation.id } }">{{
+          conversation.title
+        }}</RouterLink>
+      </h2>
+      <div class="italic text-xs">
+        By {{ koreroStore.getUser(conversation.authorId).name }} on
+        <FormatDateString :dateString="conversation.created" :defaultCss="false" /> in
+        <RouterLink
+          :to="{ name: 'channel', params: { channelId: conversation.channelId } }"
+          class="link"
+          >{{ koreroStore.getChannelName(conversation.channelId) }}</RouterLink
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/ConversationTypeIcon.vue b/src/components/ConversationTypeIcon.vue
index e31155d..e7beef5 100644
--- a/src/components/ConversationTypeIcon.vue
+++ b/src/components/ConversationTypeIcon.vue
@@ -8,7 +8,7 @@ import BrainstormSVG from '@/components/BrainstormSVG.vue'
 import { ConversationType } from '@/types'
 import { computed, type Component } from 'vue'
 
-defineProps<{ type: ConversationType }>()
+const { type, width = '18px' } = defineProps<{ type: ConversationType; width?: string }>()
 
 // TODO need to make SVG title ids unique for accessibility
 // Could create a composable and generate a unique ID on mount to append to id and aria-labelledby
@@ -26,7 +26,7 @@ const getIconComponent = computed(() => (type: ConversationType) => iconMap[type
 </script>
 
 <template>
-  <component :is="getIconComponent(type)" width="18px" />
+  <component :is="getIconComponent(type)" :width="width" />
 </template>
 
 <style scoped></style>
diff --git a/src/components/ManageChannelMembers.vue b/src/components/ManageChannelMembers.vue
index 51c2198..10b3ec7 100644
--- a/src/components/ManageChannelMembers.vue
+++ b/src/components/ManageChannelMembers.vue
@@ -4,13 +4,14 @@ import { storeToRefs } from 'pinia'
 import { computed, type ComputedRef } from 'vue'
 import { type Team, type Org } from '@bzr/bazaar'
 import { bzr } from '@/bazaar'
+import BazaarLogoIcon from './BazaarLogoIcon.vue'
 
 const props = defineProps<{ initialMembers: string[] }>()
 const emit = defineEmits(['update:addMember', 'update:removeMember'])
 
 const koreroStore = useKoreroStore()
 
-function openModal() {
+function openOrgModal() {
   // @ts-ignore
   bzr.orgs.openModal()
 }
@@ -45,11 +46,7 @@ const availableMembers = computed(() => {
   })
 })
 
-console.log('initial', props.initialMembers)
-console.log('me', user.value.id)
-
 function selectMember(id: string) {
-  console.log('select', id)
   emit('update:addMember', id)
 }
 
@@ -68,35 +65,28 @@ function userName(id: string) {
 
 <template>
   <div>
-    <p>Channel Members</p>
-    <div>
-      <span class="badge">You</span>
-      <span class="badge" v-for="m in initialMembers" :key="m" @click="unselectMember(m)"
-        >{{ userName(m) }} X</span
-      >
-    </div>
-    <div>
-      <!-- <div
-            class="btn"
-            @click="
-              bzr.social.openModal((userId) => {
-                selectMember(userId)
-              })
-            "
-          >
-            Invite Guets
-          </div> -->
-      <p>
-        Org Members
-        <span class="btn btn-xs" @click="openModal()">Manage Members</span>
-      </p>
-      <div v-if="availableMembers.length > 0">
-        <div v-for="m in availableMembers" :key="m">
+    <ul class="text-sm">
+      <li>{{ user.name }}</li>
+      <li v-for="m in initialMembers" :key="m">
+        {{ userName(m) }}
+        <button @click="unselectMember(m)" class="text-error text-xs">Remove</button>
+      </li>
+    </ul>
+    <div class="pt-4">
+      <h3 class="font-bold pb-2 text-sm">
+        Non-members <span class="badge badge-sm">{{ availableMembers.length }}</span>
+      </h3>
+      <ul v-if="availableMembers.length > 0" class="text-sm pb-4">
+        <li v-for="m in availableMembers" :key="m">
           {{ userName(m) }}
-          <div class="btn" @click="selectMember(m)">Select</div>
-        </div>
-      </div>
-      <div v-else>Nobody left</div>
+          <button class="text-success text-xs" @click="selectMember(m)">Add</button>
+        </li>
+      </ul>
+      <button @click="openOrgModal" class="btn btn-sm">
+        <BazaarLogoIcon width="12px" /> Manage organization members
+      </button>
+      <!-- What does this mean? -->
+      <!-- <div v-else>Nobody left</div> -->
     </div>
   </div>
 </template>
diff --git a/src/components/ManageWorkspaces.vue b/src/components/ManageWorkspaces.vue
index 8f6c1ff..b381a5e 100644
--- a/src/components/ManageWorkspaces.vue
+++ b/src/components/ManageWorkspaces.vue
@@ -50,7 +50,7 @@ function openOrgModal() {
     <div class="flex flex-col gap-8">
       <div>
         <button @click="openOrgModal" class="btn btn-sm">
-          <BazaarLogoIcon width="12px" /> Manage Organizations
+          <BazaarLogoIcon width="12px" /> Manage organizations
         </button>
       </div>
       <div v-for="org in orgs" :key="org.id">
diff --git a/src/views/ChannelViewHome.vue b/src/views/ChannelViewHome.vue
index a14d2e1..5336434 100644
--- a/src/views/ChannelViewHome.vue
+++ b/src/views/ChannelViewHome.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import BaseCard from '@/components/BaseCard.vue'
 import HeadingOne from '@/components/HeadingOne.vue'
-import FormatDateString from '@/components/FormatDateString.vue'
 import ManageChannelMembers from '@/components/ManageChannelMembers.vue'
 import HeadingTwo from '@/components/HeadingTwo.vue'
 import { useRoute } from 'vue-router'
@@ -11,23 +9,31 @@ import { computed, ref, watch, type ComputedRef, type Ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import ConversationTypeIcon from '@/components/ConversationTypeIcon.vue'
 import ConversationList from '@/components/ConversationList.vue'
+import ChevronDownSVG from '@/components/ChevronDownSVG.vue'
+import ChevronUpSVG from '@/components/ChevronUpSVG.vue'
 
 const route = useRoute()
 const koreroStore = useKoreroStore()
 const { currentChannel, groups, user, conversations } = storeToRefs(koreroStore)
 
 const channelId = ref(route.params.channelId as string)
+const conversationTypeParam = ref(route.params.conversationType as ConversationType)
+const manageMembers: Ref<boolean> = ref(false)
+const isMembersDropdownExpanded = ref(false)
+
+if (currentChannel.value) {
+  koreroStore.getGroup(currentChannel.value.group)
+}
 
 watch(route, async (route) => {
   channelId.value = route.params.channelId as string
+  conversationTypeParam.value = route.params.conversationType as ConversationType
 })
 
 const channelConversations = computed(() => {
   return conversations.value.filter((c) => c.channelId === channelId.value)
 })
 
-const conversationTypeParam = ref(route.params.conversationType as ConversationType)
-
 const filteredConversations = computed(() => {
   if (!conversationTypeParam.value) {
     return channelConversations.value
@@ -35,22 +41,6 @@ const filteredConversations = computed(() => {
   return channelConversations.value.filter((c) => c.type === conversationTypeParam.value)
 })
 
-watch(route, async (newRoute) => {
-  conversationTypeParam.value = newRoute.params.conversationType as ConversationType
-})
-
-function userName(id: string) {
-  const user = koreroStore.getUser(id)
-  if (user.id) {
-    return user.name
-  }
-  return id
-}
-
-if (currentChannel.value) {
-  koreroStore.getGroup(currentChannel.value.group)
-}
-
 const members: ComputedRef<string[]> = computed(() => {
   if (!currentChannel.value) {
     return []
@@ -62,25 +52,35 @@ const members: ComputedRef<string[]> = computed(() => {
   return []
 })
 
-const manageMembers: Ref<boolean> = ref(false)
-
 function addMember(id: string) {
-  console.log('add member', id)
   if (currentChannel.value) {
     koreroStore.addGroupMember(currentChannel.value.group, id)
   }
   manageMembers.value = false
 }
+
 function removeMember(id: string) {
   if (currentChannel.value) {
     koreroStore.removeGroupMember(currentChannel.value.group, id)
   }
   manageMembers.value = false
 }
+
+function userName(id: string) {
+  const user = koreroStore.getUser(id)
+  if (user.id) {
+    return user.name
+  }
+  return id
+}
+
+function toggleMembersDropdown(): void {
+  isMembersDropdownExpanded.value = !isMembersDropdownExpanded.value
+}
 </script>
 
 <template>
-  <div class="grid gap-6 lg:grid-cols-3">
+  <div class="grid gap-6 lg:grid-cols-3 max-w-screen-2xl">
     <div class="col-span-2">
       <div class="flex gap-4 justify-between items-center pb-2">
         <HeadingOne class="capitalize"
@@ -94,43 +94,63 @@ function removeMember(id: string) {
         >
       </div>
 
-      <p v-if="koreroStore.conversations.length === 0" class="text-center py-12">
-        Be the first to create a conversation.
-      </p>
-      <p
-        v-else-if="conversationTypeParam && filteredConversations.length === 0"
-        class="text-center py-12"
-      >
-        There are no {{ conversationTypeParam }}s here yet.
-      </p>
-
       <div class="py-4 px-6 rounded border border-slate-200">
+        <p v-if="koreroStore.conversations.length === 0" class="text-center py-12">
+          Be the first to create a conversation.
+        </p>
+        <div
+          v-else-if="conversationTypeParam && filteredConversations.length === 0"
+          class="text-center py-12"
+        >
+          <p class="pb-4">Create your first {{ conversationTypeParam }} in this channel.</p>
+          <RouterLink
+            :to="{
+              name: 'newConversation',
+              params: { channelId },
+              query: { type: conversationTypeParam }
+            }"
+            class="btn btn-accent"
+            >Create {{ conversationTypeParam }}</RouterLink
+          >
+        </div>
         <ConversationList :conversations="filteredConversations" />
       </div>
     </div>
     <div>
-      <HeadingTwo class="pt-1 pb-4">
-        Members
-        <div v-if="manageMembers">
-          <button class="btn btn-sm" @click="manageMembers = false">Done</button>
-        </div>
+      <!--  -->
+      <!--  -->
+      <!--  -->
+      <!--  -->
+      <div class="flex gap-4 justify-between items-center pb-2">
+        <HeadingTwo>Members</HeadingTwo>
+        <button
+          class="btn btn-xs"
+          @click="toggleMembersDropdown"
+          :aria-expanded="isMembersDropdownExpanded"
+          aria-label="Manage channel members card"
+        >
+          Manage
+          <ChevronDownSVG v-show="!isMembersDropdownExpanded" width="12px" />
+          <ChevronUpSVG v-show="isMembersDropdownExpanded" width="12px" />
+        </button>
+      </div>
 
-        <button v-else class="btn btn-xs" @click="manageMembers = true">Manage</button>
-      </HeadingTwo>
-      <ManageChannelMembers
-        v-if="manageMembers"
-        :initial-members="members.filter((id) => id !== user.id)"
-        @update:add-member="addMember"
-        @update:remove-member="removeMember"
-      ></ManageChannelMembers>
-      <div v-else>
-        <span v-for="member in members" :key="member" class="badge badge-secondary badge-sm mr-2">{{
-          userName(member)
-        }}</span>
+      <div class="px-6 py-4 rounded border border-slate-200">
+        <div v-if="isMembersDropdownExpanded" :aria-hidden="!isMembersDropdownExpanded">
+          <ManageChannelMembers
+            :initial-members="members.filter((id) => id !== user.id)"
+            @update:add-member="addMember"
+            @update:remove-member="removeMember"
+          ></ManageChannelMembers>
+        </div>
+        <ul v-else class="text-sm">
+          <li v-for="member in members" :key="member">{{ userName(member) }}</li>
+        </ul>
       </div>
+
       <div class="pt-4">
         <HeadingTwo>Conversation types</HeadingTwo>
-        <ul class="menu bg-slate-50 border-slate-200 border rounded-box my-2">
+        <ul class="menu bg-white border-slate-200 border rounded-box my-2">
           <li>
             <RouterLink
               :to="{ name: 'channel', params: { channelId } }"
@@ -140,7 +160,10 @@ function removeMember(id: string) {
           </li>
           <li v-for="(type, index) in ConversationType" :key="index">
             <RouterLink
-              :to="{ name: 'channelByType', params: { channelId, conversationType: type } }"
+              :to="{
+                name: 'channelByType',
+                params: { channelId, conversationType: type }
+              }"
               class="capitalize flex gap-2 items-center"
               :class="{ active: type === conversationTypeParam }"
             >
diff --git a/src/views/ConversationView.vue b/src/views/ConversationView.vue
index e2caad9..cd45d2f 100644
--- a/src/views/ConversationView.vue
+++ b/src/views/ConversationView.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
 import { useKoreroStore } from '@/stores/korero'
 import AnnouncementConversation from '@/components/AnnouncementConversation.vue'
 import DiscussionConversation from '@/components/DiscussionConversation.vue'
@@ -8,11 +6,10 @@ import BrainstormConversation from '@/components/BrainstormConversation.vue'
 import QuestionConversation from '@/components/QuestionConversation.vue'
 import PollConversation from '@/components/PollConversation.vue'
 import MeetingConversation from '@/components/MeetingConversation.vue'
-import FormatDateString from '@/components/FormatDateString.vue'
-import HeadingOne from '@/components/HeadingOne.vue'
 import SmallContainer from '@/components/SmallContainer.vue'
 import { ConversationType } from '@/types'
 import { useRoute } from 'vue-router'
+import ConversationListItem from '@/components/ConversationListItem.vue'
 
 const route = useRoute()
 const koreroStore = useKoreroStore()
@@ -20,57 +17,44 @@ const koreroStore = useKoreroStore()
 const conversationId = route.params.conversationId as string
 
 koreroStore.setConversation(conversationId as string)
-
-const conversationTitle = computed(() => {
-  if (koreroStore.currentConversation) {
-    return koreroStore.currentConversation.title
-  }
-  return conversationId
-})
 </script>
 
 <template>
   <SmallContainer>
-    <template v-if="!koreroStore.currentConversation">
-      <p>Cannot find conversation</p>
-    </template>
-    <template v-else>
-      <div class="pb-4">
-        <div class="badge badge-accent" aria-label="Conversation type">
-          {{ koreroStore.currentConversation.type }}
-        </div>
-        <HeadingOne>{{ conversationTitle }}</HeadingOne>
-        <div class="italic text-xs">
-          By {{ koreroStore.getUser(koreroStore.currentConversation.authorId).name }} on
-          <FormatDateString
-            :dateString="koreroStore.currentConversation.created"
-            :defaultCss="false"
+    <div class="mt-12 py-4 px-6 rounded border border-slate-200">
+      <template v-if="!koreroStore.currentConversation">
+        <p>Cannot find conversation</p>
+      </template>
+      <template v-else>
+        <ConversationListItem
+          :conversation="koreroStore.currentConversation"
+          iconWidth="36px"
+          class="pb-8"
+        />
+
+        <div class="grid gap-4">
+          <AnnouncementConversation
+            v-if="koreroStore.currentConversation.type === ConversationType.ANNOUNCEMENT"
+          />
+          <DiscussionConversation
+            v-else-if="koreroStore.currentConversation.type === ConversationType.DISCUSSION"
+          />
+          <BrainstormConversation
+            v-else-if="koreroStore.currentConversation.type === ConversationType.BRAINSTORM"
+          />
+          <QuestionConversation
+            v-else-if="koreroStore.currentConversation.type === ConversationType.QUESTION"
+          />
+          <PollConversation
+            v-else-if="koreroStore.currentConversation.type === ConversationType.POLL"
           />
+          <MeetingConversation
+            v-else-if="koreroStore.currentConversation.type === ConversationType.MEETING"
+          />
+          <div v-else>Unknown conversation type</div>
         </div>
-      </div>
-
-      <div class="grid gap-4">
-        <AnnouncementConversation
-          v-if="koreroStore.currentConversation.type === ConversationType.ANNOUNCEMENT"
-        />
-        <DiscussionConversation
-          v-else-if="koreroStore.currentConversation.type === ConversationType.DISCUSSION"
-        />
-        <BrainstormConversation
-          v-else-if="koreroStore.currentConversation.type === ConversationType.BRAINSTORM"
-        />
-        <QuestionConversation
-          v-else-if="koreroStore.currentConversation.type === ConversationType.QUESTION"
-        />
-        <PollConversation
-          v-else-if="koreroStore.currentConversation.type === ConversationType.POLL"
-        />
-        <MeetingConversation
-          v-else-if="koreroStore.currentConversation.type === ConversationType.MEETING"
-        />
-        <div v-else>Unknown conversation type</div>
-      </div>
-    </template>
+      </template>
+    </div>
   </SmallContainer>
 </template>
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index dc40c2d..c39be5f 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -28,22 +28,20 @@ function getGreeting() {
 </script>
 
 <template>
-  <div class="">
-    <HeadingOne>Home</HeadingOne>
-    <div class="text-center pt-8 py-8">
-      <div class="text-4xl">{{ getGreeting() }}</div>
-      <div class="text-lg">@{{ user.handle }}</div>
-      <div v-if="currentWorkspace" class="opacity-70 text-sm">{{ currentWorkspace.name }}</div>
-    </div>
-
-    <SmallContainer v-if="channels.length === 0">
-      <div class="p-6 rounded border border-slate-200 text-center">
-        <p class="mb-4">Create your first channel in this workspace.</p>
-        <RouterLink :to="{ name: 'newChannel' }" class="btn btn-lg btn-accent"
-          >Create Channel</RouterLink
-        >
-      </div>
-    </SmallContainer>
-    <RecentConversations v-else />
+  <HeadingOne>Home</HeadingOne>
+  <div class="text-center pt-8 py-8">
+    <div class="text-4xl">{{ getGreeting() }}</div>
+    <div class="text-lg">@{{ user.handle }}</div>
+    <div v-if="currentWorkspace" class="opacity-70 text-sm">{{ currentWorkspace.name }}</div>
   </div>
+
+  <SmallContainer v-if="channels.length === 0">
+    <div class="p-6 rounded border border-slate-200 text-center">
+      <p class="mb-4">Create your first channel in this workspace.</p>
+      <RouterLink :to="{ name: 'newChannel' }" class="btn btn-lg btn-accent"
+        >Create Channel</RouterLink
+      >
+    </div>
+  </SmallContainer>
+  <RecentConversations v-else />
 </template>
diff --git a/src/views/NewChannelView.vue b/src/views/NewChannelView.vue
index 18f4fc8..d5edf21 100644
--- a/src/views/NewChannelView.vue
+++ b/src/views/NewChannelView.vue
@@ -37,10 +37,9 @@ async function createChannel() {
 </script>
 
 <template>
-  <HeadingOne class="mb-2">Create a new channel</HeadingOne>
-
   <SmallContainer>
-    <div class="mt-16 p-6 rounded border border-slate-200">
+    <div class="mt-12 p-6 rounded border border-slate-200">
+      <HeadingOne class="mb-4">Create a new <span class="text-accent">channel</span></HeadingOne>
       <form @submit.prevent="createChannel">
         <TextInput label="Channel name" v-model="channelName" />
         <button class="btn btn-accent">Create channel</button>
diff --git a/src/views/NewConversationChooseView.vue b/src/views/NewConversationChooseView.vue
index 1b56d9f..9ec508a 100644
--- a/src/views/NewConversationChooseView.vue
+++ b/src/views/NewConversationChooseView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import HeadingOne from '@/components/HeadingOne.vue'
-import BaseCard from '@/components/BaseCard.vue'
+import ConversationTypeIcon from '@/components/ConversationTypeIcon.vue'
 import { ConversationType } from '@/types'
 import { useRoute } from 'vue-router'
 import { useKoreroStore } from '@/stores/korero'
@@ -36,19 +36,30 @@ function getTypeDescription(type: ConversationType) {
 </script>
 
 <template>
-  <HeadingOne>Create a new conversation</HeadingOne>
-  <div class="grid grid-cols-3 gap-4 py-4">
-    <BaseCard v-for="(type, index) in ConversationType" :key="index">
-      <h2 class="card-title capitalize">{{ type }}</h2>
-      <p>{{ getTypeDescription(type) }}</p>
+  <HeadingOne class="pb-2">Create a new <span class="text-accent">conversation</span></HeadingOne>
+  <div class="grid grid-cols-3 gap-4 max-w-screen-2xl">
+    <div
+      v-for="(type, index) in ConversationType"
+      :key="index"
+      class="py-4 px-6 rounded border border-slate-200 flex flex-col justify-between"
+    >
+      <!-- top -->
       <div>
-        <RouterLink
-          :to="{ name: 'newConversation', params: { channelId }, query: { type } }"
-          class="btn btn-accent"
-          >Choose</RouterLink
-        >
+        <div class="flex gap-4 items-center">
+          <ConversationTypeIcon :type="type" class="flex-shrink-0" width="24px" />
+          <div>
+            <h2 class="card-title capitalize">{{ type }}</h2>
+          </div>
+        </div>
+        <p class="py-4">{{ getTypeDescription(type) }}</p>
       </div>
-    </BaseCard>
+      <!-- bottom -->
+      <RouterLink
+        :to="{ name: 'newConversation', params: { channelId }, query: { type } }"
+        class="btn btn-accent btn-block"
+        >Create {{ type }}</RouterLink
+      >
+    </div>
   </div>
 </template>
 
diff --git a/src/views/NewConversationView.vue b/src/views/NewConversationView.vue
index aee6f77..c74cdef 100644
--- a/src/views/NewConversationView.vue
+++ b/src/views/NewConversationView.vue
@@ -7,6 +7,7 @@ import BaseLegend from '@/components/BaseLegend.vue'
 import TextInput from '@/components/TextInput.vue'
 import DateInput from '@/components/DateInput.vue'
 import SmallContainer from '@/components/SmallContainer.vue'
+import ConversationTypeIcon from '@/components/ConversationTypeIcon.vue'
 import { ConversationType, Agency } from '@/types'
 import type { Meeting, Poll, Brainstorm, Conversation, OwnerAgenda, CollabAgenda } from '@/types'
 import { dateStrToISO } from '@/date'
@@ -170,158 +171,176 @@ const messageValidationError = ref('')
 
 <template>
   <SmallContainer>
-    <HeadingOne>Create a new {{ conversationType }}</HeadingOne>
-    <div class="pb-6 text-xs">
-      <RouterLink :to="{ name: 'newConversationChoose', params: { channelId } }" class="link"
-        >Choose a different type</RouterLink
-      >
-    </div>
+    <div class="mt-12 py-4 px-6 rounded border border-slate-200">
+      <div class="flex gap-4 items-center pb-6">
+        <ConversationTypeIcon :type="conversationType" class="flex-shrink-0" width="36px" />
+        <div>
+          <HeadingOne
+            >Create a new <span class="text-accent">{{ conversationType }}</span></HeadingOne
+          >
+          <div class="text-xs opacity-70">
+            <RouterLink :to="{ name: 'newConversationChoose', params: { channelId } }" class="link"
+              >Change conversation type</RouterLink
+            >
+          </div>
+        </div>
+      </div>
 
-    <form @submit.prevent="createConversation">
-      <input type="hidden" v-model="chosenType" />
-
-      <TextInput label="Title" v-model="title" />
-
-      <div>
-        <ToastUiEditor
-          v-if="chosenType !== ConversationType.MEETING"
-          @updateValue="(t) => (message = t)"
-          :label="messageDescription"
-          height="auto"
-          initialEditType="markdown"
-          :validationError="messageValidationError"
-          class="mb-4"
-        />
-
-        <!-- MEETING -->
-
-        <div v-if="chosenType === ConversationType.MEETING">
-          <DateInput label="Date" v-model="meetingDate" />
-
-          <fieldset>
-            <BaseLegend>Agenda settings</BaseLegend>
-            <div class="max-w-xs mb-8">
-              <div class="form-control">
-                <label class="label cursor-pointer">
-                  <span class="label-text">You set agenda now</span>
-                  <input type="radio" class="radio" :value="Agency.OWNER" v-model="agendaSetting" />
-                </label>
-              </div>
-              <div class="form-control">
-                <label class="label cursor-pointer">
-                  <span class="label-text">Set agenda collaboratively</span>
-                  <input
-                    type="radio"
-                    class="radio"
-                    :value="Agency.COLLAB"
-                    v-model="agendaSetting"
-                  />
-                </label>
-              </div>
-            </div>
-          </fieldset>
-
-          <template v-if="agendaSetting === Agency.OWNER">
-            <!-- Agenda items in a single field for non-collab -->
-            <ToastUiEditor
-              @updateValue="(t) => (agendaText = t)"
-              label="Agenda Items"
-              height="auto"
-              initialEditType="markdown"
-            />
-          </template>
-          <template v-if="agendaSetting === Agency.COLLAB">
-            <DateInput label="Agenda item proposal due date" v-model="due" />
+      <form @submit.prevent="createConversation">
+        <input type="hidden" v-model="chosenType" />
+
+        <TextInput label="Title" v-model="title" />
+
+        <div>
+          <ToastUiEditor
+            v-if="chosenType !== ConversationType.MEETING"
+            @updateValue="(t) => (message = t)"
+            :label="messageDescription"
+            height="auto"
+            initialEditType="markdown"
+            :validationError="messageValidationError"
+            class="mb-4"
+          />
+
+          <!-- MEETING -->
+
+          <div v-if="chosenType === ConversationType.MEETING">
+            <DateInput label="Date" v-model="meetingDate" />
 
             <fieldset>
-              <legend class="sr-only">Agenda Proposed Items Decision Process</legend>
+              <BaseLegend>Agenda settings</BaseLegend>
               <div class="max-w-xs mb-8">
                 <div class="form-control">
-                  <label :for="'AgendaDecision' + Agency.OWNER" class="label cursor-pointer">
-                    <span class="label-text">You decide about agenda items</span>
+                  <label class="label cursor-pointer">
+                    <span class="label-text">You set agenda now</span>
                     <input
                       type="radio"
-                      :id="'AgendaDecision' + Agency.OWNER"
                       class="radio"
                       :value="Agency.OWNER"
-                      v-model="agendaDecision"
+                      v-model="agendaSetting"
                     />
                   </label>
                 </div>
                 <div class="form-control">
-                  <label :for="'AgendaDecision' + Agency.COLLAB" class="label cursor-pointer">
-                    <span class="label-text">Vote for agenda items</span>
+                  <label class="label cursor-pointer">
+                    <span class="label-text">Set agenda collaboratively</span>
                     <input
                       type="radio"
-                      :id="'AgendaDecision' + Agency.COLLAB"
                       class="radio"
                       :value="Agency.COLLAB"
-                      v-model="agendaDecision"
+                      v-model="agendaSetting"
                     />
                   </label>
                 </div>
               </div>
             </fieldset>
-            <fieldset>
-              <BaseLegend>Agenda items</BaseLegend>
 
-              <BaseCard v-for="(item, index) in agendaItems" :key="index" class="mb-4">
-                <div>Agenda item {{ index + 1 }}</div>
+            <template v-if="agendaSetting === Agency.OWNER">
+              <!-- Agenda items in a single field for non-collab -->
+              <ToastUiEditor
+                @updateValue="(t) => (agendaText = t)"
+                label="Agenda Items"
+                height="auto"
+                initialEditType="markdown"
+              />
+            </template>
+            <template v-if="agendaSetting === Agency.COLLAB">
+              <DateInput label="Agenda item proposal due date" v-model="due" />
+
+              <fieldset>
+                <legend class="sr-only">Agenda Proposed Items Decision Process</legend>
+                <div class="max-w-xs mb-8">
+                  <div class="form-control">
+                    <label :for="'AgendaDecision' + Agency.OWNER" class="label cursor-pointer">
+                      <span class="label-text">You decide about agenda items</span>
+                      <input
+                        type="radio"
+                        :id="'AgendaDecision' + Agency.OWNER"
+                        class="radio"
+                        :value="Agency.OWNER"
+                        v-model="agendaDecision"
+                      />
+                    </label>
+                  </div>
+                  <div class="form-control">
+                    <label :for="'AgendaDecision' + Agency.COLLAB" class="label cursor-pointer">
+                      <span class="label-text">Vote for agenda items</span>
+                      <input
+                        type="radio"
+                        :id="'AgendaDecision' + Agency.COLLAB"
+                        class="radio"
+                        :value="Agency.COLLAB"
+                        v-model="agendaDecision"
+                      />
+                    </label>
+                  </div>
+                </div>
+              </fieldset>
+              <fieldset>
+                <BaseLegend>Agenda items</BaseLegend>
 
-                <TextInput label="Title" v-model="item.title" />
+                <BaseCard v-for="(item, index) in agendaItems" :key="index" class="mb-4">
+                  <div>Agenda item {{ index + 1 }}</div>
 
-                <!-- Description is optional -->
-                <ToastUiEditor
-                  @updateValue="(t) => (item.text = t)"
-                  label="Description"
-                  height="auto"
-                  initialEditType="markdown"
-                />
-              </BaseCard>
+                  <TextInput label="Title" v-model="item.title" />
 
-              <button class="btn btn-sm mb-4" type="button" @click="addAgendaItem">Add item</button>
-            </fieldset>
-          </template>
-        </div>
+                  <!-- Description is optional -->
+                  <ToastUiEditor
+                    @updateValue="(t) => (item.text = t)"
+                    label="Description"
+                    height="auto"
+                    initialEditType="markdown"
+                  />
+                </BaseCard>
+
+                <button class="btn btn-sm mb-4" type="button" @click="addAgendaItem">
+                  Add item
+                </button>
+              </fieldset>
+            </template>
+          </div>
 
-        <!-- POLL -->
+          <!-- POLL -->
 
-        <div v-else-if="chosenType === ConversationType.POLL">
-          <DateInput label="Due" v-model="due" />
+          <div v-else-if="chosenType === ConversationType.POLL">
+            <DateInput label="Due" v-model="due" />
 
-          <fieldset class="mb-4">
-            <BaseLegend>Poll options</BaseLegend>
+            <fieldset class="mb-4">
+              <BaseLegend>Poll options</BaseLegend>
 
-            <TextInput
-              v-for="(option, index) in pollOptions"
-              :key="index"
-              :label="`Option ${index + 1}`"
-              v-model="pollOptions[index]"
-              :srOnlyLabel="true"
-            />
+              <TextInput
+                v-for="(option, index) in pollOptions"
+                :key="index"
+                :label="`Option ${index + 1}`"
+                v-model="pollOptions[index]"
+                :srOnlyLabel="true"
+              />
 
-            <button class="btn btn-sm mb-4" type="button" @click="addPollOption">Add option</button>
-          </fieldset>
+              <button class="btn btn-sm mb-4" type="button" @click="addPollOption">
+                Add option
+              </button>
+            </fieldset>
 
-          <div class="form-control max-w-xs mb-8">
-            <label class="label cursor-pointer">
-              <span class="label-text">Allow multiple answers</span>
-              <input v-model="multipleAnswers" type="checkbox" class="toggle" />
-            </label>
+            <div class="form-control max-w-xs mb-8">
+              <label class="label cursor-pointer">
+                <span class="label-text">Allow multiple answers</span>
+                <input v-model="multipleAnswers" type="checkbox" class="toggle" />
+              </label>
+            </div>
           </div>
-        </div>
 
-        <!-- BRAINSTORM -->
+          <!-- BRAINSTORM -->
 
-        <DateInput
-          v-else-if="chosenType === ConversationType.BRAINSTORM"
-          label="Due"
-          v-model="due"
-        />
-      </div>
+          <DateInput
+            v-else-if="chosenType === ConversationType.BRAINSTORM"
+            label="Due"
+            v-model="due"
+          />
+        </div>
 
-      <button class="btn btn-accent mt-4">Create {{ conversationType }}</button>
-    </form>
+        <button class="btn btn-accent mt-4">Create {{ conversationType }}</button>
+      </form>
+    </div>
   </SmallContainer>
 </template>