Fix in bookmarks and notes component

EscolaLMS · Aug 9, 2023 · ac0edee · ac0edee
1 parent 68a8d32
commit ac0edee
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 49 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/components/.DS_Store b/src/components/.DS_Store
diff --git a/src/components/atoms/.DS_Store b/src/components/atoms/.DS_Store
diff --git a/src/components/molecules/List/List.tsx b/src/components/molecules/List/List.tsx
@@ -1,7 +1,7 @@
 import { FC, HTMLAttributes, ReactNode } from "react";
-import styled, { withTheme } from "styled-components";
+import styled, { css, withTheme } from "styled-components";
 import { IconText, Text } from "../../..";
-
+import { getStylesBasedOnTheme } from "../../../utils/utils";
 export interface ListItemProps {
   id: number;
   text: string;
@@ -16,6 +16,17 @@ interface ListProps extends Omit<HTMLAttributes<HTMLUListElement>, "onClick"> {
   defaultSelectedId?: number;
   currentIndex?: number;
 }
+const basicColorStyle = css<{ $isActive?: boolean }>`
+  color: ${({ theme, $isActive }) =>
+    $isActive
+      ? theme.white
+      : getStylesBasedOnTheme(
+          theme.mode,
+          theme.dm__outlineButtonColor,
+          theme.outlineButtonColor,
+          theme.primaryColor
+        )};
+`;
 
 const ListComponent = styled.ul`
   display: flex;
@@ -34,33 +45,60 @@ const ListItem = styled.li<{ $isActive?: boolean }>`
   background-color: ${({ theme, $isActive }) =>
     $isActive ? theme.dm__primaryColor : "transparent"};
   cursor: pointer;
-
   &:hover {
     transform: scale(1.05);
   }
 `;
 
+const StyledText = styled(Text)<{ $isActive?: boolean }>`
+  font-size: 14px;
+  font-weight: ${({ $isActive }) => ($isActive ? "bold" : "normal")};
+  ${basicColorStyle}
+`;
+
+const StyledIconText = styled(IconText)<{ $isActive?: boolean }>`
+  & > span {
+    font-weight: ${({ $isActive }) => ($isActive ? "bold" : "normal")};
+    ${basicColorStyle}
+    & > svg {
+      fill: ${({ theme, $isActive }) =>
+        $isActive
+          ? theme.white
+          : getStylesBasedOnTheme(
+              theme.mode,
+              theme.dm__outlineButtonColor,
+              theme.outlineButtonColor,
+              theme.primaryColor
+            )};
+    }
+  }
+`;
 const List: FC<ListProps> = ({
   listItems,
   selectedListItem,
   setSelectedListItem,
   ...props
-}) => {
-  return (
-    <ListComponent data-testid="list" {...props}>
-      {listItems.map(({ id, icon, text, numberOfItems }) => (
-        <ListItem
-          key={id}
+}) => (
+  <ListComponent data-testid="list" {...props}>
+    {listItems.map(({ id, icon, text, numberOfItems }) => (
+      <ListItem
+        key={id}
+        $isActive={selectedListItem === id}
+        data-testid={text}
+        onClick={() => setSelectedListItem(id)}
+      >
+        <StyledIconText
+          icon={icon}
+          text={text}
+          noMargin
           $isActive={selectedListItem === id}
-          data-testid={text}
-          onClick={() => setSelectedListItem(id)}
-        >
-          <IconText icon={icon} text={text} noMargin />
-          <Text>{numberOfItems}</Text>
-        </ListItem>
-      ))}
-    </ListComponent>
-  );
-};
+        />
+        <StyledText $isActive={selectedListItem === id}>
+          {numberOfItems}
+        </StyledText>
+      </ListItem>
+    ))}
+  </ListComponent>
+);
 
 export default withTheme(styled(List)``);
diff --git a/src/components/organisms/BookmarkNotes/index.tsx b/src/components/organisms/BookmarkNotes/index.tsx
@@ -9,14 +9,13 @@ import {
   BookmarkNotesBody,
   BookmarkNotesMenu,
   BookmarkNotesContent,
-  BookmarkNotesContentHeader,
   BookmarkNotesList,
   BookmarkNotesItem,
   NoteText,
   StyledTitle,
   BookmarksPage,
 } from "./styles";
-import { IconEdit, IconEditAlt } from "../../../styleguide/Icons";
+import { IconEdit, IconEditAlt, IconAll } from "../../../styleguide/Icons";
 import styled, { withTheme } from "styled-components";
 
 export interface Dropdown {
@@ -59,26 +58,38 @@ const BookmarkNotes: FC<BookmarkNotesComponentProps> = ({
   const listItems = [
     {
       id: 0,
+      icon: <IconAll />,
+      text: t<string>("Bookmarks.All"),
+      numberOfItems: bookmarkNotes.list?.data.length || 0,
+    },
+    {
+      id: 1,
       icon: <IconEditAlt />,
       text: t<string>("Bookmarks.Notes"),
-      numberOfTasks: bookmarkNotes.list?.data.length
+      numberOfItems: bookmarkNotes.list?.data.length
         ? Number(notes?.length)
         : 0,
     },
     {
-      id: 1,
+      id: 2,
       icon: <IconEdit />,
       text: t<string>("Bookmarks.Bookmarks"),
-      numberOfTasks: bookmarkNotes.list?.data.length
+      numberOfItems: bookmarkNotes.list?.data.length
         ? Number(bookmarks?.length)
         : 0,
     },
   ];
-  const currentlySelectedListItem = listItems.find(
-    ({ id }) => id === selectedListItem
-  );
 
-  const getArrayToMap = () => (selectedListItem === 0 ? notes : bookmarks);
+  const getArrayToMap = () => {
+    switch (selectedListItem) {
+      case 0:
+        return bookmarkNotes.list?.data;
+      case 1:
+        return notes;
+      case 2:
+        return bookmarks;
+    }
+  };
 
   const handleBookmark = (id: number) =>
     deleteBookmarkNote(id).then(() => {
@@ -105,9 +116,6 @@ const BookmarkNotes: FC<BookmarkNotesComponentProps> = ({
           />
         </BookmarkNotesMenu>
         <BookmarkNotesContent>
-          <BookmarkNotesContentHeader>
-            <Title level={4}>{currentlySelectedListItem?.text}</Title>
-          </BookmarkNotesContentHeader>
           <BookmarkNotesList>
             {getArrayToMap()?.map((item: API.BookmarkNote) => {
               const { id, bookmarkable_type, value } = item;
@@ -137,9 +145,7 @@ const BookmarkNotes: FC<BookmarkNotesComponentProps> = ({
             })}
           </BookmarkNotesList>
           {bookmarkNotes.list?.data.length === 0 && (
-            <Text $color="neutral600" weight="light">
-              {t<string>("Bookmarks.NoBookmarks")}
-            </Text>
+            <Text weight="light">{t<string>("Bookmarks.NoBookmarks")}</Text>
           )}
         </BookmarkNotesContent>
       </BookmarkNotesBody>

diff --git a/src/components/organisms/BookmarkNotes/styles.ts b/src/components/organisms/BookmarkNotes/styles.ts
@@ -29,7 +29,6 @@ export const BookmarkNotesContainer = styled.div`
 `;
 export const BookmarkNotesBody = styled.div`
   display: flex;
-
 `;
 export const BookmarkNotesHeader = styled.div`
   ${defaultFlex};
@@ -47,23 +46,18 @@ export const BookmarksPage = styled.div`
   }
 `;
 
-export const BookmarkNotesContentHeader = styled.div`
-  ${defaultFlex};
-  margin-bottom: 24px;
-  & h1 {
-    width: 30%;
-  }
-`;
 export const IconWrapper = styled.div`
   border-radius: 50%;
   border: 1px solid ${({ theme }) => theme.dm__primaryColor};
-  padding: 4px; ;
+  padding: 4px;
 `;
+
 export const BookmarkNotesMenu = styled.div`
   border-right: 1px solid ${({ theme }) => theme.dm__primaryColor};
   width: 25%;
   padding: 12px 12px 12px 0px;
 `;
+
 export const BookmarkNotesContent = styled.div`
   width: 100%;
   padding: 24px 24px 24px 12px;
@@ -85,6 +79,14 @@ export const BookmarkNotesItem = styled.li`
       align-self: center;
     }
   }
