improved post item style

Nerimity · Nov 17, 2024 · daaf85d · daaf85d
1 parent fc6738b
commit daaf85d
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 26 deletions.
diff --git a/src/components/DashboardPane.tsx b/src/components/DashboardPane.tsx
@@ -214,20 +214,32 @@ function PostsContainer() {
   });
 
   return (
-    <FlexColumn>
-      <Text
+    <FlexColumn
+      class={css`
+        background-color: rgba(255, 255, 255, 0.07);
+        border-radius: 8px;
+        margin-left: 6px;
+        margin-right: 6px;
+      `}
+    >
+      {/* <Text
         size={18}
         style={{
           "margin-left": "5px",
           "margin-bottom": "5px",
-          "margin-top": "20px",
+          "margin-top": "4px",
         }}
       >
         {t("dashboard.posts")}
-      </Text>
+      </Text> */}
       <FlexRow
         gap={5}
-        style={{ "margin-bottom": "5px", "margin-left": "5px", height: "28px" }}
+        style={{
+          "margin-bottom": "5px",
+          "margin-left": "5px",
+          height: "28px",
+          "margin-top": "6px",
+        }}
       >
         <ItemContainer
           class={TabStyle}

diff --git a/src/components/PostsArea.tsx b/src/components/PostsArea.tsx
@@ -421,9 +421,12 @@ const PostOuterContainer = styled(FlexColumn)`
   scroll-margin-top: 50px;
   padding: 10px;
 
-  border-radius: 8px;
+  border-bottom: solid 1px rgba(255, 255, 255, 0.2);
+
+  &:first-child {
+    border-top: solid 1px rgba(255, 255, 255, 0.2);
+  }
 
-  background: rgba(255, 255, 255, 0.06);
   &:hover {
     background: rgba(255, 255, 255, 0.07);
   }
@@ -638,7 +641,7 @@ export function PostsArea(props: {
           ]}
         />
       </Show>
-      <FlexColumn gap={2} ref={postsContainerRef}>
+      <FlexColumn ref={postsContainerRef}>
         <For each={cachedReplies()}>
           {(post, i) => (
             <PostItem
@@ -653,6 +656,12 @@ export function PostsArea(props: {
           <For each={Array(10).fill(0)}>
             {() => (
               <Skeleton.Item
+                class={css`
+                  && {
+                    border-radius: 0;
+                    border-top: solid 1px rgba(255, 255, 255, 0.2);
+                  }
+                `}
                 onInView={() => loadMore()}
                 height="100px"
                 width="100%"
@@ -735,6 +744,12 @@ function PostNotification(props: { notification: RawPostNotification }) {
                   background: none;
                 }
                 box-shadow: none;
+                &::before {
+                  border: none;
+                }
+                &:first-child {
+                  border: none;
+                }
               }
             `}
           />
@@ -894,7 +909,7 @@ export function PostNotificationsArea(props: { style?: JSX.CSSProperties }) {
     setNotifications(fetchNotifications);
   });
   return (
-    <PostsContainer gap={6} style={props.style}>
+    <PostsContainer style={props.style}>
       <For each={notifications()}>
         {(notification) => <PostNotification notification={notification} />}
       </For>
@@ -961,7 +976,7 @@ export function ViewPostModal(props: { close(): void }) {
       </MetaTitle>
       <FlexColumn style={{ overflow: "auto", height: "100%" }}>
         <Show when={post()}>
-          <FlexColumn gap={6}>
+          <FlexColumn>
             <For each={commentToList()}>
               {(post) => <PostItem showFullDate post={post!} />}
             </For>

diff --git a/src/components/floating-profile/FloatingProfile.module.scss b/src/components/floating-profile/FloatingProfile.module.scss
@@ -100,6 +100,9 @@ body .postItemContainer {
   border-radius: 6px;
   background-color: rgba(255, 255, 255, 0.05);
   box-shadow: none;
+  &::before {
+    border: none;
+  }
 }
 
 .roleContainer {

diff --git a/src/components/post-area/PostItem.module.scss b/src/components/post-area/PostItem.module.scss
@@ -1,19 +1,36 @@
 .postContainer {
+  position: relative;
   display: flex;
   flex-direction: column;
   padding: 10px;
-  border-radius: 8px;
-
-  background: rgba(255, 255, 255, 0.06);
+
   cursor: pointer;
   gap: 10px;
   scroll-margin-top: 50px;
   &:hover {
-    background: rgba(255, 255, 255, 0.07);
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  &:before {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-bottom: solid 1px rgba(255, 255, 255, 0.2);
+    content: "";
+  }
+  &:first-child {
+    border-top: solid 1px rgba(255, 255, 255, 0.2);
   }
+
+
   &.disableClick {
     cursor: initial;
   }
+
+
+
+
 }
 
 .postInnerContainer {

diff --git a/src/components/profile-pane/styles.module.scss b/src/components/profile-pane/styles.module.scss
@@ -199,18 +199,6 @@
 
   white-space: nowrap;
 
-  :global .postItem {
-    position: relative;
-    background: transparent;
-    &:before {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      border-bottom: solid 1px rgba(255, 255, 255, 0.2);
-      content: "";
-    }
-  }
 }
 
 .SidePaneItem {