{date.format(isUSCitizen() ? 'MM/DD/YYYY hh:mm A' : 'DD/MM/YYYY HH:mm')}
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 2a44f958..48624e60 100644
--- a/apps/frontend/src/components/launches/helpers/top.title.component.tsx
+++ b/apps/frontend/src/components/launches/helpers/top.title.component.tsx
@@ -1,6 +1,7 @@
import { FC, ReactNode } from 'react';
import { useT } from '@gitroom/react/translation/get.transation.service.client';
import clsx from 'clsx';
+import { ExpandIcon, CollapseIcon } from '@gitroom/frontend/components/ui/icons';
export const TopTitle: FC<{
title: string;
@@ -44,33 +45,9 @@ export const TopTitle: FC<{
{shouldExpend !== undefined && (
{!shouldExpend ? (
-
+
) : (
-
+
)}
)}
diff --git a/apps/frontend/src/components/launches/repeat.component.tsx b/apps/frontend/src/components/launches/repeat.component.tsx
index 416426ab..9bc6e140 100644
--- a/apps/frontend/src/components/launches/repeat.component.tsx
+++ b/apps/frontend/src/components/launches/repeat.component.tsx
@@ -4,6 +4,7 @@ import { useT } from '@gitroom/react/translation/get.transation.service.client';
import { useClickOutside } from '@mantine/hooks';
import { isUSCitizen } from '@gitroom/frontend/components/launches/helpers/isuscitizen.utils';
import clsx from 'clsx';
+import { RepeatIcon, DropdownArrowIcon } from '@gitroom/frontend/components/ui/icons';
const list = [
{
value: 1,
@@ -81,28 +82,7 @@ export const RepeatComponent: FC<{
className="px-[16px] justify-center flex gap-[8px] items-center h-full select-none flex-1"
>
{repeat
@@ -110,19 +90,7 @@ export const RepeatComponent: FC<{
: t('repeat_post_every', 'Repeat Post Every...')}
{tagValue.length === 0 ? (
@@ -143,19 +130,7 @@ export const TagsComponentInner: FC<{
)}
{media.path.indexOf('mp4') > -1 ? (
@@ -690,26 +584,7 @@ export const MultiMediaComponent: FC<{
{currentMedia.map((media, index) => (
-
+
{media?.path?.indexOf('mp4') > -1 ? (
@@ -766,20 +629,10 @@ export const MultiMediaComponent: FC<{
)}
-
+ />
))}
@@ -795,28 +648,7 @@ export const MultiMediaComponent: FC<{
>
{t('insert_media', 'Insert Media')}
@@ -829,28 +661,7 @@ export const MultiMediaComponent: FC<{
>
{t('design_media', 'Design Media')}
@@ -868,20 +679,7 @@ export const MultiMediaComponent: FC<{
)}
{!!toolBar && (
diff --git a/apps/frontend/src/components/new-launch/editor.tsx b/apps/frontend/src/components/new-launch/editor.tsx
index eb9e51a0..a28284f6 100644
--- a/apps/frontend/src/components/new-launch/editor.tsx
+++ b/apps/frontend/src/components/new-launch/editor.tsx
@@ -60,6 +60,13 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
import { AComponent } from '@gitroom/frontend/components/new-launch/a.component';
import { Placeholder } from '@tiptap/extensions';
import { InformationComponent } from '@gitroom/frontend/components/launches/information.component';
+import {
+ LockIcon,
+ ConnectionLineIcon,
+ ResetIcon,
+ TrashIcon,
+ EmojiIcon,
+} from '@gitroom/frontend/components/ui/icons';
const InterceptBoldShortcut = Extension.create({
name: 'preventBoldWithUnderline',
@@ -345,21 +352,7 @@ export const EditorWrapper: FC<{
@@ -381,21 +374,7 @@ export const EditorWrapper: FC<{
>
@@ -427,20 +406,7 @@ export const EditorWrapper: FC<{
{index > 0 && (
)}
Back to global
@@ -520,25 +472,12 @@ export const EditorWrapper: FC<{
onChange={changeOrder(index)}
/>
{items.length > 1 && (
-
+ className="cursor-pointer text-[#FF3F3F]"
+ />
)}
@@ -783,44 +722,7 @@ export const Editor: FC<{
className="select-none cursor-pointer rounded-[6px] w-[30px] h-[30px] bg-newColColor flex justify-center items-center"
onClick={() => setEmojiPickerOpen(!emojiPickerOpen)}
>
-
+
= (props) => {
)}
>
{currentIntegrationText} Settings
= (props) => {
@@ -489,21 +440,7 @@ export const ManageModal: FC
= (props) => {
{existingData?.integration && (
@@ -552,19 +489,7 @@ export const ManageModal: FC = (props) => {
: t('update', 'Update')}
@@ -606,462 +531,3 @@ After using the addPostFor{num} it will create a new addPostContentFor{num+ 1} f
);
};
-export const ManageModalA: FC
= (props) => {
- const t = useT();
- const fetch = useFetch();
- const ref = useRef(null);
- const existingData = useExistingData();
- const [loading, setLoading] = useState(false);
- const toaster = useToaster();
- const modal = useModals();
-
- const { addEditSets, mutate, customClose, dummy } = props;
-
- const {
- selectedIntegrations,
- hide,
- date,
- setDate,
- repeater,
- setRepeater,
- tags,
- setTags,
- integrations,
- setSelectedIntegrations,
- locked,
- activateExitButton,
- } = useLaunchStore(
- useShallow((state) => ({
- hide: state.hide,
- date: state.date,
- setDate: state.setDate,
- repeater: state.repeater,
- setRepeater: state.setRepeater,
- tags: state.tags,
- setTags: state.setTags,
- selectedIntegrations: state.selectedIntegrations,
- integrations: state.integrations,
- setSelectedIntegrations: state.setSelectedIntegrations,
- locked: state.locked,
- activateExitButton: state.activateExitButton,
- }))
- );
-
- const deletePost = useCallback(async () => {
- setLoading(true);
- if (
- !(await deleteDialog(
- 'Are you sure you want to delete this post?',
- 'Yes, delete it!'
- ))
- ) {
- setLoading(false);
- return;
- }
- await fetch(`/posts/${existingData.group}`, {
- method: 'DELETE',
- });
- mutate();
- modal.closeAll();
- return;
- }, [existingData, mutate, modal]);
-
- const askClose = useCallback(async () => {
- if (!activateExitButton || dummy) {
- return;
- }
-
- if (
- await deleteDialog(
- t(
- 'are_you_sure_you_want_to_close_this_modal_all_data_will_be_lost',
- 'Are you sure you want to close this modal? (all data will be lost)'
- ),
- t('yes_close_it', 'Yes, close it!')
- )
- ) {
- if (customClose) {
- customClose();
- return;
- }
- modal.closeAll();
- }
- }, [activateExitButton, dummy]);
-
- const changeCustomer = useCallback(
- (customer: string) => {
- const neededIntegrations = integrations.filter(
- (p) => p?.customer?.id === customer
- );
- setSelectedIntegrations(
- neededIntegrations.map((p) => ({
- settings: {},
- selectedIntegrations: p,
- }))
- );
- },
- [integrations]
- );
-
- const schedule = useCallback(
- (type: 'draft' | 'now' | 'schedule') => async () => {
- setLoading(true);
- const checkAllValid = await ref.current.checkAllValid();
- if (type !== 'draft') {
- const notEnoughChars = checkAllValid.filter((p: any) => {
- return p.values.some((a: any) => {
- return (
- countCharacters(
- stripHtmlValidation('normal', a.content, true),
- p?.integration?.identifier || ''
- ) === 0 && a.media?.length === 0
- );
- });
- });
-
- for (const item of notEnoughChars) {
- toaster.show(
- '' +
- item.integration.name +
- ' Your post should have at least one character or one image.',
- 'warning'
- );
- setLoading(false);
- item.preview();
- return;
- }
-
- for (const item of checkAllValid) {
- if (item.valid === false) {
- toaster.show('Some fields are not valid', 'warning');
- item.fix();
- setLoading(false);
- return;
- }
-
- if (item.errors !== true) {
- toaster.show(
- `${capitalize(item.integration.identifier.split('-')[0])} (${
- item.integration.name
- }): ${item.errors}`,
- 'warning'
- );
- item.preview();
- setLoading(false);
- return;
- }
- }
-
- const sliceNeeded = checkAllValid.filter((p: any) => {
- return p.values.some((a: any) => {
- const strip = stripHtmlValidation('normal', a.content, true);
- const weightedLength = countCharacters(
- strip,
- p?.integration?.identifier || ''
- );
- const totalCharacters =
- weightedLength > strip.length ? weightedLength : strip.length;
-
- return totalCharacters > (p.maximumCharacters || 1000000);
- });
- });
-
- for (const item of sliceNeeded) {
- toaster.show(
- `${item?.integration?.name} (${item?.integration?.identifier}) post is too long, please fix it`,
- 'warning'
- );
- item.preview();
- setLoading(false);
- return;
- }
- }
-
- const shortLinkUrl = dummy
- ? { ask: false }
- : await (
- await fetch('/posts/should-shortlink', {
- method: 'POST',
- body: JSON.stringify({
- messages: checkAllValid.flatMap((p: any) =>
- p.values.flatMap((a: any) => a.content)
- ),
- }),
- })
- ).json();
-
- const shortLink = !shortLinkUrl.ask
- ? false
- : await deleteDialog(
- 'Do you want to shortlink the URLs? it will let you get statistics over clicks',
- 'Yes, shortlink it!'
- );
-
- const group = existingData.group || makeId(10);
- const data = {
- type,
- ...(repeater ? { inter: repeater } : {}),
- tags,
- shortLink,
- date: date.utc().format('YYYY-MM-DDTHH:mm:ss'),
- posts: checkAllValid.map((post: any) => ({
- integration: {
- id: post.integration.id,
- },
- group,
- settings: { ...(post.settings || {}) },
- value: post.values.map((value: any) => ({
- ...(value.id ? { id: value.id } : {}),
- content: value.content,
- image:
- (value?.media || []).map(
- ({ id, path, alt, thumbnail, thumbnailTimestamp }: any) => ({
- id,
- path,
- alt,
- thumbnail,
- thumbnailTimestamp,
- })
- ) || [],
- })),
- })),
- };
-
- if (dummy) {
- modal.openModal({
- title: '',
- children: ,
- classNames: {
- modal: 'w-[100%] bg-transparent text-textColor',
- },
- size: '100%',
- withCloseButton: false,
- closeOnEscape: true,
- closeOnClickOutside: true,
- });
-
- setLoading(false);
- }
-
- if (!dummy) {
- addEditSets
- ? addEditSets(data)
- : await fetch('/posts', {
- method: 'POST',
- body: JSON.stringify(data),
- });
-
- if (!addEditSets) {
- mutate();
- toaster.show(
- !existingData.integration
- ? 'Added successfully'
- : 'Updated successfully'
- );
- }
- if (customClose) {
- setTimeout(() => {
- customClose();
- }, 2000);
- }
-
- if (!addEditSets) {
- modal.closeAll();
- }
- }
- },
- [ref, repeater, tags, date, addEditSets, dummy]
- );
-
- return (
- <>
-
-
-
-
-
- {!dummy && (
-
- )}
-
-
-
-
-
-
- {!existingData.integration &&
}
-
-
-
-
-
-
-
- {!!existingData.integration && (
-
- )}
-
- {!addEditSets && !dummy && (
-
- )}
-
- {addEditSets && (
-
- )}
- {!addEditSets && (
-
- )}
-
-
-
-
-
-
-
-
-
-
- {!dummy && (
- setTags(e.target.value)}
- />
- )}
-
- {!dummy && (
-
- )}
-
-
-
-
-
-
-
{selectedIntegrations.map(({ integration }) => (
diff --git a/apps/frontend/src/components/ui/icons/index.tsx b/apps/frontend/src/components/ui/icons/index.tsx
new file mode 100644
index 00000000..78758ad4
--- /dev/null
+++ b/apps/frontend/src/components/ui/icons/index.tsx
@@ -0,0 +1,878 @@
+import React, { FC, SVGProps, useEffect } from 'react';
+import clsx from 'clsx';
+import useCookie from 'react-use-cookie';
+import { modeEmitter } from '@gitroom/frontend/components/layout/mode.component';
+
+export type IconProps = SVGProps
& {
+ size?: number;
+};
+
+// Settings/Gear Icon
+export const SettingsIcon: FC = ({
+ size = 20,
+ className,
+ ...props
+}) => (
+
+);
+
+// Chevron Down Icon (rotatable)
+export const ChevronDownIcon: FC = ({
+ size = 20,
+ className,
+ rotated,
+ ...props
+}) => (
+
+);
+
+// Chevron Up Icon
+export const ChevronUpIcon: FC = ({
+ size = 20,
+ className,
+ ...props
+}) => (
+
+);
+
+// Close/X Icon
+export const CloseIcon: FC = ({
+ size = 20,
+ className,
+ ...props
+}) => (
+
+);
+
+// Small Close Icon (10x11 variant)
+export const CloseIconSmall: FC = ({
+ size = 10,
+ className,
+ ...props
+}) => (
+
+);
+
+// Trash/Delete Icon
+export const TrashIcon: FC = ({
+ size = 20,
+ className,
+ ...props
+}) => (
+
+);
+
+// Dropdown Arrow (filled triangle)
+export const DropdownArrowIcon: FC = ({
+ size = 20,
+ className,
+ rotated,
+ ...props
+}) => (
+
+);
+
+// Small Dropdown Arrow (6x4)
+export const DropdownArrowSmallIcon: FC = ({
+ className,
+ rotated,
+ ...props
+}) => (
+
+);
+
+// Calendar Icon
+export const CalendarIcon: FC = ({ className, ...props }) => (
+
+);
+
+// Repeat/Cycle Icon
+export const RepeatIcon: FC = ({
+ size = 20,
+ className,
+ ...props
+}) => (
+
+);
+
+// Tag Icon
+export const TagIcon: FC = ({ className, ...props }) => (
+
+);
+
+// Plus Icon
+export const PlusIcon: FC = ({ size = 16, className, ...props }) => (
+
+);
+
+// Checkmark Icon
+export const CheckmarkIcon: FC = ({ className, ...props }) => (
+
+);
+
+// Global/Planet Icon
+export const GlobalIcon: FC = ({
+ size = 20,
+ className,
+ ...props
+}) => (
+
+);
+
+// User Icon
+export const UserIcon: FC = ({ size = 20, className, ...props }) => (
+
+);
+
+// Expand Icon
+export const ExpandIcon: FC = ({
+ size = 24,
+ className,
+ ...props
+}) => (
+
+);
+
+// Collapse Icon
+export const CollapseIcon: FC = ({
+ size = 24,
+ className,
+ ...props
+}) => (
+
+);
+
+// Lock Icon
+export const LockIcon: FC = ({ size = 32, className, ...props }) => (
+
+);
+
+// Connection Line Icon (for thread/comment indication)
+export const ConnectionLineIcon: FC = ({ className, ...props }) => (
+
+);
+
+// Reset/Back to Global Icon
+export const ResetIcon: FC = ({
+ size = 16,
+ className,
+ ...props
+}) => (
+
+);
+
+// Emoji Icon
+export const EmojiIcon: FC = ({
+ size = 16,
+ className,
+ ...props
+}) => (
+
+);
+
+// Chevron Left Icon
+export const ChevronLeftIcon: FC = ({
+ size = 24,
+ className,
+ ...props
+}) => (
+
+);
+
+// Chevron Right Icon
+export const ChevronRightIcon: FC = ({
+ size = 24,
+ className,
+ ...props
+}) => (
+
+);
+
+// Delete Circle Icon (for media delete)
+export const DeleteCircleIcon: FC = ({
+ size = 18,
+ className,
+ ...props
+}) => (
+
+);
+
+// Close Circle Icon (smaller, for clearing media)
+export const CloseCircleIcon: FC = ({
+ size = 15,
+ className,
+ ...props
+}) => (
+
+);
+
+// Drag Handle Icon
+export const DragHandleIcon: FC = ({
+ size = 15,
+ className,
+ ...props
+}) => (
+
+);
+
+// Media Settings Icon (gear for media)
+export const MediaSettingsIcon: FC = ({
+ size = 40,
+ className,
+ ...props
+}) => (
+
+);
+
+// Insert Media Icon
+export const InsertMediaIcon: FC = ({
+ size = 16,
+ className,
+ ...props
+}) => (
+
+);
+
+// Design Media Icon (pencil/edit)
+export const DesignMediaIcon: FC = ({
+ size = 16,
+ className,
+ ...props
+}) => (
+
+);
+
+// Vertical Divider Icon
+export const VerticalDividerIcon: FC = ({ className, ...props }) => (
+
+);
+
+export const NoMediaIcon: FC = () => {
+ const [mode, setMode] = useCookie('mode', 'dark');
+
+ useEffect(() => {
+ modeEmitter.on('mode', (value) => {
+ setMode(value);
+ });
+
+ return () => {
+ modeEmitter.removeAllListeners();
+ };
+ }, []);
+
+ return (
+ <>
+ {mode === 'light' ? (
+
+ ) : (
+
+ )}
+
+ );
+};
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
index 15e6a72b..0fd050db 100644
--- a/apps/frontend/tailwind.config.js
+++ b/apps/frontend/tailwind.config.js
@@ -1,5 +1,6 @@
const { join } = require('path');
module.exports = {
+ darkMode: 'class',
content: ['./src/**/*.{ts,tsx,html}', '../../libraries/**/*.{ts,tsx,html}'],
theme: {
extend: {