Collect and categorize (trying my best) different colors for easier t…

…heme swap

archiver/archiveCrawlers.ts

@@ -26,7 +26,7 @@ const mkdirp = async (filePath: string) => {
   try {
     // Ensure dirs exists with mkdir
     mkdirSync(filePath, { recursive: true });
-  } catch(error) {
+  } catch (error) {
     // noop. Throws error if dirs exists
   }
 };

components/ShoutBox/messageformatter.tsx

@@ -33,7 +33,7 @@ const MessageFormatter = ({
     </div>
     {isAdmin && name !== 'Toimitus' && name !== 'Palvelin' && !telegram && (
       <button
-        className="m-1 inline-block cursor-pointer select-none rounded border-[1px] border-white bg-transparent px-3 py-1.5 text-center align-middle text-base font-bold text-coral"
+        className="m-1 inline-block cursor-pointer select-none rounded border-[1px] border-white bg-transparent px-3 py-1.5 text-center align-middle text-base font-bold text-radio-accent"
         onClick={() => onBanClick(name)}
       >
         Bännää

components/ShoutBox/nameformatter.tsx

@@ -42,9 +42,9 @@ const NameFormatter = ({ name, timestamp, telegram }: NameFormatterProps) => {
 const findStyle = (name: string) => {
   switch (name) {
     case 'Toimitus':
-      return 'text-coral';
+      return 'text-radio-accent';
     case 'Palvelin':
-      return 'text-coral';
+      return 'text-radio-accent';
     default:
       return 'text-white';
   }

components/ShoutBox/shoutbox.tsx

@@ -30,7 +30,7 @@ export const ChatWrapper = () => {
         <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-radio-accent"
         >
           <GrFormClose size="1.7rem" className="mx-auto" />
         </button>
@@ -143,19 +143,52 @@ const Chat = ({ limit, isOpen }: ShoutBoxProps) => {
   }
 
   return (
-    <div className="mx-auto flex h-96 w-full max-w-6xl px-[25px] py-6 md:h-[38rem]">
+    <div className="mx-auto flex h-96 w-full max-w-6xl px-[25px] py-6 md:h-[38rem] ">
       <div className="mx-auto my-0 h-auto w-full flex-wrap overflow-auto overflow-x-hidden shadow-md">
         <div
           className="flex h-[81%] flex-col-reverse overflow-y-auto overflow-x-hidden px-0 py-2 text-white md:h-[85%]"
           ref={messagesViewport}
         >
-          {messages.map((message, index) => (
+          {[
+            {
+              message: 'hei',
+              name: 'sami',
+              timestamp: +new Date(),
+              source: null,
+            },
+            {
+              message: 'hei',
+              name: 'sami',
+              timestamp: +new Date(),
+              source: null,
+            },
+            {
+              message: 'hei',
+              name: 'sami',
+              timestamp: +new Date(),
+              source: 'telegram',
+            },
+            {
+              message: 'hei',
+              name: 'sami',
+              timestamp: +new Date(),
+              source: null,
+            },
+            {
+              message: 'hei',
+              name: 'sami',
+              timestamp: +new Date(),
+              source: null,
+            },
+          ].map((message, index) => (
             <MessageFormatter
               key={index}
               message={message.message}
               name={message.name}
               timestamp={message.timestamp}
-              color={index % 2 === 0 ? 'bg-blue' : 'bg-blue-light'}
+              color={
+                index % 2 === 0 ? 'bg-radio-common' : 'bg-radio-controller'
+              }
               isAdmin={isAdmin}
               onBanClick={handleBanClick}
               telegram={message.source === 'telegram'}

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-radio-controller bg-transparent text-white"
       type={type || 'text'}
       placeholder={placeholder}
       value={value}

components/button.tsx

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import Link from 'next/link';
 
 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-radio-action px-6 md:px-8 py-2 md:py-3 text-blue font-bold hover:bg-radio-accent200 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-radio-accent' : 'hover:text-radio-text bg-radio-common'
       }`}
       onClick={onClick}
     >

components/calendar.tsx

@@ -55,7 +55,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-radio-accent200 underline transition hover:text-radio-accent"
         href={process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_SHARE_URL || ''}
         target="_blank"
         rel="noreferrer"
@@ -85,13 +85,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-radio-common 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-radio-accent">{event.summary}</h3>
         <div>{timeFormatted}</div>
         {event.location && <div>@ {event.location}</div>}
       </div>

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-radio-secondary' : 'bg-radio-accent'
         }`}
       >
         {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-radio-secondary' : 'bg-radio-accent'
+        }`}
       >
         <MuteIcon size="1.7rem" className="mx-auto" />
       </button>

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-radio-common 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">

components/hero.tsx

@@ -96,7 +96,7 @@ const Hero: FC<HeroProps> = ({
             />
           </div>
           <div className="flex flex-col">
-            <h1 className="my-1 text-[1.2rem] font-bold text-coral md:my-1 md:text-4xl">
+            <h1 className="my-1 text-[1.2rem] font-bold text-radio-accent200 md:my-1 md:text-4xl">
               {title}
             </h1>
             <p className="text-md my-1 text-white md:text-xl">{subtext}</p>
@@ -132,7 +132,9 @@ 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-radio-accent">
+        {name}
+      </a>
     </Link>
   </li>
 );

components/menu.tsx

@@ -12,7 +12,7 @@ const Menu = ({ navigationItems, isOpen, closeMenu }: MenuProps) => (
   <div
     className={`
       fixed left-0 top-0 z-30 h-screen w-full
-      transform-gpu bg-blue-darkest
+      transform-gpu bg-radio-common
       text-white transition-all md:hidden
       ${isOpen ? 'translate-x-0' : '-translate-x-full'}
     `}

components/player.tsx

@@ -36,8 +36,8 @@ const Player = ({ playing, onPlayPause, showsByDate }: PlayerProps) => {
   const url = name ? pictureUrl ?? 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-radio-bg200 md:w-full md:flex-nowrap md:justify-start">
+        <div className="rounded bg-gradient-to-t from-radio-accent via-radio-accent200 to-radio-secondary 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-radio-accent200">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-radio-secondary' : 'bg-radio-accent'
               }`}
             >
               {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-radio-secondary' : 'bg-radio-accent'
                 }`}
               >
                 <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-radio-secondary' : 'bg-radio-accent'
                 }`}
               >
                 <FiVideo size="1.7rem" className="mx-auto" />

components/playerControlPanel.tsx

@@ -26,7 +26,7 @@ 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="bg-radio-controller 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

components/responsiveShowlist.tsx

@@ -18,7 +18,7 @@ const NavButton = ({ value, onClick, text, alternate = false }: NavButton) => {
   return (
     <>
       <a
-        className={`${'flex cursor-pointer py-8 font-bold text-teal transition hover:text-coral'}
+        className={`${'flex cursor-pointer py-8 font-bold text-radio-accent200 transition hover:text-radio-accent'}
         ${disabled ? 'hidden' : ''}
         ${alternate ? '' : ''}
         `}
@@ -45,8 +45,8 @@ const DateButton = ({ value, currentDate, onClick }: DateButton) => {
     <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'
+          ? 'bg-radio-accent font-bold'
+          : 'bg-radio-common hover:text-radio-accent'
       }`}
       onClick={() => onClick(value)}
     >
@@ -92,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-radio-bg200 px-2 font-bold text-radio-accent lg:hidden"
           onChange={(event) => setSelectedDate(event.target.value)}
           value={selectedDate}
         >

components/richtext.tsx

@@ -32,22 +32,34 @@ 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-radio-accent200">
+          {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-radio-accent200">
+          {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-radio-accent200">
+          {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-radio-accent200">
+          {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-radio-accent200">
+          {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-radio-accent200">
+          {children}
+        </h6>
       ),
       [BLOCKS.UL_LIST]: (node, children) => (
         <ul className="ml-8 list-disc">{children}</ul>
@@ -80,7 +92,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-radio-action underline">
             {children}
           </a>
         );

components/showcard.tsx

@@ -33,7 +33,7 @@ export const ShowCard = ({ show, index, className, forceOpen }: ShowCard) => {
         className={`group relative flex h-full w-full flex-col-reverse overflow-hidden rounded md:flex-row  ${
           isExpanded
             ? 'flex rounded md:contents'
-            : 'bg-gradient-to-bl from-transparent via-transparent to-blue-darkest'
+            : 'bg-gradient-to-b from-transparent via-transparent to-blue-darkest'
         }`}
         onClick={handleClick}
       >
@@ -75,7 +75,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-radio-accent' : 'bg-radio-secondary'
         }`}
       >
         {show.name}
@@ -95,11 +95,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-radio-bg200 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-radio-accent200 sm:text-lg">
+        {show.name}
+      </h2>
       <h3 className="mt-2 text-sm font-bold text-white sm:text-base">
         Juontaa: {show.hosts ?? 'Haamujuontaja'}
       </h3>
@@ -136,7 +138,7 @@ const ShowImage = ({ show, isExpanded }: ShowImageProps) => {
         objectPosition={'65% 35%'}
         className={`-z-10  ${
           isExpanded
-            ? 'rounded-t md:rounded-b md:rounded-l md:rounded-l-none '
+            ? 'rounded-t md:rounded-b md:rounded-l-none'
             : 'opacity-70 transition duration-300 ease-in-out md:group-hover:scale-110 md:group-hover:opacity-100'
         }`}
         alt={name || ''}

components/showlist.tsx

@@ -18,7 +18,7 @@ export const Showlist = ({ showsByDate }: 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-radio-accent200 md:text-3xl lg:pl-0">
           Ohjelmistossa
         </h1>
         {isDesktop && (