Improvements: various color, css updates

esmalleydev · Mar 17, 2024 · d6a1460 · d6a1460
1 parent fbeb7ac
commit d6a1460
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 9 deletions.
diff --git a/components/generic/CBB/Compare/SubNavBar.tsx b/components/generic/CBB/Compare/SubNavBar.tsx
@@ -15,6 +15,7 @@ import TeamAdditionalOptions from './TeamAdditionalOptions';
 
 import SensorOccupiedIcon from '@mui/icons-material/SensorOccupied';
 import CalendarViewMonthIcon from '@mui/icons-material/CalendarViewMonth';
+import { useScrollContext } from '@/contexts/scrollContext';
 // import GroupsIcon from '@mui/icons-material/Groups';
 // import StadiumIcon from '@mui/icons-material/Stadium';
 // import LocalAirportIcon from '@mui/icons-material/LocalAirport';
@@ -38,6 +39,8 @@ const SubNavBar = ({ view, home_team_id, away_team_id }) => {
   const subHeaderHeight = getSubNavHeaderHeight();
   const { width } = useWindowDimensions() as Dimensions;
 
+  const scrollRef  = useScrollContext();
+
   // const view = useAppSelector(state => state.compareReducer.view);
   const subview = useAppSelector(state => state.compareReducer.subview);
   // const home_team_id = useAppSelector(state => state.compareReducer.home_team_id);
@@ -76,6 +79,10 @@ const SubNavBar = ({ view, home_team_id, away_team_id }) => {
       dispatch(setView(newView));
       dispatch(setScrollTop(0));
       setSpin(false);
+
+      if (scrollRef && scrollRef.current) {
+        scrollRef.current.scrollTop = 0;
+      }
     });
   };
 
@@ -97,6 +104,10 @@ const SubNavBar = ({ view, home_team_id, away_team_id }) => {
       dispatch(setSubView(newView));
       dispatch(setScrollTop(0));
       setSpin(false);
+
+      if (scrollRef && scrollRef.current) {
+        scrollRef.current.scrollTop = 0;
+      }
     });
   };
 

