From d7b050ef7f047f841ffcda96fbdc9857574e97b9 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 21 Jul 2023 17:02:05 +0800
Subject: ...

---
 FrontEnd/src/views/common/Card.css  |  8 +++++---
 FrontEnd/src/views/common/Card.tsx  |  8 ++++++--
 FrontEnd/src/views/common/Page.tsx  | 15 +++++++++++++++
 FrontEnd/src/views/common/index.css |  8 ++++++++
 FrontEnd/src/views/common/theme.css |  5 ++++-
 5 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 FrontEnd/src/views/common/Page.tsx

(limited to 'FrontEnd/src/views/common')

diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index 98cb4cdd..5b3dbbe9 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -1,9 +1,11 @@
 .cru-card {
+  border: solid 1px;
   border-radius: var(--cru-card-border-radius);
-  background-color: var(--cru-primary-container-color);
+  background-color: var(--cru-key-container-color);
+  border-color: var(--cru-key-container-color);
   transition: all 0.3s;
 }
 
 .cru-card:hover {
-  border-color: var(--cru-primary-1-color);
-}
+  border-color: var(--cru-key-1-color);
+}
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/Card.tsx b/FrontEnd/src/views/common/Card.tsx
index 5ff89b61..35e605af 100644
--- a/FrontEnd/src/views/common/Card.tsx
+++ b/FrontEnd/src/views/common/Card.tsx
@@ -1,22 +1,26 @@
 import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
+import { ThemeColor } from "./common";
 import "./Card.css";
 
 interface CardProps extends ComponentPropsWithoutRef<"div"> {
-  containerRef?: Ref<HTMLDivElement> | null;
+  containerRef?: Ref<HTMLDivElement>;
+  color?: ThemeColor;
 }
 
 export default function Card({
+  color,
   className,
   children,
   containerRef,
   ...otherProps
 }: CardProps) {
+  color = color ?? "primary";
   return (
     <div
       ref={containerRef}
-      className={classNames("cru-card", className)}
+      className={classNames("cru-card", `cru-${color}`, className)}
       {...otherProps}
     >
       {children}
diff --git a/FrontEnd/src/views/common/Page.tsx b/FrontEnd/src/views/common/Page.tsx
new file mode 100644
index 00000000..86fdb2f5
--- /dev/null
+++ b/FrontEnd/src/views/common/Page.tsx
@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, Ref } from "react";
+import classNames from "classnames";
+
+interface PageProps extends ComponentPropsWithoutRef<"div"> {
+  noTopPadding?: boolean;
+  pageRef?: Ref<HTMLDivElement>;
+}
+
+export default function Page({ noTopPadding, pageRef, className, children }: PageProps) {
+  return (
+    <div ref={pageRef} className={classNames(className, "cru-page", noTopPadding && "cru-page-no-top-padding")}>
+      {children}
+    </div>
+  );
+}
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index eb82c4bf..1f9b5086 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -13,6 +13,14 @@ body {
   line-height: 1.2;
 }
 
+.cru-page {
+  padding: var(--cru-page-padding);
+}
+
+.cru-page-no-top-padding {
+  padding-top: 0;
+}
+
 .cru-text-center {
   text-align: center;
 }
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
index 3ad45996..6478ed7a 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/views/common/theme.css
@@ -2,5 +2,8 @@
 
 :root {
   --cru-default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --cru-page-padding: 1em 2em;
   --cru-card-border-radius: 4px;
-}
\ No newline at end of file
+
+  --cru-secondary-text-color: var(--cru-surface-on-color);
+}
-- 
cgit v1.2.3