refactor: from code review

ThatConference · Dec 16, 2023 · 103b7c3 · 103b7c3
1 parent d3e1659
commit 103b7c3
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 46 deletions.
diff --git a/src/_components/members/MemberConnectModal.svelte b/src/_components/members/MemberConnectModal.svelte
@@ -99,47 +99,44 @@
 								{lastName}
 							</p>
 							{#if sharingWithMe}
-								<p class="text-md mb-2 text-gray-600">
+								<p class="prose prose-lg">
 									Started sharing with you on {sharedWithMeOn}
 								</p>
 							{:else}
-								<p class="text-md mb-2 text-gray-600">Is currently not sharing with you</p>
+								<p class="prose prose-lg">
+									{firstName} is not currently sharing their contact information with you.
+								</p>
 							{/if}
+
 							{#if email}
 								<p class="text-sm text-gray-600">{email}</p>
 							{/if}
+
 							{#if phone}
 								<p class="text-sm text-gray-600">{phone}</p>
 							{/if}
+
 							{#if shareStatus}
 								<p class="mt-4 text-sm font-semibold text-thatBlue-700">{shareStatus}</p>
 							{/if}
 
-							<div class="my-10 space-y-2">
+							<div class="my-10 space-x-4">
 								<StandardButton on:click={() => toggleFollowAction()}>
-									<span
-										>{#if !isFollowing}Follow{:else}Un-Follow{/if}
-										{firstName}</span>
+									<span>
+										{#if !isFollowing}Follow{:else}Un-Follow{/if}
+									</span>
 								</StandardButton>
 
 								{#if meSharingWith}
-									<StandardButton on:click={() => handleStopSharing()}>
-										Stop Sharing with {firstName}
-									</StandardButton>
+									<StandardButton on:click={() => handleStopSharing()}>Stop Sharing</StandardButton>
 								{:else}
 									<StandardButton on:click={() => dispatch('START_SHARING')}>
-										Share With {firstName}
+										Share Contact Card
 									</StandardButton>
 								{/if}
 							</div>
 
 							{#if meSharingWith}
-								<p class="text-md mt-4 text-gray-600">
-									You are sharing your <a
-										class="text-thatBlue-500 hover:text-thatOrange-500"
-										href="/my/profiles/shared">Shared Profile</a>
-									with {firstName}
-								</p>
 								<form use:enhance method="POST" action="/my/network/members">
 									<div class="mt-2">
 										<label for="notes" class="my-2 block text-sm font-medium text-gray-500"
@@ -159,34 +156,33 @@
 									<div class="mt-2 flex flex-row-reverse space-x-4 space-x-reverse">
 										{#if $allErrors?.length > 0}
 											<DisabledShell>
-												<div class="px-8 py-2 font-medium">Update Notes</div>
+												<div class="px-8 py-2 font-medium">Update My Notes</div>
 											</DisabledShell>
 										{:else}
-											<button type="submit" class="anchorButtonHighlight"> Update Notes </button>
+											<button type="submit" class="anchorButtonHighlight"> Update My Notes </button>
 										{/if}
 									</div>
 								</form>
 							{/if}
 						</div>
 					</div>
+					<div class="mt-12 flex flex-col justify-center text-sm text-gray-500">
+						<div class="space-x-4">
+							<span>
+								View your <a class="a-decorate" href="/my/network/members">network</a>.
+							</span>
+							<span>
+								Update your <a class="a-decorate" href="/my/profiles/shared">shared profile</a>.
+							</span>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
 </div>
 
 <style lang="postcss">
-	/* .anchorButton {
-		@apply rounded-md bg-slate-50 px-4 py-2 text-center font-normal tracking-wide text-thatBlue-500 shadow-md md:text-xl;
-	}
-
-	.anchorButton:hover {
-		@apply bg-slate-200 transition duration-150 ease-in-out;
-	}
-	.anchorButton:focus {
-		@apply underline underline-offset-4;
-	} */
-
 	.anchorButtonHighlight {
 		@apply rounded-md bg-thatBlue-500 px-4 py-2 text-center font-normal tracking-wide text-white shadow-md md:text-xl;
 	}

diff --git a/src/_components/members/MemberConnecting.svelte b/src/_components/members/MemberConnecting.svelte
@@ -2,7 +2,7 @@
 	export let member;
 
 	import { getContext } from 'svelte';
-	import { Heart, ChevronDownCircle, ChevronUpCircle } from 'lucide-svelte';
+	import { Heart, ArrowDown, ArrowUp } from 'lucide-svelte';
 	import { Standard as StandardButton } from '$elements/buttons';
 	import MemberConnectModal from '$components/members/MemberConnectModal.svelte';
 
@@ -44,15 +44,22 @@
 		on:STOP_SHARING={() => stopShareWith()}
 		on:START_SHARING={() => shareWith()}></MemberConnectModal>
 {/if}
-<div>
+<div class="group">
 	<StandardButton on:click={() => (showMemberConnectModal = true)}>
-		<div class="flex items-center space-x-2">
-			<span class="">Connect</span>
-			<div>
-				<ChevronUpCircle class={meSharingWith ? 'fill-thatOrange-400' : ''} />
-				<ChevronDownCircle class={sharingWithMe ? 'fill-thatOrange-400' : ''} />
+		<div class="flex items-center space-x-4">
+			<span class="uppercase">Connect</span>
+
+			<div class="flex text-gray-300">
+				<span class="group-hover:text-white" class:text-that-blue={isFollowing}>
+					<Heart />
+				</span>
+				<span class="group-hover:text-white" class:text-that-blue={meSharingWith}>
+					<ArrowUp />
+				</span>
+				<span class="group-hover:text-white" class:text-that-blue={sharingWithMe}>
+					<ArrowDown />
+				</span>
 			</div>
-			<Heart class={isFollowing ? 'fill-red-500' : ''} />
 		</div>
 	</StandardButton>
 </div>
diff --git a/src/_elements/modals/Action.svelte b/src/_elements/modals/Action.svelte
@@ -16,8 +16,7 @@
 				<div class="absolute inset-0 bg-gray-500 opacity-75" />
 			</div>
 			<div
-				class="transform overflow-hidden rounded-lg bg-white px-4 pb-4
-		pt-5 shadow-xl transition-all sm:w-full sm:max-w-sm sm:p-6 md:max-w-2xl"
+				class="transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 shadow-xl transition-all sm:w-full sm:max-w-sm sm:p-6 md:max-w-2xl"
 				role="dialog"
 				aria-modal="true"
 				aria-labelledby="modal-headline">

diff --git a/src/routes/(root)/sponsors/_components/ShareWithSponsor.svelte b/src/routes/(root)/sponsors/_components/ShareWithSponsor.svelte
@@ -12,10 +12,10 @@
 	const { companyName = '', id: partnerId } = partner;
 	const { addLead } = partnerLeadMutationApi();
 
-	const actionTitle = `Share with ${companyName}`;
+	const actionTitle = `Connect with ${companyName}`;
 	const actionText = `By clicking the button below you agree to share your shared profile with <span class="font-bold">${companyName}</span>. 
 		See what you're sharing in your 
-		<a class="font-medium text-thatBlue-500 hover:text-thatOrange-500" href="/my/profiles/primary">Shared Profile<a/>,
+		<a class="a-decorate" href="/my/profiles/primary">Shared Profile<a/>,
 			located in your settings.`;
 
 	function shareWithSponsorAction() {

diff --git a/src/routes/(root)/sponsors/_components/_CTA.svelte b/src/routes/(root)/sponsors/_components/_CTA.svelte
@@ -32,7 +32,7 @@
 			{#if $page.data.user.isAuthenticated}
 				{#if eventId}
 					<StandardButton on:click={() => dispatch('SHOW_SHARE_SPONSOR_MODAL')}
-						>Share</StandardButton>
+						>Connect With</StandardButton>
 				{/if}
 				<StandardButton class="h-3/4" on:click={() => dispatch('TOGGLE_FOLLOW')}>
 					{#if isFollowing}Un-Follow{:else}Follow{/if}

diff --git a/src/routes/(root)/sponsors/_components/_Hero.svelte b/src/routes/(root)/sponsors/_components/_Hero.svelte
@@ -47,13 +47,13 @@
 						</StandardLink>
 
 						{#if $page.data.user.isAuthenticated}
-							{#if eventId}
-								<StandardButton on:click={() => dispatch('SHOW_SHARE_SPONSOR_MODAL')}
-									>Share</StandardButton>
-							{/if}
 							<StandardButton class="h-3/4" on:click={() => dispatch('TOGGLE_FOLLOW')}>
 								{#if !isFollowing}Follow{:else}Un-Follow{/if}
 							</StandardButton>
+							{#if eventId}
+								<StandardButton on:click={() => dispatch('SHOW_SHARE_SPONSOR_MODAL')}
+									>Connect With</StandardButton>
+							{/if}
 						{/if}
 					</div>
 				</div>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -184,6 +184,23 @@
 		color: #f3f4f6;
 	}
 
+	:global(.a-decorate) {
+		color: #26529a;
+		text-decoration: underline;
+		text-decoration-style: line;
+		text-decoration-color: #26529a;
+		text-decoration-thickness: 0.01em;
+		text-underline-offset: 6px;
+	}
+	:global(.a-decorate:hover) {
+		color: #26529a;
+		text-decoration: underline;
+		text-decoration-style: line;
+		text-decoration-color: #26529a;
+		text-decoration-thickness: 0.1em;
+		text-underline-offset: 3px;
+	}
+
 	:global(.lineBreaks) {
 		white-space: pre-line;
 	}