ListView - new Look (#132)

* fixed summation after long fight with git :!

* sorting kinda works - some problems exist

* fixed search + filter interaction

* sorting is better now / Metallic Materials are the only issue

* asc/desc have correct icon now

* added favicon

* fixed the website name in index.html

* ArrowLeft closes the CoursePopup

* popup variables moved to the model

* popup variables moved to the model

* bug fix

* prefix matching is preffered in search function

* git stash fight

* searchbar escape char bug fix

* added srot by rating

* small design fix - ListView list

* small design fix - ListView looks cleaner now

---------

Co-authored-by: Kacper Lisik <lisik@kth.se>

Author: LSKpr

my-app/src/views/ListView.jsx

@@ -109,7 +109,7 @@ function ListView(props) {
     }
 
     return (
-        <div className="relative bg-white text-black p-2 flex flex-col gap-3 h-screen">
+        <div className="relative bg-gray-100 text-black p-2 flex flex-col gap-3 h-screen">
             {isLoading ? (
                 <div className="flex justify-center items-center h-full">
                     <Quantum size="400" speed="10" color="#000061" />
@@ -129,7 +129,7 @@ function ListView(props) {
                             <select
                                 value={props.sortBy}
                                 onChange={(e) => props.setSortBy(e.target.value)}
-                                className="bg-white border-2 border-[#000061] text-[#000061] font-semibold py-2 px-4 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
+                                className="bg-white  shadow-md text-[#000061] font-semibold py-2 px-4 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
                             >
                                 <option value="relevance">Sort by Relevance</option>
                                 <option value="name">Sort by Name</option>
@@ -141,7 +141,7 @@ function ListView(props) {
 
                             <button
                                 onClick={() => props.setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc')}
-                                className="bg-white border-2 border-[#000061] text-[#000061] font-semibold p-2 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
+                                className="bg-white  shadow-md text-[#000061] font-semibold p-2 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
                                 aria-label={`Sort ${props.sortDirection === 'asc' ? 'ascending' : 'descending'}`}
                             >
                                 {props.sortDirection === 'desc' ? (
@@ -179,7 +179,7 @@ function ListView(props) {
                                     window.history.pushState({}, '', '/' + course.code);
                                 }}
                                 key={course.code}
-                                className="p-5 mb-3 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
+                               className="p-5 mb-3 hover:bg-blue-100 flex items-center bg-white w-full rounded-lg cursor-pointer shadow-md hover:shadow-lg transition-shadow duration-300"
                             >
                                 <div>
                                     <div className="codeNameContainer" style={{ display: 'flex' }}>