...

2 files changed, 19 insertions, 23 deletions

diff --git a/FrontEnd/src/components/Skeleton.css b/FrontEnd/src/components/Skeleton.css
index a571eead..0f78d3b5 100644
--- a/FrontEnd/src/components/Skeleton.css
+++ b/FrontEnd/src/components/Skeleton.css
@@ -4,11 +4,17 @@
 

 .cru-skeleton-line {

   height: 1em;

-  background-color: hsl(0, 0%, 90%);

+  background-color: hsl(0 0% 90%);

   margin: 0.7em 0;

   border-radius: 0.2em;

 }

 

-.cru-skeleton-line.last {

+@media (prefers-color-scheme: dark) {

+  .cru-skeleton-line {

+    background-color: hsl(0 0% 20%);

+  }

+}

+

+.cru-skeleton-line:last-child {

   width: 50%;

 }

diff --git a/FrontEnd/src/components/Skeleton.tsx b/FrontEnd/src/components/Skeleton.tsx
index 3b149db9..03f80df5 100644
--- a/FrontEnd/src/components/Skeleton.tsx
+++ b/FrontEnd/src/components/Skeleton.tsx
@@ -1,32 +1,22 @@
-import * as React from "react";
-import classnames from "classnames";
-import range from "lodash/range";
+import { ComponentPropsWithoutRef } from "react";
+import classNames from "classnames";
+
+import { range } from "~src/utilities";
 
 import "./Skeleton.css";
 
-export interface SkeletonProps {
+interface SkeletonProps extends ComponentPropsWithoutRef<"div"> {
   lineNumber?: number;
-  className?: string;
-  style?: React.CSSProperties;
 }
 
-const Skeleton: React.FC<SkeletonProps> = (props) => {
-  const { lineNumber: lineNumberProps, className, style } = props;
-  const lineNumber = lineNumberProps ?? 3;
+export default function Skeleton(props: SkeletonProps) {
+  const { lineNumber, className, ...otherProps } = props;
 
   return (
-    <div className={classnames(className, "cru-skeleton")} style={style}>
-      {range(lineNumber).map((i) => (
-        <div
-          key={i}
-          className={classnames(
-            "cru-skeleton-line",
-            i === lineNumber - 1 && "last"
-          )}
-        />
+    <div className={classNames(className, "cru-skeleton")} {...otherProps}>
+      {range(lineNumber ?? 3).map((i) => (
+        <div key={i} className="cru-skeleton-line" />
       ))}
     </div>
   );
-};
-
-export default Skeleton;
+}