Schedule Fixes

app/(pages)/(hackers)/(hub)/schedule/page.tsx

@@ -395,11 +395,12 @@ export default function Page() {
                 activeDay === '9' ? 'text-[#3F3F3F]' : 'text-[#ACACB9]'
               }`}
             >
-              {activeDay === '9' && (
-                <span className="mr-2" aria-hidden>
-                  {'\u2022'}
-                </span>
-              )}
+              <span
+                className={`mr-2 ${activeDay === '9' ? '' : 'invisible'}`}
+                aria-hidden
+              >
+                {'\u2022'}
+              </span>
               <span>MAY 9</span>
             </button>
             <button
@@ -409,11 +410,12 @@ export default function Page() {
                 activeDay === '10' ? 'text-[#3F3F3F]' : 'text-[#ACACB9]'
               }`}
             >
-              {activeDay === '10' && (
-                <span className="mr-2" aria-hidden>
-                  {'\u2022'}
-                </span>
-              )}
+              <span
+                className={`mr-2 ${activeDay === '10' ? '' : 'invisible'}`}
+                aria-hidden
+              >
+                {'\u2022'}
+              </span>
               <span>MAY 10</span>
             </button>
           </div>

app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx

@@ -8,6 +8,11 @@ import {
   useScheduleSneakPeekData,
 } from '../../../_hooks/useScheduleSneakPeekData';
 
+import sleeping_cow from '@public/hackers/hero/sleeping_cow.svg';
+import duckbunny from '@public/hackers/hero/scheduleSneakPeek/duck+bunny.svg';
+import duckfrog from '@public/hackers/hero/scheduleSneakPeek/duck+frog.svg';
+import cucumber_cow from '@public/hackers/hero/scheduleSneakPeek/cucumber_cow.svg';
+
 interface ScheduleSneakPeekProps {
   className?: string;
 }
