Update ProgressBar to new design.

src/components/atoms/ProgressBar/ProgressBar.tsx

@@ -24,6 +24,8 @@ const StyledDiv = styled.div`
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   .progress-container {
+    position: relative;
+
     &:not(:last-child) {
       margin-bottom: 6px;
     }
@@ -32,39 +34,35 @@ const StyledDiv = styled.div`
     align-items: center;
     .progress-bars {
       flex: 1;
-      height: 10px;
+      height: 3px;
       position: relative;
       .empty {
         display: block;
-        background: ${({ theme }) =>
-          getStylesBasedOnTheme(theme.mode, theme.gray2, theme.white)};
+        background: ${({ theme }) => theme.positive2};
         height: 100%;
-        border-radius: 10px;
       }
       .filled {
         position: absolute;
         top: 0;
-        background: ${({ theme }) =>
-          getStylesBasedOnTheme(
-            theme.mode,
-            theme.dm__primaryColor,
-            theme.primaryColor,
-            theme.primaryColor
-          )};
+        background: ${({ theme: { positive } }) => positive};
         display: block;
         height: 100%;
-        border-radius: 10px;
         transition: 0.2s width ease-in-out;
       }
     }
     .percentage-value {
+      position: absolute;
+      right: 0;
+      bottom: 6px;
       flex: 0 0 40px;
       font-size: 14px;
       margin-left: 5px;
       height: 22px;
       display: flex;
       align-items: center;
       justify-content: center;
+      color: ${({ theme: { positive } }) => positive};
+      font-weight: bold;
     }
   }
 `;

src/components/molecules/CourseTopNav/CourseTopNav.tsx

@@ -36,10 +36,10 @@ export interface CourseTopNavProps
   onFinish: () => void;
   currentNote?: NoteData;
   newNoteData?: NewNoteData;
-  addNotes: boolean;
-  addBookmarks: boolean;
-  onBookmarkClick: () => void;
-  bookmarkBtnText: "addBookmark" | "deleteBookmark";
+  addNotes?: boolean;
+  addBookmarks?: boolean;
+  onBookmarkClick?: () => void;
+  bookmarkBtnText?: "addBookmark" | "deleteBookmark";
   isLast?: boolean;
   onCourseFinished?: () => void;
 }
@@ -108,8 +108,8 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
     onBookmarkClick,
     newNoteData,
     currentNote,
-    addNotes = true,
-    addBookmarks = true,
+    addNotes = false,
+    addBookmarks = false,
     mobile,
     className = "",
     bookmarkBtnText = "addBookmark",

src/components/organisms/CourseAgenda/CourseAgenda.tsx

@@ -1,21 +1,15 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
 import styled, { withTheme } from "styled-components";
 
 import { ExtendableStyledComponent } from "types/component";
-import { IconTitle, ProgressRing, Text, Icon } from "../../../index";
 import { RecursiveLessons } from "./_components/RecursiveLessons";
 import {
   CourseAgendaContextProvider,
   CourseAgendaContextProviderProps,
   useCourseAgendaContext,
 } from "./_components/context";
 
-interface CourseAgendaContentProps extends ExtendableStyledComponent {
-  mobile?: boolean;
-}
-
-type CourseAgendaProps = CourseAgendaContentProps &
+type CourseAgendaProps = ExtendableStyledComponent &
   Omit<CourseAgendaContextProviderProps, "children">;
 
 const StyledSection = styled("section")`
@@ -52,31 +46,13 @@ const StyledSection = styled("section")`
   }
 `;
 
-const CourseAgendaContent: React.FC<CourseAgendaContentProps> = ({
-  mobile = false,
+const CourseAgendaContent: React.FC<ExtendableStyledComponent> = ({
   className = "",
 }) => {
-  const { t } = useTranslation();
-  const { percentage, lessons } = useCourseAgendaContext();
+  const { lessons } = useCourseAgendaContext();
 
   return (
     <StyledSection className={`wellms-component ${className}`}>
-      {!mobile && (
-        <header>
-          <IconTitle
-            level={5}
-            as="h1"
-            icon={<Icon name="program" />}
-            title={t<string>("Course.Agenda")}
-          />
-          <div>
-            <Text mode="secondary" size="14" noMargin>
-              {t<string>("Course.Finished")} {percentage}%
-            </Text>
-            <ProgressRing percentage={percentage} />
-          </div>
-        </header>
-      )}
       <ul className="lessons__list">
         <RecursiveLessons lessons={lessons} />
       </ul>
@@ -86,11 +62,10 @@ const CourseAgendaContent: React.FC<CourseAgendaContentProps> = ({
 
 export const CourseAgenda: React.FC<CourseAgendaProps> = ({
   className,
-  mobile,
   ...contextProps
 }) => (
   <CourseAgendaContextProvider {...contextProps}>
-    <CourseAgendaContent className={className} mobile={mobile} />
+    <CourseAgendaContent className={className} />
   </CourseAgendaContextProvider>
 );
 

src/components/organisms/CourseAgenda/_components/context.tsx

@@ -15,7 +15,6 @@ interface SharedContextData {
 
   onMarkFinished: (topic: API.Topic) => void;
   onTopicClick: (topic: API.Topic) => void;
-  onNextTopicClick: () => void;
   onCourseFinished: () => void;
 }
 
@@ -49,7 +48,6 @@ const CourseAgendaContext = React.createContext<CourseAgendaContextData>({
 
   onMarkFinished: () => console.warn("INITIAL STATE!"),
   onTopicClick: () => console.warn("INITIAL STATE!"),
-  onNextTopicClick: () => console.warn("INITIAL STATE!"),
   onCourseFinished: () => console.warn("INITIAL STATE!"),
 });
 
@@ -71,7 +69,6 @@ export const CourseAgendaContextProvider: React.FC<
   areAllTopicsUnlocked,
   availableTopicsIds,
   onTopicClick,
-  onNextTopicClick,
   onMarkFinished,
   onCourseFinished,
 }) => {
@@ -179,7 +176,6 @@ export const CourseAgendaContextProvider: React.FC<
         availableTopicsIds,
         onMarkFinished,
         onTopicClick,
-        onNextTopicClick,
         onCourseFinished,
       }}
     >

src/theme/provider.tsx

@@ -28,6 +28,7 @@ export interface SharedDefaultTheme {
   gray1: string;
   black: string;
   positive: string;
+  positive2: string;
 }
 
 declare module "styled-components" {

src/theme/red.ts

@@ -18,6 +18,7 @@ export const redTheme: DefaultTheme = {
   gray3: colors.disabled,
   gray4: "#F8F8F8",
   positive: "#2CBE69",
+  positive2: "#C9F7DC",
   font: "Lato",
   primaryColor: colors.primary,
   dm__primaryColor: "#EE312F",

src/theme/shared.ts

@@ -19,4 +19,5 @@ export const sharedTheme: SharedDefaultTheme = {
   gray1: "#4A4A4A",
   black: "#000000",
   positive: '#6FC988',
+  positive2: '#C9F7DC',
 };