From f5dfd52f6efece2f4cad227044ecf4dd66301bbc Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Aug 2023 21:36:58 +0800
Subject: ...

---
 FrontEnd/src/components/list/ListContainer.css     |  4 ++++
 FrontEnd/src/components/list/ListContainer.tsx     | 23 ++++++++++++++++++++++
 FrontEnd/src/components/list/ListItemContainer.css |  3 +++
 FrontEnd/src/components/list/ListItemContainer.tsx | 23 ++++++++++++++++++++++
 FrontEnd/src/components/list/index.ts              |  4 ++++
 5 files changed, 57 insertions(+)
 create mode 100644 FrontEnd/src/components/list/ListContainer.css
 create mode 100644 FrontEnd/src/components/list/ListContainer.tsx
 create mode 100644 FrontEnd/src/components/list/ListItemContainer.css
 create mode 100644 FrontEnd/src/components/list/ListItemContainer.tsx
 create mode 100644 FrontEnd/src/components/list/index.ts

(limited to 'FrontEnd/src/components/list')

diff --git a/FrontEnd/src/components/list/ListContainer.css b/FrontEnd/src/components/list/ListContainer.css
new file mode 100644
index 00000000..53781834
--- /dev/null
+++ b/FrontEnd/src/components/list/ListContainer.css
@@ -0,0 +1,4 @@
+.cru-list-container {
+  border: 1px solid var(--cru-clickable-primary-normal-color);
+  border-radius: 5px;
+}
diff --git a/FrontEnd/src/components/list/ListContainer.tsx b/FrontEnd/src/components/list/ListContainer.tsx
new file mode 100644
index 00000000..aa00d12c
--- /dev/null
+++ b/FrontEnd/src/components/list/ListContainer.tsx
@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, forwardRef, Ref } from "react";
+import classNames from "classnames";
+
+import "./ListContainer.css"
+
+function _ListContainer(
+  { className, children, ...otherProps }: ComponentPropsWithoutRef<"div">,
+  ref: Ref<HTMLDivElement>,
+) {
+  return (
+    <div
+      ref={ref}
+      className={classNames("cru-list-container", className)}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+}
+
+const ListContainer = forwardRef(_ListContainer);
+
+export default ListContainer;
diff --git a/FrontEnd/src/components/list/ListItemContainer.css b/FrontEnd/src/components/list/ListItemContainer.css
new file mode 100644
index 00000000..8d7afa9f
--- /dev/null
+++ b/FrontEnd/src/components/list/ListItemContainer.css
@@ -0,0 +1,3 @@
+.cru-list-item-container {
+  border: 1px solid var(--cru-clickable-primary-normal-color);
+}
diff --git a/FrontEnd/src/components/list/ListItemContainer.tsx b/FrontEnd/src/components/list/ListItemContainer.tsx
new file mode 100644
index 00000000..315cbd6e
--- /dev/null
+++ b/FrontEnd/src/components/list/ListItemContainer.tsx
@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, forwardRef, Ref } from "react";
+import classNames from "classnames";
+
+import "./ListItemContainer.css";
+
+function _ListItemContainer(
+  { className, children, ...otherProps }: ComponentPropsWithoutRef<"div">,
+  ref: Ref<HTMLDivElement>,
+) {
+  return (
+    <div
+      ref={ref}
+      className={classNames("cru-list-item-container", className)}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+}
+
+const ListItemContainer = forwardRef(_ListItemContainer);
+
+export default ListItemContainer;
diff --git a/FrontEnd/src/components/list/index.ts b/FrontEnd/src/components/list/index.ts
new file mode 100644
index 00000000..e183f7da
--- /dev/null
+++ b/FrontEnd/src/components/list/index.ts
@@ -0,0 +1,4 @@
+import ListContainer from "./ListContainer";
+import ListItemContainer from "./ListItemContainer";
+
+export { ListContainer, ListItemContainer };
-- 
cgit v1.2.3


From 97c3d6f302e236a273d64ddffc632f18ed967cbc Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Aug 2023 01:07:00 +0800
Subject: ...

---
 FrontEnd/src/components/list/ListContainer.tsx     | 2 +-
 FrontEnd/src/components/list/ListItemContainer.css | 6 +++++-
 FrontEnd/src/pages/timeline/TimelineMember.css     | 2 +-
 FrontEnd/src/pages/timeline/TimelineMember.tsx     | 6 +++---
 4 files changed, 10 insertions(+), 6 deletions(-)

(limited to 'FrontEnd/src/components/list')

diff --git a/FrontEnd/src/components/list/ListContainer.tsx b/FrontEnd/src/components/list/ListContainer.tsx
index aa00d12c..c27e67d4 100644
--- a/FrontEnd/src/components/list/ListContainer.tsx
+++ b/FrontEnd/src/components/list/ListContainer.tsx
@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, forwardRef, Ref } from "react";
 import classNames from "classnames";
 
-import "./ListContainer.css"
+import "./ListContainer.css";
 
 function _ListContainer(
   { className, children, ...otherProps }: ComponentPropsWithoutRef<"div">,
diff --git a/FrontEnd/src/components/list/ListItemContainer.css b/FrontEnd/src/components/list/ListItemContainer.css
index 8d7afa9f..49468bc2 100644
--- a/FrontEnd/src/components/list/ListItemContainer.css
+++ b/FrontEnd/src/components/list/ListItemContainer.css
@@ -1,3 +1,7 @@
 .cru-list-item-container {
-  border: 1px solid var(--cru-clickable-primary-normal-color);
+  border-bottom: 1px solid var(--cru-clickable-primary-normal-color);
+}
+
+.cru-list-item-container:last-child {
+  border-bottom: none;
 }
diff --git a/FrontEnd/src/pages/timeline/TimelineMember.css b/FrontEnd/src/pages/timeline/TimelineMember.css
index 93fcffce..3ad74c57 100644
--- a/FrontEnd/src/pages/timeline/TimelineMember.css
+++ b/FrontEnd/src/pages/timeline/TimelineMember.css
@@ -1,7 +1,7 @@
 .timeline-member-item {
   align-items: center;
   display: flex;
-  padding: 0.5em;
+  padding: 0.6em;
 }
 
 .timeline-member-avatar {
diff --git a/FrontEnd/src/pages/timeline/TimelineMember.tsx b/FrontEnd/src/pages/timeline/TimelineMember.tsx
index a25fe6a9..0812016f 100644
--- a/FrontEnd/src/pages/timeline/TimelineMember.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineMember.tsx
@@ -9,7 +9,7 @@ import { getHttpTimelineClient, HttpTimelineInfo } from "~src/http/timeline";
 
 import SearchInput from "~src/components/SearchInput";
 import UserAvatar from "~src/components/user/UserAvatar";
-import Button from "~src/components/button/Button";
+import { IconButton } from "~src/components/button";
 import { ListContainer, ListItemContainer } from "~src/components/list";
 
 import "./TimelineMember.css";
@@ -34,8 +34,8 @@ function TimelineMemberItem({
       </div>
       {onAction ? (
         <div className="timeline-member-action">
-          <Button
-            text={`timeline.member.${add ? "add" : "remove"}`}
+          <IconButton
+            icon={add ? "plus-lg" : "trash"}
             color={add ? "create" : "danger"}
             onClick={() => {
               onAction(user.username);
-- 
cgit v1.2.3