[PATCH] Jan. 6 Patches

app/Calendar/calendarCSSReset.css

@@ -0,0 +1,21 @@
+.calendar-header h2 {
+    font-size: 2em;
+    font-weight: bold;
+}
+
+.tooltip h2 {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+.tooltip p {
+    display: block;
+    margin : 0;
+    font-size: unset;
+    font-weight: unset;
+    line-height: unset;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+}

app/Calendar/page.js

@@ -1,5 +1,6 @@
 'use client'
 
+import './calendarCSSReset.css'
 import styles from './page.module.css'
 
 import { useState, useEffect } from 'react'
@@ -10,9 +11,15 @@ import Footer from '@components/Footer/Footer'
 import GoogleCalendar from "@ericz1803/react-google-calendar";
 
 const API_KEY = process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API;
-const calendars = [
+
+// TODO
+// Host this in the database so members can edit the calendars
+const CALENDAR_DATA = [
 	{
-		calendarID : '[email protected]'
+		label : 'Team Calendar',
+		calendarID : '76219f89bc192747b38f60157704797c34dc85cef427fdde8e6ca7c77bbfa65b@group.calendar.google.com',
+		color : '#ff0000',
+		enabledByDefault : true
 	}
 ]
 
@@ -23,15 +30,34 @@ export default function Calendar() {
 	useEffect(() => {
 		setLoaded(true);
 	}, [])
-
+
+	const calendars = CALENDAR_DATA.map((calendarItem) => {
+		return {
+			calendarId : calendarItem.calendarID,
+			color : calendarItem.color
+		}
+	})
+
 
 	return (
 		<div>
 			<Navbar/>
-			<div className='container' style={{display: 'flex', flexDirection : 'column', gap : 20, paddingTop : 120, paddingBottom : 120, maxWidth : 1200, justifyContent : 'center',  textAlign : 'justify'}}>
+			<div className={`container ${styles.calendarCSSReset}`} style={{display: 'flex', flexDirection : 'column', gap : 20, paddingTop : 120, paddingBottom : 120, maxWidth : 1200, justifyContent : 'center',  textAlign : 'justify'}}>
 				{
 					(loaded) ?
-					<GoogleCalendar calendars={calendars}/>
+					<GoogleCalendar
+						apiKey={API_KEY}
+						calendars={calendars}
+						styles={{
+							today : {
+								backgroundColor : '#e0e9f5'
+							},
+							eventText : {
+								fontSize : 14
+							}
+
+						}}
+					/>
 					: <div
 						style={{
 							backgroundColor : '#eee',

app/Calendar/page.module.css

@@ -2,4 +2,5 @@
     background-image : url('/images/headers/header.jpg');
     background-position: 50% 80%;
     filter: brightness(75%) contrast(115%);
-}
+}
+

app/Robots/[robot]/MediaContainer.js

@@ -1,6 +1,7 @@
 import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 import { Carousel } from 'react-responsive-carousel';
 
+import './carouselCSSWrapper.css'
 
 function getYoutubeVideoIDFromURL(url){
     var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
@@ -11,7 +12,7 @@ function getYoutubeVideoIDFromURL(url){
 
 const MediaContainer = ({robotItem}) => {
     return (
-        (robotItem.media) ? <Carousel
+        (robotItem.media && Object.keys(robotItem.media).length > 0) ? <Carousel
             dynamicHeight={false}
             preventMovementUntilSwipeScrollTolerance={true}
             swipeScrollTolerance={50}
@@ -21,7 +22,8 @@ const MediaContainer = ({robotItem}) => {
                 display: 'flex',
                 flex : 1,
                 width : '100%',
-                height : '100%'
+                height : '100%',
+                backgroundColor : '#000'
             }}
         >
             {
@@ -38,7 +40,21 @@ const MediaContainer = ({robotItem}) => {
                     />
                 })
             }
-        </Carousel> : <></>
+        </Carousel> : <div
+            style={{
+                position: 'relative',
+                display: 'flex',
+                justifyContent : 'center',
+                alignItems : 'center',
+                width : '100%',
+                height : 400,
+                backgroundColor : '#eee'
+            }}
+        >
+            <span style={{fontStyle : 'italic'}}>
+                No Media
+            </span>
+        </div>
     )
 }
 

app/Robots/[robot]/carouselCSSWrapper.css

@@ -0,0 +1,3 @@
+.carousel-slider {
+    background-color: #000;
+}

app/Robots/[robot]/page.js

@@ -83,9 +83,6 @@ export default function Robot({params}) {
 		}
 	})()
 
-
-	console.log("robot", robotItem, previousRobotItem, nextRobotItem, robotItem.media)
-
 	return (
 		<div>
 			<Navbar/>

app/Robots/page.js

@@ -13,10 +13,6 @@ export async function generateStaticParams() {
 
 	const robotData = await getRobotData();
 
-	// console.log("Robot Data", robotData);
-
-	console.log(robotData.map((robotItem) => robotItem.name))
-
     return robotData.map((robotItem) => {
         robotItem
     })

app/Sponsors/Incentives/page.js

@@ -137,16 +137,14 @@ export default function SponsorIncentivesPage() {
                         style={{
                             backgroundColor: '#0285ff',
                             '--hoverBackgroundColor' : '#0275ef',
-                            outlineColor : '#000',
+                            outlineColor : '#0285ff',
                             '--activeBackgroundColor' : '#444'
                         }}
                         variant={'inverted'}
                         href={'/Contact'}
                         target={''}
                     >
                         <span style={{
-                            paddingTop : 8,
-                            paddingBottom : 8
                         }}>
                             Contact us to Donate or Sponsor now
                         </span>

app/Sponsors/Incentives/page.module.css

@@ -26,6 +26,7 @@
     align-items: center;
     font-size: 0.9rem;
     font-weight: 600;
+    height : 40px;
     transition: color 0.4s;
 }
 

app/Sponsors/page.js

@@ -30,8 +30,6 @@ const getSponsorsData = async () => {
 
         const data = await res.json();
 
-		console.log("PAYLOAD", data.payload);
-
         const sponsorsData = data.payload.map((sponsorData) => {
             return {
                 id : sponsorData._id,
@@ -122,8 +120,6 @@ export default function SponsorsPage() {
 
         (async () => {
 
-            console.log("Getting sponsors data");
-
             // Get SponsorsData
             let sponsorsData = await getSponsorsData();
 

app/Sponsors/page.module.css

@@ -27,3 +27,7 @@
     font-weight: 600;
     transition: color 0.4s;
 }
+
+.sponsorsMoreButton:hover {
+    color : #fff;
+}

app/Team/page.js

@@ -119,8 +119,6 @@ const getTeamData = async (season) => {
 
         const teamData = await res.json();
 
-        console.log(teamData);
-
         return teamData.payload;
 
     } catch (err) {
@@ -184,8 +182,6 @@ export default function Team() {
 
         const fetchData = async () => {
 
-			console.log("FETCHING", displaySeasonValue);
-
             setTeamData(await getTeamData(displaySeasonValue.value));
 			setLoading(false);
         }

app/components/Blog/blog.module.css

@@ -14,13 +14,13 @@
 
 .blogTitle {
     color: #027bff;
-    font-size: 2rem;
+    font-size: 1.8rem;
     font-weight: 600;
     text-transform: uppercase;
 }
 
 .blogSubtitle {
-    font-size: 1.2rem;
+    font-size: 1rem;
     font-weight: 500;
 }
 
@@ -33,7 +33,7 @@
     text-overflow: ellipsis;
     text-overflow: nowrap;
     text-align: justify;
-    font-size: 1.2rem;
+    font-size: 1rem;
 }
 
 .blogReadMore {

app/components/Button/Button.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import styles from './button.module.css'
-import {useState} from 'react';
+import {useState, useEffect} from 'react';
 import Link from 'next/link';
 
 const ButtonBaseInternal = ({baseColor, hoverColor, outlineColor, outlineHoverColor, activeColor, disabledColor, contentContainerClass, children}) => {
@@ -40,8 +40,10 @@ const ButtonBaseInternal = ({baseColor, hoverColor, outlineColor, outlineHoverCo
     )
 }
 
-const ButtonBase = ({style = {}, children, type, variant, className, contentContainerClass = {}, href, target, ...props}) => {
-
+const ButtonBase = ({style, children, type, variant, className, contentContainerClass = {}, href, target, ...props}) => {
+
+    const _style = {...style};
+
     const baseColor = style['backgroundColor'] || '#000';
     const outlineColor = style['outlineColor'] || baseColor;
 
@@ -51,14 +53,13 @@ const ButtonBase = ({style = {}, children, type, variant, className, contentCont
     const activeColor = style['--activeBackgroundColor'] || hoverColor;
     const disabledColor = style['--disabledBackgroundColor'] || '#777';
 
-    delete style['backgroundColor'];
-    delete style['--hoverBackgroundColor']
-
-    delete style['outlineColor'];
-    delete style['--hoverOutlineColor']
+    delete _style['backgroundColor'];
+    delete _style['outlineColor'];
+    delete _style['--hoverBackgroundColor'];
+    delete _style['--hoverOutlineColor'];
+    delete _style['--activeBackgroundColor'];
+    delete _style['--disabledBackgroundColor'];
 
-    delete style['--activeBackgroundColor']
-    delete style['--disabledBackgroundColor']
 
     const [activeLink, setActiveLink] = useState(false);
 
@@ -79,7 +80,7 @@ const ButtonBase = ({style = {}, children, type, variant, className, contentCont
                 minHeight : 16,
                 minWidth : 16,
                 position: 'relative',
-                ...style
+                ..._style
             }}
             href={href}
             target={target}
@@ -98,7 +99,7 @@ const ButtonBase = ({style = {}, children, type, variant, className, contentCont
                 minHeight : 32,
                 minWidth : 32,
                 position: 'relative',
-                ...style
+                ..._style
             }}
             type={type}
             {...props}
@@ -114,10 +115,6 @@ const ButtonBase = ({style = {}, children, type, variant, className, contentCont
 
 const Button = ({style = {}, label, className, children, variant, ...props}) => {
 
-    if (label == "Subscribe") {
-        console.log("PROPS", props);
-    }
-
     return (
         <ButtonBase
             style={style}
@@ -137,6 +134,7 @@ const Button = ({style = {}, label, className, children, variant, ...props}) =>
 }
 
 const ButtonLink = ({style = {}, label, href = '/', target = '', className, children, variant, ...props}) => {
+
     return (
         <ButtonBase
             style={style}

app/components/Button/button.module.css

@@ -54,6 +54,10 @@
     height : calc(100% - (var(--blockShrinkWidth) * 2));
 }
 
+/* .button[variant="inverted"]:hover > .buttonInnerBlock {
+    --blockShrinkWidth : 2px;
+} */
+
 .button > .buttonInnerBlock {
     width : calc(100% - 4px);
     height : calc(100% - 4px);