Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update community support chat visual #1656

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+119 −142
Open

Update community support chat visual #1656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c9bf23
update: the community support chat example.
ItzNotABug Jan 17, 2025
8aed291
Merge branch 'main' into improve-community-chat-visuals
ItzNotABug Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions src/lib/components/CommunitySupportChat.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<ul class="web-chat-list">
<li class="web-chat-item is-user-a">
<div class="web-chat-message">
<div class="web-user-box">
<img
class="web-user-box-image"
src="/images/community/avatars/walter.avif"
height="40"
width="40"
alt="Avatar of Walter"
/>
<div class="web-user-box-name flex gap-2">
<span class="text-sub-body font-medium">Walter O'Brien</span>
<time class="text-caption web-u-color-text-tertiary">8:32 AM</time>
</div>
<div class="web-user-box-content text-caption text-primary">
Hello devs! I am getting a CORS error when sending a request to the backend. Can
you help me?
</div>
</div>
</div>
</li>
<li class="web-chat-item is-user-b">
<div class="web-chat-message reply">
<div class="web-user-box">
<img
class="web-user-box-image"
src="/images/avatars/steven.avif"
width="48"
height="48"
alt="Avatar of Steven"
/>
<div class="web-user-box-name flex gap-2">
<span class="text-sub-body font-medium">Steven</span>
<time class="text-caption web-u-color-text-tertiary">8:38 AM</time>
</div>
<div class="web-user-box-content text-caption text-primary">
Hey Walter! Is this the message you get
<a class="web-link is-pink" href="/blog/post/cors-error" target="_blank"
>"Access blocked by CORS policy"</a
>?
</div>
</div>
</div>
</li>
<li class="web-chat-item is-user-a">
<div class="web-chat-message">
<div class="web-user-box">
<img
class="web-user-box-image"
src="/images/community/avatars/walter.avif"
height="40"
width="40"
alt="Avatar of Walter"
/>
<div class="web-user-box-name flex gap-2">
<span class="text-sub-body font-medium">Walter O'Brien</span>
<time class="text-caption web-u-color-text-tertiary">9:05 AM</time>
</div>
<div class="web-user-box-content text-caption text-primary">Yes!</div>
</div>
</div>
</li>
<li class="web-chat-item is-user-b">
<div class="web-chat-message reply">
<div class="web-user-box">
<img
class="web-user-box-image"
src="/images/avatars/steven.avif"
width="48"
height="48"
alt="Avatar of Steven"
/>
<div class="web-user-box-name flex gap-2">
<span class="text-sub-body font-medium">Steven</span>
<time class="text-caption web-u-color-text-tertiary">9:08 AM</time>
</div>
<div class="web-user-box-content text-caption text-primary">
You should be able to debug this with a few steps. Just follow this blog:
<a class="web-link is-pink" href="/blog/post/cors-error" target="_blank"
>https://appwrite.io/blog/post/cors-error</a
>. Let me know if this helps 🙂
</div>
</div>
</div>
</li>
</ul>

<style>
@media (max-width: 768px) {
.web-chat-list {
gap: 2rem;
}
}
</style>
Binary file removed src/routes/education/(assets)/chat.png
View file
Open in desktop
Binary file not shown.
9 changes: 6 additions & 3 deletions src/routes/education/(components)/Community.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script>
import Chat from '../(assets)/chat.png';
<script lang="ts">
import CommunitySupportChat from '$lib/components/CommunitySupportChat.svelte';
</script>

<div class="container grid items-center gap-8 md:grid-cols-2">
Expand All @@ -20,5 +20,8 @@
Join our Discord</a
>
</div>
<img src={Chat} alt="Chat" class="mx-auto" />

<div class="px-4">
<CommunitySupportChat />
</div>
</div>
141 changes: 2 additions & 139 deletions src/routes/startups/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
import Faq from './faq.svelte';
import { getReferrerAndUtmSource } from '$lib/utils/utm';
import CommunitySupportChat from '$lib/components/CommunitySupportChat.svelte';

const title = 'Startups' + TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
Expand Down Expand Up @@ -481,145 +482,7 @@
<div
class="web-chat web-u-max-width-580 web-u-margin-block-start-40-mobile"
>
<ul class="web-chat-list">
<li class="web-chat-item is-user-a">
<div class="web-chat-message">
<div class="web-user-box">
<img
class="web-user-box-image"
src="/images/community/avatars/walter.avif"
height="40"
width="40"
alt="Avatar of Walter"
/>
<div
class="web-user-box-name flex gap-2"
>
<span
class="text-sub-body font-medium"
>Walter O'Brien</span
>
<time
class="text-caption web-u-color-text-tertiary"
>8:32 AM</time
>
</div>
<div
class="web-user-box-content text-caption text-primary"
>
Hello devs! I am getting a CORS
error when sending a request to the
backend. Can you help me?
</div>
</div>
</div>
</li>
<li class="web-chat-item is-user-b">
<div class="web-chat-message">
<div class="web-user-box">
<img
class="web-user-box-image"
src="/images/avatars/steven.avif"
width="48"
height="48"
alt="Avatar of Steven"
/>
<div
class="web-user-box-name flex gap-2"
>
<span
class="text-sub-body font-medium"
>Steven</span
>
<time
class="text-caption web-u-color-text-tertiary"
>8:38 AM</time
>
</div>
<div
class="web-user-box-content text-caption text-primary"
>
Hey Louis! Is this the message you
get
<a
class="web-link is-pink"
href="/blog/post/cors-error"
target="_blank"
>"Access blocked by CORS policy"</a
>?
</div>
</div>
</div>
</li>
<li class="web-chat-item is-user-a">
<div class="web-chat-message">
<div class="web-user-box">
<img
class="web-user-box-image"
src="/images/community/avatars/walter.avif"
height="40"
width="40"
alt="Avatar of Walter"
/>
<div
class="web-user-box-name flex gap-2"
>
<span
class="text-sub-body font-medium"
>Walter O'Brien</span
>
<time
class="text-caption web-u-color-text-tertiary"
>9:05 AM</time
>
</div>
<div
class="web-user-box-content text-caption text-primary"
>
Yes!
</div>
</div>
</div>
</li>
<li class="web-chat-item is-user-b">
<div class="web-chat-message">
<div class="web-user-box">
<img
class="web-user-box-image"
src="/images/avatars/steven.avif"
width="48"
height="48"
alt="Avatar of Steven"
/>
<div
class="web-user-box-name flex gap-2"
>
<span
class="text-sub-body font-medium"
>Steven</span
>
<time
class="text-caption web-u-color-text-tertiary"
>9:08 AM</time
>
</div>
<div
class="web-user-box-content text-caption text-primary"
>
You should be able to debug this
with a few steps. Just follow this
blog:
<a
class="web-link is-pink"
href="/blog/post/cors-error"
target="_blank"
>https://appwrite.io/blog/post/cors-error</a
>. Let me know if this helps 🙂
</div>
</div>
</div>
</li>
</ul>
<CommunitySupportChat />
</div>
</div>
<div class="web-mx-auto-mobile ml-auto flex flex-col gap-4">
Expand Down
16 changes: 16 additions & 0 deletions src/scss/7-components/_chat.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,22 @@
@media #{$break1} {

}

/* reversed arrow on replies */
&.reply {
&::before {
rotate: 180deg;
inset-block-end: auto;
inset-block-start: pxToRem(-16);
background-color: var(--border-color);
}

&::after {
rotate: 180deg;
inset-block-start: pxToRem(-14.5);
inset-block-end: auto;
}
}
}

/* user 'b' messages */
Expand Down