diff --git a/apps/frontend/public/no-video-youtube.png b/apps/frontend/public/no-video-youtube.png new file mode 100644 index 00000000..5aa7597d Binary files /dev/null and b/apps/frontend/public/no-video-youtube.png differ diff --git a/apps/frontend/src/app/colors.scss b/apps/frontend/src/app/colors.scss index 9ae668e9..924db4a7 100644 --- a/apps/frontend/src/app/colors.scss +++ b/apps/frontend/src/app/colors.scss @@ -28,12 +28,26 @@ --new-menu-hover: #fff; --menu-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.5); --popup-color: rgba(65, 64, 66, 0.3); + --border-preview: transparent; + --preview-box-shadow: none; + --linkedin-border: #2e3438; + --linkedin-bg: #1b1f23; + --linkedin-text: #c6c7c8; + --facebook-bg: #242526; + --facebook-bg-comment: #333334; + --instagram-bg: #0b1014; + --tiktok-item-bg: #2a2a2a; + --tiktok-item-icon-bg: #FFF; + --youtube-bg: #0F0F0F; + --youtube-button: #F1F1F1; + --youtube-action-color: #272727; + --youtube-svg-border: #A0A0A0; } .light { --new-back-drop: #2d1b57; - --new-settings: #ECEEF1; - --new-sep: #D5D9DD; - --new-border: #EAECEE; + --new-settings: #eceef1; + --new-sep: #d5d9dd; + --new-border: #eaecee; --new-bgColor: #f0f2f4; --new-bgColorInner: #ffffff; --new-bgLineColor: #e7e9eb; @@ -62,6 +76,23 @@ -3px 13px 14px 0 rgba(55, 52, 75, 0.09), -1px 3px 8px 0 rgba(55, 52, 75, 0.1); --popup-color: rgba(55, 37, 97, 0.2); + --border-preview: #f1f0f3; + --preview-box-shadow: 0 386px 108px 0 rgba(38, 32, 64, 0), + 0 247px 99px 0 rgba(38, 32, 64, 0.01), + 0 139px 83px 0 rgba(38, 32, 64, 0.03), + 0 62px 62px 0 rgba(38, 32, 64, 0.04), 0 15px 34px 0 rgba(38, 32, 64, 0.05); + --linkedin-border: #e9e5df; + --linkedin-bg: #fff; + --linkedin-text: #707070; + --facebook-bg: #f1f0f3; + --facebook-bg-comment: #f6f6f6; + --instagram-bg: #fff; + --tiktok-item-bg: #EEF1F0; + --tiktok-item-icon-bg: #454645; + --youtube-bg: #FFF; + --youtube-button: #000; + --youtube-action-color: #F1F1F1; + --youtube-svg-border: #1A1A1A; } } diff --git a/apps/frontend/src/components/launches/general.preview.component.tsx b/apps/frontend/src/components/launches/general.preview.component.tsx index 4a85731c..049891a7 100644 --- a/apps/frontend/src/components/launches/general.preview.component.tsx +++ b/apps/frontend/src/components/launches/general.preview.component.tsx @@ -49,7 +49,7 @@ export const GeneralPreviewComponent: FC<{ }); return ( -
+
{renderContent.map((value, index) => (
) : ( diff --git a/apps/frontend/src/components/launches/launches.component.tsx b/apps/frontend/src/components/launches/launches.component.tsx index 2a1ea2d7..5ddf682f 100644 --- a/apps/frontend/src/components/launches/launches.component.tsx +++ b/apps/frontend/src/components/launches/launches.component.tsx @@ -288,7 +288,7 @@ export const MenuComponent: FC< { >
diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx index 52a2cfa5..9f2c5731 100644 --- a/apps/frontend/src/components/media/media.component.tsx +++ b/apps/frontend/src/components/media/media.component.tsx @@ -46,6 +46,8 @@ import { VerticalDividerIcon, NoMediaIcon, } from '@gitroom/frontend/components/ui/icons'; +import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store'; +import { useShallow } from 'zustand/react/shallow'; const Polonto = dynamic( () => import('@gitroom/frontend/components/launches/polonto') ); @@ -432,7 +434,7 @@ export const MediaBox: FC<{ onClick={addRemoveSelected(media)} > {!!selected.find((p: any) => p.id === media.id) ? ( -
+
{selected.findIndex((z: any) => z.id === media.id) + 1}
) : ( @@ -492,6 +494,7 @@ export const MediaBox: FC<{ export const MultiMediaComponent: FC<{ label: string; description: string; + mediaNotAvailable?: boolean; dummy: boolean; allData: { content: string; @@ -535,6 +538,7 @@ export const MultiMediaComponent: FC<{ dummy, toolBar, information, + mediaNotAvailable, } = props; const user = useUser(); const modals = useModals(); @@ -688,46 +692,50 @@ export const MultiMediaComponent: FC<{
{!dummy && (
-
-
-
-
- -
-
- {t('insert_media', 'Insert Media')} + {!mediaNotAvailable && ( +
+
+
+
+ +
+
+ {t('insert_media', 'Insert Media')} +
-
-
-
-
- -
-
- {t('design_media', 'Design Media')} +
+
+
+ +
+
+ {t('design_media', 'Design Media')} +
+ + + + {!!user?.tier?.ai && ( + <> + + + + )}
- - - - {!!user?.tier?.ai && ( - <> - - - - )} -
-
- -
+ )} + {!mediaNotAvailable && ( +
+ +
+ )} {!!toolBar && (
{toolBar} @@ -778,16 +786,28 @@ export const MediaComponent: FC<{ setCurrentMedia(settings); } }, []); - const [modal, setShowModal] = useState(false); - const [mediaModal, setMediaModal] = useState(false); const [currentMedia, setCurrentMedia] = useState(value); + const modals = useModals(); const mediaDirectory = useMediaDirectory(); - const closeDesignModal = useCallback(() => { - setMediaModal(false); - }, [modal]); + const showDesignModal = useCallback(() => { - setMediaModal(true); - }, [modal]); + modals.openModal({ + title: 'Media Editor', + askClose: false, + closeOnEscape: true, + fullScreen: true, + size: 'calc(100% - 80px)', + height: 'calc(100% - 80px)', + children: (close) => ( + + ), + }); + }, []); const changeMedia = useCallback((m: { path: string; id: string }[]) => { setCurrentMedia(m[0]); onChange({ @@ -798,8 +818,18 @@ export const MediaComponent: FC<{ }); }, []); const showModal = useCallback(() => { - setShowModal(!modal); - }, [modal]); + modals.openModal({ + title: 'Media Library', + askClose: false, + closeOnEscape: true, + fullScreen: true, + size: 'calc(100% - 80px)', + height: 'calc(100% - 80px)', + children: (close) => ( + + ), + }); + }, []); const clearMedia = useCallback(() => { setCurrentMedia(undefined); onChange({ @@ -811,17 +841,6 @@ export const MediaComponent: FC<{ }, [value]); return (
- {modal && ( - - )} - {mediaModal && !!user?.tier?.ai && ( - - )}
{label}
{description}
{!!currentMedia && ( diff --git a/apps/frontend/src/components/new-launch/editor.tsx b/apps/frontend/src/components/new-launch/editor.tsx index 9a07161a..5f995411 100644 --- a/apps/frontend/src/components/new-launch/editor.tsx +++ b/apps/frontend/src/components/new-launch/editor.tsx @@ -129,11 +129,13 @@ export const EditorWrapper: FC<{ setLoadedState, selectedIntegration, chars, + comments, } = useLaunchStore( useShallow((state) => ({ internal: state.internal.find((p) => p.integration.id === state.current), internalFromAll: state.integrations.find((p) => p.id === state.current), global: state.global, + comments: state.comments, current: state.current, addRemoveInternal: state.addRemoveInternal, dummy: state.dummy, @@ -343,8 +345,9 @@ export const EditorWrapper: FC<{
{isCreateSet && current !== 'global' && ( @@ -370,7 +373,7 @@ export const EditorWrapper: FC<{ setLoaded(false); addRemoveInternal(current); }} - className="text-center absolute w-full h-full left-0 top-0 items-center justify-center flex z-[101] flex-col gap-[16px]" + className="text-center absolute w-full h-full p-[20px] left-0 top-0 items-center justify-center flex z-[101] flex-col gap-[16px]" >
@@ -398,9 +401,9 @@ export const EditorWrapper: FC<{ className={clsx( 'relative flex flex-col gap-[20px] flex-1 bg-newSettings', index === 0 && 'rounded-t-[12px]', - index === items.length - 1 && 'rounded-b-[12px]', + (index === items.length - 1 || !comments) && 'rounded-b-[12px]', !canEdit && !isCreateSet && 'blur-s', - !canEdit && index > 0 && 'hidden' + ((!canEdit && index > 0) || (!comments && index > 0)) && 'hidden' )} >
@@ -411,6 +414,7 @@ export const EditorWrapper: FC<{
)} - {canEdit && items.length - 1 === index ? ( + {((canEdit && items.length - 1 === index) || !comments) ? (
- + {comments && ( + + )}
{!!internal && !existingData?.integration && (
-
- - {items.length > 1 && ( - + - )} -
+ {items.length > 1 && ( + + )} +
+ )}
))} @@ -500,6 +508,7 @@ export const Editor: FC<{ appendImages?: (value: any[]) => void; autoComplete?: boolean; validateChars?: boolean; + comments: boolean | 'no-media'; identifier?: string; totalChars?: number; selectedIntegration: SelectedIntegrations[]; @@ -513,17 +522,14 @@ export const Editor: FC<{ pictures, setImages, num, - validateChars, identifier, appendImages, - selectedIntegration, dummy, chars, childButton, + comments, } = props; - const user = useUser(); const [id] = useState(makeId(10)); - const newRef = useRef(null); const [emojiPickerOpen, setEmojiPickerOpen] = useState(false); const t = useT(); const editorRef = useRef(); @@ -547,6 +553,9 @@ export const Editor: FC<{ const paste = useCallback( async (event: ClipboardEvent | File[]) => { + if (num > 0 && comments === 'no-media') { + return; + } // @ts-ignore const clipboardItems = event.clipboardData?.items; if (!clipboardItems) { @@ -563,10 +572,13 @@ export const Editor: FC<{ } } }, - [uppy] + [uppy, num, comments] ); - const { getRootProps, isDragActive } = useDropzone({ onDrop }); + const { getRootProps, isDragActive } = useDropzone({ + onDrop, + noDrag: num > 0 && comments === 'no-media', + }); const valueWithoutHtml = useMemo(() => { return stripHtmlValidation('normal', props.value || '', true); @@ -667,6 +679,7 @@ export const Editor: FC<{
{setImages && ( 0 && comments === 'no-media'} allData={allValues} text={valueWithoutHtml} label={t('attachments', 'Attachments')} diff --git a/apps/frontend/src/components/new-launch/manage.modal.tsx b/apps/frontend/src/components/new-launch/manage.modal.tsx index 8bbf5ccf..53923e43 100644 --- a/apps/frontend/src/components/new-launch/manage.modal.tsx +++ b/apps/frontend/src/components/new-launch/manage.modal.tsx @@ -1,6 +1,13 @@ 'use client'; -import React, { FC, useCallback, useMemo, useRef, useState } from 'react'; +import React, { + FC, + ReactNode, + useCallback, + useMemo, + useRef, + useState, +} from 'react'; import { AddEditModalProps } from '@gitroom/frontend/components/new-launch/add.edit.modal'; import clsx from 'clsx'; import { useT } from '@gitroom/react/translation/get.transation.service.client'; @@ -32,6 +39,7 @@ import { TrashIcon, DropdownArrowSmallIcon, } from '@gitroom/frontend/components/ui/icons'; +import { useHasScroll } from '@gitroom/frontend/components/ui/is.scroll.hook'; function countCharacters(text: string, type: string): number { if (type !== 'x') { @@ -388,14 +396,17 @@ export const ManageModal: FC = (props) => { {currentIntegrationText} Settings
- +