diff --git a/components/generic/CBB/Compare/Team/CompareView.tsx b/components/generic/CBB/Compare/Team/CompareView.tsx
@@ -115,6 +115,7 @@ const CompareView = ({ home_team_id, away_team_id, teams, season }) => {
     {
       'name': 'aSOS',
       'title': 'aSOS',
+      'tooltip': 'Adj efficiency Strength of Schedule',
       'away': awayStats.opponent_efficiency_rating,
       'home': homeStats.opponent_efficiency_rating,
       'awayCompareValue': awayStats.opponent_efficiency_rating,
@@ -128,6 +129,7 @@ const CompareView = ({ home_team_id, away_team_id, teams, season }) => {
     {
       'name': 'eSOS',
       'title': 'eSOS',
+      'tooltip': 'SR (elo) Strength of Schedule',
       'away': awayStats.elo_sos,
       'home': homeStats.elo_sos,
       'awayCompareValue': awayStats.elo_sos,

diff --git a/components/generic/CBB/Game/Matchup/Client.tsx b/components/generic/CBB/Game/Matchup/Client.tsx
@@ -88,8 +88,9 @@ const Client = ({ cbb_game, stats, rankings, elo /*tag*/}) => {
       'compareType': 'rank',
     },
     {
-      'name': 'SOS',
-      'title': 'Strength of schedule',
+      'name': 'aSOS',
+      'title': 'aSOS',
+      'tooltip': 'Adj efficiency Strength of Schedule',
       'away': awayStats.opponent_efficiency_rating,
       'home': homeStats.opponent_efficiency_rating,
       'awayCompareValue': awayStats.opponent_efficiency_rating,
@@ -100,6 +101,20 @@ const Client = ({ cbb_game, stats, rankings, elo /*tag*/}) => {
       'showDifference': true,
       'compareType': 'rank',
     },
+    {
+      'name': 'eSOS',
+      'title': 'eSOS',
+      'tooltip': 'SR (elo) Strength of Schedule',
+      'away': awayStats.elo_sos,
+      'home': homeStats.elo_sos,
+      'awayCompareValue': awayStats.elo_sos,
+      'homeCompareValue': homeStats.elo_sos,
+      'awayRank': awayStats.elo_sos_rank,
+      'homeRank': homeStats.elo_sos_rank,
+      'favored': 'higher',
+      'showDifference': true,
+      'compareType': 'rank',
+    },
     {
       'name': 'ORT',
       'title': 'Offensive rating',

diff --git a/components/generic/CBB/Picks/Stats/Client.tsx b/components/generic/CBB/Picks/Stats/Client.tsx
@@ -14,7 +14,7 @@ const getCardStyle = () => {
 };
 
 const getOrderedBuckets = () => {
-  return ['today', 'yesterday', 'week', 'month', 'season'];
+  return ['season', 'today', 'yesterday', 'week', 'month'];
 };
 
 export { getCardStyle, getOrderedBuckets };
@@ -119,7 +119,7 @@ const Client = ({ date, stats }) => {
         statContainers.push(
           <Card key = {i} sx = {getCardStyle()}>
             <CardContent>
-              <Typography sx={{ fontSize: 14, textAlign: 'center' }} color="text.secondary" gutterBottom>{label}</Typography>
+              <Typography sx={{ fontSize: 14, textAlign: 'center' }} color = 'info.dark' gutterBottom>{label}</Typography>
               {
               totalGames === 0 ? <Typography sx = {Object.assign({'textAlign': 'center'}, colorStyle)} variant="h5" component="div">-</Typography> : 
               <>

diff --git a/components/generic/CBB/Picks/Stats/ClientWrapper.tsx b/components/generic/CBB/Picks/Stats/ClientWrapper.tsx
@@ -1,11 +1,29 @@
 'use client';
-import React from 'react';
+import BackdropLoader from '@/components/generic/BackdropLoader';
+import { Button, Typography } from '@mui/material';
+import { useRouter } from 'next/navigation';
+import React, { useState, useTransition } from 'react';
 
 const ClientWrapper = ({ children }) => {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [spin, setSpin] = useState(false);
+
+  const handleSubscribe = () => {
+    setSpin(true);
+    startTransition(() => {
+      router.push('/pricing');
+      setSpin(false);
+    });
+  };
+
   return (
-    <div>
+    <>
+      <Typography style = {{'padding': '0px 5px'}} color = 'text.secondary' variant='body1'>Below is a break down of my win prediction percentage, and the actual percentage that were correct. You can view the data by date range, the whole season, by day, week or month.</Typography>
+      <div style = {{'textAlign': 'center'}}><Button variant='contained' color='warning' onClick={handleSubscribe}>Subscribe</Button></div>
       {children}
-    </div>
+      <BackdropLoader open = {(spin === true)} />
+    </>
   );
 };
 

diff --git a/components/generic/CompareStatistic.jsx b/components/generic/CompareStatistic.jsx
@@ -287,7 +287,7 @@ const CompareStatistic = (props) => {
                 }
               </div>
               <div style = {{'textAlign': 'center', 'whiteSpace': 'nowrap'}}>
-                <Tooltip enterTouchDelay={0} key={row.tooltip || row.title || row.name} disableFocusListener placement = 'top' title={row.tooltip || row.title || row.name}><Typography color = {'text.secondary'} variant = 'body2'>{width > 700 ? row.title : row.name}</Typography></Tooltip>
+                <Tooltip enterTouchDelay={0} key={row.tooltip || row.title || row.name} disableFocusListener placement = 'top' title={row.tooltip || row.title || row.name}><Typography color = {'info.light'} variant = 'body2'>{width > 700 ? row.title : row.name}</Typography></Tooltip>
               </div>
               <div style = {{'margin': '0px 5px 0px 20px', 'minWidth': '100px', 'textAlign': 'right', 'overflow': 'hidden'}}>
                 {

diff --git a/redux/features/theme-slice.ts b/redux/features/theme-slice.ts
@@ -6,7 +6,23 @@ type InitialState = {
   mode: string,
 };
 
-const initalMode = (typeof window !== 'undefined' && localStorage.getItem(localStorageKey)) || 'dark';
+const getInitialMode = () => {
+  if (typeof window !== 'undefined' && localStorage.getItem(localStorageKey)) {
+    return localStorage.getItem(localStorageKey);
+  }
+
+  if (typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark';
+  }
+
+  if (typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+    return 'light';
+  }
+
+  return 'dark';
+};
+
+const initalMode = getInitialMode();
 
 const initialState = {
   mode: initalMode,