fix(articles): Style ul, style mode buttons, remove ipfs url hack

TERITORI · Dec 18, 2024 · 9c42f45 · 9c42f45
1 parent 9c4bf23
commit 9c42f45
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 51 deletions.
diff --git a/assets/icons/eye.svg b/assets/icons/eye.svg
diff --git a/assets/icons/splitted-square.svg b/assets/icons/splitted-square.svg
diff --git 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 (
       <SocialCardWrapper

diff --git a/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx b/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx
@@ -61,7 +61,7 @@ export const ArticleContentEditor: FC<Props> = ({ width }) => {
       }}
     >
       {/* ==== Toolbar */}
-      <Toolbar setMode={setMode} />
+      <Toolbar setMode={setMode} mode={mode} />
       <SpacerColumn size={2} />
 
       {/* ==== Edition and preview */}

diff --git a/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/ModeButtons.tsx 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<SetStateAction<ContentMode>>;
+  mode: ContentMode;
+}
+
+export const ModeButtons: FC<Props> = ({ setMode, mode }) => {
+  const [hoveredButton, setHoveredButton] = useState<ContentMode | null>(null);
+
+  return (
+    <>
+      <CustomPressable
+        onPress={() => 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)}
+      >
+        <SVG source={penSVG} height={24} width={24} color={neutralFF} />
+      </CustomPressable>
+      <SpacerRow size={1} />
+      <CustomPressable
+        onPress={() => 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)}
+      >
+        <SVG
+          source={splittedSquareSVG}
+          height={24}
+          width={24}
+          color={neutralFF}
+        />
+      </CustomPressable>
+      <SpacerRow size={1} />
+      <CustomPressable
+        onPress={() => 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)}
+      >
+        <SVG source={eyeSVG} height={24} width={24} color={neutralFF} />
+      </CustomPressable>
+    </>
+  );
+};
diff --git 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<SetStateAction<ContentMode>>;
+  mode: ContentMode;
 }
 
-export const Toolbar: FC<Props> = ({ setMode }) => {
+export const Toolbar: FC<Props> = ({ setMode, mode }) => {
   return (
-    <View
+    <TertiaryBox
       style={{
         flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
+        alignSelf: "center",
+        padding: layout.spacing_x1,
+        backgroundColor: neutral11,
       }}
     >
-      <View style={{ flexDirection: "row", alignSelf: "center" }}>
-        <CustomPressable
-          onPress={() => setMode("EDITION")}
-          style={{
-            backgroundColor: neutral1A,
-            padding: layout.spacing_x1,
-            borderRadius: 8,
-          }}
-        >
-          <BrandText style={fontSemibold12}>Edition</BrandText>
-        </CustomPressable>
-        <SpacerRow size={1} />
-        <CustomPressable
-          onPress={() => setMode("BOTH")}
-          style={{
-            backgroundColor: neutral1A,
-            padding: layout.spacing_x1,
-            borderRadius: 8,
-          }}
-        >
-          <BrandText style={fontSemibold12}>Edition | Preview</BrandText>
-        </CustomPressable>
-        <SpacerRow size={1} />
-        <CustomPressable
-          onPress={() => setMode("PREVIEW")}
-          style={{
-            backgroundColor: neutral1A,
-            padding: layout.spacing_x1,
-            borderRadius: 8,
-          }}
-        >
-          <BrandText style={fontSemibold12}>Preview</BrandText>
-        </CustomPressable>
-      </View>
-    </View>
+      <ModeButtons setMode={setMode} mode={mode} />
+    </TertiaryBox>
   );
 };
diff --git 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,