diff --git a/front/src/components/SFEgunaEdukia.tsx b/front/src/components/SFEgunaEdukia.tsx index 03fc429..f5703e7 100644 --- a/front/src/components/SFEgunaEdukia.tsx +++ b/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; `; diff --git a/front/src/pages/sanferminak.tsx b/front/src/pages/sanferminak.tsx index 0460342..decfd62 100644 --- a/front/src/pages/sanferminak.tsx +++ b/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 = () => { strapiSanferminak.sf_egunak.length > 0 && ( {strapiSanferminak.sf_egunak.map(sfeguna => ( - + ))} @@ -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; diff --git a/front/src/utils/dateUtils.ts b/front/src/utils/dateUtils.ts index 8a90ccf..da85a16 100644 --- a/front/src/utils/dateUtils.ts +++ b/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'); +}