diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 00000000..5a51d802 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,36 @@ +name: deploy + +on: + push: + branches: + - main + +jobs: + deploy: + runs-on: ubuntu-20.04 + concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + steps: + - uses: actions/checkout@v2 + + - name: Setup Node + uses: actions/setup-node@v2 + with: + node-version: '14' + + - name: Cache dependencies + uses: actions/cache@v2 + with: + path: ~/.npm + key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} + restore-keys: | + ${{ runner.os }}-node- + + - run: npm ci + - run: npm run build + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./public diff --git a/CNAME b/CNAME new file mode 100644 index 00000000..84546509 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +fiqus.coop \ No newline at end of file diff --git a/README.md b/README.md index 9eb3ebf3..6ca5b966 100644 --- a/README.md +++ b/README.md @@ -25,9 +25,3 @@ Will create or update the build folder that should be uploaded to the server. - ```shell - npm run deploy - ``` - Will create or update the build folder and also upload it to gh-pages: https://nayracoop.github.io/fiqus-web-front - - diff --git a/gatsby-config.js b/gatsby-config.js index 3bb3b60e..17726a2d 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,13 +1,8 @@ module.exports = { - pathPrefix: "/fiqus-web-front", siteMetadata: { - siteUrl: "https://www.fiqus.coop", + siteUrl: "https://fiqus.coop", title: "fiqus-web", menuLinks: [ - /*{ - name:"Home", - link:"/" - },*/ { name:"Servicios", link:"/servicios" @@ -23,11 +18,7 @@ module.exports = { { name:"Blog", link:"/blog" - }/*, - { - name:"Articles", - link:"/articles" - }*/ + } ] }, plugins: [ @@ -47,6 +38,12 @@ module.exports = { resolve: `gatsby-transformer-remark`, options: { plugins: [ + { + resolve: `gatsby-remark-highlight-code`, + options: { + terminal: "ubuntu", + }, + }, { resolve: `gatsby-remark-images`, options: { diff --git a/package-lock.json b/package-lock.json index 9e757df4..b1ecfbf9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1193,6 +1193,20 @@ "to-fast-properties": "^2.0.0" } }, + "@deckdeckgo/highlight-code": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/highlight-code/-/highlight-code-3.6.0.tgz", + "integrity": "sha512-3MUXcnuQwiE3n5v6dsiBWFlfg5st//c8/tvkzuMj+2kejzn5bpW80JlF8zK9tZUNxXNwN0mdtC3L5e+FNsOHZw==", + "requires": { + "@deckdeckgo/utils": "^2.4.0", + "prismjs": "^1.25.0" + } + }, + "@deckdeckgo/utils": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-2.4.0.tgz", + "integrity": "sha512-lDNhafpfVVafXyxhHMwhWmHEvzIw8yC3MFTLy7HN8Syb7bOSpEnB4pEaybWXZ5iqFA3l9WtvbPtqA7t+VtFJ5g==" + }, "@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", @@ -7469,18 +7483,148 @@ } }, "gatsby-core-utils": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-2.13.0.tgz", - "integrity": "sha512-fkMAxiWFY8N26Iui/Wq8yfE2FY2b31bGJVtlIlSwLgfsoO7fpta64lxeivRtfpNLbAoywmWY/L8TC74GFlnuWg==", + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-2.14.0.tgz", + "integrity": "sha512-HDMb1XMqysup9raLYWB0wIQU568R9qPounF7iAwjf2esFUVV5mdBTvxEpune/7yG0RmwhNPhgrEZo2rBHeJf7A==", "requires": { + "@babel/runtime": "^7.15.4", "ci-info": "2.0.0", "configstore": "^5.0.1", "file-type": "^16.5.3", - "fs-extra": "^8.1.0", - "node-object-hash": "^2.3.8", + "fs-extra": "^10.0.0", + "got": "^11.8.2", + "node-object-hash": "^2.3.9", "proper-lockfile": "^4.1.2", "tmp": "^0.2.1", "xdg-basedir": "^4.0.0" + }, + "dependencies": { + "@sindresorhus/is": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.3.0.tgz", + "integrity": "sha512-wwOvh0eO3PiTEivGJWiZ+b946SlMSb4pe+y+Ur/4S87cwo09pYi+FWHHnbrM3W9W7cBYKDqQXcrFYjYUCOJUEQ==" + }, + "@szmarczak/http-timer": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz", + "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==", + "requires": { + "defer-to-connect": "^2.0.0" + } + }, + "cacheable-request": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.2.tgz", + "integrity": "sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==", + "requires": { + "clone-response": "^1.0.2", + "get-stream": "^5.1.0", + "http-cache-semantics": "^4.0.0", + "keyv": "^4.0.0", + "lowercase-keys": "^2.0.0", + "normalize-url": "^6.0.1", + "responselike": "^2.0.0" + } + }, + "decompress-response": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz", + "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==", + "requires": { + "mimic-response": "^3.1.0" + } + }, + "defer-to-connect": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz", + "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==" + }, + "fs-extra": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz", + "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==", + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + } + }, + "get-stream": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", + "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", + "requires": { + "pump": "^3.0.0" + } + }, + "got": { + "version": "11.8.3", + "resolved": "https://registry.npmjs.org/got/-/got-11.8.3.tgz", + "integrity": "sha512-7gtQ5KiPh1RtGS9/Jbv1ofDpBFuq42gyfEib+ejaRBJuj/3tQFeR5+gw57e4ipaU8c/rCjvX6fkQz2lyDlGAOg==", + "requires": { + "@sindresorhus/is": "^4.0.0", + "@szmarczak/http-timer": "^4.0.5", + "@types/cacheable-request": "^6.0.1", + "@types/responselike": "^1.0.0", + "cacheable-lookup": "^5.0.3", + "cacheable-request": "^7.0.2", + "decompress-response": "^6.0.0", + "http2-wrapper": "^1.0.0-beta.5.2", + "lowercase-keys": "^2.0.0", + "p-cancelable": "^2.0.0", + "responselike": "^2.0.0" + } + }, + "json-buffer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", + "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==" + }, + "jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "requires": { + "graceful-fs": "^4.1.6", + "universalify": "^2.0.0" + } + }, + "keyv": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.5.tgz", + "integrity": "sha512-531pkGLqV3BMg0eDqqJFI0R1mkK1Nm5xIP2mM6keP5P8WfFtCkg2IOwplTUmlGoTgIg9yQYZ/kdihhz89XH3vA==", + "requires": { + "json-buffer": "3.0.1" + } + }, + "lowercase-keys": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz", + "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==" + }, + "mimic-response": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz", + "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==" + }, + "p-cancelable": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz", + "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==" + }, + "responselike": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.0.tgz", + "integrity": "sha512-xH48u3FTB9VsZw7R+vvgaKeLKzT6jOogbQhEe/jewwnZgzPcnyWui2Av6JpoYZF/91uueC+lqhWqeURw5/qhCw==", + "requires": { + "lowercase-keys": "^2.0.0" + } + }, + "universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==" + } } }, "gatsby-graphiql-explorer": { @@ -7886,23 +8030,6 @@ "universalify": "^2.0.0" } }, - "gatsby-core-utils": { - "version": "2.14.0", - "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-2.14.0.tgz", - "integrity": "sha512-HDMb1XMqysup9raLYWB0wIQU568R9qPounF7iAwjf2esFUVV5mdBTvxEpune/7yG0RmwhNPhgrEZo2rBHeJf7A==", - "requires": { - "@babel/runtime": "^7.15.4", - "ci-info": "2.0.0", - "configstore": "^5.0.1", - "file-type": "^16.5.3", - "fs-extra": "^10.0.0", - "got": "^11.8.2", - "node-object-hash": "^2.3.9", - "proper-lockfile": "^4.1.2", - "tmp": "^0.2.1", - "xdg-basedir": "^4.0.0" - } - }, "gatsby-plugin-utils": { "version": "1.14.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-utils/-/gatsby-plugin-utils-1.14.0.tgz", @@ -8170,6 +8297,33 @@ } } }, + "gatsby-remark-highlight-code": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/gatsby-remark-highlight-code/-/gatsby-remark-highlight-code-3.2.0.tgz", + "integrity": "sha512-j471XLpy31NZ0XpUX25L6Y171t8N79BOhELBViS/KdrfNIwOpAyVuCZ0WVQnPVhmDaPHC6LzuChwGIhLXXoF7w==", + "requires": { + "gatsby-node-helpers": "^1.2.1", + "lodash": "^4.17.21", + "mdast-util-to-string": "^1.1.0", + "unist-util-visit": "^2.0.2" + }, + "dependencies": { + "gatsby-node-helpers": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/gatsby-node-helpers/-/gatsby-node-helpers-1.2.1.tgz", + "integrity": "sha512-fYNQhp7/3sBUkb9QR31CZm6XChN2A78npow/PNglx5U1Sv8Zmd07Io8Mc2K7UO2hUCCSuAmgkSqlqq71NupdQA==", + "requires": { + "camel-case": "^4.1.2", + "pascal-case": "^3.1.2" + } + }, + "mdast-util-to-string": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz", + "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==" + } + } + }, "gatsby-remark-images": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/gatsby-remark-images/-/gatsby-remark-images-6.0.0.tgz", @@ -8490,12 +8644,12 @@ } }, "gatsby-transformer-remark": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-4.10.0.tgz", - "integrity": "sha512-laIDi9fY4PntsD+4uhpL+BmXA7Kf8u82ubuzyt7J8kQT6VATXx9Tks84dVzSvtvDaN/bhNk+CdLAo+brJ49oFg==", + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-4.11.0.tgz", + "integrity": "sha512-K00qbvSVq5puyDmZZp+WOU8CmBJRpjmJt1t8yl30My66PiDT8u242xVYUE0qdsKEr2gz5npE0w4nj/5Hgtfw7Q==", "requires": { - "@babel/runtime": "^7.14.8", - "gatsby-core-utils": "^2.13.0", + "@babel/runtime": "^7.15.4", + "gatsby-core-utils": "^2.14.0", "gray-matter": "^4.0.2", "hast-util-raw": "^6.0.2", "hast-util-to-html": "^7.1.2", @@ -12842,6 +12996,11 @@ } } }, + "prismjs": { + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz", + "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==" + }, "probe-image-size": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/probe-image-size/-/probe-image-size-6.0.0.tgz", diff --git a/package.json b/package.json index 58af8ea0..065ea8ad 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "fiqus-web", "version": "1.0.0", - "homepage": "https://nayracoop.github.io/fiqus-web-front", + "homepage": "https://fiqus.coop", "private": true, - "description": "fiqus-web", - "author": "RomiGomez", + "description": "Fiqus Cooperative Web Page", + "author": "RomiGomez & Fiqus", "keywords": [ "gatsby" ], @@ -13,10 +13,10 @@ "start": "gatsby develop", "build": "gatsby build", "serve": "gatsby serve", - "clean": "gatsby clean", - "deploy": "gatsby build --prefix-paths && gh-pages -d public" + "clean": "gatsby clean" }, "dependencies": { + "@deckdeckgo/highlight-code": "^3.6.0", "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", "axios": "^0.24.0", @@ -32,10 +32,11 @@ "gatsby-plugin-react-intl": "^3.0.2", "gatsby-plugin-sharp": "^3.14.0", "gatsby-plugin-styled-components": "^4.13.0", + "gatsby-remark-highlight-code": "^3.2.0", "gatsby-remark-images": "^6.0.0", "gatsby-source-filesystem": "^3.13.0", "gatsby-source-strapi": "^1.0.2", - "gatsby-transformer-remark": "^4.10.0", + "gatsby-transformer-remark": "^4.11.0", "gatsby-transformer-sharp": "^3.14.0", "gh-pages": "^3.2.3", "path-browserify": "^1.0.1", diff --git a/src/blogTemplates/blogPost.js b/src/blogTemplates/blogPost.js index 53ca3c61..0f2f40c1 100644 --- a/src/blogTemplates/blogPost.js +++ b/src/blogTemplates/blogPost.js @@ -1,7 +1,6 @@ import React from "react"; import { graphql } from "gatsby"; import { changeLocale } from "gatsby-plugin-react-intl"; -import { useEffect } from "react"; import styled from 'styled-components' import Img from "gatsby-image" import data from '../content/content.json' @@ -10,6 +9,8 @@ import { useIntl, Link } from "gatsby-plugin-react-intl" import Button from '../components/common/Button' import Tags from '../components/common/Tags' +import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader"; + const styles = data.styles const PostContainer = styled.div` @@ -112,7 +113,6 @@ const PostContent = styled.div` p{ margin-bottom:30px; } - h2{ font-size: .88rem; line-height: 23px; @@ -120,7 +120,9 @@ const PostContent = styled.div` font-weight: ${styles.fontWeight.bold}; margin-bottom: 20px; } - + h1, h2, h3, h4, h5, h6 { + margin-bottom: 15px; + } figure{ margin-bottom: 30px; max-width: 320px; @@ -137,6 +139,41 @@ const PostContent = styled.div` margin-top: 0; } } + blockquote{ + display:block; + background: #fff; + padding: 1rem 1rem 0.1rem 2.5rem; + margin: 0 0 20px; + position: relative; + + font-size: 16px; + line-height: 1.2; + color: #666; + text-align: justify; + + border-left: 15px solid #510066; + border-right: 2px solid #510066; + + -moz-box-shadow: 2px 2px 15px #ccc; + -webkit-box-shadow: 2px 2px 15px #ccc; + box-shadow: 2px 2px 15px #ccc; + } + blockquote a{ + text-decoration: none; + background: #eee; + cursor: pointer; + padding: 0 3px; + color: #510066; + } + blockquote a:hover{ + color: #666; + } + p { + code { + background: #eee; + color: #510066; + } + } ` const TagsContainer = styled.div` @@ -165,17 +202,31 @@ const TagsTitle = styled.h4` const Btn = styled(Button)` display: flex; justify-content: center; + width: fit-content; + margin-left: auto; + margin-right: auto; ` -export default function Post({ data, props }) { - const { html, frontmatter: post } = data.markdownRemark; +export default function Post({ data: {allMarkdownRemark: { edges }} }) { + deckDeckGoHighlightElement(); const intl = useIntl(); - - useEffect(() => { - if (post.lang !== "es") { - changeLocale(post.lang); - } - }, [post.lang]); + let post = {}; + let html = ""; + if (edges[0]) { + post = edges[0].node.frontmatter + } else { + return ( + + + ) + } + const postFiqus = edges.forEach((e) => { + const { frontmatter: p } = e.node; + if (p.lang === intl.locale) { + post = p; + html = e.node.html; + } + }) return ( @@ -187,7 +238,7 @@ export default function Post({ data, props }) { - Blog {post.title} + Blog / {post.title} @@ -219,28 +270,34 @@ export default function Post({ data, props }) { ); } + export const pageQuery = graphql` - query PostQuery($slug: String!) { - markdownRemark(frontmatter: { slug: { eq: $slug } }) { - html - frontmatter { - lang - type - title - author - slug - date - tags - image{ - childImageSharp { - fluid(maxWidth: 800) { - ...GatsbyImageSharpFluid + query ($slug: String!) { + allMarkdownRemark(filter: {frontmatter: { type: {eq: "post"}, slug: { eq: $slug } }}){ + edges { + node { + id + html + frontmatter { + lang + type + title + author + slug + date + tags + image{ + childImageSharp { + fluid(maxWidth: 800) { + ...GatsbyImageSharpFluid + } + } } + imageCredits } + timeToRead } - imageCredits } - timeToRead } } `; diff --git a/src/components/common/ContactForm.js b/src/components/common/ContactForm.js index 2d5a33ef..c8100dd8 100644 --- a/src/components/common/ContactForm.js +++ b/src/components/common/ContactForm.js @@ -16,10 +16,12 @@ const ContactMainContainer = styled.div` padding-left: 20px; padding-right: 20px; @media (min-width: ${styles.breakpoints.m}px) { - min-height: 465px; + min-height: 210px; } ` const ContactWrapper = styled.div` + text-align: center; + justify-content: center; position: absolute; top: -115px; left: 0; @@ -38,194 +40,67 @@ const ContactWrapper = styled.div` top: -163px; flex-direction: row; flex-wrap: wrap; - justify-content: space-between; padding: 37px 92px 39px 94px; margin: auto; max-width: calc(100% - 40px); } @media (min-width: ${styles.breakpoints.l}px) { - max-width: 946px; + max-width: 800px; } ` const ContactHeading = styled.h2` font-size: 2.38em; font-weight:${styles.fontWeight.bold}; text-align: center; - margin-bottom: 38px; @media (min-width: ${styles.breakpoints.m}px) { font-size: 3.33em; line-height: 64px; - margin-bottom: 30px; flex-basis: 100%; } ` -const ContactFormBlock = styled.div` - @media (min-width: ${styles.breakpoints.m}px) { - max-width: 367px; - flex-basis: 50%; - } -` -const Form = styled.form` - display: flex; - flex-direction: column; -` -const FormGroup = styled.div` - display: flex; - flex-direction: column; - margin-bottom: 27px; - position: relative; - &:nth-last-of-type(2) { - margin-bottom: 30px; - } - &:last-child { - margin-bottom: 0; - align-items: center; - flex-direction: column-reverse; - text-align: center; - @media (min-width: ${styles.breakpoints.m}px) { - display: flex; - justify-content: space-between; - flex-direction: row; - text-align: left; - &:nth-last-of-type(2) { - margin-bottom: 22px; - } - a { - width: max-content; - margin-right: 14px; - } - } - } -` -const Label = styled.label` - font-size: 1em; - font-weight:${styles.fontWeight.bold}; - margin-bottom: 8px; -` - -const FieldContainer = styled.div` - position: relative; - ${props => { - if (props.error) { - return ` - &::after { - content: url(${require('../../images/icon_form_error.svg').default}); - position: absolute; - height: 20px; - width: 20px; - right: 15px; - top: 10px; - @media (min-width: ${styles.breakpoints.m}px) { - right: 20px; - } - } - ` - } - }} - -` - -const Field = styled.input` - border: 2px solid ${styles.colors.black}; - border-radius: 12px; - padding: 10px 45px 10px 16px; - width: 100%; - background: ${styles.colors.white}; - font-size: 1em; - font-family: 'Rubik', sans-serif; - &::placeholder { - color: ${styles.colors.ultraLightGrey}; - } - @media (min-width: ${styles.breakpoints.m}px) { - max-width: 367px; - } -` -const TextArea = styled.textarea` - border: 2px solid ${styles.colors.black}; - border-radius: 12px; - padding: 10px 45px 10px 16px; - width: 100%; - background: ${styles.colors.white}; - font-size: 1.125em; - font-family: 'Rubik', sans-serif; - height: 130px; - resize: none; - &::placeholder { - color: ${styles.colors.ultraLightGrey}; - } - @media (min-width: ${styles.breakpoints.m}px) { - max-width: 367px; - } -` -const BtnSubmit = styled(Button)` - max-width: max-content; - margin-bottom: 0; - max-height: 50px; -` -const ErrorMessage = styled.p` - color: ${styles.colors.orangeMain}; - font-weight:${styles.fontWeight.medium}; - font-size: .88em; - font-size: .66em; - margin-left: auto; - margin-top: 5px; - position: absolute; - right: 6px; - bottom: -18px; -` - -const FeedbackMessage = styled.p` - color: ${styles.colors.darkMainBg}; - font-weight:${styles.fontWeight.regular}; - font-size: .88em; - margin-left: 0; - margin-top: 0px; - margin-bottom: 20px; - @media (min-width: ${styles.breakpoints.m}px) { - margin-top: 15px; - margin-left: auto; - } -` -const FeedbackMessageTitle = styled.span` - color: ${styles.colors.greenMain}; - font-weight:${styles.fontWeight.bold}; - display: block; -` - const ContactInfoBlock = styled.div` margin-top: 65px; @media (min-width: ${styles.breakpoints.m}px) { - max-width: 15em; margin-top: 28px; } ` -const Email = styled(Link)` +const Email = styled(Link)`} + &::before { + content: url("${require('../../images/email.svg').default}"); + display: inline-block; + width: 25px; + margin-right: 10px; + margin-top: 3px; + margin-left: 2px; + } + display: flex; + align-self: flex-start; + align-items: center; + flex-direction: row; font-size: .88em; font-weight:${styles.fontWeight.bold}; - margin-bottom: 28px; - display: block; + margin-bottom: 10px; text-decoration: none; color: ${styles.colors.darkMainBg}; @media (min-width: ${styles.breakpoints.m}px) { font-size: 1em; - margin-bottom: 30px; - } -` -const OfficeListTitle = styled.h3` - font-size: .88em; - font-weight:${styles.fontWeight.bold}; - @media (min-width: ${styles.breakpoints.m}px) { - font-size: 1em; - margin-bottom: 4px; + margin-bottom: 7px; } ` const OfficeList = styled.ul` margin-left: 0; + display: flex; + flex-direction: column; + align-items: flex-start; ` const OfficeListItem = styled.li` + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; font-size: .88em; list-style-type: none; - margin-bottom: 23px; + margin-bottom: 10px; line-height: 22px; &:last-of-type { margin-bottom: 0; @@ -234,6 +109,12 @@ const OfficeListItem = styled.li` font-size: 1em; line-height: 26px; } + &::before { + content: url("${require('../../images/pin.svg').default}"); + display: inline-block; + width: 25px; + margin-top: 3px; + } ` const ContactForm = () => { @@ -271,65 +152,12 @@ const ContactForm = () => { return ( - {intl.formatMessage({ id: 'contactForm.title' })} - -
- - - - setName(e.target.value)} /> - - {errors.nameField && - {intl.formatMessage({ id: 'contactForm.requiredFieldError' })} - } - - - - - - setMail(e.target.value)} /> - - {errors.emailField && - {intl.formatMessage({ id: 'contactForm.requiredFieldError' })} - } - - - - - -