Gainburua CSS modules-era pasatzen du (#11)

* chore: CSS modules sartzen du

* refactor: alergeno legenda CSS modules

* refactor: css modules erabiltzen du

* chore: datubasea berreskuratzen du

* chore: kontaktu datuak aldatzen ditu

* ignore: saltoa

* feat: mugikor nabigazioa erakusten du

* chore: mugikor nabigazioa pasatzen du

* refactor: kontaktu datuak batzen ditu

* fix: gezia konpontzen du

* refactor: move component

* refactor: move component

* refactor: move component

* fix: builda konpontzen du

* chore: erabiltzen ez zen konponentea kentzen du

* fix: hasiera eta kafetegia ez diren atalak konpontzen ditu

* chore: react-responsive dependentzia kentzen du

* chore: yarn.lock eguneratzen du

* fix: kontsolako erroreak kentzen ditu

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

@@ -0,0 +1,53 @@
+@import '../../styles/tools/mediaQueries.scss';
+
+.wrapper {
+  width: 100%;
+  display: grid;
+  grid-column-gap: var(--size-tiny);
+  grid-row-gap: var(--size-base);
+
+  grid-template-columns: repeat(3, 1fr);
+
+  @media #{$fromTablet} {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+.izena {
+  margin-bottom: var(--size-tiny);
+  font-weight: 700;
+  text-align: center;
+}
+
+.zenbakia {
+  font-weight: 700;
+  text-align: center;
+  color: var(--color-morea);
+}
+
+.alergenoWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.logoWrapper {
+  margin-bottom: var(--size-mini);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+
+  height: var(--size-medium);
+
+  @media #{$fromDesktop} {
+    height: var(--size-huge);
+  }
+}
+
+.logo {
+  height: var(--size-medium);
+
+  @media #{$fromDesktop} {
+    height: var(--size-huge);
+  }
+}

front/src/components/AlergenoLegenda/AlergenoLegenda.tsx

@@ -1,26 +1,10 @@
 import React from 'react';
 
-import { AlergenoIdentifikadorea } from '../../domain/models/AlergenoIdentifikadorea';
-import Esnekiak from './assets/alergenoak/esnekiak.svg';
-import Arrautzak from './assets/alergenoak/arrautzak.svg';
-import Glutena from './assets/alergenoak/glutena.svg';
-import Moluskuak from './assets/alergenoak/moluskuak.svg';
-import Krustazeoak from './assets/alergenoak/krustazeoak.svg';
-import Arraina from './assets/alergenoak/arraina.svg';
-import Lupinuak from './assets/alergenoak/lupinuak.svg';
-import FruituLehorrak from './assets/alergenoak/fruituLehorrak.svg';
-import Kakahueteak from './assets/alergenoak/kakahueteak.svg';
-import Sesamoa from './assets/alergenoak/sesamoa.svg';
-import Soja from './assets/alergenoak/soja.svg';
-import Sulfitoak from './assets/alergenoak/sulfitoak.svg';
-import Apioa from './assets/alergenoak/apioa.svg';
-import Ziapea from './assets/alergenoak/ziapea.svg';
-import styled from 'styled-components';
-import { rem } from 'polished';
-import { breakpoints, colors, fontWeight, media, size } from '../../ui/theme';
 import { mapAlergenoIdentifikadoreaToIzena } from '../../domain/mappers/mapAlergenoIdentifikadoreaToIzena';
 import { mapAlergenoIdentifikadoreaToZenbakia } from '../../domain/mappers/mapAlergenoIdentifikadoreaToZenbakia';
