Tweak review style

lindylearn · Dec 11, 2022 · 46f923f · 46f923f
1 parent 801a499
commit 46f923f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/apps/library-web/src/tabs/Review.tsx b/apps/library-web/src/tabs/Review.tsx
@@ -8,8 +8,8 @@ export default function ReviewTestTab({}) {
     );
 
     return (
-        <div className="mx-auto">
-            <div className="mx-auto flex h-52 w-[780px] items-start rounded-[10px] bg-[rgb(33,33,33)]">
+        <div className="mx-auto min-h-screen bg-gray-100">
+            <div className="mx-auto flex h-52 w-[780px] items-start rounded-[10px] bg-white dark:bg-[rgb(33,33,33)]">
                 <input
                     className="m-5 w-full rounded-lg bg-gray-100 px-3 py-1 outline-none dark:bg-stone-700"
                     placeholder="URL"
@@ -19,7 +19,7 @@ export default function ReviewTestTab({}) {
                     }}
                 />
             </div>
-            <div className="mt-[8px]">
+            <div className="mt-5">
                 <ArticleBottomReview articleId={getUrlHash(url)} />
             </div>
         </div>

diff --git a/apps/unclutter/source/review/App.tsx b/apps/unclutter/source/review/App.tsx
@@ -7,8 +7,8 @@ export default function App({ articleId }) {
     const rep = useMemo<ReplicacheProxy>(() => new ReplicacheProxy(), []);
 
     return (
-        <div className="bottom-container font-text relative m-[5px] mt-[8px]">
-            {/* // @ts-ignore */}
+        <div className="bottom-container font-text relative mt-4">
+            {/* @ts-ignore */}
             <ReplicacheContext.Provider value={rep}>
                 <ArticleBottomReview articleId={articleId} />
             </ReplicacheContext.Provider>

diff --git a/common/library-components/src/components/Highlight.tsx b/common/library-components/src/components/Highlight.tsx
@@ -42,6 +42,9 @@ export function Highlight({
     }
 
     const [localText, setLocalText] = useState(annotation.text);
+    useEffect(() => {
+        setLocalText(annotation.text);
+    }, [annotation.text]);
     const localTextDebounced = useDebounce(localText, 500);
     useEffect(() => {
         rep?.mutate.updateAnnotation({
@@ -56,7 +59,7 @@ export function Highlight({
 
     return (
         <a
-            className="highlight animate-fadein relative flex cursor-pointer select-none flex-col gap-2 overflow-hidden rounded-md bg-stone-100 p-2 text-sm text-stone-900 transition-transform hover:scale-[99.5%] dark:text-white"
+            className="highlight animate-fadein relative flex cursor-pointer select-none flex-col gap-2 overflow-hidden rounded-md bg-white p-2 text-sm text-stone-900 shadow transition-transform hover:scale-[99.5%] dark:text-white"
             style={{
                 background: annotation.is_favorite
                     ? getActivityColor(3, darkModeEnabled)
@@ -79,19 +82,24 @@ export function Highlight({
             />
 
             <h2 className="tags flex gap-2 overflow-hidden px-2 leading-normal">
-                {annotation.tags?.map((tag) => (
-                    <div className="tag font-title whitespace-nowrap text-base">#{tag}</div>
+                {annotation.tags?.slice(0, 2)?.map((tag) => (
+                    <div key={tag} className="tag font-title whitespace-nowrap text-base">
+                        #{tag}
+                    </div>
                 ))}
             </h2>
 
             <LimitedText
                 className={clsx("px-2 leading-normal", localText && "opacity-50")}
                 text={annotation.quote_text}
-                rows={localText ? 1 : 5}
+                rows={localText ? 2 : 6}
             />
 
             <TextareaAutosize
-                className="w-full select-none resize-none rounded-md bg-[rgba(255,255,255,10%)] p-2 align-top text-sm outline-none placeholder:select-none placeholder:text-stone-900 placeholder:opacity-50 dark:placeholder:text-white"
+                className="w-full select-none resize-none rounded-md bg-stone-100 p-2 align-top text-sm outline-none placeholder:select-none placeholder:text-stone-900 placeholder:opacity-50 dark:placeholder:text-white"
+                style={{
+                    background: "rgba(255,255,255,20%)",
+                }}
                 placeholder="Add a note..."
                 value={localText}
                 onChange={(e) => setLocalText(e.target.value)}

diff --git a/common/library-components/src/components/Review/ArticleBottomReview.tsx b/common/library-components/src/components/Review/ArticleBottomReview.tsx
@@ -42,10 +42,19 @@ export default function ArticleBottomReview({ articleId }: { articleId: string }
     const darkModeEnabled = true;
 
     return (
-        <div className="flex flex-col gap-4 text-stone-800 dark:text-[rgb(232,230,227)]">
+        <div className="mx-5 flex flex-col gap-4 text-stone-800 dark:text-[rgb(232,230,227)]">
+            <h1 className="font-title flex items-center gap-2 text-base font-medium">
+                <svg viewBox="0 0 512 512" className="h-4">
+                    <path
+                        fill="currentColor"
+                        d="M320 62.06L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L229.5 412.5C181.5 460.5 120.3 493.2 53.7 506.5L28.71 511.5C20.84 513.1 12.7 510.6 7.03 504.1C1.356 499.3-1.107 491.2 .4662 483.3L5.465 458.3C18.78 391.7 51.52 330.5 99.54 282.5L286.1 96L272.1 82.91C263.6 73.54 248.4 73.54 239 82.91L136.1 184.1C127.6 194.3 112.4 194.3 103 184.1C93.66 175.6 93.66 160.4 103 151L205.1 48.97C233.2 20.85 278.8 20.85 306.9 48.97L320 62.06zM320 129.9L133.5 316.5C94.71 355.2 67.52 403.1 54.85 457.2C108 444.5 156.8 417.3 195.5 378.5L382.1 192L320 129.9z"
+                    />
+                </svg>
+                Review your highlights
+            </h1>
             <div className="flex w-screen flex-col gap-4">
                 {annotationGroups?.map((group, index) => (
-                    <div key={index} className="mx-[8px] grid grid-cols-4 gap-[8px]">
+                    <div key={index} className="grid grid-cols-4 gap-4">
                         {group?.map((annotation) => (
                             <Highlight
                                 key={annotation.id}