From bca16641ea82ff9f78a1f1c7089944a0a58b396b Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Sun, 12 Mar 2023 19:45:24 +0000
Subject: [PATCH] Hidden post CSS refactor
---
.../src/components/post/HiddenPost.tsx | 26 +++++++-----
.../src/styles/HiddenPost.module.css | 41 ++++++++++++++-----
2 files changed, 47 insertions(+), 20 deletions(-)
diff --git a/daily-thought-frontend/src/components/post/HiddenPost.tsx b/daily-thought-frontend/src/components/post/HiddenPost.tsx
index cb91e144..b0602f63 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 ee60577a..7a55be05 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
--
GitLab