...

8 files changed, 37 insertions, 81 deletions

diff --git a/FrontEnd/src/components/Page.css b/FrontEnd/src/components/Page.css
new file mode 100644
index 00000000..b22d83af
--- /dev/null
+++ b/FrontEnd/src/components/Page.css
@@ -0,0 +1,8 @@
+.cru-page {
+  padding: var(--cru-page-padding);
+}
+
+.cru-page-no-top-padding {
+  padding-top: 0;
+}
+
diff --git a/FrontEnd/src/components/Page.tsx b/FrontEnd/src/components/Page.tsx
index 86fdb2f5..8c9febcc 100644
--- a/FrontEnd/src/components/Page.tsx
+++ b/FrontEnd/src/components/Page.tsx
@@ -1,6 +1,8 @@
 import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
+import "./Page.css";
+
 interface PageProps extends ComponentPropsWithoutRef<"div"> {
   noTopPadding?: boolean;
   pageRef?: Ref<HTMLDivElement>;
diff --git a/FrontEnd/src/components/index.css b/FrontEnd/src/components/index.css
index 32e762cb..de156e0e 100644
--- a/FrontEnd/src/components/index.css
+++ b/FrontEnd/src/components/index.css
@@ -13,69 +13,17 @@ body {
   line-height: 1.2;

 }

 

-.cru-page {

-  padding: var(--cru-page-padding);

+textarea {

+  transition: border-color 0.3s;

+  border-color: var(--cru-text-minor-color);

 }

 

-.cru-page-no-top-padding {

-  padding-top: 0;

+textarea:hover {

+  border-color: var(--cru-clickable-primary-hover-color);

 }

 

-.cru-text-center {

-  text-align: center;

-}

-

-.cru-text-end {

-  text-align: end;

-}

-

-.cru-float-left {

-  float: left;

-}

-

-.cru-float-right {

-  float: right;

-}

-

-.cru-align-text-bottom {

-  vertical-align: text-bottom;

-}

-

-.cru-align-middle {

-  vertical-align: middle;

-}

-

-.cru-clearfix::after {

-  clear: both;

-}

-

-.cru-fill-parent {

-  width: 100%;

-  height: 100%;

-}

-

-.cru-avatar {

-  width: 60px;

-  height: 60px;

-}

-

-.cru-avatar.large {

-  width: 100px;

-  height: 100px;

-}

-

-.cru-avatar.small {

-  width: 40px;

-  height: 40px;

-}

-

-.cru-round {

-  border-radius: 50%;

-}

-

-.cru-tab-pages-action-area {

-  display: flex;

-  align-items: center;

+textarea:focus {

+  border-color: var(--cru-clickable-primary-normal-color);

 }

 

 .alert-container {

diff --git a/FrontEnd/src/components/menu/Menu.tsx b/FrontEnd/src/components/menu/Menu.tsx
index c01c6cfb..1a196a69 100644
--- a/FrontEnd/src/components/menu/Menu.tsx
+++ b/FrontEnd/src/components/menu/Menu.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import { MouseEvent, CSSProperties } from "react";
 import classNames from "classnames";
 
 import { useC, Text, ThemeColor } from "../common";
@@ -15,21 +15,21 @@ export type MenuItem =
       text: Text;
       icon?: string;
       color?: ThemeColor;
-      onClick: () => void;
+      onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     };
 
 export type MenuItems = MenuItem[];
 
 export type MenuProps = {
   items: MenuItems;
-  onItemClicked?: () => void;
+  onItemClick?: (e: MouseEvent<HTMLButtonElement>) => void;
   className?: string;
   style?: CSSProperties;
 };
 
 export default function Menu({
   items,
-  onItemClicked,
+  onItemClick,
   className,
   style,
 }: MenuProps) {
@@ -46,9 +46,9 @@ export default function Menu({
             <button
               key={index}
               className={`cru-menu-item cru-clickable-${color ?? "primary"}`}
-              onClick={() => {
-                onClick();
-                onItemClicked?.();
+              onClick={(e) => {
+                onClick?.(e);
+                onItemClick?.(e);
               }}
             >
               {icon != null && <Icon color={color} icon={icon} />}
diff --git a/FrontEnd/src/components/menu/PopupMenu.tsx b/FrontEnd/src/components/menu/PopupMenu.tsx
index 9d90799d..7ac2abfe 100644
--- a/FrontEnd/src/components/menu/PopupMenu.tsx
+++ b/FrontEnd/src/components/menu/PopupMenu.tsx
@@ -58,8 +58,9 @@ export default function PopupMenu({
           >
             <Menu
               items={items}
-              onItemClicked={() => {
+              onItemClick={(e) => {
                 setShow(false);
+                e.stopPropagation();
               }}
             />
           </div>,
diff --git a/FrontEnd/src/components/tab/TabBar.css b/FrontEnd/src/components/tab/TabBar.css
index 09d48c59..dc6970c7 100644
--- a/FrontEnd/src/components/tab/TabBar.css
+++ b/FrontEnd/src/components/tab/TabBar.css
@@ -1,30 +1,24 @@
 .cru-tab-bar {

-  border-bottom: var(--cru-clickable-normal-color) 1px solid;

   display: flex;

 }

 

 .cru-tab-bar-tab-area {

   display: flex;

   align-items: center;

-  gap: 0.5em;

-  border: var(--cru-clickable-normal-color) 1px solid;

-  border-bottom: none;

-  border-top-left-radius: 5px;

-  border-top-right-radius: 5px;

-  padding: 0.2em 0.5em;

+  border: var(--cru-clickable-normal-color) 1.6px solid;

+  border-radius: 3px;

+  overflow: hidden;

 }

 

 .cru-tab-bar-item {

-  color: var(--cru-clickable-normal-color);

-  transition: all 0.5s;

-  border-radius: 5px;

+  color: var(--cru-text-minor-color);

+  transition: all 0.2s;

   cursor: pointer;

   padding: 0.3em 1em;

 }

 

 .cru-tab-bar-item:hover {

-  color: var(--cru-push-button-text-color);

-  background-color: var(--cru-clickable-normal-color);

+  color: var(--cru-clickable-normal-color);

 }

 

 .cru-tab-bar-item.active {

diff --git a/FrontEnd/src/components/tab/TabPages.css b/FrontEnd/src/components/tab/TabPages.css
index e69de29b..c07d042e 100644
--- a/FrontEnd/src/components/tab/TabPages.css
+++ b/FrontEnd/src/components/tab/TabPages.css
@@ -0,0 +1,3 @@
+.cru-tab-page-container {
+  padding-top: 0.5em;
+}
diff --git a/FrontEnd/src/components/theme.css b/FrontEnd/src/components/theme.css
index 487ab959..4727d6dd 100644
--- a/FrontEnd/src/components/theme.css
+++ b/FrontEnd/src/components/theme.css
@@ -1,5 +1,5 @@
 :root {
-  --cru-default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --cru-default-font-family: 'Segoe UI', 'DengXian', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --cru-page-padding: 1em 2em;
 
   --cru-border-radius: 4px;
@@ -197,4 +197,4 @@
 .cru-card-danger {
   --cru-card-background-color: var(--cru-card-background-danger-color);
   --cru-card-border-color: var(--cru-card-border-danger-color)
-}
\ No newline at end of file
+}