add ignored option, closes #62

src/components/Dashboard/ModuleLink.tsx

@@ -108,43 +108,40 @@ const ModuleLink = ({ link }: { link: ModuleLinkInfo }) => {
 
   let lineColorStyle = tw`bg-gray-200`;
   let dotColorStyle = tw`bg-white`;
-  let activeTextStyle = tw`text-blue-700 font-medium`;
-
-  // if (isActive) {
-  //   lineColorStyle = tw`bg-blue-700`;
-  //   dotColorStyle = tw`bg-blue-700`;
-  // }
 
   if (progress === 'Reading') {
     lineColorStyle = tw`bg-yellow-400`;
     dotColorStyle = tw`bg-yellow-400`;
-    activeTextStyle = tw`text-yellow-700 font-medium`;
   } else if (progress === 'Practicing') {
     lineColorStyle = tw`bg-orange-400`;
     dotColorStyle = tw`bg-orange-400`;
-    activeTextStyle = tw`text-orange-700 font-medium`;
   } else if (progress === 'Complete') {
     lineColorStyle = tw`bg-green-400`;
     dotColorStyle = tw`bg-green-400`;
-    activeTextStyle = tw`text-green-700 font-medium`;
   } else if (progress === 'Skipped') {
     lineColorStyle = tw`bg-blue-300`;
     dotColorStyle = tw`bg-blue-300`;
-    activeTextStyle = tw`text-blue-700 font-medium`;
+  } else if (progress === 'Ignored') {
+    lineColorStyle = tw`bg-gray-100`;
+    dotColorStyle = tw`bg-gray-100`;
   }
 
   return (
     <LinkWithProgress
       lineColorStyle={lineColorStyle}
       dotColorStyle={dotColorStyle}
-      small={progress === 'Not Started'}
+      small={progress === 'Not Started' || progress === 'Ignored'}
     >
       <Link to={link.url}>
         <StyledLink
           dotColorStyle={dotColorStyle === tw`bg-gray-200`}
           className="group"
         >
-          <p className="text-gray-600 group-hover:text-blue-800 transition duration-150 ease-in-out">
+          <p
+            className={`${
+              progress === 'Ignored' ? 'text-gray-400' : 'text-gray-600'
+            } group-hover:text-blue-800 transition duration-150 ease-in-out`}
+          >
             {link.title}
           </p>
           <p className="block text-sm text-gray-400 group-hover:text-blue-700 transition duration-150 ease-in-out">

src/components/ModuleLayout/SidebarNav/ItemLink.tsx

@@ -48,8 +48,7 @@ const LinkWithProgress = styled.span`
 const StyledLink = styled.span`
   ${tw`focus:outline-none transition ease-in-out duration-150 hover:text-blue-700 hover:bg-blue-50 focus:bg-blue-100 flex items-center pl-12 pr-4 py-3 text-sm leading-5`}
 
-  ${({ isActive, activeTextStyle }) =>
-    isActive ? activeTextStyle : tw`text-gray-600`}
+  ${({ textStyle }) => textStyle}
   
 
   &::before {
@@ -116,6 +115,10 @@ const ItemLink = ({ link }: { link: ModuleLinkInfo }) => {
     lineColorStyle = tw`bg-blue-300`;
     dotColorStyle = tw`bg-blue-300`;
     activeTextStyle = tw`text-blue-700 font-medium`;
+  } else if (progress === 'Ignored') {
+    lineColorStyle = tw`bg-gray-100`;
+    dotColorStyle = tw`bg-gray-100`;
+    activeTextStyle = tw`text-gray-400 font-medium`;
   }
 
   return (
@@ -128,7 +131,13 @@ const ItemLink = ({ link }: { link: ModuleLinkInfo }) => {
           isActive={isActive}
           ref={itemRef}
           dotColorStyle={dotColorStyle === tw`bg-gray-200`}
-          activeTextStyle={activeTextStyle}
+          textStyle={
+            isActive
+              ? activeTextStyle
+              : progress === 'Ignored'
+              ? tw`text-gray-400`
+              : tw`text-gray-600`
+          }
         >
           {link.title}
         </StyledLink>

src/components/markdown/ProblemsList/ProblemStatusCheckbox.tsx

@@ -23,7 +23,7 @@ export default function ProblemStatusCheckbox({
     'Not Attempted': 'bg-gray-200',
     Solving: 'bg-yellow-300',
     Solved: 'bg-green-500',
-    "Can't Solve": 'bg-red-500',
+    Ignored: 'bg-red-100',
     Skipped: 'bg-blue-300',
   };
   const handleClick = () => {

src/models/module.ts

@@ -46,7 +46,8 @@ export type ModuleProgress =
   | 'Reading'
   | 'Practicing'
   | 'Complete'
-  | 'Skipped';
+  | 'Skipped'
+  | 'Ignored';
 
 export const ModuleProgressOptions: ModuleProgress[] = [
   'Not Started',
@@ -54,4 +55,5 @@ export const ModuleProgressOptions: ModuleProgress[] = [
   'Practicing',
   'Complete',
   'Skipped',
+  'Ignored',
 ];

src/models/problem.ts

@@ -72,10 +72,10 @@ export type ProblemProgress =
   | 'Not Attempted'
   | 'Solving'
   | 'Solved'
-  | "Can't Solve"
-  | 'Skipped';
+  | 'Skipped'
+  | 'Ignored';
 
-let options = ['Not Attempted', 'Solving', 'Solved', "Can't Solve", 'Skipped'];
+let options = ['Not Attempted', 'Solving', 'Solved', 'Skipped', 'Ignored'];
 
 let NEXT_PROBLEM_STATUS: { [key in ProblemProgress]?: ProblemProgress } = {};
 let PREV_PROBLEM_STATUS: { [key in ProblemProgress]?: ProblemProgress } = {};