Skip to content

Commit b538be9

Browse files
robertpiosikrobertpiosik
committed
Reorganize support and social media links by introducing a text-enhanced 'Buy Me A Coffee' button in the Intro view and relocating social media icons from the HomeView footer
1 parent 48d75fc commit b538be9

8 files changed

Lines changed: 166 additions & 82 deletions

File tree

‎packages/ui/src/assets/icons/buy-me-a-coffee-with-text.svg‎

Lines changed: 65 additions & 0 deletions
Loading

‎packages/ui/src/components/editor/BuyMeACoffee/BuyMeACoffee.module.scss‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
.button {
22
display: flex;
3-
justify-content: center;
4-
padding: var(--padding-6px) var(--padding-12px);
3+
align-items: center;
4+
gap: var(--padding-8px);
5+
padding: 0 var(--padding-12px);
6+
height: 36px;
57
border-radius: 999px;
68
background-color: #ffdd00;
7-
transition: all 0.15s ease-out;
8-
width: 100%;
9+
color: black;
910

10-
> svg {
11-
height: 21px;
11+
&:hover {
12+
color: black;
13+
background-color: #ffe331;
1214
}
1315

14-
&:hover {
15-
transform: scale(0.98);
16+
> svg {
17+
height: 24px;
18+
fill: black;
1619
}
1720

1821
&:focus {

‎packages/ui/src/components/editor/BuyMeACoffee/BuyMeACoffee.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ export const BuyMeACoffee: React.FC<Props> = (props) => {
1313
className={styles.button}
1414
title="Buy me a coffee"
1515
>
16-
<Icon variant="BUY_ME_A_COFFEE" />
16+
<Icon variant="BUY_ME_A_COFFEE_WITH_TEXT" />
17+
<span className="codicon codicon-chevron-right" />
1718
</a>
1819
)
1920
}

‎packages/ui/src/components/editor/Enter/Enter.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
background-color: var(--vscode-button-background);
99
color: var(--vscode-button-foreground);
1010
border-radius: var(--border-radius-6px);
11+
width: 100%;
1112

1213
&:hover {
1314
background-color: var(--vscode-button-hoverBackground);

‎packages/ui/src/components/editor/Icon/Icon.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import BuyMeACoffee from '../../../assets/icons/buy-me-a-coffee.svg'
2+
import BuyMeACoffeeWithText from '../../../assets/icons/buy-me-a-coffee-with-text.svg'
23
import AIStudio from '../../../assets/icons/ai-studio.svg'
34
import Gemini from '../../../assets/icons/gemini.svg'
45
import OpenWebUI from '../../../assets/icons/open-webui.svg'
@@ -26,6 +27,7 @@ import Discord from '../../../assets/icons/discord.svg'
2627
export namespace Icon {
2728
export type Variant =
2829
| 'BUY_ME_A_COFFEE'
30+
| 'BUY_ME_A_COFFEE_WITH_TEXT'
2931
| 'AI_STUDIO'
3032
| 'GEMINI'
3133
| 'OPEN_WEBUI'
@@ -62,6 +64,9 @@ export const Icon: React.FC<Icon.Props> = ({ variant }) => {
6264
case 'BUY_ME_A_COFFEE':
6365
icon = <BuyMeACoffee />
6466
break
67+
case 'BUY_ME_A_COFFEE_WITH_TEXT':
68+
icon = <BuyMeACoffeeWithText />
69+
break
6570
case 'AI_STUDIO':
6671
icon = <AIStudio />
6772
break

‎packages/vscode/src/view/frontend/home/HomeView/HomeView.tsx‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -524,36 +524,6 @@ export const HomeView: React.FC<Props> = (props) => {
524524
>
525525
<Icon variant="BUY_ME_A_COFFEE" />
526526
</a>
527-
<a
528-
className={cn(
529-
styles.footer__button,
530-
styles['footer__button--filled']
531-
)}
532-
href="https://x.com/CodeWebChat"
533-
title="Follow on X"
534-
>
535-
<Icon variant="X" />
536-
</a>
537-
<a
538-
className={cn(
539-
styles.footer__button,
540-
styles['footer__button--filled']
541-
)}
542-
href="https://www.reddit.com/r/CodeWebChat/"
543-
title="Join subreddit"
544-
>
545-
<Icon variant="REDDIT" />
546-
</a>
547-
<a
548-
className={cn(
549-
styles.footer__button,
550-
styles['footer__button--filled']
551-
)}
552-
href="https://discord.gg/KJySXsrSX5"
553-
title="Join Discord server"
554-
>
555-
<Icon variant="DISCORD" />
556-
</a>
557527
</div>
558528
<div className={styles.footer__right}>
559529
{props.home_view_type == HOME_VIEW_TYPES.WEB && (

‎packages/vscode/src/view/frontend/intro/Intro/Intro.module.scss‎

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
flex-direction: column;
1010
justify-content: space-between;
1111
align-items: center;
12-
gap: var(--padding-16px);
12+
gap: var(--padding-24px);
1313
min-height: 100vh;
1414
width: 100%;
1515
padding: var(--padding-8px) var(--padding-12px) var(--padding-12px);
@@ -25,39 +25,18 @@
2525
&__enter-buttons {
2626
display: flex;
2727
flex-direction: column;
28+
align-items: flex-start;
2829
gap: var(--padding-8px);
2930
width: 100%;
3031
}
31-
32-
&__links {
33-
display: flex;
34-
flex-direction: column;
35-
gap: var(--padding-8px);
36-
37-
&__link {
38-
display: flex;
39-
align-items: center;
40-
gap: var(--padding-6px);
41-
color: var(--vscode-textLink-foreground);
42-
text-decoration: none;
43-
44-
> span:first-child {
45-
font-size: 20px;
46-
}
47-
48-
> span:last-child:hover {
49-
text-decoration: underline;
50-
}
51-
}
52-
}
5332
}
5433

5534
.bottom {
5635
display: flex;
5736
flex-direction: column;
5837
align-items: center;
5938
text-align: center;
60-
gap: var(--padding-4px);
39+
gap: var(--padding-8px);
6140
font-size: var(--font-size-12px);
6241
user-select: text;
6342
width: 100%; // For easier text selection
@@ -66,6 +45,43 @@
6645
color: var(--vscode-descriptionForeground);
6746
}
6847

48+
&__social {
49+
display: flex;
50+
align-items: center;
51+
gap: var(--padding-8px);
52+
53+
&__icon {
54+
display: flex;
55+
align-items: center;
56+
justify-content: center;
57+
width: 24px;
58+
height: 24px;
59+
border-radius: var(--border-radius-999px);
60+
61+
> svg {
62+
fill: white;
63+
width: 16px;
64+
}
65+
66+
&--x {
67+
background-color: black;
68+
}
69+
&--reddit {
70+
background-color: #ff6314;
71+
}
72+
&--discord {
73+
background-color: #7289da;
74+
}
75+
}
76+
}
77+
78+
&__links {
79+
display: flex;
80+
flex-direction: column;
81+
align-items: center;
82+
gap: var(--padding-4px);
83+
}
84+
6985
a:hover {
7086
text-decoration: underline;
7187
}

‎packages/vscode/src/view/frontend/intro/Intro/Intro.tsx‎

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import styles from './Intro.module.scss'
22
import { Scrollable } from '@ui/components/editor/Scrollable'
33
import { Enter } from '@ui/components/editor/Enter'
4+
import { BuyMeACoffee } from '@ui/components/editor/BuyMeACoffee'
5+
import { Icon } from '@ui/components/editor/Icon'
6+
import cn from 'classnames'
47

58
type Props = {
69
on_new_chat: () => void
@@ -25,35 +28,55 @@ export const Intro: React.FC<Props> = (props) => {
2528
description="Send prompt with an API provider"
2629
on_click={props.on_api_call}
2730
/>
31+
<BuyMeACoffee username="robertpiosik" />
2832
</div>
29-
<div className={styles.top__links}>
33+
</div>
34+
<div className={styles.bottom}>
35+
<div className={styles.bottom__version}>{props.version}</div>
36+
<div className={styles.bottom__social}>
3037
<a
31-
className={styles.top__links__link}
32-
href="https://codeweb.chat/"
38+
href="https://x.com/CodeWebChat"
39+
title="Follow on X"
40+
className={cn(
41+
styles.bottom__social__icon,
42+
styles['bottom__social__icon--x']
43+
)}
3344
>
34-
<span className="codicon codicon-book" />
35-
<span>Documentation</span>
45+
<Icon variant="X" />
3646
</a>
3747
<a
38-
className={styles.top__links__link}
39-
href="https://buymeacoffee.com/robertpiosik"
48+
href="https://www.reddit.com/r/CodeWebChat/"
49+
title="Join subreddit"
50+
className={cn(
51+
styles.bottom__social__icon,
52+
styles['bottom__social__icon--reddit']
53+
)}
4054
>
41-
<span className="codicon codicon-coffee" />
42-
<span>Support author</span>
55+
<Icon variant="REDDIT" />
4356
</a>
44-
</div>
45-
</div>
46-
<div className={styles.bottom}>
47-
<div className={styles.bottom__version}>{props.version}</div>
48-
<div>
49-
Released under the{' '}
50-
<a href="https://github.com/robertpiosik/CodeWebChat/blob/dev/LICENSE">
51-
GPL-3.0 license
57+
<a
58+
href="https://discord.gg/KJySXsrSX5"
59+
title="Join Discord server"
60+
className={cn(
61+
styles.bottom__social__icon,
62+
styles['bottom__social__icon--discord']
63+
)}
64+
>
65+
<Icon variant="DISCORD" />
5266
</a>
5367
</div>
54-
<div className={styles.bottom__author}>
68+
<div className={styles.bottom__links}>
69+
<a href="https://codeweb.chat/">https://codeweb.chat ↗</a>
70+
<div>
71+
Released under the{' '}
72+
<a href="https://github.com/robertpiosik/CodeWebChat/blob/dev/LICENSE">
73+
GPL-3.0 license ↗
74+
</a>
75+
</div>
76+
</div>
77+
<div>
5578
Copyright © {new Date().getFullYear()}{' '}
56-
<a href="https://x.com/robertpiosik">Robert Piosik</a>
79+
<a href="https://x.com/robertpiosik">Robert Piosik ↗</a>
5780
</div>
5881
</div>
5982
</div>

0 commit comments

Comments
 (0)