Added NavBar, styled FiltercontrolPanel, and styled ViewSelect.

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;
+}
+
+

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>
     );
 }

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;
 }

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>

my-app/src/components/GenreSelect/GenreSelect.css

@@ -1,3 +1,3 @@
-.dropdown {
-    display: inline-block;
+.dropdown label {
+    display: block;
 }

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>

my-app/src/components/Home/Home.css

@@ -1,3 +1,4 @@
 .space {
     padding-bottom: 6%;
+    padding-top: 7vh;
 }

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 && ( 

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;
+}

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;

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;
-}
+}

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>
     );
 }
 

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;
+}

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>
     );
 }