3 files changed, 20 insertions, 9 deletions
diff --git a/FrontEnd/src/views/common/dailog/Dialog.css b/FrontEnd/src/views/common/dailog/Dialog.css
index c1209d99..67bfe2a9 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.css
+++ b/FrontEnd/src/views/common/dailog/Dialog.css
@@ -8,13 +8,16 @@
   background-color: rgba(255, 255, 255, 0.92);
 
   display: flex;
-  justify-content: center;
-  align-items: center;
+  padding: 2em 0;
+
+  overflow: auto;
 }
 
 .cru-dialog-container {
   max-width: 100%;
 
+  margin: auto;
+
   border: var(--cru-primary-color) 1px solid;
   border-radius: 5px;
   padding: 1.5em;
@@ -27,5 +30,5 @@
 }
 
 .cru-dialog-bottom-area > * {
-  margin: 0 0.5em
+  margin: 0 0.5em;
 }
diff --git a/FrontEnd/src/views/timeline-common/TimelineMember.css b/FrontEnd/src/views/timeline-common/TimelineMember.css
new file mode 100644
index 00000000..adb78764
--- /dev/null
+++ b/FrontEnd/src/views/timeline-common/TimelineMember.css
@@ -0,0 +1,8 @@
+.timeline-member-item {
+  border: var(--cru-background-1-color) solid;
+  border-width: 0.5px 1px;
+}
+
+.timeline-member-item > div {
+  padding: 0.5em;
+}
diff --git a/FrontEnd/src/views/timeline-common/TimelineMember.tsx b/FrontEnd/src/views/timeline-common/TimelineMember.tsx
index c8f26da7..0ebecbb9 100644
--- a/FrontEnd/src/views/timeline-common/TimelineMember.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelineMember.tsx
@@ -12,22 +12,22 @@ import UserAvatar from "../common/user/UserAvatar";
 import Button from "../common/button/Button";
 import Dialog from "../common/dailog/Dialog";
 
+import "./TimelineMember.css";
+
 const TimelineMemberItem: React.FC<{
   user: HttpUser;
   add?: boolean;
   onAction?: (username: string) => void;
 }> = ({ user, add, onAction }) => {
   return (
-    <div className="container">
+    <div className="container timeline-member-item">
       <div className="row">
         <div className="col col-auto">
-          <UserAvatar username={user.username} className="avatar small" />
+          <UserAvatar username={user.username} className="cru-avatar small" />
         </div>
         <div className="col">
           <div className="row">{user.nickname}</div>
-          <div className="row">
-            <small>{"@" + user.username}</small>
-          </div>
+          <small className="row">{"@" + user.username}</small>
         </div>
         {onAction ? (
           <div className="col col-auto">
@@ -130,7 +130,7 @@ const TimelineMemberUserSearch: React.FC<{
           }
         } else if (userSearchState.type === "error") {
           return (
-            <div className="text-danger">
+            <div className="cru-color-danger">
               {convertI18nText(userSearchState.data, t)}
             </div>
           );