feat: improve input styling and some texts

iyzana · Feb 19, 2023 · 24bf04c · 24bf04c
1 parent 27fd98b
commit 24bf04c
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
 }