fin design

public/uploads/3/16/note.md

@@ -1,14 +0,0 @@
-
-## Entry - 8:23:28 PM
-
-**Rating:** 3/5  
-
-this is a test
-
-## Entry - 10:05:53 PM
-
-**Rating:** 5/5  
-
-hello
-
----

src/app/Component/preview.jsx

@@ -23,13 +23,16 @@ export default function Preview({daySelected}){
 
     return(
         <div className="Preview" key={preview?.files?.length}>
-            {preview?.files?.map(((el,i)=>(
-                <div key={i} className="imagePreview">
-                <img src={`/uploads/${daySelected}/${el}`}/>
-                </div>
+            <div className="PreviewImages">
+                {preview?.files?.map(((el,i)=>(
+                    <div key={i} className="imagePreviewBlock">
+                    <img src={`/uploads/${daySelected}/${el}`}/>
+                    </div>
 
-            )))}
-            <div>
+                )))}
+            </div>
+
+            <div className="PreviewNote">
             <Markdown>{preview?.note || ""}</Markdown>
             </div>
         </div>

src/app/Component/tracker.jsx

@@ -41,7 +41,7 @@ export default function Tracker({ calendar, setDaySelected }) {
             onClick={() => setDaySelected(dayString)}
             title={`${dayIndex + 1} ${month} (${rating}/5)`}
             className="day"
-            style={{ backgroundColor: getColor(rating) }}
+            style={{ backgroundColor: getColor(Math.floor(rating)) }}
             />
         );
         })}

src/app/Component/upload.jsx

@@ -58,22 +58,31 @@ export default function Upload({setFetchKey, daySelected}){
 
             <DragDrop setPreview={setPreview} file={file} setFile={setFile}/>
 
-            <label htmlFor="rating">Choose rating:</label>
-            <select name="rating" type="select" value={rating} onChange={(e)=>{setRating(e.target.value)}}>
-                <option value="1">1</option>
-                <option value="2">2</option>
-                <option value="3">3</option>
-                <option value="3">4</option>
-                <option value="5">5</option>
-            </select>
+            <div className="input">
+              <label htmlFor="rating">Choose rating:</label>
+              <select name="rating" type="select" value={rating} onChange={(e)=>{setRating(e.target.value)}}>
+                  <option value="1">1</option>
+                  <option value="2">2</option>
+                  <option value="3">3</option>
+                  <option value="4">4</option>
+                  <option value="5">5</option>
+              </select>
+            </div>
 
-            <textarea value={note} onChange={(e)=>{setNote(e.target.value)}}>
+            <div className="input">
+              <label htmlFor="rating">Enter a note</label>
+              <textarea value={note} onChange={(e)=>{setNote(e.target.value)}}>
+              </textarea>
+            </div>
 
-            </textarea>
 
-            <p onClick={()=>{
-                uploadFile()
-            }}>Upload</p>
+            <div className="input">
+              <button onClick={()=>{
+                  uploadFile()
+              }}>Upload</button>
+            </div>
+
+            <div className="separation"></div>
 
         </div>
     )

src/app/style.sass

@@ -1,9 +1,11 @@
+h2
+    margin-bottom: 10px
 .Home
-    display: flex
-    width: 100%
-    padding:2%
-    justify-content: space-between
-    height: 100vh
+  display: flex
+  width: 100%
+  padding: 2%
+  justify-content: space-between
+  align-items: flex-start
 aside
     width: 30%
     height: 100%
@@ -11,6 +13,7 @@ main
     width: 79%
     height: 100%
     padding: 1% 
+    height: 89vh
 .Tracker
     .month
         display: flex
@@ -32,22 +35,78 @@ main
 
 .Upload
     display: flex
+    flex-direction: column
     gap: 5%
-    align-items: center
+    align-items: flex-start
     flex-wrap: wrap
+    gap: 5px
+    margin-bottom: 20px
+    gap: 20px
+    .input
+        display: flex
+        align-items: center
+        gap: 20px
+        width: 100%
+        padding-bottom: 10px
+        label
+            width: 120px
     .preview
-        height: 100px
+        height: 60px
+        
         img
             height: 100%
     select
         height: 40px
+    button
+        margin: auto
+    .separation
+        width: 100%
+        height: 1px
+        display: block
+        background: white
+        animation: leftToRight .5s
 
 .Preview
     display: flex
-    flex-wrap: wrap
+    justify-content: space-between
+    margin-inline: 2%
+    padding-inline: 2%
     gap : 5%
-    .imagePreview
-        height: 500px
-        img
-            max-height: 100%
-            object-fit: contain
+    animation: appear .5s
+    border-right: 1px solid white
+    position: relative
+    hr
+        margin-top: 20px
+        margin-bottom: 20px
+        animation: leftToRight .5s
+    &Images
+        width: 87%
+        height: 90vh
+        overflow: scroll
+        -ms-overflow-style: none  
+        scrollbar-width: none 
+        &::-webkit-scrollbar
+            display: none
+        div
+            height: 500px
+            margin-bottom: 50px
+            img
+                height: 100%
+                object-fit: contain
+    &Note
+        min-width: 300px
+
+@keyframes appear 
+    from 
+        opacity: 0
+        transform: translateX(2%)
+    to 
+        opacity: 1
+        transform: translateX(0%)
+
+@keyframes leftToRight 
+    from 
+        width: 0%
+    to 
+        width: 100%
+