From 2646b21712fa4b43f9923abf807113f656a224b5 Mon Sep 17 00:00:00 2001 From: Aitor Urrutia <3373382+Txarli@users.noreply.github.com> Date: Tue, 26 Dec 2023 11:43:01 +0100 Subject: [PATCH] Orri sekundarioak css modulesera pasatzen ditu (#14) * refactor: extract component * refactor: extract component * refactor: use comonent * feat: Orrialde basikoa CSS modulesera pasatzen du * chore: erabiltzen ez den konponentea kentzen du * feat: Oina CSS modulesera pasatzen du * refactor: CSS variable * chore: erabiltzen ez den tema kentzen du * chore: erabiltzen ez den objektua kentzen du * chore: dependentziak kentzen ditu --- back/database/migrations/development.db | Bin 917504 -> 917504 bytes back/package.json | 7 +- front/gatsby-config.js | 1 - front/package.json | 5 - .../AlergenoLegenda.module.scss | 4 +- front/src/components/Dialog.tsx | 115 ---------- front/src/components/Oina.tsx | 33 --- front/src/components/Oina/Oina.module.scss | 20 ++ front/src/components/Oina/Oina.tsx | 16 ++ front/src/components/Oina/index.ts | 1 + front/src/components/SEO.tsx | 6 +- front/src/pages/404.tsx | 26 +-- front/src/pages/lege-oharra.tsx | 77 +------ front/src/pages/pribatutasun-politika.tsx | 97 +------- front/src/styles/cssConfig.scss | 2 +- front/src/styles/generic/reboot.scss | 2 +- front/src/styles/settings/fontWeight.scss | 4 + front/src/styles/settings/index.scss | 1 + front/src/ui/GlobalStyles.tsx | 213 ------------------ front/src/ui/theme/breakpoints.ts | 4 - front/src/ui/theme/colors.ts | 10 - front/src/ui/theme/font.ts | 41 ---- front/src/ui/theme/fontWeight.ts | 4 - front/src/ui/theme/index.ts | 7 - front/src/ui/theme/media.ts | 15 -- front/src/ui/theme/size.ts | 12 - front/src/utils/dateUtils.ts | 27 --- front/src/views/Hasiera/Hasiera.module.scss | 4 +- .../ProduktuZerrenda.module.scss | 6 +- front/src/views/NotFound/NotFound.tsx | 20 ++ front/src/views/NotFound/index.ts | 1 + .../views/RegularPage/RegularPage.module.scss | 65 ++++++ front/src/views/RegularPage/RegularPage.tsx | 34 +++ .../views/RegularPage/RegularPageContent.ts | 4 + front/src/views/RegularPage/index.ts | 1 + yarn.lock | 107 +-------- 36 files changed, 209 insertions(+), 783 deletions(-) delete mode 100644 front/src/components/Dialog.tsx delete mode 100644 front/src/components/Oina.tsx create mode 100644 front/src/components/Oina/Oina.module.scss create mode 100644 front/src/components/Oina/Oina.tsx create mode 100644 front/src/components/Oina/index.ts create mode 100644 front/src/styles/settings/fontWeight.scss delete mode 100644 front/src/ui/GlobalStyles.tsx delete mode 100644 front/src/ui/theme/breakpoints.ts delete mode 100644 front/src/ui/theme/colors.ts delete mode 100644 front/src/ui/theme/font.ts delete mode 100644 front/src/ui/theme/fontWeight.ts delete mode 100644 front/src/ui/theme/index.ts delete mode 100644 front/src/ui/theme/media.ts delete mode 100644 front/src/ui/theme/size.ts delete mode 100644 front/src/utils/dateUtils.ts create mode 100644 front/src/views/NotFound/NotFound.tsx create mode 100644 front/src/views/NotFound/index.ts create mode 100644 front/src/views/RegularPage/RegularPage.module.scss create mode 100644 front/src/views/RegularPage/RegularPage.tsx create mode 100644 front/src/views/RegularPage/RegularPageContent.ts create mode 100644 front/src/views/RegularPage/index.ts diff --git a/back/database/migrations/development.db b/back/database/migrations/development.db index e9307c1c78eff8eac1818134deda4946442ace01..6f7a22724ba2742a63788858aebf2d08173e2eb6 100644 GIT binary patch delta 100 zcmZo@uxMzom>|t~XrhcW)|;4(I~Ff=qUFfcJ}w|m0{#N0s4v)%3u?;&9TBS|7) delta 100 zcmZo@uxMzom>|u#Z=#Gd;aP9EsQNpEzB(}EvzkUE$l5EEu34p z_}}mv8Y&nl7#S*P0ioe^nKxV#Tt=2gmS%>A21aJ>c5k?Vm>Y void; -} - -export const Dialog: React.FC> = ({ - open, - onClose, - children, -}) => { - const modalRef = useRef(null); - - useEffect(() => { - if (!modalRef) { - return; - } - - if (open) { - modalRef.current?.showModal(); - return; - } - - modalRef.current?.close(); - }, [open, modalRef]); - - return ( - { - if (target !== modalRef.current) { - return; - } - onClose(); - }} - > - - - ✕ - - - {children && {children}} - - - ); -}; - -const Close = styled.button` - position: absolute; - top: ${size.tiny}px; - right: ${size.tiny}px; - - color: ${colors.zuria}; - ${font.base()}; - - background-color: ${rgba(colors.beltza, 0.7)}; - border: none; - cursor: pointer; - z-index: 1; - border-radius: 5px; - - &:hover { - color: ${colors.urdina}; - } -`; - -const DialogBody = styled.div``; - -const DialogContent = styled.div` - width: 100%; - height: 100%; -`; - -const DialogWrapper = styled.dialog` - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - margin: 30px auto; - padding: 0; - width: 85vw; - - border: 1px solid ${colors.beltza}; - box-shadow: 0 5px 15px ${colors.beltza}; - - ${media.tablet` - width: 600px; - `} - - &::backdrop { - backdrop-filter: blur(4px); - background-color: ${rgba(colors.beltza, 0.6)}; - } - - &[open] { - animation: show 1s ease normal; - } - @keyframes show { - from { - transform: translateY(-110%); - } - to { - transform: translateY(0%); - } - } -`; diff --git a/front/src/components/Oina.tsx b/front/src/components/Oina.tsx deleted file mode 100644 index a95987a..0000000 --- a/front/src/components/Oina.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Link } from 'gatsby'; -import { rem } from 'polished'; -import React from 'react'; -import styled from 'styled-components'; -import { colors, size } from '../ui/theme'; - -export const Oina: React.VFC = () => ( - - Lege oharra - Pribatutasun politika - -); - -const Wrapper = styled.footer` - display: flex; - justify-content: center; - padding: ${rem(size.base)}; -`; - -const Esteka = styled(Link)` - &:not(:last-child) { - margin-right: ${rem(size.mini)}; - } - - transition: color 500ms ease-out 100ms; - &:hover { - color: ${colors.morea}; - } - - &:focus { - outline: 2px solid ${colors.morea}; - } -`; diff --git a/front/src/components/Oina/Oina.module.scss b/front/src/components/Oina/Oina.module.scss new file mode 100644 index 0000000..7533f8d --- /dev/null +++ b/front/src/components/Oina/Oina.module.scss @@ -0,0 +1,20 @@ +.wrapper { + display: flex; + justify-content: center; + padding: var(--size-base); +} + +.esteka { + &:not(:last-child) { + margin-right: var(--size-mini); + } + + transition: color 500ms ease-out 100ms; + &:hover { + color: var(--color-morea); + } + + &:focus { + outline: 2px solid var(--color-morea); + } +} diff --git a/front/src/components/Oina/Oina.tsx b/front/src/components/Oina/Oina.tsx new file mode 100644 index 0000000..b14518e --- /dev/null +++ b/front/src/components/Oina/Oina.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Link } from 'gatsby'; + +import * as styles from './Oina.module.scss'; + +export const Oina: React.FC = () => ( +
+ + Lege oharra + + + Pribatutasun politika + +
+); diff --git a/front/src/components/Oina/index.ts b/front/src/components/Oina/index.ts new file mode 100644 index 0000000..875c231 --- /dev/null +++ b/front/src/components/Oina/index.ts @@ -0,0 +1 @@ +export { Oina } from './Oina'; diff --git a/front/src/components/SEO.tsx b/front/src/components/SEO.tsx index 01dbe32..ae92313 100644 --- a/front/src/components/SEO.tsx +++ b/front/src/components/SEO.tsx @@ -1,6 +1,8 @@ -import { PageProps } from 'gatsby'; import React from 'react'; import { Helmet } from 'react-helmet'; + +import { PageProps } from 'gatsby'; + import ogImagePath from '../images/og-image.jpeg'; interface Props { @@ -10,7 +12,7 @@ interface Props { location: PageProps['location']; } -export const SEO: React.VFC = ({ title, description, location }) => ( +export const SEO: React.FC = ({ title, description, location }) => ( {description && } diff --git a/front/src/pages/404.tsx b/front/src/pages/404.tsx index 3b20f1c..fd7269f 100644 --- a/front/src/pages/404.tsx +++ b/front/src/pages/404.tsx @@ -1,30 +1,16 @@ import React from 'react'; -import { Helmet } from 'react-helmet'; -import { Link } from 'gatsby'; +import { PageProps } from 'gatsby'; -import { Container } from '../components/Container'; -import { Gainburua } from '../components/Gainburua'; -import { GlobalStyles } from '../ui/GlobalStyles'; +import { SEO } from '../components/SEO'; +import { NotFound } from '../views/NotFound'; -const NotFoundPage: React.FC = () => { +const NotFoundPage: React.FC = ({ location }) => { return ( <> - + - - - - -
-

Ez dugu orria topatu

-
- Hasierara bueltatu -
- + ); }; diff --git a/front/src/pages/lege-oharra.tsx b/front/src/pages/lege-oharra.tsx index 1607425..9fb7dbf 100644 --- a/front/src/pages/lege-oharra.tsx +++ b/front/src/pages/lege-oharra.tsx @@ -1,24 +1,16 @@ -import { graphql, PageProps, useStaticQuery } from 'gatsby'; import React from 'react'; -import { GlobalStyles } from '../ui/GlobalStyles'; -import { Container } from '../components/Container'; -import ReactMarkdown from 'react-markdown'; -import styled from 'styled-components'; -import { font, fontWeight, size } from '../ui/theme'; -import { rem } from 'polished'; -import { Gainburua } from '../components/Gainburua'; -import { Oina } from '../components/Oina'; +import { graphql, PageProps, useStaticQuery } from 'gatsby'; + import { SEO } from '../components/SEO'; +import { RegularPage } from '../views/RegularPage'; +import { RegularPageContent } from '../views/RegularPage/RegularPageContent'; interface DataProps { - strapiLegeOharra: { - izenburua: string; - edukia: string; - }; + strapiLegeOharra: RegularPageContent; } -const LegeOharra: React.VFC = ({ location }) => { +const LegeOharra: React.FC = ({ location }) => { const { strapiLegeOharra } = useStaticQuery(graphql` { strapiLegeOharra { @@ -32,64 +24,9 @@ const LegeOharra: React.VFC = ({ location }) => { <> - - - - - - - {strapiLegeOharra.edukia} - - - - + ); }; -const Atala = styled.section` - padding-top: ${rem(size.base)}; -`; - -const Edukia = styled(ReactMarkdown)` - font-weight: ${fontWeight.regular}; - ${font.base()}; - - p:not(-last-child) { - margin-bottom: ${rem(size.base)}; - } - - h1 { - ${font.gargantuan()}; - font-weight: ${fontWeight.bold}; - margin-bottom: ${rem(size.base)}; - } - - h2 { - ${font.huge()}; - font-weight: ${fontWeight.bold}; - margin-bottom: ${rem(size.base)}; - } - - h3 { - ${font.large()}; - font-weight: ${fontWeight.bold}; - margin-bottom: ${rem(size.base)}; - } - - h4 { - font-weight: ${fontWeight.bold}; - margin-bottom: ${rem(size.mini)}; - } - - ul { - margin-bottom: ${rem(size.base)}; - } - - li { - list-style: disc inside; - margin-bottom: ${rem(size.small)}; - } -`; - export default LegeOharra; diff --git a/front/src/pages/pribatutasun-politika.tsx b/front/src/pages/pribatutasun-politika.tsx index e8df0e9..0ebb457 100644 --- a/front/src/pages/pribatutasun-politika.tsx +++ b/front/src/pages/pribatutasun-politika.tsx @@ -1,25 +1,16 @@ -import { graphql, PageProps, useStaticQuery } from 'gatsby'; import React from 'react'; -import { GlobalStyles } from '../ui/GlobalStyles'; -import remarkGfm from 'remark-gfm'; -import { Container } from '../components/Container'; -import ReactMarkdown from 'react-markdown'; -import styled from 'styled-components'; -import { colors, font, fontWeight, size } from '../ui/theme'; -import { rem } from 'polished'; -import { Gainburua } from '../components/Gainburua'; -import { Oina } from '../components/Oina'; +import { graphql, PageProps, useStaticQuery } from 'gatsby'; + import { SEO } from '../components/SEO'; +import { RegularPage } from '../views/RegularPage/RegularPage'; +import { RegularPageContent } from '../views/RegularPage/RegularPageContent'; interface DataProps { - strapiPribatutasunPolitika: { - izenburua: string; - edukia: string; - }; + strapiPribatutasunPolitika: RegularPageContent; } -const PribatutasunPolitika: React.VFC = ({ location }) => { +const PribatutasunPolitika: React.FC = ({ location }) => { const { strapiPribatutasunPolitika } = useStaticQuery(graphql` { strapiPribatutasunPolitika { @@ -33,83 +24,9 @@ const PribatutasunPolitika: React.VFC = ({ location }) => { <> - - - - - - - {strapiPribatutasunPolitika.edukia} - - - - + ); }; -const Atala = styled.section` - padding-top: ${rem(size.base)}; -`; - -const Edukia = styled(ReactMarkdown).attrs({ remarkPlugins: [remarkGfm] })` - font-weight: ${fontWeight.regular}; - ${font.base()}; - - p:not(-last-child) { - margin-bottom: ${rem(size.base)}; - } - - h1 { - ${font.gargantuan()}; - font-weight: ${fontWeight.bold}; - margin-bottom: ${rem(size.base)}; - } - - h2 { - ${font.huge()}; - font-weight: ${fontWeight.bold}; - margin-bottom: ${rem(size.base)}; - } - - h3 { - ${font.large()}; - font-weight: ${fontWeight.bold}; - margin-bottom: ${rem(size.base)}; - } - - h4 { - font-weight: ${fontWeight.bold}; - margin-bottom: ${rem(size.mini)}; - } - - ul { - margin-bottom: ${rem(size.base)}; - } - - li { - list-style: disc inside; - margin-bottom: ${rem(size.small)}; - } - - table { - margin-bottom: ${rem(size.base)}; - } - - th { - padding: ${size.small}px; - } - - td { - padding: ${size.small}px; - border: 1px solid ${colors.beltza}; - } - - hr { - border: 2px solid ${colors.horia}; - margin-bottom: ${rem(size.base)}; - margin-top: ${rem(size.base)}; - } -`; - export default PribatutasunPolitika; diff --git a/front/src/styles/cssConfig.scss b/front/src/styles/cssConfig.scss index 5a72df6..c752150 100644 --- a/front/src/styles/cssConfig.scss +++ b/front/src/styles/cssConfig.scss @@ -13,7 +13,7 @@ body { font-family: 'Almarai', sans-serif; @include baseFont; - font-weight: 700; + font-weight: var(--font-weight-bold); color: var(--color-beltza); } diff --git a/front/src/styles/generic/reboot.scss b/front/src/styles/generic/reboot.scss index 6ed966f..61f00cb 100644 --- a/front/src/styles/generic/reboot.scss +++ b/front/src/styles/generic/reboot.scss @@ -31,5 +31,5 @@ body { } strong { - font-weight: 700; + font-weight: var(--font-weight-bold); } diff --git a/front/src/styles/settings/fontWeight.scss b/front/src/styles/settings/fontWeight.scss new file mode 100644 index 0000000..45527a1 --- /dev/null +++ b/front/src/styles/settings/fontWeight.scss @@ -0,0 +1,4 @@ +:root { + --font-weight-regular: 300; + --font-weight-bold: 700; +} diff --git a/front/src/styles/settings/index.scss b/front/src/styles/settings/index.scss index 80af066..dd3cacc 100644 --- a/front/src/styles/settings/index.scss +++ b/front/src/styles/settings/index.scss @@ -1,2 +1,3 @@ @import 'colors'; @import 'sizes'; +@import 'fontWeight'; diff --git a/front/src/ui/GlobalStyles.tsx b/front/src/ui/GlobalStyles.tsx deleted file mode 100644 index 9059982..0000000 --- a/front/src/ui/GlobalStyles.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import { createGlobalStyle, css } from 'styled-components'; - -import { font, fontWeight } from './theme'; -import { colors } from './theme/colors'; - -/** - * Inicializa estilos base - * 1. Change from `box-sizing: content-box` so that `width` is not affected - * by `padding` or `border`. - * 2. As a best practice, apply a default 'background-color'. - * 3. Set an explicit initial text-align value so that we can later use the the 'inherit' - * value on things like '' elements. - * 4. Prevent adjustments of font size after orientation changes in IE on - * Windows Phone and in iOS. - * 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, - * so we force a non-overlapping, non-auto-hiding scrollbar to counteract. - * 6. Change the default tap highlight to be completely transparent in iOS. - * 7. Implement full height to let children control own height. - */ -const reboot = css` - *, - *::before, - *::after { - box-sizing: border-box; /* 1 */ - } - html { - -webkit-text-size-adjust: 100%; /* 4 */ - -ms-text-size-adjust: 100%; /* 4 */ - -ms-overflow-style: scrollbar; /* 5 */ - -webkit-tap-highlight-color: rgba(#000, 0); /* 6 */ - -webkit-tap-highlight-color: transparent; - } - body { - min-height: 100vh; - } - -ms-viewport { - width: device-width; - } - strong { - font-weight: 700; - } -`; - -const reset = css` - /* http://meyerweb.com/eric/tools/css/reset/ - v4.0 | 20180602 - License: none (public domain) -*/ - html, - body, - div, - span, - applet, - object, - iframe, - h1, - h2, - h3, - h4, - h5, - h6, - p, - blockquote, - pre, - a, - abbr, - acronym, - address, - big, - cite, - code, - del, - dfn, - img, - ins, - kbd, - q, - s, - samp, - small, - strike, - strong, - sub, - sup, - tt, - var, - u, - center, - dl, - dt, - dd, - ol, - ul, - li, - fieldset, - form, - label, - legend, - table, - caption, - tbody, - tfoot, - thead, - tr, - th, - td, - article, - aside, - canvas, - details, - embed, - figure, - figcaption, - footer, - header, - hgroup, - main, - menu, - nav, - output, - ruby, - section, - summary, - time, - mark, - audio, - video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - } - em, - i, - b { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - vertical-align: baseline; - } - /* HTML5 display-role reset for older browsers */ - article, - aside, - details, - figcaption, - figure, - footer, - header, - hgroup, - main, - menu, - nav, - section { - display: block; - } - *:focus, - :active { - outline: 0; - } - /* HTML5 hidden-attribute fix for newer browsers */ - *[hidden] { - display: none; - } - body { - line-height: 1; - } - ol, - ul { - list-style: none; - } - blockquote, - q { - quotes: none; - } - blockquote:before, - blockquote:after, - q:before, - q:after { - content: ''; - content: none; - } - table { - border-collapse: collapse; - border-spacing: 0; - } - a:link, - a:visited, - a:active { - text-decoration: none; - color: inherit; - } -`; - -export const GlobalStyles = createGlobalStyle` - ${reset}; - ${reboot}; - - html { - scroll-behavior: smooth; - } - - body { - font-family: 'Almarai', sans-serif; - - ${font.base()} - font-weight: ${fontWeight.bold}; - - color: ${colors.beltza}; - } -`; diff --git a/front/src/ui/theme/breakpoints.ts b/front/src/ui/theme/breakpoints.ts deleted file mode 100644 index 5ad3b6b..0000000 --- a/front/src/ui/theme/breakpoints.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const breakpoints = { - tablet: 768, - desktop: 1024, -}; diff --git a/front/src/ui/theme/colors.ts b/front/src/ui/theme/colors.ts deleted file mode 100644 index edd43ac..0000000 --- a/front/src/ui/theme/colors.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const colors = { - beltza: '#191919', - urdina: '#8FBBFD', - morea: '#510DFB', - horia: '#FDB201', - gorria: '#FD3647', - zuria: '#FFFFFF', -}; - -export type Color = keyof typeof colors; diff --git a/front/src/ui/theme/font.ts b/front/src/ui/theme/font.ts deleted file mode 100644 index 91f80ea..0000000 --- a/front/src/ui/theme/font.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { css } from 'styled-components'; -import { rem } from 'polished'; - -export const font = { - tiny() { - return css` - font-size: ${rem(12.64)}; - line-height: ${rem(17)}; - `; - }, - small() { - return css` - font-size: ${rem(16)}; - line-height: ${rem(22)}; - `; - }, - base() { - return css` - font-size: ${rem(18)}; - line-height: ${rem(24)}; - `; - }, - large() { - return css` - font-size: ${rem(25.63)}; - line-height: ${rem(35)}; - `; - }, - huge() { - return css` - font-size: ${rem(36.41)}; - line-height: ${rem(50)}; - `; - }, - gargantuan() { - return css` - font-size: ${rem(41.83)}; - line-height: ${rem(57)}; - `; - }, -}; diff --git a/front/src/ui/theme/fontWeight.ts b/front/src/ui/theme/fontWeight.ts deleted file mode 100644 index 62cf167..0000000 --- a/front/src/ui/theme/fontWeight.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const fontWeight = { - regular: 300, - bold: 700, -}; diff --git a/front/src/ui/theme/index.ts b/front/src/ui/theme/index.ts deleted file mode 100644 index 57a977c..0000000 --- a/front/src/ui/theme/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { breakpoints } from './breakpoints'; -export { font } from './font'; -export { media } from './media'; -export { size } from './size'; -export { colors } from './colors'; -export type { Color } from './colors'; -export { fontWeight } from './fontWeight'; diff --git a/front/src/ui/theme/media.ts b/front/src/ui/theme/media.ts deleted file mode 100644 index 4954608..0000000 --- a/front/src/ui/theme/media.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { css } from 'styled-components'; -import { breakpoints } from './breakpoints'; - -export const media = { - tablet: (styles: TemplateStringsArray, ...args) => css` - @media (min-width: ${breakpoints.tablet}px) { - ${css(styles, ...args)}; - } - `, - desktop: (styles: TemplateStringsArray, ...args) => css` - @media (min-width: ${breakpoints.desktop}px) { - ${css(styles, ...args)}; - } - `, -}; diff --git a/front/src/ui/theme/size.ts b/front/src/ui/theme/size.ts deleted file mode 100644 index cc473ea..0000000 --- a/front/src/ui/theme/size.ts +++ /dev/null @@ -1,12 +0,0 @@ -export const size = { - none: 0, - xtiny: 4, - tiny: 8, - small: 12, - mini: 16, - base: 24, - medium: 32, - large: 48, - xlarge: 64, - huge: 96, -}; diff --git a/front/src/utils/dateUtils.ts b/front/src/utils/dateUtils.ts deleted file mode 100644 index da85a16..0000000 --- a/front/src/utils/dateUtils.ts +++ /dev/null @@ -1,27 +0,0 @@ -import dayjs from 'dayjs'; -import utc from 'dayjs/plugin/utc'; - -dayjs.extend(utc); - -export const datesUtils = { - getDate, - getHour, - areSameDay, - isToday, -}; - -function getDate(rawDate: string): Date { - return dayjs(rawDate).toDate(); -} - -function getHour(date: Date): string { - return dayjs(date).format('H:mm'); -} - -function areSameDay(date: Date, reference: Date): boolean { - return dayjs(date).isSame(reference, 'day'); -} - -function isToday(date: Date) { - return dayjs(date).isSame(new Date(), 'day'); -} diff --git a/front/src/views/Hasiera/Hasiera.module.scss b/front/src/views/Hasiera/Hasiera.module.scss index 729cb7e..be3c8f8 100644 --- a/front/src/views/Hasiera/Hasiera.module.scss +++ b/front/src/views/Hasiera/Hasiera.module.scss @@ -2,7 +2,7 @@ .contentWrapper { padding: var(--size-huge) 0; - font-weight: 300; + font-weight: var(--font-weight-regular); @include largeFont; } @@ -24,7 +24,7 @@ @include largeFont; padding: var(--size-base); background: var(--color-zuria); - font-weight: 700; + font-weight: var(--font-weight-bold); cursor: pointer; display: flex; align-items: center; diff --git a/front/src/views/Kafetegia/components/ProduktuZerrenda/ProduktuZerrenda.module.scss b/front/src/views/Kafetegia/components/ProduktuZerrenda/ProduktuZerrenda.module.scss index fa0d2ad..c36e213 100644 --- a/front/src/views/Kafetegia/components/ProduktuZerrenda/ProduktuZerrenda.module.scss +++ b/front/src/views/Kafetegia/components/ProduktuZerrenda/ProduktuZerrenda.module.scss @@ -27,7 +27,7 @@ .izena { text-align: left; - font-weight: 300; + font-weight: var(--font-weight-regular); padding: 0 var(--size-xtiny); vertical-align: top; } @@ -35,7 +35,7 @@ .prezioa { width: var(--size-huge); text-align: right; - font-weight: 300; + font-weight: var(--font-weight-regular); padding: 0 var(--size-xtiny); vertical-align: top; } @@ -58,7 +58,7 @@ .alergenoa { color: var(--color-morea); - font-weight: 700; + font-weight: var(--font-weight-bold); &:not(:last-child)::after { content: ', '; diff --git a/front/src/views/NotFound/NotFound.tsx b/front/src/views/NotFound/NotFound.tsx new file mode 100644 index 0000000..460ed8c --- /dev/null +++ b/front/src/views/NotFound/NotFound.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import { Link } from 'gatsby'; + +import { Container } from '../../components/Container'; +import { Gainburua } from '../../components/Gainburua'; + +export const NotFound: React.FC = () => ( + <> + + + +
+

404: Ez dugu bilatzen duzun orria topatu

+
+ Hasierara bueltatu +
+ + +); diff --git a/front/src/views/NotFound/index.ts b/front/src/views/NotFound/index.ts new file mode 100644 index 0000000..1099c21 --- /dev/null +++ b/front/src/views/NotFound/index.ts @@ -0,0 +1 @@ +export { NotFound } from './NotFound'; diff --git a/front/src/views/RegularPage/RegularPage.module.scss b/front/src/views/RegularPage/RegularPage.module.scss new file mode 100644 index 0000000..df44cbd --- /dev/null +++ b/front/src/views/RegularPage/RegularPage.module.scss @@ -0,0 +1,65 @@ +@import '../../styles/tools/mixins/font.scss'; + +.atala { + padding-top: var(--size-base); +} + +.edukia { + font-weight: var(--font-weight-regular); + @include baseFont; + + p:not(-last-child) { + margin-bottom: var(--size-base); + } + + h1 { + @include gargantuanFont; + font-weight: var(--font-weight-bold); + margin-bottom: var(--size-base); + } + + h2 { + @include hugeFont; + font-weight: var(--font-weight-bold); + margin-bottom: var(--size-base); + } + + h3 { + @include largeFont; + font-weight: var(--font-weight-bold); + margin-bottom: var(--size-base); + } + + h4 { + font-weight: var(--font-weight-bold); + margin-bottom: var(--size-mini); + } + + ul { + margin-bottom: var(--size-base); + } + + li { + list-style: disc inside; + margin-bottom: var(--size-small); + } + + table { + margin-bottom: var(--size-base); + } + + th { + padding: var(--size-small); + } + + td { + padding: var(--size-small); + border: 1px solid var(--color-beltza); + } + + hr { + border: 2px solid var(--color-beltza); + margin-bottom: var(--size-base); + margin-top: var(--size-base); + } +} diff --git a/front/src/views/RegularPage/RegularPage.tsx b/front/src/views/RegularPage/RegularPage.tsx new file mode 100644 index 0000000..954386e --- /dev/null +++ b/front/src/views/RegularPage/RegularPage.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import ReactMarkdown from 'react-markdown'; + +import remarkGfm from 'remark-gfm'; + +import { Container } from '../../components/Container'; +import { Gainburua } from '../../components/Gainburua'; +import { Oina } from '../../components/Oina'; +import * as styles from './RegularPage.module.scss'; +import { RegularPageContent } from './RegularPageContent'; + +interface Props { + content: RegularPageContent; +} + +export const RegularPage: React.FC = ({ content }) => { + const { edukia } = content; + + return ( + <> + + + +
+ + {edukia} + +
+ + + + + ); +}; diff --git a/front/src/views/RegularPage/RegularPageContent.ts b/front/src/views/RegularPage/RegularPageContent.ts new file mode 100644 index 0000000..ebff2b1 --- /dev/null +++ b/front/src/views/RegularPage/RegularPageContent.ts @@ -0,0 +1,4 @@ +export interface RegularPageContent { + izenburua: string; + edukia: string; +} diff --git a/front/src/views/RegularPage/index.ts b/front/src/views/RegularPage/index.ts new file mode 100644 index 0000000..df39e0a --- /dev/null +++ b/front/src/views/RegularPage/index.ts @@ -0,0 +1 @@ +export { RegularPage } from './RegularPage'; diff --git a/yarn.lock b/yarn.lock index 38cb2b8..43c37e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1250,7 +1250,7 @@ core-js-pure "^3.30.2" regenerator-runtime "^0.14.0" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.23.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d" integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ== @@ -1474,13 +1474,6 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== -"@emotion/is-prop-valid@1.2.1", "@emotion/is-prop-valid@^1.1.0": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc" - integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw== - dependencies: - "@emotion/memoize" "^0.8.1" - "@emotion/is-prop-valid@^0.8.8": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" @@ -1533,11 +1526,6 @@ resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== -"@emotion/unitless@0.8.0": - version "0.8.0" - resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" - integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== - "@emotion/unitless@^0.7.4": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" @@ -4961,7 +4949,7 @@ dependencies: "@types/unist" "^2" -"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1": +"@types/hoist-non-react-statics@^3.3.1": version "3.3.5" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494" integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg== @@ -5294,20 +5282,6 @@ resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.8.tgz#518609aefb797da19bf222feb199e8f653ff7627" integrity sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg== -"@types/styled-components@^5.1.34": - version "5.1.34" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.34.tgz#4107df8ef8a7eaba4fa6b05f78f93fba4daf0300" - integrity sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA== - dependencies: - "@types/hoist-non-react-statics" "*" - "@types/react" "*" - csstype "^3.0.2" - -"@types/stylis@4.2.0": - version "4.2.0" - resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b" - integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw== - "@types/through@*": version "0.0.33" resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.33.tgz#14ebf599320e1c7851e7d598149af183c6b9ea56" @@ -6454,7 +6428,7 @@ babel-plugin-remove-graphql-queries@^5.13.0: "@babel/types" "^7.20.7" gatsby-core-utils "^4.13.0" -"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.1.4: +"babel-plugin-styled-components@>= 1.12.0": version "2.1.4" resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092" integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g== @@ -7990,7 +7964,7 @@ css-select@^5.1.0: domutils "^3.0.1" nth-check "^2.0.1" -css-to-react-native@3.2.0, css-to-react-native@^3.0.0: +css-to-react-native@^3.0.0: version "3.2.0" resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32" integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ== @@ -8093,11 +8067,6 @@ csso@^4.2.0: dependencies: css-tree "^1.1.2" -csstype@3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" - integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== - csstype@^3.0.2: version "3.1.3" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" @@ -10408,13 +10377,6 @@ gatsby-plugin-sitemap@^6.12.3: minimatch "^3.1.2" sitemap "^7.1.1" -gatsby-plugin-styled-components@^6.12.0: - version "6.13.0" - resolved "https://registry.yarnpkg.com/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-6.13.0.tgz#90f9ce15f81940729a972518733ca73f63a71be8" - integrity sha512-7cqwnwg9YXTTpUuJSemey7bP/TeUZ3cgnFT81AU6qgosNB1y+eaHRHQuNjM+AMGcnkjwxnYP1RDGfn0pMxSOTg== - dependencies: - "@babel/runtime" "^7.20.13" - gatsby-plugin-typescript@^5.13.0: version "5.13.0" resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-5.13.0.tgz#7ffb1144409d2c06fdcf177f0cd1e6626746c8a1" @@ -14385,7 +14347,7 @@ nanoclone@^0.2.1: resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4" integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA== -nanoid@^3.3.6, nanoid@^3.3.7: +nanoid@^3.3.7: version "3.3.7" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g== @@ -15497,13 +15459,6 @@ pluralize@8.0.0: resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1" integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA== -polished@^4.2.2: - version "4.2.2" - resolved "https://registry.yarnpkg.com/polished/-/polished-4.2.2.tgz#2529bb7c3198945373c52e34618c8fe7b1aa84d1" - integrity sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ== - dependencies: - "@babel/runtime" "^7.17.8" - pony-cause@^2.1.2: version "2.1.10" resolved "https://registry.yarnpkg.com/pony-cause/-/pony-cause-2.1.10.tgz#828457ad6f13be401a075dbf14107a9057945174" @@ -15790,15 +15745,6 @@ postcss@7.0.36: source-map "^0.6.1" supports-color "^6.1.0" -postcss@8.4.31: - version "8.4.31" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" - integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ== - dependencies: - nanoid "^3.3.6" - picocolors "^1.0.0" - source-map-js "^1.0.2" - postcss@^8.0.0, postcss@^8.2.15, postcss@^8.2.9, postcss@^8.3.11, postcss@^8.4.19, postcss@^8.4.21, postcss@^8.4.24, postcss@^8.4.27: version "8.4.32" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9" @@ -17375,7 +17321,7 @@ shallow-compare@^1.2.2: resolved "https://registry.yarnpkg.com/shallow-compare/-/shallow-compare-1.2.2.tgz#fa4794627bf455a47c4f56881d8a6132d581ffdb" integrity sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg== -shallowequal@1.1.0, shallowequal@^1.1.0: +shallowequal@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== @@ -18130,37 +18076,6 @@ styled-components@5.3.3: shallowequal "^1.1.0" supports-color "^5.5.0" -styled-components@^5.2.1: - version "5.3.11" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8" - integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.4.5" - "@emotion/is-prop-valid" "^1.1.0" - "@emotion/stylis" "^0.8.4" - "@emotion/unitless" "^0.7.4" - babel-plugin-styled-components ">= 1.12.0" - css-to-react-native "^3.0.0" - hoist-non-react-statics "^3.0.0" - shallowequal "^1.1.0" - supports-color "^5.5.0" - -styled-components@^6.1.1: - version "6.1.3" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.3.tgz#d3ffea630800f4486e79f6264826dad9426474e3" - integrity sha512-kLerFjTAABuEZ870O4q4dyT/VCOJC/HA08+VeIGhkiOKkwJLP17HAWHCiqZWnUMV19m3axlOKR/+/EbCbuJAZg== - dependencies: - "@emotion/is-prop-valid" "1.2.1" - "@emotion/unitless" "0.8.0" - "@types/stylis" "4.2.0" - css-to-react-native "3.2.0" - csstype "3.1.2" - postcss "8.4.31" - shallowequal "1.1.0" - stylis "4.3.0" - tslib "2.5.0" - stylehacks@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9" @@ -18174,11 +18089,6 @@ stylis@4.2.0: resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== -stylis@4.3.0: - version "4.3.0" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c" - integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ== - stylus@^0.59.0: version "0.59.0" resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.59.0.tgz#a344d5932787142a141946536d6e24e6a6be7aa6" @@ -18638,11 +18548,6 @@ tsconfig-paths@^4.1.2: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" - integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== - tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"