From 24bf04cd738846a2b2517d490d417512167713c5 Mon Sep 17 00:00:00 2001
From: iyzana <16743652+iyzana@users.noreply.github.com>
Date: Sun, 19 Feb 2023 22:57:44 +0100
Subject: [PATCH] feat: improve input styling and some texts

---
 frontend/src/component/Input.css  | 3 ++-
 frontend/src/component/Input.tsx  | 2 +-
 frontend/src/component/Player.css | 2 +-
 frontend/src/component/Player.tsx | 2 +-
 frontend/src/component/Queue.css  | 3 +++
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/Input.css b/frontend/src/component/Input.css
index 8cb265c..1f87057 100644
--- a/frontend/src/component/Input.css
+++ b/frontend/src/component/Input.css
@@ -2,7 +2,6 @@
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  margin-top: calc(-1 * var(--s1));
 
   width: 100%;
   background-color: var(--card-alt);
@@ -12,6 +11,8 @@
 .input-text {
   width: 100%;
   padding: var(--s0);
+  padding-right: 36px;
+  margin-right: -36px;
   color: var(--fg);
   background-color: #444444;
   border: none;
diff --git a/frontend/src/component/Input.tsx b/frontend/src/component/Input.tsx
index 34da272..cff2e6f 100644
--- a/frontend/src/component/Input.tsx
+++ b/frontend/src/component/Input.tsx
@@ -29,7 +29,7 @@ function Input({ addToQueue, working }: InputProps) {
       <input
         className="input-text"
         type="text"
-        placeholder="Video-Url or YouTube search"
+        placeholder="Video URL or YouTube search query"
         value={input}
         onChange={(e) => setInput(e.target.value)}
         onKeyUp={onKey}
diff --git a/frontend/src/component/Player.css b/frontend/src/component/Player.css
index 4c1f750..135e7d0 100644
--- a/frontend/src/component/Player.css
+++ b/frontend/src/component/Player.css
@@ -17,7 +17,7 @@
 .empty-player {
   display: flex;
   align-items: center;
-  font-size: 2rem;
+  font-size: 2em;
   justify-content: center;
   border-radius: var(--radius);
   border: var(--border) solid var(--card);
diff --git a/frontend/src/component/Player.tsx b/frontend/src/component/Player.tsx
index d28c473..633472d 100644
--- a/frontend/src/component/Player.tsx
+++ b/frontend/src/component/Player.tsx
@@ -61,7 +61,7 @@ function Player() {
   return (
     <div className="aspect-ratio">
       {videoUrl === null ? (
-        <div className="aspect-ratio-inner empty-player">NO VIDEO</div>
+        <div className="aspect-ratio-inner empty-player">No Video</div>
       ) : (
         <div className="aspect-ratio-inner">
           {isYoutubeUrl(videoUrl) ? (
diff --git a/frontend/src/component/Queue.css b/frontend/src/component/Queue.css
index c2c41ce..2db7401 100644
--- a/frontend/src/component/Queue.css
+++ b/frontend/src/component/Queue.css
@@ -2,9 +2,12 @@
   min-height: 0;
   flex-grow: 1;
   padding: 0 var(--s1);
+  margin-bottom: calc(-1 * var(--s1));
+
   background-color: var(--card);
   border-radius: var(--radius) var(--radius) 0 0;
   overflow-y: auto;
+
   display: flex;
   flex-flow: column nowrap;
 }