Adds syssy colors by reverting last years stuff.

TurunWappuradio · Oct 20, 2023 · ace231d · ace231d
1 parent bfccb15
commit ace231d
Show file tree

Hide file tree

Showing 23 changed files with 109 additions and 92 deletions.
diff --git a/components/ShoutBox/shoutbox.tsx b/components/ShoutBox/shoutbox.tsx
@@ -22,14 +22,15 @@ export const ChatWrapper = () => {
 
   return (
     <div
-      className={`w-full flex-col items-center ${shoutboxOpen ? 'flex' : 'hidden'
-        }`}
+      className={`w-full flex-col items-center ${
+        shoutboxOpen ? 'flex' : 'hidden'
+      }`}
     >
       <div className="flex w-full max-w-6xl items-end justify-end">
         <button
           onClick={handleClose}
           title="chat"
-          className="mr-5 mt-5 h-10 w-10 rounded-full bg-coral"
+          className="bg-orange mr-5 mt-5 h-10 w-10 rounded-full"
         >
           <GrFormClose size="1.7rem" className="mx-auto" />
         </button>
@@ -154,10 +155,10 @@ const Chat = ({ limit, isOpen }: ShoutBoxProps) => {
               message={message.message}
               name={message.name}
               timestamp={message.timestamp}
-              color={index % 2 === 0 ? 'bg-blue' : 'bg-blue-light'}
+              color={index % 2 === 0 ? 'bg-purple-dark' : 'bg-purple-light'}
               isAdmin={isAdmin}
               onBanClick={handleBanClick}
-              telegram={message.source === "telegram"}
+              telegram={message.source === 'telegram'}
             />
           ))}
           {!wsConnected && (

diff --git a/components/ShoutBox/textfield.tsx b/components/ShoutBox/textfield.tsx
@@ -18,7 +18,7 @@ const TextField = ({
   <div className="TextFieldArea mr-[16px] inline-flex w-full justify-around">
     {label}
     <input
-      className="TextField w-full rounded-none border-b-2 border-solid border-blue-lightest bg-transparent text-white"
+      className="TextField w-full rounded-none border-b-2 border-solid border-orange bg-transparent text-white"
       type={type || 'text'}
       placeholder={placeholder}
       value={value}

diff --git a/components/button.tsx b/components/button.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { FC, ReactNode } from 'react';
 
 const buttonStyle =
-  'bg-teal px-6 md:px-8 py-2 md:py-3 text-blue font-bold hover:bg-coral transition ease-in-out rounded';
+  'bg-orange px-6 md:px-8 py-2 md:py-3 text-blue font-bold hover:bg-coral transition ease-in-out rounded';
 
 interface ButtonProps {
   children: ReactNode;
@@ -59,7 +59,7 @@ const ModeButton = ({ text, isActive, onClick, ...props }: ModeButton) => {
     <button
       {...props}
       className={`rounded-sm p-2 text-white ${
-        isActive ? 'bg-coral' : 'bg-blue-darkest hover:text-coral'
+        isActive ? 'bg-orange' : 'bg-purple-darkest hover:text-greyish'
       }`}
       onClick={onClick}
     >

diff --git a/components/calendar.tsx b/components/calendar.tsx
@@ -46,7 +46,7 @@ const Calendar: FC = () => {
         <Event key={idx} event={event} />
       ))}
       <a
-        className="ml-auto font-bold text-teal underline transition hover:text-coral"
+        className="ml-auto font-bold text-orange underline transition hover:text-coral"
         href={process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_SHARE_URL || ''}
         target="_blank"
         rel="noreferrer"
@@ -76,13 +76,13 @@ const Event: FC<{ event: Event }> = ({ event }) => {
       : formatWithoutTime(start, end);
 
   return (
-    <div className="my-2 flex flex-row bg-blue-darkest p-2 text-white">
+    <div className="my-2 flex flex-row bg-purple-dark p-2 text-white">
       <div className="flex w-28 flex-col items-center justify-center p-2">
         <div className="text-3xl font-bold">{dateFormatted}</div>
         <div className="text-lg font-bold">{weekday}</div>
       </div>
       <div className="w-full p-2">
-        <h3 className="text-xl font-bold text-coral">{event.summary}</h3>
+        <h3 className="text-xl font-bold text-greyish">{event.summary}</h3>
         <div>{timeFormatted}</div>
         {event.location && <div>@ {event.location}</div>}
       </div>
@@ -103,6 +103,7 @@ const formatWithoutTime = (start: Date, end: Date) => {
   end.setDate(end.getDate() - 1);
 
   const endFormatted = format(end, 'cccc d.M.', { locale: fi });
+
   return `${startFormatted} - ${endFormatted}`;
 };
 

diff --git a/components/controls.tsx b/components/controls.tsx
@@ -27,7 +27,7 @@ const Controls = ({
         onClick={onPlayPause}
         title="Play/Pause"
         className={`flex h-12 w-12 items-center justify-center rounded-full ${
-          playing ? 'bg-teal' : 'bg-coral'
+          playing ? 'bg-purple-darkest' : 'bg-orange'
         }`}
       >
         {playing ? (
@@ -40,7 +40,9 @@ const Controls = ({
       <button
         onClick={onMute}
         title="Mute"
-        className={`h-12 w-12 rounded-full ${muted ? 'bg-teal' : 'bg-coral'}`}
+        className={`h-12 w-12 rounded-full ${
+          muted ? 'bg-purple-darkest' : 'bg-orange'
+        }`}
       >
         <MuteIcon size="1.7rem" className="mx-auto" />
       </button>

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -16,7 +16,7 @@ interface FooterProps {
 
 const Footer = ({ navigationItems }: FooterProps) => {
   return (
-    <footer className="z-15 flex max-w-full flex-col flex-wrap items-center justify-center bg-blue-darkest py-14 pb-32 text-white lg:flex-row">
+    <footer className="z-15 flex max-w-full flex-col flex-wrap items-center justify-center bg-purple-darkest py-14 pb-32 text-white lg:flex-row">
       <div className="flex w-64 max-w-full justify-center lg:justify-start xl:w-128">
         <div className="flex w-fit flex-col items-center">
           <div className="relative flex h-36 w-36 md:h-52 md:w-52">

diff --git a/components/hero.tsx b/components/hero.tsx
@@ -94,8 +94,8 @@ const Hero: FC<HeroProps> = ({
               unoptimized={true}
             />
           </div>
-          <div className="flex flex-col">
-            <h1 className="my-1 text-[1.2rem] font-bold text-coral md:my-1 md:text-4xl">
+          <div className="flex flex-col pb-6">
+            <h1 className="my-1 text-[1.2rem] font-bold text-greyish md:my-1 md:text-4xl">
               {title}
             </h1>
             <p className="text-md my-1 text-white md:text-xl">{subtext}</p>
@@ -131,7 +131,7 @@ const Hero: FC<HeroProps> = ({
 const NavLink = ({ href, name }: { href: string; name: string }) => (
   <li className="p-4">
     <Link href={href}>
-      <a className="text-xl text-white transition hover:text-coral">{name}</a>
+      <a className="text-xl text-white transition hover:text-greyish">{name}</a>
     </Link>
   </li>
 );

diff --git a/components/player.tsx b/components/player.tsx
@@ -36,8 +36,8 @@ const Player = ({ playing, onPlayPause, showsByDate }: PlayerProps) => {
   const url = name ? picture?.url ?? placeholderImage : testcard;
   return (
     <div className="flex justify-center p-6">
-      <div className="flex w-[21rem] max-w-[59rem] flex-wrap items-center rounded bg-blue-darkest md:w-full md:flex-nowrap md:justify-start">
-        <div className="rounded bg-gradient-to-t from-coral via-blue-lightest to-teal p-1.5">
+      <div className="flex w-[21rem] max-w-[59rem] flex-wrap items-center rounded bg-purple-light md:w-full md:flex-nowrap md:justify-start">
+        <div className="rounded bg-gradient-to-t from-greyish via-orange to-purple-dark p-1.5">
           <div className="relative aspect-[3/2] w-80 rounded md:w-[28rem] lg:w-128">
             <Image
               src={url}
@@ -51,7 +51,7 @@ const Player = ({ playing, onPlayPause, showsByDate }: PlayerProps) => {
         <div className="mx-6 flex flex-col justify-between py-4 text-white md:mx-10 md:h-full md:py-10">
           {name && (
             <div className="mb-4 flex flex-col">
-              <span className="text-teal">Ohjelmassa nyt</span>
+              <span className="text-greyish">Ohjelmassa nyt</span>
               <span className="text-lg font-bold">{name}</span>
               <span className="opacity-80">
                 Juontaa: {hosts ?? 'Haamujuontaja'}
@@ -64,7 +64,7 @@ const Player = ({ playing, onPlayPause, showsByDate }: PlayerProps) => {
               onClick={onPlayPause}
               title="Play/Pause"
               className={`flex h-20 w-20 items-center justify-center rounded-full ${
-                playing ? 'bg-teal' : 'bg-coral'
+                playing ? 'bg-purple-darkest' : 'bg-orange'
               }`}
             >
               {playing ? <FiPause size="3rem" /> : <FiPlay size="3rem" />}
@@ -75,7 +75,7 @@ const Player = ({ playing, onPlayPause, showsByDate }: PlayerProps) => {
                 onClick={handleShoutboxToggle}
                 title="chat"
                 className={`h-12 w-12 rounded-full ${
-                  shoutboxOpen ? 'bg-teal' : 'bg-coral'
+                  shoutboxOpen ? 'bg-purple-darkest' : 'bg-orange'
                 }`}
               >
                 <FiMessageSquare size="1.7rem" className="mx-auto" />
@@ -84,7 +84,7 @@ const Player = ({ playing, onPlayPause, showsByDate }: PlayerProps) => {
                 onClick={handleVideoToggle}
                 title="Webcam"
                 className={`h-12 w-12 rounded-full ${
-                  videoOpen ? 'bg-teal' : 'bg-coral'
+                  videoOpen ? 'bg-purple-darkest' : 'bg-orange'
                 }`}
               >
                 <FiVideo size="1.7rem" className="mx-auto" />

diff --git a/components/playerControlPanel.tsx b/components/playerControlPanel.tsx
@@ -26,39 +26,39 @@ const PlayerControlPanel = ({
   const showMeta = new Date().getTime() > Date.parse(SHOW_START_TIME);
 
   return (
-    <>
-      <div className="bg-blue-darkestest px-4 text-white md:px-6">
-        <div className="mx-auto flex max-w-4xl items-center justify-between">
-          <div className="flex items-center py-6">
-            <Controls
-              playing={playing}
-              onPlayPause={onPlayPause}
-              muted={muted}
-              onMute={onMute}
-              volume={volume}
-              onVolumeChange={onVolumeChange}
-            />
-          </div>
+    <div className="bg-purple-light px-4 text-white md:px-6">
+      <div className="mx-auto flex max-w-4xl items-center justify-between">
+        <div className="flex items-center py-6">
+          <Controls
+            playing={playing}
+            onPlayPause={onPlayPause}
+            muted={muted}
+            onMute={onMute}
+            volume={volume}
+            onVolumeChange={onVolumeChange}
+          />
+        </div>
 
-          {showMeta && (
-            <div className="flex max-w-[50%] flex-col py-6 text-right lg:text-center">
-              <span className="font-bold md:text-xl">{song}</span>
-              <span className="text-sm opacity-80 md:text-base">{artist}</span>
-            </div>
-          )}
+        {showMeta && (
+          <div className="flex max-w-[50%] flex-col py-6 text-right lg:text-center">
+            <span className="font-bold md:text-xl">{song}</span>
+            <span className="text-sm opacity-80 md:text-base">{artist}</span>
+          </div>
+        )}
 
-          <div className="hidden text-right lg:block">
-            <span className="font-bold md:text-xl">Turun Wappuradio</span>
+        <div className="hidden text-right lg:block">
+          <span className="font-bold md:text-xl">Turun Wappuradio</span>
+          {/* TODO: Uncomment me
             <div>
               <span>Taajuudella</span> <b>93,8 MHz</b>
             </div>
             <div>
               <span>Studio</span> <b>02 3619 2819</b>
             </div>
-          </div>
+          */}
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/components/responsiveShowlist.tsx b/components/responsiveShowlist.tsx
@@ -18,7 +18,7 @@ const NavButton = ({ value, onClick, text, alternate = false }: NavButton) => {
   return (
     <>
       <a
-        className={`${'flex py-8 font-bold text-teal transition hover:text-coral'}
+        className={`${'flex py-8 font-bold text-greyish transition hover:text-orange'}
         ${disabled ? 'hidden' : ''}
         ${alternate ? '' : ''}
         `}
@@ -44,7 +44,9 @@ const DateButton = ({ value, currentDate, onClick }: DateButton) => {
   return (
     <button
       className={`w-full rounded-sm p-2 text-left capitalize text-white ${
-        (value === currentDate) ? 'bg-coral font-bold' : 'bg-blue-darkest hover:text-coral'
+        value === currentDate
+          ? 'bg-orange font-bold'
+          : 'bg-purple-darkest hover:text-greyish'
       }`}
       onClick={() => onClick(value)}
     >
@@ -90,7 +92,7 @@ export const ResponsiveShowlist = ({
         id="showList"
       >
         <select
-          className="mb-4 ml-6 flex h-8 rounded-sm  bg-blue-dark px-2 font-bold text-coral lg:hidden"
+          className="mb-4 ml-6 flex h-8 rounded-sm bg-purple-light px-2 font-bold text-white lg:hidden"
           onChange={(event) => setSelectedDate(event.target.value)}
           value={selectedDate}
         >

diff --git a/components/richtext.tsx b/components/richtext.tsx
@@ -32,22 +32,22 @@ const renderOptions = (links?: any): Options => {
     renderNode: {
       [BLOCKS.PARAGRAPH]: (node, children) => <p className="m-3">{children}</p>,
       [BLOCKS.HEADING_1]: (node, children) => (
-        <h1 className="mx-3 my-4 text-3xl font-bold text-coral">{children}</h1>
+        <h1 className="mx-3 my-4 text-3xl font-bold text-greyish">{children}</h1>
       ),
       [BLOCKS.HEADING_2]: (node, children) => (
-        <h2 className="m-3 text-3xl font-bold text-coral">{children}</h2>
+        <h2 className="m-3 text-3xl font-bold text-greyish">{children}</h2>
       ),
       [BLOCKS.HEADING_3]: (node, children) => (
-        <h3 className="m-3 text-2xl font-bold text-coral">{children}</h3>
+        <h3 className="m-3 text-2xl font-bold text-greyish">{children}</h3>
       ),
       [BLOCKS.HEADING_4]: (node, children) => (
-        <h4 className="m-3 text-xl font-bold text-coral">{children}</h4>
+        <h4 className="m-3 text-xl font-bold text-greyish">{children}</h4>
       ),
       [BLOCKS.HEADING_5]: (node, children) => (
-        <h5 className="m-3 text-lg font-bold text-coral">{children}</h5>
+        <h5 className="m-3 text-lg font-bold text-greyish">{children}</h5>
       ),
       [BLOCKS.HEADING_6]: (node, children) => (
-        <h6 className="m-3 text-lg font-bold text-coral">{children}</h6>
+        <h6 className="m-3 text-lg font-bold text-greyish">{children}</h6>
       ),
       [BLOCKS.UL_LIST]: (node, children) => (
         <ul className="ml-8 list-disc">{children}</ul>
@@ -80,7 +80,7 @@ const renderOptions = (links?: any): Options => {
         }
 
         return (
-          <a href={data.uri} className="font-bold text-teal underline">
+          <a href={data.uri} className="font-bold text-orange underline">
             {children}
           </a>
         );

diff --git a/components/showcard.tsx b/components/showcard.tsx
@@ -76,7 +76,7 @@ const TitleInfo = ({ show, isExpanded, index }: TitleInfoProps) => {
     >
       <p
         className={`w-fit rounded-sm px-2 text-base font-bold md:text-lg ${
-          index % 2 === 0 ? 'bg-coral' : 'bg-teal'
+          index % 2 === 0 ? 'bg-orange' : 'bg-purple-dark'
         }`}
       >
         {show.name}
@@ -96,11 +96,13 @@ interface DescriptionsProps {
 const Descriptions = ({ show, isExpanded }: DescriptionsProps) => {
   return (
     <div
-      className={`z-10 mt-auto flex flex-col overflow-y-auto rounded bg-blue-dark p-4 text-left transition ease-in-out md:ml-auto md:mt-0 md:h-[20rem] xl:h-[25rem] ${
+      className={`z-10 mt-auto flex flex-col overflow-y-auto rounded bg-purple-light p-4 text-left transition ease-in-out md:ml-auto md:mt-0 md:h-[20rem] xl:h-[25rem] ${
         isExpanded ? 'opacity-100' : 'opacity-0'
       }`}
     >
-      <h2 className="text-base font-bold text-teal sm:text-lg">{show.name}</h2>
+      <h2 className="text-base font-bold text-greyish sm:text-lg">
+        {show.name}
+      </h2>
       <h3 className="mt-2 text-sm font-bold text-white sm:text-base">
         Juontaa: {show.hosts ?? 'Haamujuontaja'}
       </h3>

diff --git a/components/showlist.tsx b/components/showlist.tsx
@@ -21,7 +21,7 @@ export const Showlist = ({ showsByDate, weekKeys }: ShowlistProps) => {
   return (
     <div className="mx-auto flex flex-col items-center py-6 pr-[25px] lg:pl-[25px]">
       <div className="flex w-full lg:max-w-[70%] xl:max-w-[57rem]">
-        <h1 className="mt-6 w-auto pl-6 text-xl font-bold text-coral md:text-3xl lg:pl-0">
+        <h1 className="mt-6 w-auto pl-6 text-xl font-bold text-greyish md:text-3xl lg:pl-0">
           Ohjelmistossa
         </h1>
         {isDesktop && (

diff --git a/components/sponsors.tsx b/components/sponsors.tsx
@@ -8,8 +8,8 @@ const Sponsors = ({ sponsors = [] }: SponsorProps) => {
   }
 
   return (
-    <div className="flex max-w-full flex-col items-center bg-blue pb-14 pt-4">
-      <h2 className="w-full max-w-5xl px-8 py-4 text-2xl font-bold text-coral">
+    <div className="flex max-w-full flex-col items-center bg-purple-light pb-14 pt-4">
+      <h2 className="w-full max-w-5xl px-8 py-4 text-2xl font-bold text-greyish">
         Turun Wappuradion tukena
       </h2>
       <div className="flex w-full max-w-5xl flex-wrap justify-center">

diff --git a/components/videoPlayer.tsx b/components/videoPlayer.tsx
@@ -15,7 +15,7 @@ const VideoPlayer = () => {
           <button
             onClick={handleClose}
             title="chat"
-            className="mr-5 mt-5 h-10 w-10 rounded-full bg-coral"
+            className="mr-5 mt-5 h-10 w-10 rounded-full bg-orange"
           >
             <GrFormClose size="1.7rem" className="mx-auto" />
           </button>

diff --git a/components/volumeSlider.tsx b/components/volumeSlider.tsx
@@ -22,8 +22,8 @@ const VolumeSlider = ({ volume, onVolumeChange, muted }: VolumeSliderProps) => {
       className={`transparent h-1 w-[6.66rem] appearance-none rounded-lg
           ${
             muted
-              ? 'bg-teal [&::-moz-range-thumb]:bg-teal [&::-webkit-slider-thumb]:bg-teal'
-              : 'bg-coral [&::-moz-range-thumb]:bg-coral [&::-webkit-slider-thumb]:bg-coral'
+              ? 'bg-purple-darkest [&::-moz-range-thumb]:bg-purple-darkest [&::-webkit-slider-thumb]:bg-purple-darkest'
+              : 'bg-orange [&::-moz-range-thumb]:bg-orange [&::-webkit-slider-thumb]:bg-orange'
           }
           [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5
           [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-none

diff --git a/components/widescreen-card.tsx b/components/widescreen-card.tsx
@@ -14,11 +14,11 @@ export const WideScreencard = ({
   showLength,
 }: WideScreenCardProps) => {
   const getBackgroundColor = () => {
-    if (!color) return 'bg-coral';
+    if (!color) return 'bg-orange';
     else if (color === Color.Promote) {
-      return 'bg-teal';
+      return 'bg-purple-dark';
     } else if (color === Color.Night) {
-      return 'bg-blue-lightest';
+      return 'bg-purple-light';
     }
   };