From 8cca83b7245f122437f947cc35862bd555564871 Mon Sep 17 00:00:00 2001
From: Aitor Urrutia <3373382+Txarli@users.noreply.github.com>
Date: Sun, 24 Dec 2023 17:50:24 +0100
Subject: [PATCH] Hasiera css modulesera pasatzen du (#12)

* refactor: extract component

* hasiera CSS modules-era pasatzen du

* refactor: Container css modulesera pasatzen du

* fix: maketazioa
---
 back/database/migrations/development.db       | Bin 917504 -> 917504 bytes
 front/src/components/Container.tsx            |  25 -----
 .../Container/Container.module.scss           |  22 +++++
 front/src/components/Container/Container.tsx  |   7 ++
 front/src/components/Container/index.ts       |   1 +
 front/src/pages/index.tsx                     |  90 ++----------------
 front/src/views/Hasiera/Hasiera.module.scss   |  44 +++++++++
 front/src/views/Hasiera/Hasiera.tsx           |  43 +++++++++
 front/src/views/Hasiera/HasieraContent.ts     |   5 +
 front/src/views/Hasiera/index.ts              |   1 +
 10 files changed, 131 insertions(+), 107 deletions(-)
 delete mode 100644 front/src/components/Container.tsx
 create mode 100644 front/src/components/Container/Container.module.scss
 create mode 100644 front/src/components/Container/Container.tsx
 create mode 100644 front/src/components/Container/index.ts
 create mode 100644 front/src/views/Hasiera/Hasiera.module.scss
 create mode 100644 front/src/views/Hasiera/Hasiera.tsx
 create mode 100644 front/src/views/Hasiera/HasieraContent.ts
 create mode 100644 front/src/views/Hasiera/index.ts

diff --git a/back/database/migrations/development.db b/back/database/migrations/development.db
index a263cb7cf3b8ca64b1ec0964d5fe43bcffbf80bf..387226822011aa3e6a9b5662c1dee49488599d7d 100644
GIT binary patch
delta 56
zcmZo@uxMzom>|u#ccP3l<KB%4)BbbKS-^RLu?I+=Z((d<YGH0+X<=<)YhiEUXyI((
LYT<6-Y2gI`Z_pF{

delta 56
zcmZo@uxMzom>|u#XQGTV<DQKP)BbbKzGq&?*aIYMTNqoIT9{i{T3B1yTG(4SS~y#{
KTDV(yT6h6=p%g6u

diff --git a/front/src/components/Container.tsx b/front/src/components/Container.tsx
deleted file mode 100644
index b2be788..0000000
--- a/front/src/components/Container.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { rem } from 'polished';
-import styled from 'styled-components';
-import { media } from '../ui/theme/media';
-import { size } from '../ui/theme/size';
-
-export const Container = styled.div`
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: ${rem(size.small)};
-  padding-right: ${rem(size.small)};
-
-  width: 100%;
-
-  ${media.tablet`
-    padding-left: 0;
-    padding-right: 0;
-    width: 744px;
-  `}
-
-  ${media.desktop`
-    padding-left: 0;
-    padding-right: 0;
-    width: 1014px;
-  `}
-`;
diff --git a/front/src/components/Container/Container.module.scss b/front/src/components/Container/Container.module.scss
new file mode 100644
index 0000000..0cb0512
--- /dev/null
+++ b/front/src/components/Container/Container.module.scss
@@ -0,0 +1,22 @@
+@import '../../styles/tools/mediaQueries.scss';
+
+.wrapper {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--size-small);
+  padding-right: var(--size-small);
+
+  width: 100%;
+
+  @media #{$fromTablet} {
+    padding-left: 0;
+    padding-right: 0;
+    width: 744px;
+  }
+
+  @media #{$fromDesktop} {
+    padding-left: 0;
+    padding-right: 0;
+    width: 1014px;
+  }
+}
diff --git a/front/src/components/Container/Container.tsx b/front/src/components/Container/Container.tsx
new file mode 100644
index 0000000..eac55cd
--- /dev/null
+++ b/front/src/components/Container/Container.tsx
@@ -0,0 +1,7 @@
+import React, { PropsWithChildren } from 'react';
+
+import * as styles from './Container.module.scss';
+
+export const Container: React.FC<PropsWithChildren> = ({ children }) => (
+  <div className={styles.wrapper}>{children}</div>
+);
diff --git a/front/src/components/Container/index.ts b/front/src/components/Container/index.ts
new file mode 100644
index 0000000..b3999f0
--- /dev/null
+++ b/front/src/components/Container/index.ts
@@ -0,0 +1 @@
+export { Container } from './Container';
diff --git a/front/src/pages/index.tsx b/front/src/pages/index.tsx
index 4aa78e6..fb71578 100644
--- a/front/src/pages/index.tsx
+++ b/front/src/pages/index.tsx
@@ -1,26 +1,17 @@
-import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
 import React from 'react';
-import { GlobalStyles } from '../ui/GlobalStyles';
 
-import { Gainburua } from '../components/Gainburua';
-import styled from 'styled-components';
-import { colors, font, fontWeight, size } from '../ui/theme';
-import { Container } from '../components/Container';
-import { rem } from 'polished';
-import Gezia from '../assets/gezia.svg';
-import ReactMarkdown from 'react-markdown';
-import { Oina } from '../components/Oina';
+import { graphql, PageProps, useStaticQuery } from 'gatsby';
+
 import { SEO } from '../components/SEO';
+import { GlobalStyles } from '../ui/GlobalStyles';
+import { Hasiera } from '../views/Hasiera/Hasiera';
+import { HasieraContent } from '../views/Hasiera/HasieraContent';
 
 interface DataProps {
-  strapiHasiera: {
-    deskribapena: string;
-    izenburua: string;
-    edukia: string;
-  };
+  strapiHasiera: HasieraContent;
 }
 
-const IndexPage: React.VFC<PageProps> = ({ location }) => {
+const IndexPage: React.FC<PageProps> = ({ location }) => {
   const { strapiHasiera } = useStaticQuery<DataProps>(graphql`
     {
       strapiHasiera {
@@ -41,74 +32,9 @@ const IndexPage: React.VFC<PageProps> = ({ location }) => {
 
       <GlobalStyles />
 
-      <Gainburua
-        atala="hasiera"
-        izenburua={strapiHasiera.izenburua}
-        deskribapena={strapiHasiera.deskribapena}
-        onClick={() => {
-          navigate('/#edukia');
-        }}
-      />
-
-      <ContentWrapper id="edukia">
-        <Container>
-          <Deskribapena>{strapiHasiera.edukia}</Deskribapena>
-
-          <IzanLabaWrapper>
-            <Botoia href="https://forms.gle/wV41CVkRX1JtHsAu9">
-              <GeziaLogo /> Labazkidetu.
-            </Botoia>
-          </IzanLabaWrapper>
-        </Container>
-      </ContentWrapper>
-
-      <Oina />
+      <Hasiera content={strapiHasiera} />
     </>
   );
 };
 
-const Deskribapena = styled(ReactMarkdown)`
-  margin-bottom: ${rem(size.large)};
-
-  p:not(-last-child) {
-    margin-bottom: ${rem(size.base)};
-  }
-`;
-
-const ContentWrapper = styled.div`
-  padding: ${size.huge}px 0;
-  font-weight: ${fontWeight.regular};
-  ${font.large()};
-`;
-
-const Botoia = styled.a`
-  border: 2px solid ${colors.beltza};
-  ${font.large()};
-  padding: ${rem(size.base)};
-  background: ${colors.zuria};
-  font-weight: ${fontWeight.bold};
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  transition: color 0.4s ease;
-  &:hover {
-    color: ${colors.morea};
-  }
-
-  &:focus {
-    border: 2px solid ${colors.zuria};
-    outline: 3px solid ${colors.morea};
-  }
-`;
-
-const GeziaLogo = styled(Gezia)`
-  margin-right: ${rem(size.tiny)};
-`;
-
-const IzanLabaWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`;
-
 export default IndexPage;
diff --git a/front/src/views/Hasiera/Hasiera.module.scss b/front/src/views/Hasiera/Hasiera.module.scss
new file mode 100644
index 0000000..729cb7e
--- /dev/null
+++ b/front/src/views/Hasiera/Hasiera.module.scss
@@ -0,0 +1,44 @@
+@import '../../styles/tools/mixins/font.scss';
+
+.contentWrapper {
+  padding: var(--size-huge) 0;
+  font-weight: 300;
+  @include largeFont;
+}
+
+.edukia {
+  margin-bottom: var(--size-large);
+
+  p:not(:last-child) {
+    margin-bottom: var(--size-base);
+  }
+}
+
+.izanLabaWrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.callToAction {
+  border: 2px solid var(--color-beltza);
+  @include largeFont;
+  padding: var(--size-base);
+  background: var(--color-zuria);
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  transition: color 0.4s ease;
+  &:hover {
+    color: var(--color-morea);
+  }
+
+  &:focus {
+    outline: 3px solid var(--color-morea);
+  }
+}
+
+.gezia {
+  margin-right: var(--size-tiny);
+}
diff --git a/front/src/views/Hasiera/Hasiera.tsx b/front/src/views/Hasiera/Hasiera.tsx
new file mode 100644
index 0000000..b83a830
--- /dev/null
+++ b/front/src/views/Hasiera/Hasiera.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import Gezia from '../../assets/gezia.svg';
+import { Container } from '../../components/Container';
+import { Gainburua } from '../../components/Gainburua';
+import { Oina } from '../../components/Oina';
+import * as styles from './Hasiera.module.scss';
+import { HasieraContent } from './HasieraContent';
+
+interface Props {
+  content: HasieraContent;
+}
+
+export const Hasiera: React.FC<Props> = ({ content }) => {
+  const { izenburua, deskribapena, edukia } = content;
+  return (
+    <>
+      <Gainburua
+        atala="hasiera"
+        izenburua={izenburua}
+        deskribapena={deskribapena}
+      />
+
+      <div className={styles.contentWrapper} id="edukia">
+        <Container>
+          <ReactMarkdown className={styles.edukia}>{edukia}</ReactMarkdown>
+
+          <div className={styles.izanLabaWrapper}>
+            <a
+              className={styles.callToAction}
+              href="https://forms.gle/wV41CVkRX1JtHsAu9"
+            >
+              <Gezia className={styles.gezia} /> Labazkidetu.
+            </a>
+          </div>
+        </Container>
+      </div>
+
+      <Oina />
+    </>
+  );
+};
diff --git a/front/src/views/Hasiera/HasieraContent.ts b/front/src/views/Hasiera/HasieraContent.ts
new file mode 100644
index 0000000..cb71496
--- /dev/null
+++ b/front/src/views/Hasiera/HasieraContent.ts
@@ -0,0 +1,5 @@
+export interface HasieraContent {
+  deskribapena: string;
+  izenburua: string;
+  edukia: string;
+}
diff --git a/front/src/views/Hasiera/index.ts b/front/src/views/Hasiera/index.ts
new file mode 100644
index 0000000..da417a9
--- /dev/null
+++ b/front/src/views/Hasiera/index.ts
@@ -0,0 +1 @@
+export { Hasiera } from './Hasiera';