@@ -75,9 +80,35 @@ function Panel({
         {liveEvents.length > 0 ? (
           renderEventItems(liveEvents, 'live')
         ) : (
-          <p className="font-jakarta text-sm text-[#7C7C85] mt-[1vw]">
-            No events happening right now.
-          </p>
+          <div className="bg-[#F3F3FC] rounded-[12px] flex flex-col items-center p-[36px] gap-[12px]">
+            <Image
+              src={title === 'Happening now' ? cucumber_cow : duckbunny}
+              alt={
+                title === 'Happening now'
+                  ? 'Cow with cucumber over their eyes'
+                  : 'Duck on top of bunny'
+              }
+            />
+            <p className="font-semibold text-center text-[#3F3F3F] text-[16px] tracking-[0.64px]">
+              {title === 'Your schedule'
+                ? 'No live events on your schedule'
+                : 'No live events'}
+            </p>
+            <p className="text-center text-[#7C7C85] md:w-[70%] text-[14px] tracking-[0.64px]">
+              This is where you’ll see live events. Seems like there’s nothing
+              going on at the moment!
+            </p>
+            <Link
+              href="/schedule"
+              className="hover:brightness-[97%] hover:saturate-[140%]"
+            >
+              {title == 'Your schedule' ? (
+                <button className="bg-[#CCFFFE] text-[#003D3D] rounded-full p-[12px] font-semibold text-center px-[24px] text-[14px] tracking-[0.64px]">
+                  Add to your schedule
+                </button>
+              ) : null}
+            </Link>
+          </div>
         )}
       </div>
 
@@ -86,9 +117,36 @@ function Panel({
         {upcomingEvents.length > 0 ? (
           renderEventItems(upcomingEvents, 'upcoming')
         ) : (
-          <p className="font-jakarta text-sm text-[#7C7C85] mt-3">
-            No events starting in the next 30 minutes.
-          </p>
+          <div className="bg-[#F3F3FC] rounded-[12px] flex flex-col items-center p-[36px] gap-[12px]">
+            <Image
+              src={title === 'Happening now' ? sleeping_cow : duckfrog}
+              alt={
+                title === 'Happening now'
+                  ? 'Sleeping cow'
+                  : 'Duck on top of frog'
+              }
+            />
+            <p className="font-semibold text-center text-[#3F3F3F] text-[16px] tracking-[0.64px]">
+              {title === 'Your schedule'
+                ? 'No upcoming events on your schedule'
+                : 'No upcoming events'}
+            </p>
+            <p className="text-center text-[#7C7C85] md:w-[70%] text-[14px] tracking-[0.64px]">
+              {title === 'Your schedule'
+                ? 'This is where you’ll see upcoming events. Seems like there’s nothing coming up! Take a look to see if there’s anything you want to check out.'
+                : 'This is where you’ll  see upcoming events. Seems like there’s nothing coming up!'}
+            </p>
+            <Link
+              href="/schedule"
+              className="hover:brightness-[97%] hover:saturate-[140%]"
+            >
+              {title == 'Your schedule' ? (
+                <button className="bg-[#CCFFFE] text-[#003D3D] rounded-full p-[12px] font-semibold text-center px-[24px] text-[14px] tracking-[0.64px]">
+                  Explore events
+                </button>
+              ) : null}
+            </Link>
+          </div>
         )}
       </div>
     </div>
@@ -111,12 +169,12 @@ export default function ScheduleSneakPeek({
     <div id="schedule-sneak-peek" className="w-full bg-[#FAFAFF]">
       <section className={`w-[90%] mx-auto py-[5vw] ${className ?? ''}`}>
         <div className="inline-flex items-center group font-jakarta text-[clamp(1.25rem,4.2vw,3rem)] font-semibold leading-tight tracking-[0.72px] text-[#3F3F3F] whitespace-nowrap">
-          <span className="w-0 group-hover:w-[26px] overflow-hidden transition-all duration-300 ease-out shrink-0">
+          <span className="w-0 group-hover:w-[20px] md:group-hover:w-[35px]  overflow-hidden transition-all duration-300 ease-out shrink-0">
             <Image
               src="/icons/arrow-right.svg"
               alt=""
-              width={26}
-              height={26}
+              width={35}
+              height={35}
               className="-translate-x-3 group-hover:translate-x-0 transition-transform duration-300 ease-out"
             />
           </span>

app/(pages)/(hackers)/_components/Schedule/CalendarItem.tsx

@@ -46,7 +46,7 @@ export function CalendarItem({
 
   return (
     <div
-      className={`w-full py-[24px] flex-shrink-0 rounded-[16px] px-[20px] 2xs:px-[38px] 2xs:py-[24px] lg:px-[40px] lg:py-[32px] mb-[16px] flex ${
+      className={`w-full py-[24px] flex-shrink-0 rounded-[16px] px-[20px] 2xs:px-[38px] 2xs:py-[24px] lg:px-[40px] lg:py-[32px] mb-[8px] flex ${
         displayType === 'ACTIVITIES' ? 'flex-row' : 'flex-col justify-center'
       }`}
       style={{
@@ -157,7 +157,7 @@ export function CalendarItem({
                 onClick={
                   inPersonalSchedule ? onRemoveFromSchedule : onAddToSchedule
                 }
-                className="w-auto h-auto px-9 py-4 rounded-3xl cursor-pointer relative shrink-0"
+                className="w-auto h-auto px-9 py-4 rounded-3xl cursor-pointer relative shrink-0 hover:brightness-[97%] hover:saturate-[140%]"
                 style={{
                   backgroundColor:
                     eventStyle.addButtonColor || 'rgba(0, 0, 0, 0)',

app/(pages)/(hackers)/_components/Schedule/ScheduleMobileControls.tsx

@@ -112,7 +112,7 @@ export default function ScheduleMobileControls({
         </div>
 
         {!isMobileFilterOpen && (
-          <div className="shrink-0 h-[45px] flex flex-row gap-8 items-center">
+          <div className="shrink-0 h-[45px] flex flex-row gap-8 items-center bg-white/80 rounded-[30px]">
             {renderDayButton('9', 'MAY 9')}
             {renderDayButton('10', 'MAY 10')}
           </div>