...

3 files changed, 36 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;
+}
diff --git a/FrontEnd/src/utilities/index.ts b/FrontEnd/src/utilities/index.ts
index 085f8ae3..7659a8aa 100644
--- a/FrontEnd/src/utilities/index.ts
+++ b/FrontEnd/src/utilities/index.ts
@@ -8,3 +8,20 @@ export function delay(milliseconds: number): Promise<void> {
     }, milliseconds);
   });
 }
+
+export function range(stop: number): number[];
+export function range(start: number, stop: number, step?: number): number[];
+export function range(start: number, stop?: number, step?: number): number[] {
+  if (stop == undefined) {
+    stop = start;
+    start = 0;
+  }
+  if (step == undefined) {
+    step = 1;
+  }
+  const result: number[] = [];
+  for (let i = start; i < stop; i += step) {
+    result.push(i);
+  }
+  return result;
+}