+  & > div {
+    transition: 0.3s;
+  }
+  &:hover {
+    & > div {
+      transform: scale(1.02);
+    }
+  }
 `;
 
 export const NoteText = styled(Text)`

diff --git a/src/components/organisms/ModalNote/index.tsx b/src/components/organisms/ModalNote/index.tsx
@@ -87,11 +87,11 @@ const ModalNote: FC<NoteModalProps> = ({
             <TextArea
               name="noteValue"
               id="noteValue"
-              label={t("Note.yourNote", {
+              label={t("Bookmarks.YourNote", {
                 defaultValue: "Your note",
               })}
               placeholder={
-                t("Note.yourNote", {
+                t("Bookmarks.WriteNote", {
                   defaultValue: "Write a note...",
                 }) ?? undefined
               }

diff --git a/src/styleguide/Icons/index.tsx b/src/styleguide/Icons/index.tsx
@@ -3,12 +3,11 @@ export const IconEditAlt = () => (
     width="19"
     height="19"
     viewBox="0 0 19 19"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M14.078 0.539475C14.4686 0.148951 15.1017 0.148951 15.4923 0.539475L18.4923 3.53948C18.8828 3.93 18.8828 4.56316 18.4923 4.95369L9.49226 13.9537C9.30473 14.1412 9.05037 14.2466 8.78516 14.2466H5.78516C5.23287 14.2466 4.78516 13.7989 4.78516 13.2466V10.2466C4.78516 9.98137 4.89051 9.72701 5.07805 9.53948L14.078 0.539475ZM6.78516 10.6608V12.2466H8.37094L16.3709 4.24658L14.7852 2.6608L6.78516 10.6608ZM0.785156 4.24658C0.785156 3.14201 1.68059 2.24658 2.78516 2.24658H7.78516C8.33744 2.24658 8.78516 2.6943 8.78516 3.24658C8.78516 3.79887 8.33744 4.24658 7.78516 4.24658H2.78516V16.2466H14.7852V11.2466C14.7852 10.6943 15.2329 10.2466 15.7852 10.2466C16.3374 10.2466 16.7852 10.6943 16.7852 11.2466V16.2466C16.7852 17.3512 15.8897 18.2466 14.7852 18.2466H2.78516C1.68059 18.2466 0.785156 17.3512 0.785156 16.2466V4.24658Z"
-      fill="#4A4A4A"
+      fill="currentColor"
     />
   </svg>
 );
@@ -18,12 +17,25 @@ export const IconEdit = () => (
     width="20"
     height="20"
     viewBox="0 0 20 20"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M14.078 0.539475C14.4686 0.148951 15.1017 0.148951 15.4923 0.539475L19.4923 4.53948C19.8828 4.93 19.8828 5.56316 19.4923 5.95369L6.49226 18.9537C6.30473 19.1412 6.05037 19.2466 5.78516 19.2466H1.78516C1.23287 19.2466 0.785156 18.7989 0.785156 18.2466V14.2466C0.785156 13.9814 0.890513 13.727 1.07805 13.5395L11.0778 3.53968L14.078 0.539475ZM11.7852 5.6608L2.78516 14.6608V17.2466H5.37094L14.3709 8.24658L11.7852 5.6608ZM15.7852 6.83237L17.3709 5.24658L14.7852 2.6608L13.1994 4.24658L15.7852 6.83237Z"
-      fill="#4A4A4A"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const IconAll = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m14.776 18.689 7.012-7.012c.133-.133.217-.329.217-.532 0-.179-.065-.363-.218-.515l-2.423-2.415c-.144-.143-.333-.215-.522-.215s-.378.072-.523.215l-7.027 6.996c-.442 1.371-1.158 3.586-1.265 3.952-.125.433.199.834.573.834.41 0 .696-.099 4.176-1.308zm-2.258-2.392 1.17 1.171c-.704.232-1.275.418-1.729.566zm.968-1.154 5.356-5.331 1.347 1.342-5.346 5.347zm-4.486-1.393c0-.402-.356-.75-.75-.75-2.561 0-2.939 0-5.5 0-.394 0-.75.348-.75.75s.356.75.75.75h5.5c.394 0 .75-.348.75-.75zm5-3c0-.402-.356-.75-.75-.75-2.561 0-7.939 0-10.5 0-.394 0-.75.348-.75.75s.356.75.75.75h10.5c.394 0 .75-.348.75-.75zm0-3c0-.402-.356-.75-.75-.75-2.561 0-7.939 0-10.5 0-.394 0-.75.348-.75.75s.356.75.75.75h10.5c.394 0 .75-.348.75-.75zm0-3c0-.402-.356-.75-.75-.75-2.561 0-7.939 0-10.5 0-.394 0-.75.348-.75.75s.356.75.75.75h10.5c.394 0 .75-.348.75-.75z"
+      fill="currentColor"
     />
   </svg>
 );
diff --git a/src/styleguide/i18n.ts b/src/styleguide/i18n.ts
@@ -237,6 +237,9 @@ export const resources = {
         Prev: "Prev",
         Next: "Next",
         Page: "Page",
+        YourNote: "Your note",
+        WriteNote: "Write a note...",
+        All: "All",
       },
       ModalCourseAccess: {
         Title: "Fill the enquiry and enrol",
@@ -481,6 +484,9 @@ export const resources = {
         Prev: "Poprzednia",
         Next: "Następna",
         Page: "Strona",
+        YourNote: "Twoja notatka",
+        WriteNote: "Napisz notatkę",
+        All: "Wszystko",
       },
       ModalCourseAccess: {
         Title: "Wypełnij zapytanie i zapisz się",