...

5 files changed, 38 insertions, 6 deletions

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);
+}