update look of nested requirements

pennlabs · Apr 11, 2024 · b46eb88 · b46eb88
1 parent 38f2f5c
commit b46eb88
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 21 deletions.
diff --git a/frontend/degree-plan/components/Requirements/ReqPanel.tsx b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
@@ -37,11 +37,11 @@ const DegreeHeaderContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 1rem;
-  font-weight: 500;
+  font-size: 1.1rem;
+  font-weight: 600;
   background-color: var(--primary-color-xx-dark);
   color: #FFF;
-  padding: 0.75rem 1.25rem;
+  padding: 1rem 1.25rem;
   border-radius: var(--req-item-radius);
 `
 
@@ -138,6 +138,7 @@ interface RuleTreeInternalNode extends RuleTreeBaseNode {
   type: "INTERNAL_NODE";
   num?: number;
   children: RuleTree[];
+  depth: number;
 }
 export type RuleTree = RuleTreeLeaf | RuleTreeInternalNode;
 
@@ -146,8 +147,9 @@ interface RuleProps {
     rule: Rule;
     rulesToFulfillments: { [ruleId: string]: Fulfillment[] };
     activeDegreePlanId: number;
+    depth: number;
 }
-const computeRuleTree = ({ activeDegreePlanId, rule, rulesToFulfillments }: RuleProps): RuleTree => {
+const computeRuleTree = ({ activeDegreePlanId, rule, rulesToFulfillments, depth = 0 }: RuleProps): RuleTree => {
   if (rule.q) { // Rule leaf
     const fulfillmentsForRule: Fulfillment[] = rulesToFulfillments[rule.id] || [];
     const cus = fulfillmentsForRule.reduce((acc, f) => acc + (f.course?.credits || 1), 0); // default to 1 cu 
@@ -156,9 +158,9 @@ const computeRuleTree = ({ activeDegreePlanId, rule, rulesToFulfillments }: Rule
     return { activeDegreePlanId, type: "LEAF", progress, cus, num, rule, fulfillments: fulfillmentsForRule }
   }
 
-  const children = rule.rules.map((child) => computeRuleTree({ activeDegreePlanId, rule: child, rulesToFulfillments })) 
+  const children = rule.rules.map((child) => computeRuleTree({ activeDegreePlanId, rule: child, rulesToFulfillments, depth: depth + 1 })) 
   const progress = children.reduce((acc, { progress }) => (progress == 1 ? 1 : 0) + acc, 0) / Math.min(children.length, rule.num || Infinity);
-  return { num: rule.num || undefined, activeDegreePlanId, type: "INTERNAL_NODE", children, progress, rule } // internal node
+  return { num: rule.num || undefined, activeDegreePlanId, type: "INTERNAL_NODE", children, progress, rule, depth } // internal node
 }
 
 

diff --git a/frontend/degree-plan/components/Requirements/Rule.tsx b/frontend/degree-plan/components/Requirements/Rule.tsx
@@ -8,34 +8,46 @@ import { useDrop } from 'react-dnd';
 import { ItemTypes } from '../dnd/constants';
 import { DarkBlueBackgroundSkeleton } from "../FourYearPlan/PanelCommon";
 import { DegreeYear, RuleTree } from './ReqPanel';
-import assert from 'assert';
 import SatisfiedCheck from '../FourYearPlan/SatisfiedCheck';
 
-const RuleTitleWrapper = styled.div`
-    background-color: var(--primary-color);
+const RuleTitleWrapper = styled.div<{
+  $depth: number  // depth of the nesting of the rule
+}>`
+    background-color: ${({ $depth }) => (
+      $depth % 2 == 0 ?
+      "var(--primary-color)"
+      : "var(--pdp-green-light)"
+    )};
     position: relative;
     border-radius: var(--req-item-radius);
 `
 
-const ProgressBar = styled.div<{$progress: number}>`
+const RuleTitleProgressBar = styled.div<{
+  $progress: number,
+  $depth: number  // depth of the nesting of the rule
+}>`
     width: ${props => props.$progress * 100}%;
     height: 100%;
     position: absolute;
-    background-color: var(--primary-color-dark);
+    background-color: ${({ $depth }) => (
+      $depth % 2 == 0 ?
+      "var(--primary-color-dark)"
+      : "var(--pdp-green-dark)"
+    )};
     border-top-left-radius: .3rem;
     border-bottom-left-radius: .3rem;
 `
 
-const RuleTitle = styled.div`
+const RuleTitle = styled.div<{ $depth: number }>`
   position: relative;
   font-size: 1rem;
-  font-weight: 500;
+  font-weight: ${({ $depth }) => $depth > 0 ? 500 : 600};
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   color: #575757;
-  padding: 0.5rem 1.25rem;
+  padding: ${({ $depth }) => 0.9 - .3 * $depth}rem 1.25rem;
   margin-bottom: 0.5rem;
 `
 
@@ -70,7 +82,7 @@ const Row = styled.div`
 `
 
 const Indented = styled.div`
-  margin-left: .75rem;
+  margin-left: .3rem;
   margin-bottom: .5rem;
 `
 
@@ -125,9 +137,9 @@ export const SkeletonRule: React.FC<React.PropsWithChildren> = ({ children }) =>
           </div>
       </RuleLeafWrapper>
       :
-      <RuleTitleWrapper>
-        <ProgressBar $progress={0}></ProgressBar>
-        <RuleTitle>
+      <RuleTitleWrapper $depth={1}>
+        <RuleTitleProgressBar $progress={0} $depth={1}></RuleTitleProgressBar>
+        <RuleTitle $depth={1}>
           <Row>
             <DarkBlueBackgroundSkeleton width="10em" />
             <DarkBlueBackgroundSkeleton width="7em" />
@@ -219,9 +231,9 @@ const RuleComponent = (ruleTree : RuleTree) => {
 
     return (
       <>
-        <RuleTitleWrapper onClick={() => setCollapsed(!collapsed)}>
-          <ProgressBar $progress={progress}></ProgressBar>
-          <RuleTitle>
+        <RuleTitleWrapper $depth={ruleTree.depth} onClick={() => setCollapsed(!collapsed)}>
+          <RuleTitleProgressBar $progress={progress} $depth={ruleTree.depth}></RuleTitleProgressBar>
+          <RuleTitle $depth={ruleTree.depth}>
             <div>
               {rule.title}
               {" "}

diff --git a/frontend/degree-plan/styles/globals.css b/frontend/degree-plan/styles/globals.css
@@ -22,6 +22,8 @@
   --background-blue-grey:#F7F9FC;
   --background-light-grey: #F8F8F8;
   --background-grey: #f3f3f3;
+  --pdp-green-light: #E9F3F3;
+  --pdp-green-dark: #CBE2E2;
 
   /* Edit mode */
   --plus-button-color: #9FB5EF;