Pantalla validacion

src/components/App/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import styles from './index.module.scss';
+import PantallaValidacion from '../screens/Validacion/components';
 
 function App() {
-  return <h1> Proyecto blockchain </h1>;
+  return <PantallaValidacion />;
 }
 
 export default App;

src/components/BoardResolution/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import styles from './index.module.scss';
+
+function BoardResolution() {
+  const CELL_NUMBERS = 16;
+  const renderCells = () => [...Array(CELL_NUMBERS)].map(() => <div className={styles.cell} />);
+
+  return (
+    <div className={styles.containerBoard}>
+      <h2 className={styles.legend}>Resolución</h2>
+      <div className={styles.board}>{renderCells()}</div>
+    </div>
+  );
+}
+
+export default BoardResolution;

src/components/BoardResolution/index.module.scss

@@ -0,0 +1,156 @@
+.containerBoard {
+  padding: 31.5px 42.5px;
+  border: 1px solid #E1E1E2;
+  position: relative;
+  border-radius: 4px;
+  max-height: 374px;
+  max-width: 395px;
+  margin-top: 10px;
+  margin-bottom: 23.5px;
+}
+
+.legend {
+  position: absolute;
+  top: -35px;
+  left: 10px;
+  background-color: white;
+  padding: 0 5px;
+  color: #525256;
+  font-size: 24px;
+  font-weight: lighter;
+}
+
+.board {
+  background-color: #173040;
+  height: 311px;
+  width: 311px;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
+  padding: 15px 14px;
+  border-radius: 3.66px;
+}
+
+.cell {
+  width: 25%;
+  height: 25%;
+}
+
+.cell:nth-child(odd) {
+  background-color: #FEC34D;
+}
+
+.cell:nth-child(9) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(7) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(10) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(16) {
+  background-color: #33BFC6;
+}
+
+.cell:nth-child(1) {
+  background-color: #AED750;
+}
+
+.cell:nth-child(2) {
+  background-color: #33BFC6;
+}
+
+.cell:nth-child(3) {
+  background-color: #AED750;
+}
+
+.cell:nth-child(4) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(5) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(6) {
+  background-color: #AED750;
+}
+
+.cell:nth-child(7) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(8) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(9) {
+  background-color: #FEC34D;
+}
+
+.cell:nth-child(10) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(11) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(12) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(13) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(14) {
+  background-color: #FEC34D;
+}
+
+.cell:nth-child(15) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(16) {
+  background-color: #FEC34D;
+}
+
+
+.cell:nth-child(1) {
+  border-top-left-radius: 3.66px;
+}
+
+.cell:nth-child(4) {
+  border-top-right-radius: 3.66px;
+}
+
+.cell:nth-child(13) {
+  border-bottom-left-radius: 3.66px;
+}
+
+
+.cell:nth-child(16) {
+  border-bottom-right-radius: 3.66px;
+}
+
+.cell:nth-child(-n+4) {
+  border-top: 4px solid white;
+}
+
+.cell:nth-child(1n) {
+  border-bottom: 4px solid white;
+  border-left: 4px solid white;
+}
+
+.cell:nth-child(4n) {
+  border-right: 4px solid white;
+}
+
+
+

src/components/Score/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import styles from './index.module.scss';
+
+function Score() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.containerScore}>
+        <span className={styles.textScore}>Tu Puntaje</span>
+        <span className={styles.iconContainer}>+</span>
+        <span className={styles.score}>2175</span>
+      </div>
+    </div>
+  );
+}
+
+export default Score;

src/components/Score/index.module.scss

@@ -0,0 +1,40 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 36px;  
+}
+
+.containerScore {
+  background-color: #E8E8E8;
+  display: flex;
+  align-items: center;
+  width: 196px;
+  height: 53px;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.textScore {
+  margin: 0 5px;
+  font-weight: lighter;
+}
+
+.iconContainer {
+  margin: 0 8px;
+  background-color: #44B449;
+  width: 18px;
+  height: 16px;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  padding-bottom: 1px;
+}
+
+.score {
+  font-size: 29px;
+ font-weight: bold;
+ color: #525256;
+}
+

src/components/screens/Validacion/components/Board/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import styles from './index.module.scss';
+
+function Board() {
+  const CELL_NUMBERS = 16;
+  const renderCells = () =>
+    [...Array(CELL_NUMBERS)].map(() => (
+      <div className={styles.cell}>
+        <span className={styles.number}>24</span>
+      </div>
+    ));
+
+  return (
+    <div className={styles.containerBoard}>
+      <div className={styles.board}>{renderCells()}</div>
+    </div>
+  );
+}
+
+export default Board;

src/components/screens/Validacion/components/Board/index.module.scss

@@ -0,0 +1,127 @@
+.containerBoard {
+  box-sizing: border-box;
+  height: 481px;
+  width: 481px;
+  border: 1px solid #E1E1E2;
+  border-radius: 4px;
+  background-color: #FFFFFF;
+  margin-right: 21px; 
+  margin-bottom: 108.5px;
+}
+
+.board {
+  height: 481px;
+  width: 481px;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
+  border-radius: 8px;
+  padding: 8px;
+}
+
+.number {
+  color: #FFFFFF;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 48px;
+  font-weight: bold;
+  letter-spacing: 0;
+  line-height: 58px;
+}
+
+.cell {
+  min-width: 25%;
+  min-height: 25%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cell:nth-child(odd) {
+  background-color: #FEC34D;
+}
+
+.cell:nth-child(9) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(7) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(10) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(16) {
+  background-color: #33BFC6;
+}
+
+.cell:nth-child(1) {
+  background-color: #AED750;
+}
+
+.cell:nth-child(2) {
+  background-color: #33BFC6;
+}
+
+.cell:nth-child(3) {
+  background-color: #AED750;
+}
+
+.cell:nth-child(4) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(5) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(6) {
+  background-color: #AED750;
+}
+
+.cell:nth-child(7) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(8) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(9) {
+  background-color: #FEC34D;
+}
+
+.cell:nth-child(10) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(11) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(12) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(13) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(14) {
+  background-color: #FEC34D;
+}
+
+.cell:nth-child(15) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(16) {
+  background-color: #FEC34D;
+}
+
+.cell{
+  border: 4px solid white;
+}