From 714fbc596a6f88431a8586b18ad39d87d95c0388 Mon Sep 17 00:00:00 2001
From: dannyzou18 <dzou3814@gmail.com>
Date: Sun, 12 May 2024 23:56:59 -0700
Subject: [PATCH] styled upload form

---
 src/components/sidebar.rs |   6 +-
 src/components/upload.rs  |  76 +++++++++-----------
 style/main.scss           |   1 +
 style/sidebar.scss        | 146 ++++++++++++++++++++++----------------
 style/upload.scss         | 145 +++++++++++++++++++++++++++++++++++++
 5 files changed, 267 insertions(+), 107 deletions(-)
 create mode 100644 style/upload.scss

diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs
index 9f8fff3..710d634 100644
--- a/src/components/sidebar.rs
+++ b/src/components/sidebar.rs
@@ -17,10 +17,8 @@ pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>, upload_open:
     view! {
         <div class="sidebar-container">
             <div class="sidebar-top-container">
-                <div class="sidebar-top-header-container">
-                    <h2 class="header">LibreTunes</h2>
-                    <UploadBtn dialog_open=upload_open />
-                </div>
+                <h2 class="header">LibreTunes</h2>
+                <UploadBtn dialog_open=upload_open />
                 <div class="buttons" on:click=open_dashboard style={move || if active() {"color: #e1e3e1"} else {""}} >
                     <Icon icon=icondata::OcHomeFillLg />
                     <h1>Dashboard</h1>
diff --git a/src/components/upload.rs b/src/components/upload.rs
index 971a9fc..71c1a61 100644
--- a/src/components/upload.rs
+++ b/src/components/upload.rs
@@ -33,53 +33,45 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 
 	view! {
 		<Show when=open fallback=move || view! {}>
-			<div class="dialog-container" on:click=close_dialog>
-				<dialog open=open on:click=click_cancel_bubble>
-					<div class="dialog-header">
-						<button class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></button>
-						<h1>Upload Song</h1>
+			<div class="upload-container" open=open>
+				<div class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></div>
+				<div class="upload-header">
+					<h1>Upload Song</h1>
+				</div>
+				<Form action="/api/upload" method="POST" enctype=String::from("multipart/form-data") class="upload-form">
+
+					<div class="input-bx">
+						<input type="text" name="title" required class="text-input" required/>
+						<span>Title</span>
+					</div>
+					<div class="input-bx">
+						<input type="text" name="artist_ids" class="text-input" required/>
+						<span>Artists</span>
+					</div>
+					<div class="input-bx">
+						<input type="text" name="album_id" class="text-input" required/>
+						<span>Album ID</span>
+					</div>
+					<div class="input-bx">
+						<input type="number" name="track_number" class="text-input" required/>
+						<span>Track Number</span>
 					</div>
 
-					<Form action="/api/upload" method="POST" enctype=String::from("multipart/form-data")>
-						<div class="input-box">
-							<input class="info" type="text" name="title" required/>
-							<span>Title</span>
-							<i></i>
+					<div class="release-date">
+						<div class="left">
+							<span>Release</span>
+							<span>Date</span>
 						</div>
+						<input class="info" type="date" name="release_date"/>
+					</div>
 
-						<div class="input-box">
-							<input class="info" type="text" name="artist"/>
-							<span>Artist</span>
-							<i></i>
-						</div>
+					<div class="file">
+						<span>File</span>
+						<input class="info" type="file" name="file"/>
+					</div>
 
-						<div class="input-box">
-							<input class="info" type="text" name="album_id"/>
-							<span>Album</span>
-							<i></i>
-						</div>
-
-						<div class="input-box">
-							<input class="info" type="number" name="track_number"/>
-							<span>Track Number</span>
-							<i></i>
-						</div>
-
-						<div>
-							<input class="info" type="date" name="release_date"/>
-							<span>Release Date</span>
-							<i></i>
-						</div>
-
-						<div>
-							<input class="info" type="file" name="file"/>
-							<span>File</span>
-							<i></i>
-						</div>
-
-						<button type="submit">Upload</button>
-					</Form>
-				</dialog>
+					<button type="submit" class="upload-button">Upload</button>
+				</Form>
 			</div>
 		</Show>
 	}
diff --git a/style/main.scss b/style/main.scss
index 7793e25..de15da6 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -8,6 +8,7 @@
 @import 'home.scss';
 @import 'search.scss';
 @import 'personal.scss';
+@import 'upload.scss';
 
 body {
   font-family: sans-serif;
diff --git a/style/sidebar.scss b/style/sidebar.scss
index 2eb8c72..b818a58 100644
--- a/style/sidebar.scss
+++ b/style/sidebar.scss
@@ -4,67 +4,20 @@
   background-color: transparent;
   width: 22rem;
   height: calc(100% - 75px);
-}
-
-.sidebar-top-container {
-  border-radius: 1rem;
-  background-color: #1c1c1c;
-  height: 9rem;
-  margin: 3px;
-  padding: 0.1rem 1rem 1rem 1rem;
-}
-
-.sidebar-top-container .header {
-  font-size: 1.2rem;
-}
-.sidebar-top-container .buttons {
-  display: flex;
-  flex-direction: row;
-  font-size: 1.8rem;
-  align-items: center;
-  transition: all 0.5s;
-  cursor: pointer;
-  color: grey;
-}
-.sidebar-top-container .buttons:hover {
-  color: white;
-}
-
-.sidebar-top-container .buttons:last-child {
-  margin-left: 0.02rem;
-  margin-top: 0.5rem;
-}
-
-.sidebar-top-container h1 {
-  font-size: 0.95rem;
-  margin-left: 0.9rem;
-  font-weight: 400;
-  font-style: $standard-font;
-  letter-spacing: 0.5px;
-}
-
-.sidebar-bottom-container {
-  border-radius: 1rem;
-  background-color: #1c1c1c;
-  margin: 3px;
-  margin-top: 6px;
-  padding: 0.2rem 1rem 1rem 1rem;
-  height: calc(100% - 9rem);
-
-  .heading {
-    display: flex;
-    flex-direction: row;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-
+  .sidebar-top-container {
+    border-radius: 1rem;
+    background-color: #1c1c1c;
+    height: 9rem;
+    margin: 3px;
+    padding: 0.1rem 1rem 1rem 1rem;
+    position: relative;
     .header {
       font-size: 1.2rem;
-      font-weight: 200;
     }
-
-    .add-playlist {
+    .upload-btn {
+      position: absolute;
+      top: 10px;
+      right: 7px;
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -73,8 +26,8 @@
       border-radius: 50px;
       border: none;
       height: 2.2rem;
-      padding-right: 2rem;
-      padding-left: 2rem;
+      padding-right: 1rem;
+      padding-left: 1rem;
       cursor: pointer;
       transition: background-color 0.3s ease;
       .add-sign {
@@ -84,8 +37,79 @@
         color: white;
       }
     }
-    .add-playlist:hover {
+    .upload-btn:hover {
       background-color: #9e9e9e;
     }
+    .buttons {
+      display: flex;
+      flex-direction: row;
+      font-size: 1.8rem;
+      align-items: center;
+      transition: all 0.5s;
+      cursor: pointer;
+      color: grey;
+    }
+    .buttons:hover {
+      color: white;
+    }
+    .buttons:last-child {
+      margin-left: 0.02rem;
+      margin-top: 0.5rem;
+    }
+    h1 {
+      font-size: 0.95rem;
+      margin-left: 0.9rem;
+      font-weight: 400;
+      font-style: $standard-font;
+      letter-spacing: 0.5px;
+    }
   }
+  .sidebar-bottom-container {
+    border-radius: 1rem;
+    background-color: #1c1c1c;
+    margin: 3px;
+    margin-top: 6px;
+    padding: 0.2rem 1rem 1rem 1rem;
+    height: calc(100% - 9rem);
+  
+    .heading {
+      display: flex;
+      flex-direction: row;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+  
+      .header {
+        font-size: 1.2rem;
+        font-weight: 200;
+      }
+  
+      .add-playlist {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.9rem;
+        border-radius: 50px;
+        border: none;
+        height: 2.2rem;
+        padding-right: 2rem;
+        padding-left: 2rem;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+        .add-sign {
+          font-size: 1.5rem;
+          margin-top: auto;
+          margin-right: 5px;
+          color: white;
+        }
+      }
+      .add-playlist:hover {
+        background-color: #9e9e9e;
+      }
+    }
+  }  
 }
+
+
diff --git a/style/upload.scss b/style/upload.scss
new file mode 100644
index 0000000..eeab46a
--- /dev/null
+++ b/style/upload.scss
@@ -0,0 +1,145 @@
+@import "theme.scss";
+
+.upload-container {
+    position: fixed;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 30rem;
+    height: 30rem;
+    border: 1px solid white;
+    border-radius: 5px;
+    padding: 1rem;
+    padding-top: 0;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    background-color: #1c1c1c;
+    .close-button {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 50%;
+        font-size: 1.6rem;
+        transition: all 0.3s;
+        border: none;
+
+    }
+
+    .close-button:hover {
+    transform: scale(1.1);
+    background-color: rgba(255, 255, 255, 0.1);
+    }
+    .close-button:active {
+    transform: scale(0.8);
+    }
+    .upload-header {
+        font-size: .7rem;
+        font-weight: 300;
+        padding-bottom: 0;
+        border-bottom: 1px solid white;
+        font-family: "Roboto", sans-serif;
+    }
+    .upload-form {
+        padding: .1rem;
+        display: flex;
+        flex-direction: column;
+        .input-bx{
+            margin-top: 1rem;
+            position: relative;
+            width: 300px;
+            input{
+                width: 100%;
+                padding: 10px;
+                border: 2px solid #7f8fa6;
+                border-radius: 5px;
+                outline: none;
+                font-size: 1rem;
+                transition: 0.6s;
+                background-color: transparent;
+            }
+            span{
+                position: absolute;
+                left: 0;
+                top: 1px;
+                padding: 10px;
+                font-size: 1rem;
+                color: #7f8fa6;
+                text-transform: uppercase;
+                pointer-events: none;
+                transition: 0.6s;
+                background-color: transparent;
+            }
+            input:valid ~ span,
+            input:focus ~ span{
+                color: #fff;
+                transform: translateX(10px) translateY(-7px);
+                font-size: 0.65rem;
+                font-weight: 600;
+                padding: 0 10px;
+                background: #1c1c1c;
+                letter-spacing: 0.1rem;
+            }
+            input:valid,
+            input:focus{
+                color: #fff;
+                border: 2px solid #fff;
+            }
+        }
+        .release-date {
+            margin-top: 1rem;
+            font-size: 1.2rem;
+            color: #7f8fa6;
+            font-family: "Roboto", sans-serif;
+            display: flex;
+            align-items: center;
+            .left {
+                display: flex;
+                flex-direction: column;
+                margin-left: 5px;
+                margin-right: 10px;
+            }
+            span {
+                font-size: .85rem;
+            }
+            input {
+                padding: 8px;
+            }
+        }
+        .file {
+            margin-top: .5rem;
+            display: flex;
+            align-items: center;
+            span {
+                font-size: .9rem;
+                color: #7f8fa6;
+                font-family: "Roboto", sans-serif;
+                margin-left: 5px;
+                margin-right: 10px;
+            }
+            input {
+                padding: 10px;
+            }
+        }
+        .upload-button {
+            margin-top: 1rem;
+            padding: 10px;
+            background-color: #7f8fa6;
+            color: #fff;
+            font-size: 1rem;
+            font-family: "Roboto", sans-serif;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: 0.3s;
+            &:hover {
+                background-color: #fff;
+                color: #7f8fa6;
+            }
+        }
+    }
+}
\ No newline at end of file