diff --git a/assets/icons/eye.svg b/assets/icons/eye.svg new file mode 100644 index 000000000..6afc7667c --- /dev/null +++ b/assets/icons/eye.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/splitted-square.svg b/assets/icons/splitted-square.svg new file mode 100644 index 000000000..6634f661d --- /dev/null +++ b/assets/icons/splitted-square.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/components/socialFeed/SocialCard/cards/SocialArticleMarkdownCard.tsx b/packages/components/socialFeed/SocialCard/cards/SocialArticleMarkdownCard.tsx index afab9d2fe..cb19f2f43 100644 --- a/packages/components/socialFeed/SocialCard/cards/SocialArticleMarkdownCard.tsx +++ b/packages/components/socialFeed/SocialCard/cards/SocialArticleMarkdownCard.tsx @@ -68,11 +68,7 @@ export const SocialArticleMarkdownCard: FC<{ setLocalPost(post); }, [post]); - const thumbnailURI = thumbnailImage?.url - ? thumbnailImage.url.includes("://") - ? thumbnailImage.url - : "ipfs://" + thumbnailImage.url // we need this hack because ipfs "urls" in feed are raw CIDs - : defaultThumbnailImage; + const thumbnailURI = thumbnailImage?.url || defaultThumbnailImage; return ( = ({ width }) => { }} > {/* ==== Toolbar */} - + {/* ==== Edition and preview */} diff --git a/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/ModeButtons.tsx b/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/ModeButtons.tsx new file mode 100644 index 000000000..afaa209e6 --- /dev/null +++ b/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/ModeButtons.tsx @@ -0,0 +1,74 @@ +import { Dispatch, FC, SetStateAction, useState } from "react"; + +import eyeSVG from "@/assets/icons/eye.svg"; +import penSVG from "@/assets/icons/pen.svg"; +import splittedSquareSVG from "@/assets/icons/splitted-square.svg"; +import { SVG } from "@/components/SVG"; +import { CustomPressable } from "@/components/buttons/CustomPressable"; +import { SpacerRow } from "@/components/spacer"; +import { ContentMode } from "@/utils/feed/markdown"; +import { neutral11, neutral33, neutralFF } from "@/utils/style/colors"; +import { layout } from "@/utils/style/layout"; + +interface Props { + setMode: Dispatch>; + mode: ContentMode; +} + +export const ModeButtons: FC = ({ setMode, mode }) => { + const [hoveredButton, setHoveredButton] = useState(null); + + return ( + <> + setMode("EDITION")} + style={{ + backgroundColor: mode === "EDITION" ? neutral33 : neutral11, + padding: layout.spacing_x0_5, + borderRadius: 6, + borderWidth: 1, + borderColor: hoveredButton === "EDITION" ? neutralFF : neutral11, + }} + onHoverIn={() => setHoveredButton("EDITION")} + onHoverOut={() => setHoveredButton(null)} + > + + + + setMode("BOTH")} + style={{ + backgroundColor: mode === "BOTH" ? neutral33 : neutral11, + padding: layout.spacing_x0_5, + borderRadius: 6, + borderWidth: 1, + borderColor: hoveredButton === "BOTH" ? neutralFF : neutral11, + }} + onHoverIn={() => setHoveredButton("BOTH")} + onHoverOut={() => setHoveredButton(null)} + > + + + + setMode("PREVIEW")} + style={{ + backgroundColor: mode === "PREVIEW" ? neutral33 : neutral11, + padding: layout.spacing_x0_5, + borderRadius: 6, + borderWidth: 1, + borderColor: hoveredButton === "PREVIEW" ? neutralFF : neutral11, + }} + onHoverIn={() => setHoveredButton("PREVIEW")} + onHoverOut={() => setHoveredButton(null)} + > + + + + ); +}; diff --git a/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/Toolbar.tsx b/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/Toolbar.tsx index 96e765fd2..fd13ac724 100644 --- a/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/Toolbar.tsx +++ b/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/Toolbar.tsx @@ -1,61 +1,27 @@ import { Dispatch, FC, SetStateAction } from "react"; -import { View } from "react-native"; -import { BrandText } from "@/components/BrandText"; -import { CustomPressable } from "@/components/buttons/CustomPressable"; -import { SpacerRow } from "@/components/spacer"; +import { TertiaryBox } from "@/components/boxes/TertiaryBox"; +import { ModeButtons } from "@/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/ModeButtons"; import { ContentMode } from "@/utils/feed/markdown"; -import { neutral1A } from "@/utils/style/colors"; -import { fontSemibold12 } from "@/utils/style/fonts"; +import { neutral11 } from "@/utils/style/colors"; import { layout } from "@/utils/style/layout"; interface Props { setMode: Dispatch>; + mode: ContentMode; } -export const Toolbar: FC = ({ setMode }) => { +export const Toolbar: FC = ({ setMode, mode }) => { return ( - - - setMode("EDITION")} - style={{ - backgroundColor: neutral1A, - padding: layout.spacing_x1, - borderRadius: 8, - }} - > - Edition - - - setMode("BOTH")} - style={{ - backgroundColor: neutral1A, - padding: layout.spacing_x1, - borderRadius: 8, - }} - > - Edition | Preview - - - setMode("PREVIEW")} - style={{ - backgroundColor: neutral1A, - padding: layout.spacing_x1, - borderRadius: 8, - }} - > - Preview - - - + + ); }; diff --git a/packages/utils/feed/markdown.ts b/packages/utils/feed/markdown.ts index 5c6db6868..f353a5c30 100644 --- a/packages/utils/feed/markdown.ts +++ b/packages/utils/feed/markdown.ts @@ -29,6 +29,15 @@ export const markdownTagStyles: MixedStyleRecord = { fontFamily: "Exo_500Medium", fontWeight: "500", }, + ul: { + marginVertical: 4, + color: neutralA3, + fontSize: 14, + letterSpacing: -(14 * 0.04), + lineHeight: 20, + fontFamily: "Exo_500Medium", + fontWeight: "500", + }, code: { color: neutralA3, fontSize: 13,