From fa5680192f8cb2e196ece7ceec64f7bcf08415af Mon Sep 17 00:00:00 2001
From: Tolu <emoruwatoluwanimi@gmail.com>
Date: Wed, 10 Apr 2024 14:02:58 -0400
Subject: [PATCH] Optimizing for larger screens

---
 .../components/bar-chart/carousel-header.css   |  1 +
 .../compare-page/compare-attr-list.js          |  6 +++---
 .../compare-page/compare-percentiles.js        |  3 ++-
 .../compare-page/compare-player-section.css    |  7 +++----
 prem-data/src/components/taskbar/taskbar.js    |  2 +-
 prem-data/src/pages/page-style.css             |  4 ++--
 prem-data/src/pages/player-page.js             | 18 ------------------
 prem-data/src/styles.css                       |  4 ++--
 8 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/prem-data/src/components/bar-chart/carousel-header.css b/prem-data/src/components/bar-chart/carousel-header.css
index f89959a..3dcd394 100644
--- a/prem-data/src/components/bar-chart/carousel-header.css
+++ b/prem-data/src/components/bar-chart/carousel-header.css
@@ -13,6 +13,7 @@
     padding: 0;
     cursor: pointer;
     transition: 0.3s;
+    font-size: 1em;
   }
   
   .selected {
diff --git a/prem-data/src/components/compare-page/compare-attr-list.js b/prem-data/src/components/compare-page/compare-attr-list.js
index dcc8b23..53e743c 100644
--- a/prem-data/src/components/compare-page/compare-attr-list.js
+++ b/prem-data/src/components/compare-page/compare-attr-list.js
@@ -13,9 +13,9 @@ export const CompareAttrList = ({ options, onCheckboxChange }) => {
   };
 
 return (
-    <div>
+    <div className="attr-container">
       {options.map((option) => (
-        <div key={option}>
+        <div key={option} className="attrlist-label">
           <input
             type="checkbox"
             id={option}
@@ -23,7 +23,7 @@ return (
             onChange={() => handleCheckboxChange(option)}
             className="checkbox-input"
           />
-          <label htmlFor={option} className="attrlist-label">{option}</label>
+          <label style={{fontSize: '16px'}} htmlFor={option}>{option}</label>
         </div>
       ))}
     </div>
diff --git a/prem-data/src/components/compare-page/compare-percentiles.js b/prem-data/src/components/compare-page/compare-percentiles.js
index cfea32e..02edc2d 100644
--- a/prem-data/src/components/compare-page/compare-percentiles.js
+++ b/prem-data/src/components/compare-page/compare-percentiles.js
@@ -16,7 +16,8 @@ function ComparePercentiles({player, setSeasonPlayer1, seasonPlayer1, setPercent
                 </div>
                 <div className="options-list">
                     {player.listOfSeasons.map((seasons, index) => (
-                        <div 
+                        <div
+                            style={{fontSize: '0.8em'}}
                             className={`season-option ${seasonPlayer1 === index ? 'selected-season' : ''}`}
                             onClick={() => {
                                 setSeasonPlayer1(index);
diff --git a/prem-data/src/components/compare-page/compare-player-section.css b/prem-data/src/components/compare-page/compare-player-section.css
index 3628c48..8b19f2a 100644
--- a/prem-data/src/components/compare-page/compare-player-section.css
+++ b/prem-data/src/components/compare-page/compare-player-section.css
@@ -254,10 +254,6 @@ input:checked + .slider:before {
     .select-menu{
         font-size: 0.8em;
     }
-    .season-option{
-        font-size: 0.8em;
-        color: red;
-    }
     .options-list{
         font-size: 1em;
     }
@@ -267,4 +263,7 @@ input:checked + .slider:before {
     .select{
         font-size: 1.2em;
     }
+    .season-option{
+        font-size: 16px;
+    }
 }
\ No newline at end of file
diff --git a/prem-data/src/components/taskbar/taskbar.js b/prem-data/src/components/taskbar/taskbar.js
index 4d06bae..34094d3 100644
--- a/prem-data/src/components/taskbar/taskbar.js
+++ b/prem-data/src/components/taskbar/taskbar.js
@@ -6,7 +6,7 @@ function Taskbar() {
 
     return(
         <nav className="taskbar">
-            <Link to={`/`} className="logo">PL Database</Link>
+            <Link to={`/`} className="logo">Home</Link>
             <ul>
                 <li> <Link to={`/compare`}>Compare</Link></li>
                 <li> <Link to={`/quiz`}>Quiz</Link></li>
diff --git a/prem-data/src/pages/page-style.css b/prem-data/src/pages/page-style.css
index aa351b4..e922a03 100644
--- a/prem-data/src/pages/page-style.css
+++ b/prem-data/src/pages/page-style.css
@@ -306,7 +306,7 @@
 }
 @media screen and (min-width: 1441px) {
     .player-name{
-        font-size: 2em;
+        font-size: 1.8em;
     }
     .player-page-club{
         font-size: 1.2em;
@@ -319,7 +319,7 @@
         font-size: 1.2em;
     }
     .chart-container p{
-        font-size: 1em;
+        font-size: 0.8em;
     }
     .position-tabs button{
         font-size: 1.25em;
diff --git a/prem-data/src/pages/player-page.js b/prem-data/src/pages/player-page.js
index 52b7cb5..fd71462 100644
--- a/prem-data/src/pages/player-page.js
+++ b/prem-data/src/pages/player-page.js
@@ -51,24 +51,6 @@ function PlayerPage() {
             });
         // }
     }, [player]);
-  //   useEffect(() => {
-  //     if (player) {
-  //         async function fetchData() {
-  //             try {
-  //                 const response = await fetch(`/player/${player.playerName}`);
-  //                 const data = await response.json();
-  //                 setPlayerInfo(data);
-  //                 const linkedList = await arrayToCircularLinkedList(data);
-  //                 setSeason(linkedList.head);
-  //                 setSeasonLinkedList(linkedList);
-  //                 console.log(data[data.length - 1].name);
-  //             } catch (error) {
-  //                 console.error("Error fetching player data:", error);
-  //             }
-  //         }
-  //         fetchData();
-  //     }
-  // }, [player]);
 
     if (playerInfo.length === 0) {
         return <p>Loading player data...</p>;
diff --git a/prem-data/src/styles.css b/prem-data/src/styles.css
index 716b2c9..9ff390a 100644
--- a/prem-data/src/styles.css
+++ b/prem-data/src/styles.css
@@ -125,7 +125,7 @@
 }
 
 .player-card .player-info .player-name{
-    font-size: 1.25em;
+    font-size: 1.4em;
     font-weight: 700;
     margin: 0;
     display: flex;
@@ -133,7 +133,7 @@
 }
 
 .player-card .player-info .club-name{
-    font-size: 0.6em;
+    font-size: 0.8em;
     display: flex;
     justify-content: right;
     margin: 0;