Hidden post CSS refactor

daily-thought-frontend/src/components/post/HiddenPost.tsx

@@ -6,24 +6,30 @@ import { User } from "@/types/user";
 
 type HiddenPostProps ={
   User: User;
+  TimeStamp: string;
 }
 
 const HiddenPost: FC<PropsWithChildren<HiddenPostProps>> = ({
-  User
+  User,
+  TimeStamp
 }) => {
-  const shuffledColors = User.Colors.sort((a: string, b: string) => 0.5 - Math.random());
 
   return (
-    <>
-    <Avatar User={User}/>
-      <div className={styles.hiddenCard}>
-        <div className={styles.hiddenCardContent}>
-          <BsEyeSlash size={50}/>
-          <p className={styles.title}>Post Hidden</p>
-          <p className={styles.text}>Post a thought to view</p>
+    <div className={styles.hiddenPost}>
+      <div className={styles.hiddenHeader}>
+        <Avatar User={User} ShowInitial={false}/>
+        <div className={styles.timestamp}>
+          {TimeStamp}
         </div>
       </div>
-    </>
+        <div className={styles.hiddenCard}>
+          <div className={styles.hiddenCardContent}>
+            <BsEyeSlash size={30}/>
+            <p className={styles.title}>Post Hidden</p>
+            <p className={styles.text}>Post a thought to view</p>
+          </div>
+        </div>
+    </div>
   )
 }
 

daily-thought-frontend/src/styles/HiddenPost.module.css

-.hiddenCard {
+.hiddenPost {
   border-radius: 24px;
   margin: 30px;
-  height: 300px;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  /* background: rgba(0, 0, 0, 0.13); */
+  padding: 16px 8px;
+}
+
+.hiddenHeader {
+  height: 56px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.hiddenCard {
+  border-radius: 24px;
+  height: 150px;
   max-height: 300px;
   display: flex;
   justify-content: center;
   align-items: center;
-  /* border: 16px solid transparent;
-  border-image-slice: 1; */
-
-  /* background: rgba(0, 0, 0, 0.13); */
+  margin: 8px 0px 0px 24px;
+  
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
   
-  /*backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px); */
 overflow: hidden;
 }
 
@@ -27,8 +38,18 @@ overflow: hidden;
 
 .title {
   font-weight: bold;
-  font-size: larger;
+  font-size: 1rem;
 }
 
-.text {
+.text{
+  font-size: 0.75rem;
+}
+
+
+.timestamp{
+  font-size: small;
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+  justify-content: end;
 }
\ No newline at end of file