Merge pull request #1504 from ThatConference/cs/ux

refactor: updating language around activities vs open spaces

.vscode/settings.json

@@ -6,7 +6,7 @@
 	"editor.tabSize": 2,
 	"editor.snippetSuggestions": "top",
 	"editor.codeActionsOnSave": {
-		"source.fixAll": true
+		"source.fixAll": "explicit"
 	},
 	"workbench.colorCustomizations": {
 		"titleBar.activeForeground": "#000",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "that-us",
-	"version": "3.16.4",
+	"version": "3.16.5",
 	"description": "THAT.us website",
 	"main": "index.js",
 	"type": "module",

src/_components/activities/DiscordLinksModal.svelte

@@ -9,15 +9,15 @@
 
 <ActionModal
 	title="Leaving THAT.us site"
-	text="THAT.us Activities are hosted on <span class='font-bold'>Discord</span>. Please use the
-appropriate link below to get started.">
+	text="THAT Open Spaces are now hosted in <span class='font-bold'>Discord</span> as dedicated voice channels. Please use the
+appropriate link below to get started and join. Please note: you have to be a member of THAT Discord to join.">
 	<div
 		class="flex justify-center space-x-6"
 		use:clickOutside
 		on:click_outside={() => (showModal = false)}>
 		<StandardLink href={discord.channelUrl} target="_blank" on:click={() => (showModal = false)}
-			>Go as Discord Member</StandardLink>
+			>Join Channel</StandardLink>
 		<StandardLink href={discord.inviteUrl} target="_blank" on:click={() => (showModal = false)}
-			>Go using Discord Invite</StandardLink>
+			>I need a Discord invite.</StandardLink>
 	</div>
 </ActionModal>

src/_components/activities/List.svelte

@@ -51,12 +51,14 @@
 	let activitiesTaggedFiltered = [];
 	let family = true;
 	let professional = filterForFamily ? false : true;
-	let regular = true;
-	let keynote = true;
-	let workshop = true;
+	let regular = false;
+	let keynote = false;
+	let workshop = false;
 	let openSpace = true;
 	let dense = false;
 
+	console.log('activities', activities);
+
 	$: {
 		const tagsSet = new Set();
 		const communitiesSet = new Set();
@@ -92,12 +94,13 @@
 			activity.category === null
 	);
 
-	$: activitiesLocationCategoryFiltered = primaryCategorySort.filter(
-		(activity) =>
-			(activity.type === 'REGULAR' ? regular : false) ||
-			(activity.type === 'KEYNOTE' ? keynote : false) ||
-			(activity.type === 'WORKSHOP' ? workshop : false) ||
-			(activity.type === 'OPEN_SPACE' ? openSpace : false)
+	$: activitiesLocationCategoryFiltered = primaryCategorySort.filter((activity) =>
+		(activity.type === 'REGULAR' ? regular : false) ||
+		(activity.type === 'KEYNOTE' ? keynote : false) ||
+		(activity.type === 'WORKSHOP' ? workshop : false) ||
+		activity.type === 'OPEN_SPACE'
+			? openSpace
+			: false
 	);
 
 	$: activitiesTaggedFiltered =

src/_components/nav/interiorNav/Large.svelte

@@ -3,23 +3,14 @@
 	import Icon from 'svelte-awesome';
 	import { plus } from '$components/svelte-awesome-icons';
 
-	import { Activity } from '$elements/svgs';
-	import { hasNotifications } from '$stores/notificationCenter';
-
-	import ActivitySlideOver from '../../activityCenter/ActivitySlideOver.svelte';
 	import DesktopLink from './_DesktopLink.svelte';
 	import UserProfile from '../UserProfile.svelte';
 	import { clickOutside } from '$elements/actions';
 
 	import Cart from '../Cart.svelte';
 	import ClaimCart from '../ClaimCart.svelte';
 
-	let activityVisible;
 	let helpVisible;
-
-	function handleCloseActivityCenter() {
-		activityVisible = !activityVisible;
-	}
 </script>
 
 <div class="relative flex items-center">
@@ -33,20 +24,18 @@
 		<div class="ml-8 flex items-baseline">
 			<a
 				data-sveltekit-prefetch
-				href="/events/"
+				href="/activities/"
 				class="ml-1 rounded-md px-3 py-2 text-sm font-medium text-gray-300
-          hover:bg-that-blue hover:text-white focus:bg-that-blue
-          focus:text-white focus:outline-none">
-				<DesktopLink>Events</DesktopLink>
+					hover:bg-that-blue hover:text-white focus:bg-that-blue
+					focus:text-white focus:outline-none">
+				<DesktopLink>Upcoming Open Spaces</DesktopLink>
 			</a>
-
 			<a
-				data-sveltekit-prefetch
-				href="/activities/"
+				href="https://thatconference.com"
 				class="ml-1 rounded-md px-3 py-2 text-sm font-medium text-gray-300
           hover:bg-that-blue hover:text-white focus:bg-that-blue
           focus:text-white focus:outline-none">
-				<DesktopLink>Activities</DesktopLink>
+				<DesktopLink>THAT Conference</DesktopLink>
 			</a>
 
 			<a
@@ -67,7 +56,7 @@
 				<DesktopLink>Communities</DesktopLink>
 			</a>
 
-			<a
+			<!-- <a
 				data-sveltekit-prefetch
 				href="/partners/"
 				class="ml-1 rounded-md px-3 py-2 text-sm font-medium text-gray-300
@@ -83,7 +72,7 @@
           hover:bg-that-blue hover:text-white focus:bg-that-blue
           focus:text-white focus:outline-none">
 				<DesktopLink>Blog</DesktopLink>
-			</a>
+			</a> -->
 
 			<div>
 				<button
@@ -104,17 +93,17 @@
 								<a
 									href="/support/what-is-an-activity/"
 									class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-									What Is An Activity
+									What Is An Open Space
 								</a>
 								<a
 									href="/support/joining-an-activity/"
 									class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-									How To Join An Activity
+									How To Join An Open Space
 								</a>
 								<a
 									href="/support/creating-an-activity/"
 									class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-									How To Create An Activity
+									How To Create An Open Space
 								</a>
 								<a
 									href="/support/staying-up-to-date/"
@@ -137,27 +126,6 @@
 
 <div class="hidden lg:block">
 	<div class="ml-4 flex items-center justify-center md:ml-6">
-		{#if $hasNotifications}
-			<button
-				type="button"
-				class="h-10 w-10 max-w-xs rounded-full text-white duration-150 ease-in-out hover:bg-thatBlue-500"
-				class:shadow-solid={activityVisible}
-				class:bg-thatBlue-500={activityVisible}
-				aria-label="Notifications"
-				on:click|preventDefault={() => (activityVisible = !activityVisible)}>
-				<div
-					class="flex transform justify-center transition duration-500 ease-in-out hover:scale-105">
-					<Activity />
-				</div>
-			</button>
-
-			{#if activityVisible}
-				<ActivitySlideOver
-					on:click={handleCloseActivityCenter}
-					on:clicked-outside={handleCloseActivityCenter} />
-			{/if}
-		{/if}
-
 		<div class="text-white">
 			<ClaimCart />
 		</div>

src/_components/nav/interiorNav/Mobile.svelte

@@ -16,19 +16,18 @@
 	<div class="px-2 py-3 sm:px-3">
 		<a
 			data-sveltekit-prefetch
-			href="/events/"
+			href="/activities/"
 			class="mt-1 block rounded-md px-3 py-2 text-base font-medium text-gray-300
-        hover:bg-that-blue hover:text-white focus:bg-that-blue focus:text-white
-        focus:outline-none">
-			Events
+				hover:bg-that-blue hover:text-white focus:bg-that-blue focus:text-white
+				focus:outline-none">
+			Upcoming Open Spaces
 		</a>
 		<a
-			data-sveltekit-prefetch
-			href="/activities/"
+			href="https://thatconference.com"
 			class="mt-1 block rounded-md px-3 py-2 text-base font-medium text-gray-300
         hover:bg-that-blue hover:text-white focus:bg-that-blue focus:text-white
         focus:outline-none">
-			Activities
+			THAT Conference
 		</a>
 		<a
 			data-sveltekit-prefetch
@@ -46,22 +45,22 @@
 				focus:outline-none">
 			Communities
 		</a>
-		<a
+		<!-- <a
 			data-sveltekit-prefetch
 			href="/partners/"
 			class="mt-1 block rounded-md px-3 py-2 text-base font-medium text-gray-300
         hover:bg-that-blue hover:text-white focus:bg-that-blue focus:text-white
         focus:outline-none">
 			Partners
-		</a>
-		<a
+		</a> -->
+		<!-- <a
 			data-sveltekit-prefetch
 			href="/blog/"
 			class="mt-1 block rounded-md px-3 py-2 text-base font-medium text-gray-300
         hover:bg-that-blue hover:text-white focus:bg-that-blue focus:text-white
         focus:outline-none">
 			Blog
-		</a>
+		</a> -->
 		<a
 			data-sveltekit-prefetch
 			href="/support/"

src/_components/nav/mainNav/links.js

@@ -1,10 +1,6 @@
 export default [
 	{
-		text: 'Events',
-		href: '/events/'
-	},
-	{
-		text: 'Activities',
+		text: 'Upcoming Open Spaces',
 		href: '/activities/',
 		first: true
 	},
@@ -17,15 +13,19 @@ export default [
 		href: '/communities/'
 	},
 	{
-		text: 'Sponsors',
-		href: '/partners/'
-	},
-	{
-		text: 'Blog',
-		href: '/blog/'
-	},
-	{
-		text: 'Help',
-		href: '/support/'
+		text: 'THAT Conference',
+		href: 'https://thatconference.com'
 	}
+	// {
+	// 	text: 'Sponsors',
+	// 	href: '/partners/'
+	// },
+	// {
+	// 	text: 'Blog',
+	// 	href: '/blog/'
+	// },
+	// {
+	// 	text: 'Help',
+	// 	href: '/support/'
+	// }
 ];

src/_elements/ActionHeader.svelte

@@ -5,7 +5,7 @@
 <header class="py-10">
 	<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 		<div class="flex justify-between">
-			<h1 class="text-3xl font-bold leading-9 text-white">
+			<h1 class="text-4xl font-bold tracking-tight  text-white sm:text-5xl">
 				<slot name="title">{title}</slot>
 			</h1>
 			<span class="inline-flex rounded-md shadow-sm">

src/app.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

src/routes/activities/+page.svelte

@@ -73,7 +73,7 @@
 <StackedLayout>
 	<div slot="header">
 		<Nav />
-		<ActionHeader title="Daily Activities">
+		<ActionHeader title="Upcoming Open Spaces">
 			{#if !createDisabled}
 				<HighlightLink href="/activities/create/">Create Activity</HighlightLink>
 			{/if}