feat: gaurko eguna markatzen du

front/src/components/SFEgunaEdukia.tsx

@@ -3,7 +3,7 @@ import { datesUtils } from '../utils/dateUtils';
 import { SFEguna } from '../pages/sanferminak';
 import styled from 'styled-components';
 import { rem } from 'polished';
-import { colors, font, fontWeight, size } from '../ui/theme';
+import { font, fontWeight, size } from '../ui/theme';
 import { graphql, useStaticQuery } from 'gatsby';
 
 interface DataProps {
@@ -61,7 +61,6 @@ export const SFEgunaEdukia: React.FC<{ sfeguna: SFEguna }> = ({ sfeguna }) => {
 };
 
 const BesteHitzordua = styled.p`
-  color: ${colors.zuria};
   ${font.base()};
   font-weight: ${fontWeight.bold};
 
@@ -72,21 +71,20 @@ const SFEgunaEguna = styled.p`
   margin-bottom: ${rem(size.base)};
 
   ${font.large()};
-  color: ${colors.zuria};
 `;
 
 const SFEgunaNagusiaIzenburua = styled.h2`
   flex-grow: 1;
 
   ${font.large()};
-  color: ${colors.zuria};
+
   font-weight: ${fontWeight.bold};
   text-align: center;
 `;
 
 const SFEgunaNagusiaOrdua = styled.p`
   ${font.base()};
-  color: ${colors.zuria};
+
   font-weight: ${fontWeight.bold};
   text-align: center;
 `;

front/src/pages/sanferminak.tsx

@@ -11,6 +11,7 @@ import { rem } from 'polished';
 import ReactMarkdown from 'react-markdown';
 import { Oina } from '../components/Oina';
 import { SFEgunaEdukia } from '../components/SFEgunaEdukia';
+import { datesUtils } from '../utils/dateUtils';
 
 export interface SFEguna {
   id: string;
@@ -88,7 +89,14 @@ const IndexPage: React.VFC<PageProps> = () => {
             strapiSanferminak.sf_egunak.length > 0 && (
               <SFEgunZerrenda>
                 {strapiSanferminak.sf_egunak.map(sfeguna => (
-                  <SFEgunaElementua key={sfeguna.id}>
+                  <SFEgunaElementua
+                    key={sfeguna.id}
+                    className={
+                      datesUtils.isToday(new Date(sfeguna.eguna))
+                        ? 'active'
+                        : ''
+                    }
+                  >
                     <SFEgunaEdukia sfeguna={sfeguna} />
                   </SFEgunaElementua>
                 ))}
@@ -107,6 +115,23 @@ const SFEgunaElementua = styled.li`
 
   width: 100%;
   background-color: ${colors.beltza};
+  color: ${colors.zuria};
+
+  &.active {
+    @keyframes mymove {
+      0% {
+        background-color: ${colors.beltza};
+      }
+      33% {
+        background-color: ${colors.morea};
+      }
+      66% {
+        background-color: ${colors.beltza};
+      }
+    }
+
+    animation: mymove 4s infinite;
+  }
 
   ${media.tablet`
     aspect-ratio: 1/1;

front/src/utils/dateUtils.ts

@@ -7,6 +7,7 @@ export const datesUtils = {
   getDate,
   getHour,
   areSameDay,
+  isToday,
 };
 
 function getDate(rawDate: string): Date {
@@ -20,3 +21,7 @@ function getHour(date: Date): string {
 function areSameDay(date: Date, reference: Date): boolean {
   return dayjs(date).isSame(reference, 'day');
 }
+
+function isToday(date: Date) {
+  return dayjs(date).isSame(new Date(), 'day');
+}