-import { useMediaQuery } from 'react-responsive';
+import { AlergenoIdentifikadorea } from '../../domain/models/AlergenoIdentifikadorea';
+import * as styles from './AlergenoLegenda.module.scss';
+import { AlergenoLogoa } from './AlergenoLogoa';
 
 const alergenoakOrdenaturik: AlergenoIdentifikadorea[] = [
   'esnekiak',
@@ -39,82 +23,23 @@ const alergenoakOrdenaturik: AlergenoIdentifikadorea[] = [
   'ziapea',
 ];
 
-export const AlergenoLegenda: React.VFC = () => {
+export const AlergenoLegenda: React.FC = () => {
   return (
-    <Wrapper>
+    <div className={styles.wrapper}>
       {alergenoakOrdenaturik.map(alergenoa => (
-        <AlergenoWrapper>
-          <LogoWrapper>
+        <div className={styles.alergenoWrapper}>
+          <div className={styles.logoWrapper}>
             <AlergenoLogoa alergenoId={alergenoa} />
-          </LogoWrapper>
+          </div>
 
-          <Izena>{mapAlergenoIdentifikadoreaToIzena(alergenoa)}</Izena>
-          <Zenbakia>{mapAlergenoIdentifikadoreaToZenbakia(alergenoa)}</Zenbakia>
-        </AlergenoWrapper>
+          <div className={styles.izena}>
+            {mapAlergenoIdentifikadoreaToIzena(alergenoa)}
+          </div>
+          <div className={styles.zenbakia}>
+            {mapAlergenoIdentifikadoreaToZenbakia(alergenoa)}
+          </div>
+        </div>
       ))}
-    </Wrapper>
+    </div>
   );
 };
-
-const Izena = styled.div`
-  margin-bottom: ${rem(size.tiny)};
-  font-weight: ${fontWeight.bold};
-  text-align: center;
-`;
-
-const Zenbakia = styled.div`
-  font-weight: ${fontWeight.bold};
-  text-align: center;
-  color: ${colors.morea};
-`;
-
-const AlergenoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-
-const Wrapper = styled.div`
-  width: 100%;
-  display: grid;
-  grid-column-gap: ${rem(size.tiny)};
-  grid-row-gap: ${rem(size.base)};
-
-  grid-template-columns: repeat(3, 1fr);
-  ${media.tablet`
-    grid-template-columns: repeat(5, 1fr);
-  `};
-`;
-
-const LogoWrapper = styled.div`
-  margin-bottom: ${rem(size.mini)};
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-`;
-
-const AlergenoLogoa: React.VFC<{ alergenoId: AlergenoIdentifikadorea }> = ({
-  alergenoId,
-}) => {
-  const isAboveDesktop = useMediaQuery({ minWidth: breakpoints.desktop });
-  const height = rem(isAboveDesktop ? size.huge : size.medium);
-
-  const alergenoIdToLogo: { [id in AlergenoIdentifikadorea]: React.ReactNode } =
-    {
-      esnekiak: <Esnekiak height={height} />,
-      arrautzak: <Arrautzak height={height} />,
-      glutena: <Glutena height={height} />,
-      moluskuak: <Moluskuak height={height} />,
-      krustazeoak: <Krustazeoak height={height} />,
-      arraina: <Arraina height={height} />,
-      lupinuak: <Lupinuak height={height} />,
-      fruituLehorrak: <FruituLehorrak height={height} />,
-      kakahueteak: <Kakahueteak height={height} />,
-      sesamoa: <Sesamoa height={height} />,
-      soja: <Soja height={height} />,
-      sulfitoak: <Sulfitoak height={height} />,
-      apioa: <Apioa height={height} />,
-      ziapea: <Ziapea height={height} />,
-    };
-  return <>{alergenoIdToLogo[alergenoId]}</>;
-};

front/src/components/AlergenoLegenda/AlergenoLogoa.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { AlergenoIdentifikadorea } from '../../domain/models/AlergenoIdentifikadorea';
+import Apioa from './assets/alergenoak/apioa.svg';
+import Arraina from './assets/alergenoak/arraina.svg';
+import Arrautzak from './assets/alergenoak/arrautzak.svg';
+import Esnekiak from './assets/alergenoak/esnekiak.svg';
+import FruituLehorrak from './assets/alergenoak/fruituLehorrak.svg';
+import Glutena from './assets/alergenoak/glutena.svg';
+import Kakahueteak from './assets/alergenoak/kakahueteak.svg';
+import Krustazeoak from './assets/alergenoak/krustazeoak.svg';
+import Lupinuak from './assets/alergenoak/lupinuak.svg';
+import Moluskuak from './assets/alergenoak/moluskuak.svg';
+import Sesamoa from './assets/alergenoak/sesamoa.svg';
+import Soja from './assets/alergenoak/soja.svg';
+import Sulfitoak from './assets/alergenoak/sulfitoak.svg';
+import Ziapea from './assets/alergenoak/ziapea.svg';
+
+interface Props {
+  alergenoId: AlergenoIdentifikadorea;
+}
+
+export const AlergenoLogoa: React.FC<Props> = ({ alergenoId }) => {
+  const alergenoIdToLogo: {
+    [id in AlergenoIdentifikadorea]: React.ReactNode;
+  } = {
+    esnekiak: <Esnekiak height="100%" />,
+    arrautzak: <Arrautzak height="100%" />,
+    glutena: <Glutena height="100%" />,
+    moluskuak: <Moluskuak height="100%" />,
+    krustazeoak: <Krustazeoak height="100%" />,
+    arraina: <Arraina height="100%" />,
+    lupinuak: <Lupinuak height="100%" />,
+    fruituLehorrak: <FruituLehorrak height="100%" />,
+    kakahueteak: <Kakahueteak height="100%" />,
+    sesamoa: <Sesamoa height="100%" />,
+    soja: <Soja height="100%" />,
+    sulfitoak: <Sulfitoak height="100%" />,
+    apioa: <Apioa height="100%" />,
+    ziapea: <Ziapea height="100%" />,
+  };
+  return <>{alergenoIdToLogo[alergenoId]}</>;
+};