From 52d3d195e78965158e841265104189a7732f6e58 Mon Sep 17 00:00:00 2001
From: Harry Downing <harry.downing17@gmail.com>
Date: Thu, 14 Jul 2022 18:10:52 +0100
Subject: [PATCH] Added NavBar, styled FiltercontrolPanel, and styled
 ViewSelect.

---
 .../ChannelSelect/ChannelSelect.css           | 12 +++++++++
 .../components/ChannelSelect/ChannelSelect.js | 21 ++++++++++-----
 .../FilterControlPanel/FilterControlPanel.css |  1 -
 .../FilterControlPanel/FilterControlPanel.js  | 10 ++++---
 .../components/GenreSelect/GenreSelect.css    |  4 +--
 .../src/components/GenreSelect/GenreSelect.js |  4 +--
 my-app/src/components/Home/Home.css           |  1 +
 my-app/src/components/Home/Home.js            |  8 +++---
 my-app/src/components/Nav/Nav.js              |  8 ------
 my-app/src/components/NavBar/NavBar.css       | 24 +++++++++++++++++
 my-app/src/components/NavBar/NavBar.js        | 19 +++++++++++++
 my-app/src/components/SearchBar/SearchBar.css | 14 +++-------
 my-app/src/components/SearchBar/SearchBar.js  | 14 ++++------
 .../src/components/ViewSelect/ViewSelect.css  | 27 +++++++++++++++++++
 .../src/components/ViewSelect/ViewSelect.js   | 12 +++++----
 15 files changed, 127 insertions(+), 52 deletions(-)
 create mode 100644 my-app/src/components/ChannelSelect/ChannelSelect.css
 delete mode 100644 my-app/src/components/Nav/Nav.js
 create mode 100644 my-app/src/components/NavBar/NavBar.css
 create mode 100644 my-app/src/components/NavBar/NavBar.js
 create mode 100644 my-app/src/components/ViewSelect/ViewSelect.css

