Beautify content card border in dark mode

judgels-client/src/components/ContentCard/ContentCard.jsx

@@ -3,9 +3,15 @@ import classNames from 'classnames';
 
 import './ContentCard.scss';
 
-export function ContentCard({ id, className, elevation, children }) {
+export function ContentCard({ id, secondary, className, elevation, children }) {
   return (
-    <Card id={id} className={classNames(className, 'content-card')} elevation={elevation}>
+    <Card
+      id={id}
+      className={classNames(className, 'content-card', {
+        'content-card--is-secondary': secondary,
+      })}
+      elevation={elevation}
+    >
       {children}
     </Card>
   );

judgels-client/src/components/ContentCard/ContentCard.scss

@@ -5,7 +5,7 @@
   margin-bottom: 10px;
   overflow: auto;
 
-  .bp5-dark & {
+  .bp5-dark &--is-secondary {
     box-shadow: 0 0 0 0.5px $dark-secondary-background-color !important;
   }
 

judgels-client/src/components/ContentCardLink/ContentCardLink.jsx

@@ -3,10 +3,15 @@ import { Link } from 'react-router-dom';
 
 import './ContentCardLink.scss';
 
-export function ContentCardLink({ className, to, elevation, children }) {
+export function ContentCardLink({ secondary, className, to, elevation, children }) {
   // This is basically a <ContentCard /> but with div replaced with a.
   return (
-    <Link className={`bp5-card bp-elevation-${elevation} content-card content-card-link`} to={to}>
+    <Link
+      className={classNames(`bp5-card bp-elevation-${elevation} content-card content-card-link`, {
+        'content-card--is-secondary': secondary,
+      })}
+      to={to}
+    >
       <div className={classNames('content-card-link__content', className)}>{children}</div>
     </Link>
   );

judgels-client/src/components/ContentCardList/ContentCardList.jsx

@@ -0,0 +1,5 @@
+import './ContentCardList.scss';
+
+export function ContentCardList({ children }) {
+  return <div className="content-card-list">{children}</div>;
+}

judgels-client/src/components/ContentCardList/ContentCardList.scss

@@ -0,0 +1,19 @@
+.content-card-list {
+  .content-card {
+    margin-bottom: 1px;
+
+    &:first-of-type {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:not(:first-of-type):not(:last-of-type) {
+      border-radius: 0;
+    }
+
+    &:last-of-type {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+}

judgels-client/src/components/ProblemSetProblemCard/ProblemSetProblemCard.jsx

@@ -66,7 +66,7 @@ export function ProblemSetProblemCard({ problemSet, problem, showAlias, problemN
   };
 
   return (
-    <ContentCardLink to={`/problems/${problemSet.slug}/${problem.alias}`} className="problemset-problem-card">
+    <ContentCardLink secondary to={`/problems/${problemSet.slug}/${problem.alias}`} className="problemset-problem-card">
       <h4 data-key="name">
         {showAlias && <>{problem.alias}. </>}
         {problemName}

judgels-client/src/components/ProblemWorksheetCard/Bundle/ProblemStatementCard/ProblemStatementCard.jsx

@@ -78,7 +78,7 @@ export function ProblemStatementCard({
   };
 
   return (
-    <ContentCard>
+    <ContentCard secondary>
       {showTitle && (
         <h2 className="bundle-problem-statement__name">
           {alias ? `${alias}. ` : ''}

judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx

@@ -33,7 +33,7 @@ export function ProblemStatementCard({
   };
 
   return (
-    <ContentCard>
+    <ContentCard secondary>
       {showTitle && (
         <h2 className="programming-problem-statement__name">
           {alias ? `${alias}. ` : ''}

judgels-client/src/routes/contests/contests/ContestCard/ContestCard.jsx

@@ -13,7 +13,7 @@ export class ContestCard extends PureComponent {
     const { contest, role } = this.props;
 
     return (
-      <ContentCardLink to={`/contests/${contest.slug}`}>
+      <ContentCardLink secondary to={`/contests/${contest.slug}`}>
         <h4 className="contest-card-name">
           {contest.name}
           <div className="contest-card-role">

judgels-client/src/routes/contests/contests/single/problems/ContestProblemCard/ContestProblemCard.jsx

@@ -24,7 +24,7 @@ export function ContestProblemCard({
   };
 
   return (
-    <ContentCardLink className="contest-problem-card" to={`/contests/${contest.slug}/problems/${alias}`}>
+    <ContentCardLink secondary className="contest-problem-card" to={`/contests/${contest.slug}/problems/${alias}`}>
       <div className=" float-left">
         <span data-key="name">
           {alias}. {problemName}

judgels-client/src/routes/problems/problemsets/ProblemSetCard/ProblemSetCard.jsx

@@ -29,7 +29,7 @@ export function ProblemSetCard({ problemSet, archiveDescription, progress, profi
   };
 
   return (
-    <ContentCardLink to={`/problems/${problemSet.slug}`}>
+    <ContentCardLink secondary to={`/problems/${problemSet.slug}`}>
       <h4 className="problemset-card__name">
         {problemSet.name}
         {renderProgress()}