diff --git a/daily-thought-frontend/src/components/post/HiddenPost.tsx b/daily-thought-frontend/src/components/post/HiddenPost.tsx index cb91e1440fe85b36714101f2046f6021beeb81db..b0602f631f7319c3151901615292c1ac73c51aab 100644 --- a/daily-thought-frontend/src/components/post/HiddenPost.tsx +++ b/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> ) } diff --git a/daily-thought-frontend/src/styles/HiddenPost.module.css b/daily-thought-frontend/src/styles/HiddenPost.module.css index ee60577a30584320e72c6ce94fea42caefd0e7e8..7a55be0565dea9d491271f20fa8a0352a501f554 100644 --- a/daily-thought-frontend/src/styles/HiddenPost.module.css +++ b/daily-thought-frontend/src/styles/HiddenPost.module.css @@ -1,19 +1,30 @@ -.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