diff --git a/.gitignore b/.gitignore index 3d97dd0e5..733bacd5e 100644 --- a/.gitignore +++ b/.gitignore @@ -55,4 +55,7 @@ Thumbs.db # ignore Secrets folder .secrets/ -libraries/plugins/src/plugins.ts \ No newline at end of file +libraries/plugins/src/plugins.ts + +# upload folder +undefined/ diff --git a/apps/frontend/next.config.js b/apps/frontend/next.config.js index b2075a759..86c53bc63 100644 --- a/apps/frontend/next.config.js +++ b/apps/frontend/next.config.js @@ -10,7 +10,7 @@ const nextConfig = { nx: { // Set this to true if you would like to use SVGR // See: https://github.com/gregberge/vgr - svgr: false, + svgr: true, }, transpilePackages: ['crypto-hash'], images: { diff --git a/apps/frontend/src/app/auth/layout.tsx b/apps/frontend/src/app/auth/layout.tsx index 140822865..ac4229704 100644 --- a/apps/frontend/src/app/auth/layout.tsx +++ b/apps/frontend/src/app/auth/layout.tsx @@ -5,6 +5,9 @@ import Image from 'next/image'; import clsx from 'clsx'; import loadDynamic from 'next/dynamic'; import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side'; + +import { ReactComponent as PostizSvg } from '@gitroom/frontend/assets/postiz.svg'; + const ReturnUrlComponent = loadDynamic(() => import('./return.url.component')); export default async function AuthLayout({ @@ -27,33 +30,12 @@ export default async function AuthLayout({ alt="Logo" />
{isGeneralServerSide() ? ( - - - - - - + ) : (
Gitroom
)} diff --git a/apps/frontend/src/assets/add.svg b/apps/frontend/src/assets/add.svg new file mode 100644 index 000000000..e51e03159 --- /dev/null +++ b/apps/frontend/src/assets/add.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/arrow-down.svg b/apps/frontend/src/assets/arrow-down.svg new file mode 100644 index 000000000..18d273349 --- /dev/null +++ b/apps/frontend/src/assets/arrow-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/arrow-left.svg b/apps/frontend/src/assets/arrow-left.svg new file mode 100644 index 000000000..4a51fe0ae --- /dev/null +++ b/apps/frontend/src/assets/arrow-left.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/arrow-right.svg b/apps/frontend/src/assets/arrow-right.svg new file mode 100644 index 000000000..895b99079 --- /dev/null +++ b/apps/frontend/src/assets/arrow-right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/arrow-up.svg b/apps/frontend/src/assets/arrow-up.svg new file mode 100644 index 000000000..2ec86cd8d --- /dev/null +++ b/apps/frontend/src/assets/arrow-up.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/bell.svg b/apps/frontend/src/assets/bell.svg new file mode 100644 index 000000000..7874420c0 --- /dev/null +++ b/apps/frontend/src/assets/bell.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/bin.svg b/apps/frontend/src/assets/bin.svg new file mode 100644 index 000000000..d772f320b --- /dev/null +++ b/apps/frontend/src/assets/bin.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/calendar.svg b/apps/frontend/src/assets/calendar.svg new file mode 100644 index 000000000..acbb33c2b --- /dev/null +++ b/apps/frontend/src/assets/calendar.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/cancel.svg b/apps/frontend/src/assets/cancel.svg new file mode 100644 index 000000000..02563dc81 --- /dev/null +++ b/apps/frontend/src/assets/cancel.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/chart-up.svg b/apps/frontend/src/assets/chart-up.svg new file mode 100644 index 000000000..9f9d3ae8e --- /dev/null +++ b/apps/frontend/src/assets/chart-up.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/checkmark.svg b/apps/frontend/src/assets/checkmark.svg new file mode 100644 index 000000000..76d3bca21 --- /dev/null +++ b/apps/frontend/src/assets/checkmark.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/circle-b.svg b/apps/frontend/src/assets/circle-b.svg new file mode 100644 index 000000000..fe2dab33c --- /dev/null +++ b/apps/frontend/src/assets/circle-b.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/circle-check.svg b/apps/frontend/src/assets/circle-check.svg new file mode 100644 index 000000000..bfcc8b2c0 --- /dev/null +++ b/apps/frontend/src/assets/circle-check.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/circle-dash.svg b/apps/frontend/src/assets/circle-dash.svg new file mode 100644 index 000000000..f80193584 --- /dev/null +++ b/apps/frontend/src/assets/circle-dash.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/circle-ok.svg b/apps/frontend/src/assets/circle-ok.svg new file mode 100644 index 000000000..b6d79b0b5 --- /dev/null +++ b/apps/frontend/src/assets/circle-ok.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/close-x.svg b/apps/frontend/src/assets/close-x.svg new file mode 100644 index 000000000..780a381d3 --- /dev/null +++ b/apps/frontend/src/assets/close-x.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/cloud-check.svg b/apps/frontend/src/assets/cloud-check.svg new file mode 100644 index 000000000..110acbeea --- /dev/null +++ b/apps/frontend/src/assets/cloud-check.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/collapse.svg b/apps/frontend/src/assets/collapse.svg new file mode 100644 index 000000000..b5e05272b --- /dev/null +++ b/apps/frontend/src/assets/collapse.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/comment.svg b/apps/frontend/src/assets/comment.svg new file mode 100644 index 000000000..038b6963f --- /dev/null +++ b/apps/frontend/src/assets/comment.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/delete-b.svg b/apps/frontend/src/assets/delete-b.svg new file mode 100644 index 000000000..32ef45b7d --- /dev/null +++ b/apps/frontend/src/assets/delete-b.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/delete-w.svg b/apps/frontend/src/assets/delete-w.svg new file mode 100644 index 000000000..96766cc9a --- /dev/null +++ b/apps/frontend/src/assets/delete-w.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/discord.svg b/apps/frontend/src/assets/discord.svg new file mode 100644 index 000000000..0b43a1716 --- /dev/null +++ b/apps/frontend/src/assets/discord.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/edit.svg b/apps/frontend/src/assets/edit.svg new file mode 100644 index 000000000..fb1a05b97 --- /dev/null +++ b/apps/frontend/src/assets/edit.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/expand.svg b/apps/frontend/src/assets/expand.svg new file mode 100644 index 000000000..8a73ab394 --- /dev/null +++ b/apps/frontend/src/assets/expand.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/flash-w.svg b/apps/frontend/src/assets/flash-w.svg new file mode 100644 index 000000000..2dbce718f --- /dev/null +++ b/apps/frontend/src/assets/flash-w.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/flash.svg b/apps/frontend/src/assets/flash.svg new file mode 100644 index 000000000..47a22d7f4 --- /dev/null +++ b/apps/frontend/src/assets/flash.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/gear.svg b/apps/frontend/src/assets/gear.svg new file mode 100644 index 000000000..641e287d8 --- /dev/null +++ b/apps/frontend/src/assets/gear.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/github.svg b/apps/frontend/src/assets/github.svg new file mode 100644 index 000000000..f3f4906a9 --- /dev/null +++ b/apps/frontend/src/assets/github.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/google.svg b/apps/frontend/src/assets/google.svg new file mode 100644 index 000000000..7eab96971 --- /dev/null +++ b/apps/frontend/src/assets/google.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/graph-up.svg b/apps/frontend/src/assets/graph-up.svg new file mode 100644 index 000000000..e64066afb --- /dev/null +++ b/apps/frontend/src/assets/graph-up.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/green-back.svg b/apps/frontend/src/assets/green-back.svg new file mode 100644 index 000000000..ff7cd07bc --- /dev/null +++ b/apps/frontend/src/assets/green-back.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/green-check-c.svg b/apps/frontend/src/assets/green-check-c.svg new file mode 100644 index 000000000..1d0ad48d8 --- /dev/null +++ b/apps/frontend/src/assets/green-check-c.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/green-check.svg b/apps/frontend/src/assets/green-check.svg new file mode 100644 index 000000000..8424d1e0b --- /dev/null +++ b/apps/frontend/src/assets/green-check.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/green-clock.svg b/apps/frontend/src/assets/green-clock.svg new file mode 100644 index 000000000..2c76a71fe --- /dev/null +++ b/apps/frontend/src/assets/green-clock.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/green-image.svg b/apps/frontend/src/assets/green-image.svg new file mode 100644 index 000000000..886b34369 --- /dev/null +++ b/apps/frontend/src/assets/green-image.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/group.svg b/apps/frontend/src/assets/group.svg new file mode 100644 index 000000000..3d027d38f --- /dev/null +++ b/apps/frontend/src/assets/group.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/image.svg b/apps/frontend/src/assets/image.svg new file mode 100644 index 000000000..4f35fdd7f --- /dev/null +++ b/apps/frontend/src/assets/image.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/images-w.svg b/apps/frontend/src/assets/images-w.svg new file mode 100644 index 000000000..a8f90d69e --- /dev/null +++ b/apps/frontend/src/assets/images-w.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/images.svg b/apps/frontend/src/assets/images.svg new file mode 100644 index 000000000..476c0ebde --- /dev/null +++ b/apps/frontend/src/assets/images.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/linkedin.svg b/apps/frontend/src/assets/linkedin.svg new file mode 100644 index 000000000..95c5ae740 --- /dev/null +++ b/apps/frontend/src/assets/linkedin.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/magic.svg b/apps/frontend/src/assets/magic.svg new file mode 100644 index 000000000..cd8272243 --- /dev/null +++ b/apps/frontend/src/assets/magic.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/minus.svg b/apps/frontend/src/assets/minus.svg new file mode 100644 index 000000000..b743fcd13 --- /dev/null +++ b/apps/frontend/src/assets/minus.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/moon.svg b/apps/frontend/src/assets/moon.svg new file mode 100644 index 000000000..d61ac28c8 --- /dev/null +++ b/apps/frontend/src/assets/moon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/multiply.svg b/apps/frontend/src/assets/multiply.svg new file mode 100644 index 000000000..a52ce9168 --- /dev/null +++ b/apps/frontend/src/assets/multiply.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/plus-round.svg b/apps/frontend/src/assets/plus-round.svg new file mode 100644 index 000000000..01c936138 --- /dev/null +++ b/apps/frontend/src/assets/plus-round.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/plus.svg b/apps/frontend/src/assets/plus.svg new file mode 100644 index 000000000..abe143320 --- /dev/null +++ b/apps/frontend/src/assets/plus.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/postiz.svg b/apps/frontend/src/assets/postiz.svg new file mode 100644 index 000000000..fabfee468 --- /dev/null +++ b/apps/frontend/src/assets/postiz.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/red-bin.svg b/apps/frontend/src/assets/red-bin.svg new file mode 100644 index 000000000..4f5d6b2a6 --- /dev/null +++ b/apps/frontend/src/assets/red-bin.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/remove.svg b/apps/frontend/src/assets/remove.svg new file mode 100644 index 000000000..93c3c233a --- /dev/null +++ b/apps/frontend/src/assets/remove.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/star.svg b/apps/frontend/src/assets/star.svg new file mode 100644 index 000000000..f56d31ad3 --- /dev/null +++ b/apps/frontend/src/assets/star.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/sun.svg b/apps/frontend/src/assets/sun.svg new file mode 100644 index 000000000..9508be244 --- /dev/null +++ b/apps/frontend/src/assets/sun.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/upload.svg b/apps/frontend/src/assets/upload.svg new file mode 100644 index 000000000..8fdb933e8 --- /dev/null +++ b/apps/frontend/src/assets/upload.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/vdots.svg b/apps/frontend/src/assets/vdots.svg new file mode 100644 index 000000000..9009ca9bb --- /dev/null +++ b/apps/frontend/src/assets/vdots.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/warning-y.svg b/apps/frontend/src/assets/warning-y.svg new file mode 100644 index 000000000..caf60bda7 --- /dev/null +++ b/apps/frontend/src/assets/warning-y.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/warning.svg b/apps/frontend/src/assets/warning.svg new file mode 100644 index 000000000..d19c4af92 --- /dev/null +++ b/apps/frontend/src/assets/warning.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/apps/frontend/src/assets/yellow-back.svg b/apps/frontend/src/assets/yellow-back.svg new file mode 100644 index 000000000..07a42e57b --- /dev/null +++ b/apps/frontend/src/assets/yellow-back.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/frontend/src/components/analytics/stars.and.forks.tsx b/apps/frontend/src/components/analytics/stars.and.forks.tsx index 71df92113..8a90a4853 100644 --- a/apps/frontend/src/components/analytics/stars.and.forks.tsx +++ b/apps/frontend/src/components/analytics/stars.and.forks.tsx @@ -4,6 +4,11 @@ import { Chart } from '@gitroom/frontend/components/analytics/chart'; import { UtcToLocalDateRender } from '@gitroom/react/helpers/utc.date.render'; import clsx from 'clsx'; +import { ReactComponent as StarSvg } from '@gitroom/frontend/assets/star.svg'; +import { ReactComponent as MultiplySvg } from '@gitroom/frontend/assets/multiply.svg'; +import { ReactComponent as GraphUpSvg } from '@gitroom/frontend/assets/graph-up.svg'; +import { ReactComponent as ChartUpSvg } from '@gitroom/frontend/assets/chart-up.svg'; + export const StarsAndForks: FC = (props) => { const { list } = props; return ( @@ -13,18 +18,7 @@ export const StarsAndForks: FC = (props) => {
- - - +
{item.login @@ -56,18 +50,7 @@ export const StarsAndForks: FC = (props) => {
- - - +
{item.login @@ -105,33 +88,7 @@ export const StarsAndForks: FC = (props) => { >
- {p === 0 ? ( - - - - ) : ( - - - - )} + {p === 0 ? : }
{p === 0 diff --git a/apps/frontend/src/components/analytics/stars.table.component.tsx b/apps/frontend/src/components/analytics/stars.table.component.tsx index 7ea1a70ac..1725910b7 100644 --- a/apps/frontend/src/components/analytics/stars.table.component.tsx +++ b/apps/frontend/src/components/analytics/stars.table.component.tsx @@ -17,6 +17,10 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch'; import ReactLoading from 'react-loading'; import interClass from '@gitroom/react/helpers/inter.font'; +import { ReactComponent as ArrowUpSvg } from '@gitroom/frontend/assets/arrow-up.svg'; +import { ReactComponent as ArrowLeftSvg } from '@gitroom/frontend/assets/arrow-left.svg'; +import { ReactComponent as ArrowRightSvg } from '@gitroom/frontend/assets/arrow-right.svg'; + export const UpDown: FC<{ name: string; param: string }> = (props) => { const { name, param } = props; const router = useRouter(); @@ -55,34 +59,9 @@ export const UpDown: FC<{ name: string; param: string }> = (props) => { >
{name}
- {['none', 'asc'].indexOf(state) > -1 && ( - - - - )} + {['none', 'asc'].indexOf(state) > -1 && } {['none', 'desc'].indexOf(state) > -1 && ( - - - + )}
@@ -164,18 +143,7 @@ export const StarsTableComponent = () => { (page === 1 || loading) && 'opacity-50 pointer-events-none' )} > - - - +

Stars per day

{ 'opacity-50 pointer-events-none' )} > - - - +
{loading && ( diff --git a/apps/frontend/src/components/auth/providers/github.provider.tsx b/apps/frontend/src/components/auth/providers/github.provider.tsx index eaa916941..c3a43da3e 100644 --- a/apps/frontend/src/components/auth/providers/github.provider.tsx +++ b/apps/frontend/src/components/auth/providers/github.provider.tsx @@ -2,6 +2,8 @@ import { useCallback } from 'react'; import { useFetch } from '@gitroom/helpers/utils/custom.fetch'; import interClass from '@gitroom/react/helpers/inter.font'; +import { ReactComponent as GithubSvg } from '@gitroom/frontend/assets/github.svg'; + export const GithubProvider = () => { const fetch = useFetch(); const gotoLogin = useCallback(async () => { @@ -15,18 +17,7 @@ export const GithubProvider = () => { className={`cursor-pointer bg-white h-[44px] rounded-[4px] flex justify-center items-center text-customColor16 ${interClass} gap-[4px]`} >
- - - +
Sign in with GitHub
diff --git a/apps/frontend/src/components/auth/providers/google.provider.tsx b/apps/frontend/src/components/auth/providers/google.provider.tsx index 64424a3ac..c57f5fa67 100644 --- a/apps/frontend/src/components/auth/providers/google.provider.tsx +++ b/apps/frontend/src/components/auth/providers/google.provider.tsx @@ -2,6 +2,8 @@ import { useCallback } from 'react'; import { useFetch } from '@gitroom/helpers/utils/custom.fetch'; import interClass from '@gitroom/react/helpers/inter.font'; +import { ReactComponent as GoogleSvg } from '@gitroom/frontend/assets/google.svg'; + export const GoogleProvider = () => { const fetch = useFetch(); const gotoLogin = useCallback(async () => { @@ -15,29 +17,7 @@ export const GoogleProvider = () => { className={`cursor-pointer bg-white h-[44px] rounded-[4px] flex justify-center items-center text-customColor16 ${interClass} gap-[4px]`} >
- - - - - - +
Sign in with Google
diff --git a/apps/frontend/src/components/billing/faq.component.tsx b/apps/frontend/src/components/billing/faq.component.tsx index fff38e762..236574f08 100644 --- a/apps/frontend/src/components/billing/faq.component.tsx +++ b/apps/frontend/src/components/billing/faq.component.tsx @@ -5,12 +5,19 @@ import clsx from 'clsx'; import interClass from '@gitroom/react/helpers/inter.font'; import { useVariables } from '@gitroom/react/helpers/variable.context'; +import { ReactComponent as PlusSvg } from '@gitroom/frontend/assets/plus.svg'; +import { ReactComponent as MinusSvg } from '@gitroom/frontend/assets/minus.svg'; + const useFaqList = () => { - const {isGeneral} = useVariables(); + const { isGeneral } = useVariables(); return [ { title: `Can I trust ${isGeneral ? 'Postiz' : 'Gitroom'}?`, - description: `${isGeneral ? 'Postiz' : 'Gitroom'} is proudly open-source! We believe in an ethical and transparent culture, meaning that ${isGeneral ? 'Postiz' : 'Gitroom'} will live forever. You can check out the entire code or use it for personal projects. To view the open-source repository, click here.`, + description: `${ + isGeneral ? 'Postiz' : 'Gitroom' + } is proudly open-source! We believe in an ethical and transparent culture, meaning that ${ + isGeneral ? 'Postiz' : 'Gitroom' + } will live forever. You can check out the entire code or use it for personal projects. To view the open-source repository, click here.`, }, { title: 'What are channels?', @@ -29,7 +36,7 @@ For example, you can schedule your posts on X, Facebook, Instagram, TikTok, YouT description: `We automate ChatGPT to help you write your social posts and articles`, }, ]; -} +}; export const FAQSection: FC<{ title: string; description: string }> = ( props @@ -51,37 +58,7 @@ export const FAQSection: FC<{ title: string; description: string }> = ( >
{title}
- {!show ? ( - - - - - ) : ( - - - - )} + {!show ? : }
{ const fetch = useFetch(); const user = useUser(); @@ -57,7 +59,11 @@ export const LifetimeDeal = () => { const currentPricing = user?.tier; const channelsOr = currentPricing.channel; const list = []; - list.push(`${user.totalChannels} ${user.totalChannels === 1 ? 'channel' : 'channels'}`); + list.push( + `${user.totalChannels} ${ + user.totalChannels === 1 ? 'channel' : 'channels' + }` + ); list.push( `${ currentPricing.posts_per_month > 10000 @@ -115,25 +121,15 @@ export const LifetimeDeal = () => {
- Current Package: {user?.totalChannels > 8 ? 'EXTRA' : user?.tier?.current} + Current Package:{' '} + {user?.totalChannels > 8 ? 'EXTRA' : user?.tier?.current}
{features.map((feature) => (
- - - +
{feature}
@@ -144,7 +140,13 @@ export const LifetimeDeal = () => {
Next Package:{' '} - {user?.tier?.current === 'PRO' ? 'EXTRA' : !user?.tier?.current ? 'FREE' : user?.tier?.current === 'STANDARD' ? 'PRO' : 'STANDARD'} + {user?.tier?.current === 'PRO' + ? 'EXTRA' + : !user?.tier?.current + ? 'FREE' + : user?.tier?.current === 'STANDARD' + ? 'PRO' + : 'STANDARD'}
@@ -154,18 +156,7 @@ export const LifetimeDeal = () => { ).map((feature) => (
- - - +
{feature}
diff --git a/apps/frontend/src/components/billing/main.billing.component.tsx b/apps/frontend/src/components/billing/main.billing.component.tsx index dc55b7fd8..99321076b 100644 --- a/apps/frontend/src/components/billing/main.billing.component.tsx +++ b/apps/frontend/src/components/billing/main.billing.component.tsx @@ -21,6 +21,8 @@ import interClass from '@gitroom/react/helpers/inter.font'; import { useRouter } from 'next/navigation'; import { useVariables } from '@gitroom/react/helpers/variable.context'; +import { ReactComponent as GreenCheckSvg } from '@gitroom/frontend/assets/green-check.svg'; + export interface Tiers { month: Array<{ name: 'Pro' | 'Standard'; @@ -129,18 +131,7 @@ export const Features: FC<{ {features.map((feature) => (
- - - +
{feature}
@@ -153,7 +144,7 @@ export const MainBillingComponent: FC<{ sub?: Subscription; }> = (props) => { const { sub } = props; - const {isGeneral} = useVariables(); + const { isGeneral } = useVariables(); const { mutate } = useSWRConfig(); const fetch = useFetch(); const toast = useToaster(); diff --git a/apps/frontend/src/components/launches/add.edit.model.tsx b/apps/frontend/src/components/launches/add.edit.model.tsx index 966a2db8e..4ff5c87ac 100644 --- a/apps/frontend/src/components/launches/add.edit.model.tsx +++ b/apps/frontend/src/components/launches/add.edit.model.tsx @@ -50,6 +50,9 @@ import { useUser } from '@gitroom/frontend/components/layout/user.context'; import { makeId } from '@gitroom/nestjs-libraries/services/make.is'; import Image from 'next/image'; +import { ReactComponent as RedBinSvg } from '@gitroom/frontend/assets/red-bin.svg'; +import { ReactComponent as ArrowDownSvg } from '@gitroom/frontend/assets/arrow-down.svg'; + export const AddEditModal: FC<{ date: dayjs.Dayjs; integrations: Integrations[]; @@ -419,7 +422,7 @@ export const AddEditModal: FC<{ ) : (
- - - +
Delete Post @@ -591,18 +583,7 @@ export const AddEditModal: FC<{
{!postFor && (
- - - +
void; num: number }> = ( props ) => { @@ -21,18 +23,7 @@ export const AddPostButton: FC<{ onClick: () => void; num: number }> = ( className="!h-[24px] rounded-[3px] flex gap-[4px] w-[102px] text-[12px] font-[500]" >
- - - +
Add comment
diff --git a/apps/frontend/src/components/launches/add.provider.component.tsx b/apps/frontend/src/components/launches/add.provider.component.tsx index dc5e9049e..e7d6e52e8 100644 --- a/apps/frontend/src/components/launches/add.provider.component.tsx +++ b/apps/frontend/src/components/launches/add.provider.component.tsx @@ -15,6 +15,8 @@ import { useToaster } from '@gitroom/react/toaster/toaster'; import { object, string } from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; +import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg'; + const resolver = classValidatorResolver(ApiKeyDto); export const useAddProvider = (update?: () => void) => { @@ -99,20 +101,7 @@ export const ApiModal: FC<{ className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa" type="button" > - - - +
- - - + - - - + - - - +

Social

diff --git a/apps/frontend/src/components/launches/bot.picture.tsx b/apps/frontend/src/components/launches/bot.picture.tsx index fadac5225..be33f7772 100644 --- a/apps/frontend/src/components/launches/bot.picture.tsx +++ b/apps/frontend/src/components/launches/bot.picture.tsx @@ -11,6 +11,8 @@ import { showMediaBox, } from '@gitroom/frontend/components/media/media.component'; +import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg'; + export const BotPicture: FC<{ integration: Integrations; canChangeProfilePicture: boolean; @@ -52,20 +54,7 @@ export const BotPicture: FC<{ type="button" onClick={() => modal.closeAll()} > - - - +
@@ -77,7 +66,9 @@ export const BotPicture: FC<{ alt="Bot Picture" className="w-[100px] h-[100px] rounded-full" /> - +
)} {props.canChangeNickName && ( diff --git a/apps/frontend/src/components/launches/calendar.tsx b/apps/frontend/src/components/launches/calendar.tsx index 93ea124b3..0eb675804 100644 --- a/apps/frontend/src/components/launches/calendar.tsx +++ b/apps/frontend/src/components/launches/calendar.tsx @@ -26,6 +26,9 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'; import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'; import { groupBy, sortBy } from 'lodash'; import Image from 'next/image'; + +import { ReactComponent as CommentSvg } from '@gitroom/frontend/assets/comment.svg'; + dayjs.extend(isSameOrAfter); dayjs.extend(isSameOrBefore); @@ -499,7 +502,10 @@ export const CalendarColumn: FC<{ className={`w-full h-full rounded-[10px] hover:border hover:border-seventh flex justify-center items-center gap-[20px] opacity-30 grayscale hover:grayscale-0 hover:opacity-100`} > {integrations.map((selectedIntegrations) => ( -
+
= ( {totalComments}
)} - - - +
diff --git a/apps/frontend/src/components/launches/comments/comment.component.tsx b/apps/frontend/src/components/launches/comments/comment.component.tsx index c7920bf94..88a163957 100644 --- a/apps/frontend/src/components/launches/comments/comment.component.tsx +++ b/apps/frontend/src/components/launches/comments/comment.component.tsx @@ -11,6 +11,10 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch'; import { deleteDialog } from '@gitroom/react/helpers/delete.dialog'; import interClass from '@gitroom/react/helpers/inter.font'; +import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg'; +import { ReactComponent as PenSvg } from '@gitroom/frontend/assets/edit.svg'; +import { ReactComponent as BinSvg } from '@gitroom/frontend/assets/bin.svg'; + export const CommentBox: FC<{ value?: string; type: 'textarea' | 'input'; @@ -111,33 +115,8 @@ export const EditableCommentComponent: FC<{ 
{commentContent}
{user?.id === comment.user.id && ( <> - setEditMode(!editMode)} - xmlns="http://www.w3.org/2000/svg" - width="20" - height="20" - viewBox="0 0 32 32" - fill="none" - > - - - - - - + setEditMode(!editMode)} /> + )}
@@ -283,20 +262,7 @@ export const CommentComponent: FC<{ date: dayjs.Dayjs }> = (props) => { className="outline-none absolute right-[20px] top-[15px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa" type="button" > - - - +
@@ -311,7 +277,9 @@ export const CommentComponent: FC<{ date: dayjs.Dayjs }> = (props) => { >
-
+
{comment.user.email[0].toUpperCase()}
@@ -337,7 +305,9 @@ export const CommentComponent: FC<{ date: dayjs.Dayjs }> = (props) => { className={clsx(`flex gap-[8px] relative`)} >
-
+
{childComment.user.email[0].toUpperCase()}
diff --git a/apps/frontend/src/components/launches/filters.tsx b/apps/frontend/src/components/launches/filters.tsx index f87cea68c..f6f3e6266 100644 --- a/apps/frontend/src/components/launches/filters.tsx +++ b/apps/frontend/src/components/launches/filters.tsx @@ -4,6 +4,9 @@ import clsx from 'clsx'; import dayjs from 'dayjs'; import { useCallback } from 'react'; +import { ReactComponent as ArrowLeftSvg } from '@gitroom/frontend/assets/arrow-left.svg'; +import { ReactComponent as ArrowRightSvg } from '@gitroom/frontend/assets/arrow-right.svg'; + export const Filters = () => { const week = useCalendar(); const betweenDates = @@ -147,18 +150,7 @@ export const Filters = () => { return (
- - - +
{week.display === 'day' @@ -172,18 +164,7 @@ export const Filters = () => { : `${dayjs().month(week.currentMonth).format('MMMM')}`}
- - - +
{betweenDates}
= (props) => { +export const GeneralPreviewComponent: FC<{ maximumCharacters?: number }> = ( + props +) => { const { value: topValue, integration } = useIntegration(); const mediaDir = useMediaDirectory(); const newValues = useFormatting(topValue, { removeMarkdown: true, saveBreaklines: true, specialFunc: (text: string) => { - return text.slice(0, props.maximumCharacters || 10000) + '' + text?.slice(props.maximumCharacters || 10000) + ''; + return ( + text.slice(0, props.maximumCharacters || 10000) + + '' + + text?.slice(props.maximumCharacters || 10000) + + '' + ); }, }); @@ -46,25 +56,30 @@ export const GeneralPreviewComponent: FC<{maximumCharacters?: number}> = (props) {integration?.name}
- - - - - + />
{integration?.display || '@username'}
- 
+              
               {!!value?.images?.length && (
-                
 3 ? 'grid grid-cols-2 gap-[4px]' : 'flex gap-[4px]')}>
+                
 3
+                      ? 'grid grid-cols-2 gap-[4px]'
+                      : 'flex gap-[4px]'
+                  )}
+                >
                   {value.images.map((image, index) => (
                      = (props) => {
   const { week, year } = props;
 
@@ -310,20 +313,7 @@ export const GeneratorPopup = () => {
         className="outline-none absolute right-[20px] top-[15px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
         type="button"
       >
-        
-          
-        
+        
       
       
Generate Posts

       

@@ -395,25 +385,7 @@ export const GeneratorComponent = () => {
       className="text-textColor p-[8px] rounded-md bg-red-700 flex justify-center items-center gap-[5px] outline-none"
       onClick={generate}
     >
-      
-        
-        
-      
+      
       Generate Posts
     
   );
diff --git a/apps/frontend/src/components/launches/helpers/date.picker.tsx b/apps/frontend/src/components/launches/helpers/date.picker.tsx
index 1e1b42c78..0b16c48b0 100644
--- a/apps/frontend/src/components/launches/helpers/date.picker.tsx
+++ b/apps/frontend/src/components/launches/helpers/date.picker.tsx
@@ -4,6 +4,8 @@ import { Calendar, TimeInput } from '@mantine/dates';
 import { useClickOutside } from '@mantine/hooks';
 import { Button } from '@gitroom/react/form/button';
 
+import { ReactComponent as CalendarSvg } from '@gitroom/frontend/assets/calendar.svg';
+
 export const DatePicker: FC<{
   date: dayjs.Dayjs;
   onChange: (day: dayjs.Dayjs) => void;
@@ -19,7 +21,6 @@ export const DatePicker: FC<{
     setOpen(false);
   });
 
-
   const changeDate = useCallback(
     (type: 'date' | 'time') => (day: Date) => {
       onChange(
@@ -41,18 +42,7 @@ export const DatePicker: FC<{
     >
       
{date.format('DD/MM/YYYY HH:mm')}

       

-        
-          
-        
+        
       

       {open && (
         
 {
@@ -81,9 +84,9 @@ export const LinkedinCompany: FC<{
 
   const getCompany = async () => {
     if (!company) {
-      return ;
+      return;
     }
-    const {options} = await (
+    const { options } = await (
       await fetch('/integrations/function', {
         method: 'POST',
         body: JSON.stringify({
@@ -111,20 +114,7 @@ export const LinkedinCompany: FC<{
             className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-primary hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
             type="button"
           >
-            
-              
-            
+            
           
         

         

@@ -159,20 +149,7 @@ export const linkedinCompany = (identifier: string, id: string): ICommand[] => {
         'aria-label': 'Add Post Url',
         title: 'Add Post Url',
       },
-      icon: (
-        
-          
-        
-      ),
+      icon: ,
       execute: async (state: ExecuteState, api: TextAreaTextApi) => {
         const newSelectionRange = selectWord({
           text: state.text,
diff --git a/apps/frontend/src/components/launches/helpers/new.image.component.tsx b/apps/frontend/src/components/launches/helpers/new.image.component.tsx
index 3078dfc56..884735c48 100644
--- a/apps/frontend/src/components/launches/helpers/new.image.component.tsx
+++ b/apps/frontend/src/components/launches/helpers/new.image.component.tsx
@@ -9,6 +9,8 @@ import {
 import { showMediaBox } from '@gitroom/frontend/components/media/media.component';
 import { loadVars } from '@gitroom/react/helpers/variable.context';
 
+import { ReactComponent as ImageSvg } from '@gitroom/frontend/assets/image.svg';
+
 export const newImage: ICommand = {
   name: 'image',
   keyCommand: 'image',
@@ -19,16 +21,9 @@ export const newImage: ICommand = {
     'aria-label': 'Add image (ctrl + k)',
     title: 'Add image (ctrl + k)',
   },
-  icon: (
-    
-      
-    
-  ),
+  icon: ,
   execute: (state: ExecuteState, api: TextAreaTextApi) => {
-    const {uploadDirectory, backendUrl} = loadVars();
+    const { uploadDirectory, backendUrl } = loadVars();
     let newSelectionRange = selectWord({
       text: state.text,
       selection: state.selection,
diff --git a/apps/frontend/src/components/launches/helpers/pick.platform.component.tsx b/apps/frontend/src/components/launches/helpers/pick.platform.component.tsx
index 418ec7466..73d93c576 100644
--- a/apps/frontend/src/components/launches/helpers/pick.platform.component.tsx
+++ b/apps/frontend/src/components/launches/helpers/pick.platform.component.tsx
@@ -9,6 +9,9 @@ import { useStateCallback } from '@gitroom/react/helpers/use.state.callback';
 import { timer } from '@gitroom/helpers/utils/timer';
 import dayjs from 'dayjs';
 
+import { ReactComponent as ArrowLeftSvg } from '@gitroom/frontend/assets/arrow-left.svg';
+import { ReactComponent as ArrowRightSvg } from '@gitroom/frontend/assets/arrow-right.svg';
+
 export const PickPlatforms: FC<{
   integrations: Integrations[];
   selectedIntegrations: Integrations[];
@@ -65,7 +68,7 @@ export const PickPlatforms: FC<{
   useMoveToIntegrationListener(
     [integrations],
     props.singleSelect,
-    ({identifier, toPreview}: {identifier: string, toPreview: boolean}) => {
+    ({ identifier, toPreview }: { identifier: string; toPreview: boolean }) => {
       const findIntegration = integrations.find((p) => p.id === identifier);
 
       if (findIntegration) {
@@ -162,11 +165,11 @@ export const PickPlatforms: FC<{
       .filter((p) => p);
 
     setSelectedAccounts(newIntegrations, () => {
-      console.log('changed')
+      console.log('changed');
     });
 
     onChange(newIntegrations, () => {
-      console.log('changed')
+      console.log('changed');
     });
   };
 
@@ -213,21 +216,7 @@ export const PickPlatforms: FC<{
     >
       {props.singleSelect && isLeft && (
         

-          {isLeft && (
-            
-              
-            
-          )}
+          {isLeft && }
         

       )}
       

       {props.singleSelect && isRight && (
         

-          
-            
-          
+          />
         

       )}
     

diff --git a/apps/frontend/src/components/launches/helpers/top.title.component.tsx b/apps/frontend/src/components/launches/helpers/top.title.component.tsx
index 68942ef30..cd8d036cb 100644
--- a/apps/frontend/src/components/launches/helpers/top.title.component.tsx
+++ b/apps/frontend/src/components/launches/helpers/top.title.component.tsx
@@ -1,5 +1,8 @@
 import { FC, ReactNode } from 'react';
 
+import { ReactComponent as ExpandSvg } from '@gitroom/frontend/assets/expand.svg';
+import { ReactComponent as CollapseSvg } from '@gitroom/frontend/assets/collapse.svg';
+
 export const TopTitle: FC<{
   title: string;
   shouldExpend?: boolean;
@@ -16,36 +19,12 @@ export const TopTitle: FC<{
       {shouldExpend !== undefined && (
         

           {!shouldExpend ? (
-            
-              
-            
+            
           ) : (
-            
-              
-            
+            
           )}
         

       )}
     

   );
-};
\ No newline at end of file
+};
diff --git a/apps/frontend/src/components/launches/menu/menu.tsx b/apps/frontend/src/components/launches/menu/menu.tsx
index c31930ec2..036d70ae7 100644
--- a/apps/frontend/src/components/launches/menu/menu.tsx
+++ b/apps/frontend/src/components/launches/menu/menu.tsx
@@ -9,6 +9,13 @@ import { TimeTable } from '@gitroom/frontend/components/launches/time.table';
 import { useCalendar } from '@gitroom/frontend/components/launches/calendar.context';
 import { BotPicture } from '@gitroom/frontend/components/launches/bot.picture';
 
+import { ReactComponent as VDotsSvg } from '@gitroom/frontend/assets/vdots.svg';
+import { ReactComponent as RedBinSvg } from '@gitroom/frontend/assets/red-bin.svg';
+import { ReactComponent as GreenCheckCloudSvg } from '@gitroom/frontend/assets/green-check-c.svg';
+import { ReactComponent as GreenClockSvg } from '@gitroom/frontend/assets/green-clock.svg';
+import { ReactComponent as GreenImageSvg } from '@gitroom/frontend/assets/green-image.svg';
+import { ReactComponent as CancelSvg } from '@gitroom/frontend/assets/cancel.svg';
+
 export const Menu: FC<{
   canEnable: boolean;
   canDisable: boolean;
@@ -144,18 +151,7 @@ export const Menu: FC<{
       onClick={changeShow}
       ref={ref}
     >
-      
-        
-      
+      
       {show && (
         
 e.stopPropagation()}
@@ -167,18 +163,7 @@ export const Menu: FC<{
               onClick={changeBotPicture}
             >
               

-                
-                  
-                
+                
               

               

                 Change Bot{' '}
@@ -193,18 +178,7 @@ export const Menu: FC<{
           )}
           

             

-              
-                
-              
+              
             

             
Edit Time Slots

           

@@ -214,18 +188,7 @@ export const Menu: FC<{
               onClick={enableChannel}
             >
               

-                
-                  
-                
+                
               

               
Enable Channel

             

@@ -237,18 +200,7 @@ export const Menu: FC<{
               onClick={disableChannel}
             >
               

-                
-                  
-                
+                
               

               
Disable Channel

             

@@ -256,18 +208,7 @@ export const Menu: FC<{
 
           

             

-              
-                
-              
+              
             

             
Delete

           

diff --git a/apps/frontend/src/components/launches/polonto.tsx b/apps/frontend/src/components/launches/polonto.tsx
index 5675fa271..3746f1e1a 100644
--- a/apps/frontend/src/components/launches/polonto.tsx
+++ b/apps/frontend/src/components/launches/polonto.tsx
@@ -21,6 +21,8 @@ import { PictureGeneratorSection } from '@gitroom/frontend/components/launches/p
 import { useUser } from '@gitroom/frontend/components/layout/user.context';
 import { loadVars } from '@gitroom/react/helpers/variable.context';
 
+import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg';
+
 const store = createStore({
   get key() {
     return loadVars().plontoKey;
@@ -101,20 +103,7 @@ const Polonto: FC<{
             className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-primary hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
             type="button"
           >
-            
-              
-            
+            
           
         

         

diff --git a/apps/frontend/src/components/launches/providers/high.order.provider.tsx b/apps/frontend/src/components/launches/providers/high.order.provider.tsx
index 8249f0c73..dc84a41c8 100644
--- a/apps/frontend/src/components/launches/providers/high.order.provider.tsx
+++ b/apps/frontend/src/components/launches/providers/high.order.provider.tsx
@@ -35,6 +35,8 @@ import { AddPostButton } from '@gitroom/frontend/components/launches/add.post.bu
 import { GeneralPreviewComponent } from '@gitroom/frontend/components/launches/general.preview.component';
 import { capitalize } from 'lodash';
 
+import { ReactComponent as RedBinSvg } from '@gitroom/frontend/assets/red-bin.svg';
+
 // Simple component to change back to settings on after changing tab
 export const SetTab: FC<{ changeTab: () => void }> = (props) => {
   useEffect(() => {
@@ -69,8 +71,8 @@ export const EditorWrapper: FC<{ children: ReactNode }> = ({ children }) => {
 };
 
 export const withProvider = (
-  SettingsComponent: FC<{values?: any}> | null,
-  CustomPreviewComponent?: FC<{maximumCharacters?: number}>,
+  SettingsComponent: FC<{ values?: any }> | null,
+  CustomPreviewComponent?: FC<{ maximumCharacters?: number }>,
   dto?: any,
   checkValidity?: (
     value: Array>
@@ -359,18 +361,7 @@ export const withProvider = (
                                     onClick={deletePost(index)}
                                   >
                                     

-                                      
-                                        
-                                      
+                                      
                                     

                                     

                                       Delete Post
diff --git a/apps/frontend/src/components/launches/providers/tiktok/tiktok.provider.tsx b/apps/frontend/src/components/launches/providers/tiktok/tiktok.provider.tsx
index 6f2ca47cc..3263481f8 100644
--- a/apps/frontend/src/components/launches/providers/tiktok/tiktok.provider.tsx
+++ b/apps/frontend/src/components/launches/providers/tiktok/tiktok.provider.tsx
@@ -14,6 +14,8 @@ import { useCustomProviderFunction } from '@gitroom/frontend/components/launches
 import { Checkbox } from '@gitroom/react/form/checkbox';
 import clsx from 'clsx';
 
+import { ReactComponent as WarningSvg } from '@gitroom/frontend/assets/warning.svg';
+
 const privacyLevel = [
   {
     value: 'PUBLIC_TO_EVERYONE',
@@ -163,18 +165,7 @@ const TikTokSettings: FC<{ values?: any }> = (props) => {
         {disclose && (
           

             

-              
-                
-              
+              
             

             

               Your video will be labeled {'"'}Promotional Content{'"'}.

diff --git a/apps/frontend/src/components/launches/time.table.tsx b/apps/frontend/src/components/launches/time.table.tsx
index 810e2e91e..deead9905 100644
--- a/apps/frontend/src/components/launches/time.table.tsx
+++ b/apps/frontend/src/components/launches/time.table.tsx
@@ -14,6 +14,8 @@ import { useModals } from '@mantine/modals';
 import { sortBy } from 'lodash';
 import { usePreventWindowUnload } from '@gitroom/react/helpers/use.prevent.window.unload';
 
+import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg';
+
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
@@ -108,20 +110,7 @@ export const TimeTable: FC<{
         className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
         type="button"
       >
-        
-          
-        
+        
       
 
       

diff --git a/apps/frontend/src/components/launches/up.down.arrow.tsx b/apps/frontend/src/components/launches/up.down.arrow.tsx
index d23014424..ccdf5a353 100644
--- a/apps/frontend/src/components/launches/up.down.arrow.tsx
+++ b/apps/frontend/src/components/launches/up.down.arrow.tsx
@@ -1,23 +1,11 @@
 import { FC, useCallback } from 'react';
 import clsx from 'clsx';
 
+import { ReactComponent as ArrowDownSvg } from '@gitroom/frontend/assets/arrow-down.svg';
+
 const Arrow: FC<{ flip: boolean }> = (props) => {
   const { flip } = props;
-  return (
-    
-      
-    
-  );
+  return ;
 };
 export const UpDownArrow: FC<{
   isUp: boolean;
diff --git a/apps/frontend/src/components/layout/continue.provider.tsx b/apps/frontend/src/components/layout/continue.provider.tsx
index dbffdba31..393a40e6f 100644
--- a/apps/frontend/src/components/layout/continue.provider.tsx
+++ b/apps/frontend/src/components/layout/continue.provider.tsx
@@ -7,6 +7,8 @@ import dayjs from 'dayjs';
 import useSWR, { useSWRConfig } from 'swr';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 
+import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg';
+
 export const Null: FC<{ closeModal: () => void; existingId: string[] }> = () =>
   null;
 export const ContinueProvider: FC = () => {
@@ -38,7 +40,9 @@ export const ContinueProvider: FC = () => {
     if (!added) {
       return Null;
     }
-    return continueProviderList[added as keyof typeof continueProviderList] || Null;
+    return (
+      continueProviderList[added as keyof typeof continueProviderList] || Null
+    );
   }, [added]);
 
   if (!added || !continueId || !integrations) {
@@ -61,20 +65,7 @@ export const ContinueProvider: FC = () => {
             className="outline-none absolute right-0 top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
             type="button"
           >
-            
-              
-            
+            
           
           

              {
                 value: [],
                 integration: {
                   display: '',
-                  time: [{time: 0}],
+                  time: [{ time: 0 }],
                   id: continueId,
                   type: '',
                   name: '',
@@ -95,7 +86,10 @@ export const ContinueProvider: FC = () => {
                 },
               }}
             >
-               p.internalId)} />
+               p.internalId)}
+              />
             
           

         

diff --git a/apps/frontend/src/components/layout/layout.settings.tsx b/apps/frontend/src/components/layout/layout.settings.tsx
index 4e80c5e88..30cd779b9 100644
--- a/apps/frontend/src/components/layout/layout.settings.tsx
+++ b/apps/frontend/src/components/layout/layout.settings.tsx
@@ -32,6 +32,10 @@ import { BillingComponent } from '@gitroom/frontend/components/billing/billing.c
 import dynamic from 'next/dynamic';
 import { NewSubscription } from '@gitroom/frontend/components/layout/new.subscription';
 import { useVariables } from '@gitroom/react/helpers/variable.context';
+
+import { ReactComponent as PostizSvg } from '@gitroom/frontend/assets/postiz.svg';
+import { ReactComponent as GreenCheckSvg } from '@gitroom/frontend/assets/green-check.svg';
+
 const ModeComponent = dynamic(
   () => import('@gitroom/frontend/components/layout/mode.component'),
   { ssr: false }
@@ -93,41 +97,13 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
                     />
                   

                   

-                    {isGeneral ? (
-                      
-                        
-                        
-                        
-                        
-                      
-                    ) : (
-                      'Gitroom'
-                    )}
+                    {isGeneral ?  : 'Gitroom'}
                   

                 
-                {user?.orgId && (user.tier !== 'FREE' || !isGeneral || !billingEnabled) ? (
+                {user?.orgId &&
+                (user.tier !== 'FREE' || !isGeneral || !billingEnabled) ? (
                   
                 ) : (
                   

@@ -141,7 +117,7 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
               

               

                 

-                  {(user.tier === 'FREE' && isGeneral) && billingEnabled ? (
+                  {user.tier === 'FREE' && isGeneral && billingEnabled ? (
                     <>
                       

                         

@@ -153,52 +129,19 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
                         

                           

                             

-                              
-                                
-                              
+                              
                             

                             
100% no-risk trial

                           

                           

                             

-                              
-                                
-                              
+                              
                             

                             
Pay nothing for the first 7 days

                           

                           

                             

-                              
-                                
-                              
+                              
                             

                             
Cancel anytime, hassle-free

                           

diff --git a/apps/frontend/src/components/layout/mode.component.tsx b/apps/frontend/src/components/layout/mode.component.tsx
index 682400550..f53edcfc7 100644
--- a/apps/frontend/src/components/layout/mode.component.tsx
+++ b/apps/frontend/src/components/layout/mode.component.tsx
@@ -1,6 +1,9 @@
 'use client';
 import { useCallback, useEffect, useState } from 'react';
 
+import { ReactComponent as MoonSvg } from '@gitroom/frontend/assets/moon.svg';
+import { ReactComponent as SunSvg } from '@gitroom/frontend/assets/sun.svg';
+
 const ModeComponent = () => {
   const [mode, setMode] = useState(localStorage.getItem('mode') || 'dark');
 
@@ -16,33 +19,7 @@ const ModeComponent = () => {
 
   return (
     

-      {mode === 'dark' ? (
-        
-          
-        
-      ) : (
-        
-          
-        
-      )}
+      {mode === 'dark' ?  : }
     

   );
 };
diff --git a/apps/frontend/src/components/layout/organization.selector.tsx b/apps/frontend/src/components/layout/organization.selector.tsx
index 1d17ad2f6..22405d283 100644
--- a/apps/frontend/src/components/layout/organization.selector.tsx
+++ b/apps/frontend/src/components/layout/organization.selector.tsx
@@ -5,6 +5,8 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import useSWR from 'swr';
 import { useUser } from '@gitroom/frontend/components/layout/user.context';
 
+import { ReactComponent as CheckmarkSvg } from '@gitroom/frontend/assets/checkmark.svg';
+
 export const OrganizationSelector = () => {
   const fetch = useFetch();
   const user = useUser();
@@ -41,7 +43,7 @@ export const OrganizationSelector = () => {
     []
   );
 
-  if (isLoading || !isLoading && data?.length === 1) {
+  if (isLoading || (!isLoading && data?.length === 1)) {
     return null;
   }
 
@@ -51,28 +53,7 @@ export const OrganizationSelector = () => {
         
{current?.name || 'Loading...'}

         {data?.length > 1 && (
           

-            
-              
-                
-              
-              
-                
-                  
-                
-              
-            
+            
           

         )}
       

diff --git a/apps/frontend/src/components/layout/settings.component.tsx b/apps/frontend/src/components/layout/settings.component.tsx
index 436f7fe99..9eacfc16e 100644
--- a/apps/frontend/src/components/layout/settings.component.tsx
+++ b/apps/frontend/src/components/layout/settings.component.tsx
@@ -19,8 +19,13 @@ import { LogoutComponent } from '@gitroom/frontend/components/layout/logout.comp
 import { useSearchParams } from 'next/navigation';
 import { useVariables } from '@gitroom/react/helpers/variable.context';
 
+import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg';
+import { ReactComponent as UploadSvg } from '@gitroom/frontend/assets/upload.svg';
+import { ReactComponent as RemoveSvg } from '@gitroom/frontend/assets/remove.svg';
+import { ReactComponent as GearSvg } from '@gitroom/frontend/assets/gear.svg';
+
 export const SettingsPopup: FC<{ getRef?: Ref }> = (props) => {
-  const {isGeneral} = useVariables();
+  const { isGeneral } = useVariables();
   const { getRef } = props;
   const fetch = useFetch();
   const toast = useToaster();
@@ -94,20 +99,8 @@ export const SettingsPopup: FC<{ getRef?: Ref }> = (props) => {
               className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
               type="button"
             >
-              
-                
-              
+              {/*  */}
+              
             
           )}
           {!getRef && (
@@ -142,20 +135,12 @@ export const SettingsPopup: FC<{ getRef?: Ref }> = (props) => {
                       type="button"
                     >
                       

-                        
-                          
-                        
+                        
                       

-                      

+                      

                         Upload image
                       

                     
@@ -164,18 +149,7 @@ export const SettingsPopup: FC<{ getRef?: Ref }> = (props) => {
                       type="button"
                     >
                       

-                        
-                          
-                        
+                        
                       

                       

                         Remove
@@ -191,7 +165,9 @@ export const SettingsPopup: FC<{ getRef?: Ref }> = (props) => {
           

           {!getRef && (
             

-              
+              
             

           )}
           {!!user?.tier?.team_members && isGeneral && }
@@ -216,19 +192,6 @@ export const SettingsComponent = () => {
   }, []);
 
   return (
-    
-      
-    
+    
   );
 };
diff --git a/apps/frontend/src/components/layout/support.tsx b/apps/frontend/src/components/layout/support.tsx
index 954443776..f01631584 100644
--- a/apps/frontend/src/components/layout/support.tsx
+++ b/apps/frontend/src/components/layout/support.tsx
@@ -4,39 +4,29 @@ import { EventEmitter } from 'events';
 import { useEffect, useState } from 'react';
 import { useVariables } from '@gitroom/react/helpers/variable.context';
 
+import { ReactComponent as DiscordSvg } from '@gitroom/frontend/assets/discord.svg';
+
 export const supportEmitter = new EventEmitter();
 
 export const Support = () => {
   const [show, setShow] = useState(true);
-  const {discordUrl} = useVariables();
+  const { discordUrl } = useVariables();
 
   useEffect(() => {
     supportEmitter.on('change', setShow);
     return () => {
       supportEmitter.off('state', setShow);
-    }
+    };
   }, []);
 
-  if (!discordUrl || !show) return null
+  if (!discordUrl || !show) return null;
   return (
     
 window.open(discordUrl)}
     >
       

-        
-          
-        
+        
       

       
Discord Support

     

diff --git a/apps/frontend/src/components/marketplace/buyer.tsx b/apps/frontend/src/components/marketplace/buyer.tsx
index 4d0c678ca..4734edd33 100644
--- a/apps/frontend/src/components/marketplace/buyer.tsx
+++ b/apps/frontend/src/components/marketplace/buyer.tsx
@@ -29,6 +29,11 @@ import { classValidatorResolver } from '@hookform/resolvers/class-validator';
 import { NewConversationDto } from '@gitroom/nestjs-libraries/dtos/marketplace/new.conversation.dto';
 import { OrderList } from '@gitroom/frontend/components/marketplace/order.list';
 
+import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg';
+import { ReactComponent as ArrowLeftSvg } from '@gitroom/frontend/assets/arrow-left.svg';
+import { ReactComponent as ArrowRightSvg } from '@gitroom/frontend/assets/arrow-right.svg';
+import { ReactComponent as GroupSvg } from '@gitroom/frontend/assets/group.svg';
+
 export interface Root {
   list: List[];
   count: number;
@@ -134,29 +139,7 @@ const Pagination: FC<{ results: number }> = (props) => {
       

         {page > 0 && (
           

-            
-              
-                
-              
-              
-                
-                  
-                
-              
-            
+            
           

         )}
         {pagesArray.map((p) => (
@@ -172,22 +155,7 @@ const Pagination: FC<{ results: number }> = (props) => {
           

         ))}
         {page + 1 < pagesArray[pagesArray.length - 1] && (
-          
-            
-          
+          
         )}
       

     

@@ -319,20 +287,7 @@ export const RequestService: FC<{ toId: string; name: string }> = (props) => {
             className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
             type="button"
           >
-            
-              
-            
+            
           
           

             
@@ -406,18 +361,7 @@ export const Card: FC<{
             )}
             

               

-                
-                  
-                
+                
               

               
{data?.audience}

             

diff --git a/apps/frontend/src/components/marketplace/order.top.actions.tsx b/apps/frontend/src/components/marketplace/order.top.actions.tsx
index bc5bc3143..15af48997 100644
--- a/apps/frontend/src/components/marketplace/order.top.actions.tsx
+++ b/apps/frontend/src/components/marketplace/order.top.actions.tsx
@@ -15,6 +15,9 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useToaster } from '@gitroom/react/toaster/toaster';
 import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
 
+import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg';
+import { ReactComponent as PlusSvg } from '@gitroom/frontend/assets/plus.svg';
+
 const schema = object({
   socialMedia: array()
     .min(1)
@@ -166,20 +169,7 @@ export const NewOrder: FC<{ group: string }> = (props) => {
             className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
             type="button"
           >
-            
-              
-            
+            
           
           

             
@@ -234,18 +224,7 @@ export const NewOrder: FC<{ group: string }> = (props) => {
                     className="select-none rounded-[4px] border-2 border-customColor21 flex py-[9.5px] px-[24px] items-center gap-[4px] text-[14px] float-left cursor-pointer"
                   >
                     

-                      
-                        
-                      
+                      
                     

                     
Add another platform

                   

@@ -264,14 +243,20 @@ export const NewOrder: FC<{ group: string }> = (props) => {
   );
 };
 
-export const OrderInProgress: FC<{ group: string; buyer: boolean, order: string }> = (
-  props
-) => {
+export const OrderInProgress: FC<{
+  group: string;
+  buyer: boolean;
+  order: string;
+}> = (props) => {
   const { group, buyer, order } = props;
   const fetch = useFetch();
 
   const completeOrder = useCallback(async () => {
-    if (await deleteDialog('Are you sure you want to pay the seller and end the order? this is irreversible action')) {
+    if (
+      await deleteDialog(
+        'Are you sure you want to pay the seller and end the order? this is irreversible action'
+      )
+    ) {
       await (
         await fetch(`/marketplace/offer/${order}/complete`, {
           method: 'POST',
@@ -283,7 +268,10 @@ export const OrderInProgress: FC<{ group: string; buyer: boolean, order: string
   return (
     

       {buyer && (
-        

+        

           Complete order and pay early
         

       )}
@@ -360,7 +348,13 @@ export const OrderTopActions = () => {
     case OrderOptions.CREATE_A_NEW_ORDER:
       return ;
     case OrderOptions.WAITING_PUBLICATION:
-      return ;
+      return (
+        
+      );
   }
   return 
;
 };
diff --git a/apps/frontend/src/components/marketplace/special.message.tsx b/apps/frontend/src/components/marketplace/special.message.tsx
index e9da0bad2..c94e6d2ac 100644
--- a/apps/frontend/src/components/marketplace/special.message.tsx
+++ b/apps/frontend/src/components/marketplace/special.message.tsx
@@ -14,6 +14,9 @@ import { Post as PrismaPost } from '@prisma/client';
 import dynamic from 'next/dynamic';
 import { IntegrationContext } from '@gitroom/frontend/components/launches/helpers/use.integration';
 import dayjs from 'dayjs';
+
+import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg';
+
 const PreviewPopupDynamic = dynamic(() =>
   import('@gitroom/frontend/components/marketplace/preview.popup.dynamic').then(
     (mod) => mod.PreviewPopupDynamic
@@ -105,20 +108,7 @@ export const PreviewPopup: FC<{
         className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
         type="button"
       >
-        
-          
-        
+        
       
       
     

diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx
index d9393e584..2c3aacb7e 100644
--- a/apps/frontend/src/components/media/media.component.tsx
+++ b/apps/frontend/src/components/media/media.component.tsx
@@ -15,6 +15,11 @@ import { LoadingComponent } from '@gitroom/frontend/components/layout/loading';
 import { MultipartFileUploader } from '@gitroom/frontend/components/media/new.uploader';
 import dynamic from 'next/dynamic';
 import { useUser } from '@gitroom/frontend/components/layout/user.context';
+
+import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg';
+import { ReactComponent as ImagesSvg } from '@gitroom/frontend/assets/images.svg';
+import { ReactComponent as ImagesWhiteSvg } from '@gitroom/frontend/assets/images-w.svg';
+
 const Polonto = dynamic(
   () => import('@gitroom/frontend/components/launches/polonto')
 );
@@ -104,20 +109,7 @@ export const MediaBox: FC<{
             className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-primary hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
             type="button"
           >
-            
-              
-            
+            
           
 
           {!!mediaList.length && (
@@ -185,7 +177,7 @@ export const MediaBox: FC<{
                   media
                 )}
               

@@ -261,7 +253,7 @@ export const MultiMediaComponent: FC<{
     <>
       

         {modal && }
-        {mediaModal && !!user?.tier?.ai &&  (
+        {mediaModal && !!user?.tier?.ai && (
           
         )}
         

@@ -271,21 +263,11 @@ export const MultiMediaComponent: FC<{
               className="ml-[10px] rounded-[4px] mb-[10px] gap-[8px] !text-primary justify-center items-center w-[127px] flex border border-dashed border-customColor21 bg-input"
             >
               

-                
-                  
-                
+                
+              

+              

+                Insert Media
               

-              
Insert Media

             
 
             
           

 
@@ -354,7 +327,8 @@ export const MediaComponent: FC<{
   width?: number;
   height?: number;
 }> = (props) => {
-  const { name, type, label, description, onChange, value, width, height } = props;
+  const { name, type, label, description, onChange, value, width, height } =
+    props;
   const { getValues } = useSettings();
   const user = useUser();
   useEffect(() => {
diff --git a/apps/frontend/src/components/notifications/notification.component.tsx b/apps/frontend/src/components/notifications/notification.component.tsx
index 037eae43c..ed9e0a216 100644
--- a/apps/frontend/src/components/notifications/notification.component.tsx
+++ b/apps/frontend/src/components/notifications/notification.component.tsx
@@ -8,10 +8,15 @@ import { useClickAway } from '@uidotdev/usehooks';
 import interClass from '@gitroom/react/helpers/inter.font';
 import ReactLoading from 'react-loading';
 
+import { ReactComponent as BellSvg } from '@gitroom/frontend/assets/bell.svg';
+
 function replaceLinks(text: string) {
   const urlRegex =
     /(\bhttps?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
-  return text.replace(urlRegex, '$1');
+  return text.replace(
+    urlRegex,
+    '$1'
+  );
 }
 
 export const ShowNotification: FC<{
@@ -43,7 +48,9 @@ export const NotificationOpenComponent = () => {
 
   return (
     

-      

+      

         Notifications
       

 
@@ -106,18 +113,7 @@ const NotificationComponent = () => {
             {data.total}
           

         )}
-        
-          
-        
+        
       

       {show && }
     

diff --git a/apps/frontend/src/components/onboarding/onboarding.tsx b/apps/frontend/src/components/onboarding/onboarding.tsx
index d28e4470f..64bd9573f 100644
--- a/apps/frontend/src/components/onboarding/onboarding.tsx
+++ b/apps/frontend/src/components/onboarding/onboarding.tsx
@@ -10,6 +10,10 @@ import { Button } from '@gitroom/react/form/button';
 import { ConnectChannels } from '@gitroom/frontend/components/onboarding/connect.channels';
 import { useVariables } from '@gitroom/react/helpers/variable.context';
 
+import { ReactComponent as CircleDashSvg } from '@gitroom/frontend/assets/circle-dash.svg';
+import { ReactComponent as CircleOkSvg } from '@gitroom/frontend/assets/circle-ok.svg';
+import { ReactComponent as CircleBlueSvg } from '@gitroom/frontend/assets/circle-b.svg';
+
 export const Step: FC<{
   step: number;
   title: string;
@@ -22,47 +26,10 @@ export const Step: FC<{
       

         

           {step === currentStep && currentStep !== lastStep && (
-            
-              
-            
-          )}
-          {(currentStep > step || currentStep == lastStep) && (
-            
-              
-            
-          )}
-          {step > currentStep && currentStep !== lastStep && (
-            
-              
-            
+            
           )}
+          {(currentStep > step || currentStep == lastStep) && }
+          {step > currentStep && currentStep !== lastStep && }
         

       

       

@@ -115,7 +82,7 @@ const SkipOnboarding: FC = () => {
 };
 const Welcome: FC = () => {
   const [seller, setSeller] = useState(false);
-  const {isGeneral} = useVariables();
+  const { isGeneral } = useVariables();
   const [lastStep, setLastStep] = useState(isGeneral ? 3 : 4);
   const [step, setStep] = useState(1);
   const ref = useRef();
@@ -180,13 +147,18 @@ const Welcome: FC = () => {
           lastStep={4}
         />
         
-        
+        
         {seller && (
           <>
             
             
@@ -231,7 +203,11 @@ const Welcome: FC = () => {
             You are done, from here you can:
           

           

-            

+            

               {!isGeneral && (
                 
               )}
@@ -247,15 +223,21 @@ const Welcome: FC = () => {
       )}
       {step === 5 - (isGeneral ? 1 : 0) && (
         

-          
To sell posts you would have to:

+          

+            To sell posts you would have to:
+          

           
    
             
  • 1. Connect at least one channel
    • 
             
  • 2. Connect you bank account
    • 
           

 
           

-            
-            
+            
+            
           

         

       )}
diff --git a/apps/frontend/src/components/post-url-selector/post.url.selector.tsx b/apps/frontend/src/components/post-url-selector/post.url.selector.tsx
index 72f83bf5c..47b0bfa16 100644
--- a/apps/frontend/src/components/post-url-selector/post.url.selector.tsx
+++ b/apps/frontend/src/components/post-url-selector/post.url.selector.tsx
@@ -16,6 +16,9 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import removeMd from 'remove-markdown';
 import clsx from 'clsx';
 
+import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg';
+import { ReactComponent as FlashSvg } from '@gitroom/frontend/assets/flash.svg';
+
 const postUrlEmitter = new EventEmitter();
 
 export const ShowPostSelector = () => {
@@ -161,20 +164,7 @@ export const PostSelector: FC<{
                     className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-primary hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
                     type="button"
                   >
-                    
-                      
-                    
+                    
                   
                 

               )}
@@ -231,20 +221,7 @@ export const postSelector = (date: dayjs.Dayjs): ICommand => ({
     'aria-label': 'Add Post Url',
     title: 'Add Post Url',
   },
-  icon: (
-    
-      
-    
-  ),
+  icon: ,
   execute: async (state: ExecuteState, api: TextAreaTextApi) => {
     const newSelectionRange = selectWord({
       text: state.text,
diff --git a/apps/frontend/src/components/settings/teams.component.tsx b/apps/frontend/src/components/settings/teams.component.tsx
index 8f4cf5f34..586e0ecc9 100644
--- a/apps/frontend/src/components/settings/teams.component.tsx
+++ b/apps/frontend/src/components/settings/teams.component.tsx
@@ -17,6 +17,9 @@ import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
 import copy from 'copy-to-clipboard';
 import interClass from '@gitroom/react/helpers/inter.font';
 
+import { ReactComponent as CloseXSvg } from '@gitroom/frontend/assets/close-x.svg';
+import { ReactComponent as BinSvg } from '@gitroom/frontend/assets/bin.svg';
+
 const roles = [
   {
     name: 'User',
@@ -88,20 +91,7 @@ export const AddMember = () => {
             className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
             type="button"
           >
-            
-              
-            
+            
           
 
           {sendEmail && (
@@ -213,18 +203,7 @@ export const TeamsComponent = () => {
                   >
                     

                       

-                        
-                          
-                        
+                        
                       

                       
Remove

                     

diff --git a/libraries/react-shared-libraries/src/form/canonical.tsx b/libraries/react-shared-libraries/src/form/canonical.tsx
index 5987b1f90..01ef5c688 100644
--- a/libraries/react-shared-libraries/src/form/canonical.tsx
+++ b/libraries/react-shared-libraries/src/form/canonical.tsx
@@ -13,6 +13,8 @@ import dayjs from 'dayjs';
 import { useShowPostSelector } from '../../../../apps/frontend/src/components/post-url-selector/post.url.selector';
 import interClass from '../helpers/inter.font';
 
+import { ReactComponent as FlashSvg } from '../../../../apps/frontend/src/assets/flash-w.svg';
+
 export const Canonical: FC<
   DetailedHTMLProps, HTMLInputElement> & {
     error?: any;
@@ -50,20 +52,7 @@ export const Canonical: FC<
       

         
{label}

         

-          
-            
-          
+          
         

       

       
         {currentStatus && (
           

-            
-              
-            
+            
           

         )}
       

diff --git a/libraries/react-shared-libraries/src/form/custom.select.tsx b/libraries/react-shared-libraries/src/form/custom.select.tsx
index 3b646c1f8..92249239e 100644
--- a/libraries/react-shared-libraries/src/form/custom.select.tsx
+++ b/libraries/react-shared-libraries/src/form/custom.select.tsx
@@ -1,4 +1,4 @@
-import {
+import React, {
   FC,
   ReactNode,
   useCallback,
@@ -10,6 +10,9 @@ import interClass from '../helpers/inter.font';
 import { clsx } from 'clsx';
 import { useFormContext } from 'react-hook-form';
 
+import { ReactComponent as ArrowDownSvg } from '../../../../apps/frontend/src/assets/arrow-down.svg';
+import { ReactComponent as CloseXSvg } from '../../../../apps/frontend/src/assets/close-x.svg';
+
 export const CustomSelect: FC<{
   error?: any;
   disableForm?: boolean;
@@ -21,7 +24,15 @@ export const CustomSelect: FC<{
   className?: string;
   options: Array<{ value: string; label: string; icon?: ReactNode }>;
 }> = (props) => {
-  const { options, onChange, placeholder, className, removeError, label, ...rest } = props;
+  const {
+    options,
+    onChange,
+    placeholder,
+    className,
+    removeError,
+    label,
+    ...rest
+  } = props;
   const form = useFormContext();
   const value = form.watch(props.name);
   const [isOpen, setIsOpen] = useState(false);
@@ -69,8 +80,8 @@ export const CustomSelect: FC<{
   }, [value]);
 
   return (
-    

-      {!!label && (
{label}
)}
+    

+      {!!label && 
{label}
}
       

         

           

-            
-              
-            
+            
           

           {!!value && (
             

-              
-                
-              
+              
             

           )}
         

       

       {isOpen && (
-        

+        

           {options.map((option) => (
             
 void }> = (
   props
 ) => {
@@ -36,35 +40,13 @@ export const Total: FC<{ name: string; customOnChange?: () => void }> = (
       >
         

           

-            
-              
-            
+            {value === 1 ?  : }
           

           

             {value}
           

           

-            
-              
-            
+            
           

         

       

diff --git a/libraries/react-shared-libraries/src/toaster/toaster.tsx b/libraries/react-shared-libraries/src/toaster/toaster.tsx
index 5768ca7bf..690e8206c 100644
--- a/libraries/react-shared-libraries/src/toaster/toaster.tsx
+++ b/libraries/react-shared-libraries/src/toaster/toaster.tsx
@@ -1,8 +1,13 @@
 'use client';
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import EventEmitter from 'events';
 import clsx from 'clsx';
 
+import { ReactComponent as CircleCheckSvg } from '../../../../apps/frontend/src/assets/circle-check.svg';
+import { ReactComponent as WarningYellowSvg } from '../../../../apps/frontend/src/assets/warning-y.svg';
+import { ReactComponent as GreenBackgroundSvg } from '../../../../apps/frontend/src/assets/green-back.svg';
+import { ReactComponent as YellowBackgroundSvg } from '../../../../apps/frontend/src/assets/yellow-back.svg';
+
 const toaster = new EventEmitter();
 export const Toaster = () => {
   const [showToaster, setShowToaster] = useState(false);
@@ -40,76 +45,14 @@ export const Toaster = () => {
       )}
     >
       

-        {toasterType === 'success' ? (
-          
-            
-          
-        ) : (
-          
-            
-          
-        )}
+        {toasterType === 'success' ?  : }
       

       
{toasterText}

-      
-        
-          
-        
-        
-          
-            
-            
-            
-          
-        
-      
+      {toasterType === 'success' ? (
+        
+      ) : (
+        
+      )}
     

   );
 };
diff --git a/package-lock.json b/package-lock.json
index 4e18ca44a..a3b6d41de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -135,7 +135,7 @@
         "@nestjs/schematics": "^10.0.1",
         "@nestjs/testing": "^10.0.2",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-        "@svgr/webpack": "^8.0.1",
+        "@svgr/webpack": "^8.1.0",
         "@swc-node/register": "1.9.2",
         "@swc/cli": "0.3.14",
         "@swc/core": "1.5.7",
@@ -11375,6 +11375,7 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-8.1.0.tgz",
       "integrity": "sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.21.3",
         "@babel/plugin-transform-react-constant-elements": "^7.21.3",
diff --git a/package.json b/package.json
index 8b356af58..fd27f29bd 100644
--- a/package.json
+++ b/package.json
@@ -157,7 +157,7 @@
     "@nestjs/schematics": "^10.0.1",
     "@nestjs/testing": "^10.0.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-    "@svgr/webpack": "^8.0.1",
+    "@svgr/webpack": "^8.1.0",
     "@swc-node/register": "1.9.2",
     "@swc/cli": "0.3.14",
     "@swc/core": "1.5.7",