diff --git a/my-app/src/components/ChannelSelect/ChannelSelect.css b/my-app/src/components/ChannelSelect/ChannelSelect.css
new file mode 100644
index 00000000..2a51d6e4
--- /dev/null
+++ b/my-app/src/components/ChannelSelect/ChannelSelect.css
@@ -0,0 +1,12 @@
+.checkbox {
+    border: 1px solid grey;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+}
+
+.checkbox span {
+    flex-grow: 1;
+}
+
+
diff --git a/my-app/src/components/ChannelSelect/ChannelSelect.js b/my-app/src/components/ChannelSelect/ChannelSelect.js
index 2022ffd4..6ce3c6ed 100644
--- a/my-app/src/components/ChannelSelect/ChannelSelect.js
+++ b/my-app/src/components/ChannelSelect/ChannelSelect.js
@@ -1,3 +1,5 @@
+import './ChannelSelect.css';
+
 const ChannelSelect = ({filter, setFilter}) => {
     
     const handleCheckChannel = (e) => {
@@ -9,12 +11,19 @@ const ChannelSelect = ({filter, setFilter}) => {
 
     return (
         <div>
-            <label htmlFor="tracks">Tracks</label>
-            <input type="checkbox" name="channels" onClick={handleCheckChannel} id="tracks" value="tracks" defaultChecked={filter.channelsOpen.tracks}/>
-            <label htmlFor="album">Albums</label>
-            <input type="checkbox" name="channels" onClick={handleCheckChannel} id="albums" value="albums" defaultChecked={filter.channelsOpen.albums}/>
-            <label htmlFor="artists">Artists</label>
-            <input type="checkbox" name="channels" onClick={handleCheckChannel} id="artists" value="artists" defaultChecked={filter.channelsOpen.artists}/>
+            <h6>Channels</h6>
+            <label htmlFor="tracks" className='checkbox p-1 mb-1'>Tracks
+                <span></span>
+                <input type="checkbox" name="channels" onClick={handleCheckChannel} id="tracks" value="tracks" defaultChecked={filter.channelsOpen.tracks}/>
+            </label>
+            <label htmlFor="albums" className='checkbox p-1 mb-1'>Albums
+                <span></span>
+                <input type="checkbox" name="channels" onClick={handleCheckChannel} id="albums" value="albums" defaultChecked={filter.channelsOpen.albums}/>
+            </label>
+            <label htmlFor="artists" className='checkbox p-1 mb-1'>Artists
+                <span></span>
+                <input type="checkbox" name="channels" onClick={handleCheckChannel} id="artists" value="artists" defaultChecked={filter.channelsOpen.artists}/>
+            </label>
       </div>
     );
 }
diff --git a/my-app/src/components/FilterControlPanel/FilterControlPanel.css b/my-app/src/components/FilterControlPanel/FilterControlPanel.css
index 03940e85..69feb54e 100644
--- a/my-app/src/components/FilterControlPanel/FilterControlPanel.css
+++ b/my-app/src/components/FilterControlPanel/FilterControlPanel.css
@@ -10,6 +10,5 @@ details > summary {
     position: absolute;
     background-color: white;
     display: inline-block;
-    border: 1px solid grey;
     border-radius: 5px;
 }
\ No newline at end of file
diff --git a/my-app/src/components/FilterControlPanel/FilterControlPanel.js b/my-app/src/components/FilterControlPanel/FilterControlPanel.js
index b33fc6fe..c877affe 100644
--- a/my-app/src/components/FilterControlPanel/FilterControlPanel.js
+++ b/my-app/src/components/FilterControlPanel/FilterControlPanel.js
@@ -13,12 +13,14 @@ const FilterControlPanel = ({ filter, setFilter }) => {
             <summary>
                 <i className='bi bi-filter'></i> Filter
             </summary>
-            <div className="panel p-1">
+            <div className="border panel p-1">
                 <GenreSelect filter={filter} setFilter={setFilter} />
                 <ChannelSelect filter={filter} setFilter={setFilter}/>
-                <label htmlFor="explicit-checkbox">Show Explicit</label>
-                <input type="checkbox" onClick={handleExplicit} id="explicit-checkbox" defaultChecked={filter.showExplicit}/>
-                {/*  */}
+                <h6>Other</h6>
+                <label htmlFor="explicit-checkbox" className='checkbox p-1'>Explicit
+                    <span></span>
+                    <input type="checkbox" onClick={handleExplicit} id="explicit-checkbox" defaultChecked={filter.showExplicit}/>
+                </label>   
             </div>
             
         </details>
diff --git a/my-app/src/components/GenreSelect/GenreSelect.css b/my-app/src/components/GenreSelect/GenreSelect.css
index e269bf12..6377fdc1 100644
--- a/my-app/src/components/GenreSelect/GenreSelect.css
+++ b/my-app/src/components/GenreSelect/GenreSelect.css
@@ -1,3 +1,3 @@
-.dropdown {
-    display: inline-block;
+.dropdown label {
+    display: block;
 }
\ No newline at end of file
diff --git a/my-app/src/components/GenreSelect/GenreSelect.js b/my-app/src/components/GenreSelect/GenreSelect.js
index 97714b47..39baaf96 100644
--- a/my-app/src/components/GenreSelect/GenreSelect.js
+++ b/my-app/src/components/GenreSelect/GenreSelect.js
@@ -20,8 +20,8 @@ const GenreSelect = ({ filter, setFilter }) => {
     }, []);
 
     return (
-        <div className='dropdown'>
-            <label htmlFor='genreDropdown'>Choose Genre</label>
+        <div className='dropdown mb-1'>
+            <h6>Genre</h6>
             <select id='genreDropdown' defaultValue={'all'} onChange={handleSelection}>
                 <option value={'disabled'} disabled>Choose Genre</option>
                 <option value={'all'}>All</option>
diff --git a/my-app/src/components/Home/Home.css b/my-app/src/components/Home/Home.css
index 798eb084..33792ef9 100644
--- a/my-app/src/components/Home/Home.css
+++ b/my-app/src/components/Home/Home.css
@@ -1,3 +1,4 @@
 .space {
     padding-bottom: 6%;
+    padding-top: 7vh;
 }
\ No newline at end of file
diff --git a/my-app/src/components/Home/Home.js b/my-app/src/components/Home/Home.js
index 9b858145..212a5037 100644
--- a/my-app/src/components/Home/Home.js
+++ b/my-app/src/components/Home/Home.js
@@ -6,6 +6,7 @@ import SearchBar from '../SearchBar/SearchBar';
 import ViewContainer from '../ViewContainer/ViewContainer';
 import Player from '../Player/Player';
 import FilterControlPanel from '../FilterControlPanel/FilterControlPanel';
+import NavBar from '../NavBar/NavBar';
 import './Home.css';
 
 function Home() {
@@ -23,7 +24,7 @@ function Home() {
       const query = searchParams.get('query');
       setIsPending(true);
       const { newData, error } = query ? 
-                      await fetchQuery(query, 6):
+                      await fetchQuery(query, 1):
                       await fetchTop(filter.channelsOpen, 1);
       if (error) setError(error);
       else setData(newData);
@@ -46,10 +47,7 @@ function Home() {
 
   return (
     <div className='space'>
-      
-      <SearchBar initialSearch={searchParams.get("query") || ''} setSearchParams={setSearchParams} filter={filter} setFilter={setFilter}/>
-
-      <ViewSelect view={view} setView={setView}/>
+      <NavBar view={view} setView={setView} searchParams={searchParams} setSearchParams={setSearchParams} filter={filter} setFilter={setFilter}/>
       {isPending && 'Loading...'}
       { !isPending && error && <span>{error.message}</span> }
       {!!Object.keys(data).length && ( 
diff --git a/my-app/src/components/Nav/Nav.js b/my-app/src/components/Nav/Nav.js
deleted file mode 100644
index ae27f2e9..00000000
--- a/my-app/src/components/Nav/Nav.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// logo  links  filter-icon  search
-// 
-
-
-/* profile page
-make a playlist
-
-*/  
\ No newline at end of file
diff --git a/my-app/src/components/NavBar/NavBar.css b/my-app/src/components/NavBar/NavBar.css
new file mode 100644
index 00000000..7283e3e1
--- /dev/null
+++ b/my-app/src/components/NavBar/NavBar.css
@@ -0,0 +1,24 @@
+.topscreen {
+    position: fixed;
+    top: 0px;
+    width: 100%;
+    height: 7vh;
+    border-bottom: 1px solid grey;
+    background-color: white;
+
+    display: flex;
+    align-items: center;
+}
+
+.bar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+    width: 30%;
+    column-gap: 0.8rem;
+}
+
+.bar details {
+    flex-grow: 0;
+}
\ No newline at end of file
diff --git a/my-app/src/components/NavBar/NavBar.js b/my-app/src/components/NavBar/NavBar.js
new file mode 100644
index 00000000..61eac2d6
--- /dev/null
+++ b/my-app/src/components/NavBar/NavBar.js
@@ -0,0 +1,19 @@
+import SearchBar from "../SearchBar/SearchBar";
+import FilterControlPanel from "../FilterControlPanel/FilterControlPanel";
+import ViewSelect from "../ViewSelect/ViewSelect";
+import './NavBar.css';
+
+const NavBar = ({ view, setView, searchParams, setSearchParams, filter, setFilter }) => {
+    return (
+        <div className='topscreen'>
+            <ViewSelect view={view} setView={setView}/>
+            <div className="region"></div>
+            <div className='bar'>
+                <FilterControlPanel filter={filter} setFilter={setFilter}/>
+                <SearchBar initialSearch={searchParams.get("query") || ''} setSearchParams={setSearchParams}/>
+            </div>
+        </div>
+    );
+}
+ 
+export default NavBar;
\ No newline at end of file
diff --git a/my-app/src/components/SearchBar/SearchBar.css b/my-app/src/components/SearchBar/SearchBar.css
index ef7fe484..1f4e29f5 100644
--- a/my-app/src/components/SearchBar/SearchBar.css
+++ b/my-app/src/components/SearchBar/SearchBar.css
@@ -4,20 +4,14 @@ input {
 
 input:focus {
     outline: none;
-  }
-
-.search-bar {
-    display: inline-block;
 }
 
-.bar {
-    float: right;
+.search-bar {
+    flex-grow: 1;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 30%;
+    border-radius: 5px;
 }
 
 .search-bar input {
     flex-grow: 1;
-}
\ No newline at end of file
+}
diff --git a/my-app/src/components/SearchBar/SearchBar.js b/my-app/src/components/SearchBar/SearchBar.js
index f30900b2..04086660 100644
--- a/my-app/src/components/SearchBar/SearchBar.js
+++ b/my-app/src/components/SearchBar/SearchBar.js
@@ -10,15 +10,11 @@ const SearchBar = ({ initialSearch, setSearchParams, filter, setFilter }) => {
         else setSearchParams({})
     };
 
-    return (
-        <div className='bar'>
-            <FilterControlPanel filter={filter} setFilter={setFilter}/>
-            <form className='border search-bar' id='form' onSubmit={handleSearch}>
-                <input className='m-auto' type='search' name='search-query' placeholder='Search...' autoComplete='off'  defaultValue={initialSearch}/>
-                <button type='submit' className='btn btn-sm btn-primary'><i className='bi bi-search'></i></button>
-            </form>
-        </div>
-        
+    return (    
+        <form className='border search-bar' id='form' onSubmit={handleSearch}>
+            <input className='m-auto' type='search' name='search-query' placeholder='Search...' autoComplete='off'  defaultValue={initialSearch}/>
+            <button type='submit' className='btn btn-sm btn-primary'><i className='bi bi-search'></i></button>
+        </form>
     );
 }
 
diff --git a/my-app/src/components/ViewSelect/ViewSelect.css b/my-app/src/components/ViewSelect/ViewSelect.css
new file mode 100644
index 00000000..c1201932
--- /dev/null
+++ b/my-app/src/components/ViewSelect/ViewSelect.css
@@ -0,0 +1,27 @@
+#grid-view-radio {
+    display: none;
+}
+
+#list-view-radio {
+    display: none;
+}
+
+.view-box {
+    border-radius: 5px;
+}
+
+.view-box #grid-view-radio + label {
+    border-right: 1px solid lightgrey;
+}
+
+#grid-view-radio + label, #list-view-radio + label {
+    transition: background-color .7s;
+}
+
+#grid-view-radio:checked + label {
+    background-color: lightgrey;
+}
+
+#list-view-radio:checked + label {
+    background-color: lightgrey;
+}
diff --git a/my-app/src/components/ViewSelect/ViewSelect.js b/my-app/src/components/ViewSelect/ViewSelect.js
index ceb1ff81..c67f7b0f 100644
--- a/my-app/src/components/ViewSelect/ViewSelect.js
+++ b/my-app/src/components/ViewSelect/ViewSelect.js
@@ -1,3 +1,5 @@
+import './ViewSelect.css';
+
 const ViewSelect = ({view, setView}) => {
 
     const handleViewChange = (e) => {
@@ -9,11 +11,11 @@ const ViewSelect = ({view, setView}) => {
     };
     
     return (
-        <div>
-            <label htmlFor='gridViewRadio'>Grid</label>
-            <input type='radio' id='gridViewRadio' onChange={handleViewChange} name='group' defaultChecked/>
-            <label htmlFor='listViewRadio'>List</label>
-            <input type='radio' id='listViewRadio' onChange={handleViewChange} name='group'/>
+        <div className='view-box border ms-2'>
+            <input type='radio' id='grid-view-radio' onChange={handleViewChange} name='group' defaultChecked/>
+            <label htmlFor='grid-view-radio' className='view-radio p-1'>Grid <i className='bi bi-grid'></i></label>
+            <input type='radio' id='list-view-radio' onChange={handleViewChange} name='group'/>
+            <label htmlFor='list-view-radio' className='view-radio p-1'>List <i class="bi bi-list"></i></label>   
         </div>
     );
 }