diff --git a/src/pages/ReadsEditor.module.scss b/src/pages/ReadsEditor.module.scss
index bebd8abd..c102d0c1 100644
--- a/src/pages/ReadsEditor.module.scss
+++ b/src/pages/ReadsEditor.module.scss
@@ -472,7 +472,7 @@
font-size: 16px;
font-weight: 400;
line-height: 22px;
- border-radius: 12px;
+ border-radius: 0;
padding: 0;
width: 100%;
margin: 0;
@@ -488,6 +488,7 @@
.tagList {
display: flex;
gap: 4px;
+ flex-wrap: wrap;
.tag {
display: inline-block;
@@ -566,7 +567,7 @@
.titleImage {
width: 100%;
max-height: 598px;
-
+ border-radius: 12px;
}
.accordionTrigger {
@@ -606,9 +607,9 @@
.sectionButton {
background: none;
color: var(--text-secondary);
- font-size: 18px;
+ font-size: 14px;
font-weight: 600;
- line-height: 20px;
+ line-height: 16px;
border: none;
display: flex;
@@ -619,4 +620,54 @@
&.open {
color: var(--text-primary);
}
+
+ span {
+ margin-right: 4px;
+ }
+}
+
+.metadataPreview {
+ padding-left: 8px;
+ .titlePreview {
+ color: var(--text-primary);
+ font-size: 18px;
+ font-weight: 600;
+ line-height: 20px;
+ }
+
+ .titleImagePreview {
+ max-height: 200px;
+ border-radius: 12px;
+ }
+
+ .summaryPreview {
+ color: var(--text-secondary);
+ font-size: 14px;
+ font-weight: 300;
+ line-height: 26px;
+ }
+
+ .tagPreview {
+ width: 200px;
+ .tagList {
+ display: flex;
+ gap: 4px;
+ flex-wrap: wrap;
+
+ .tag {
+ display: inline-block;
+ color: var(--text-secondary);
+ font-size: 8px;
+ font-weight: 400;
+ line-height: 10px;
+ background-color: var(--background-input);
+ padding: 6px 10px;
+ border-radius: 12px;
+ width: fit-content;
+ margin-block: 2px;
+ margin-right: 4px;
+ cursor: pointer;
+ }
+ }
+ }
}
diff --git a/src/pages/ReadsEditor.tsx b/src/pages/ReadsEditor.tsx
index b0889a03..391ebe99 100644
--- a/src/pages/ReadsEditor.tsx
+++ b/src/pages/ReadsEditor.tsx
@@ -331,9 +331,48 @@ const ReadsEditor: Component = () => {
setAccordionSection((as) => [...as, 'metadata']);
}}
>
+ Show}
+ >
+ Hide
+
Metadata
+
+
+
+