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

front/src/components/AlergenoLegenda/AlergenoLegenda.module.scss

@@ -15,12 +15,12 @@
 
 .izena {
   margin-bottom: var(--size-tiny);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   text-align: center;
 }
 
 .zenbakia {
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   text-align: center;
   color: var(--color-morea);
 }

front/src/components/Dialog.tsx

@@ -1,115 +0,0 @@
-import React, { PropsWithChildren, useEffect, useRef } from 'react';
-
-import styled from 'styled-components';
-import { colors, font, media, size } from '../ui/theme';
-import { rgba } from 'polished';
-
-interface Props {
-  open: boolean;
-  onClose: () => void;
-}
-
-export const Dialog: React.FC<PropsWithChildren<Props>> = ({
-  open,
-  onClose,
-  children,
-}) => {
-  const modalRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    if (!modalRef) {
-      return;
-    }
-
-    if (open) {
-      modalRef.current?.showModal();
-      return;
-    }
-
-    modalRef.current?.close();
-  }, [open, modalRef]);
-
-  return (
-    <DialogWrapper
-      ref={modalRef}
-      // @ts-expect-error dialog-en tipoetan arazo bat dagoela dirudi
-      onClose={onClose}
-      onCancel={onClose}
-      onClick={({ target }) => {
-        if (target !== modalRef.current) {
-          return;
-        }
-        onClose();
-      }}
-    >
-      <DialogContent>
-        <Close title="Itxi" onClick={onClose}>
-          ✕
-        </Close>
-
-        {children && <DialogBody>{children}</DialogBody>}
-      </DialogContent>
-    </DialogWrapper>
-  );
-};
-
-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%);
-    }
-  }
-`;

front/src/components/Oina.tsx

@@ -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 = () => (
-  <Wrapper>
-    <Esteka to="/lege-oharra">Lege oharra</Esteka>
-    <Esteka to="/pribatutasun-politika">Pribatutasun politika</Esteka>
-  </Wrapper>
-);
-
-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};
-  }
-`;

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);
+  }
+}

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 = () => (
+  <footer className={styles.wrapper}>
+    <Link className={styles.esteka} to="/lege-oharra">
+      Lege oharra
+    </Link>
+    <Link className={styles.esteka} to="/pribatutasun-politika">
+      Pribatutasun politika
+    </Link>
+  </footer>
+);

front/src/components/Oina/index.ts

@@ -0,0 +1 @@
+export { Oina } from './Oina';

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<Props> = ({ title, description, location }) => (
+export const SEO: React.FC<Props> = ({ title, description, location }) => (
   <Helmet title={`${title} | Laba`} htmlAttributes={{ lang: 'eu' }}>
     {description && <meta name="description" content={description} />}