Restructured css

frontend/src/components/App.css

@@ -0,0 +1,124 @@
+:root {
+  --main: #943ec5;
+  --grey: #9fa6b2;
+  --text: #4b5563;
+  --border: #ddd;
+  --issueBackground: #f8d7da;
+  --issueHover: #f4c1c6;
+  --issueBorder: #f5c6cb;
+  --issueText: #721c24;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 15px;
+}
+
+.App {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.background {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: var(--grey);
+  background: linear-gradient(
+    165deg,
+    rgba(87, 35, 117, 1) 0%,
+    rgba(148, 62, 197, 1) 55%,
+    rgba(211, 176, 231, 1) 100%
+  );
+  z-index: -1;
+}
+
+h1 {
+  margin: 0 0 12px 0;
+  font-weight: 600;
+  font-size: 19px;
+}
+
+h2 {
+  margin: 0 0 4px 0;
+  font-weight: 600;
+  font-size: 17px;
+}
+
+p {
+  margin: 12px 0 0 0;
+}
+
+b {
+  font-weight: 600;
+}
+
+img {
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  box-sizing: border-box;
+  display: block;
+  margin: 0 0 12px 0;
+}
+
+@media screen and (max-width: 500px) {
+  .github {
+    width: 24px;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+
+  body {
+    font-size: 14px;
+  }
+
+  .contentBlock {
+    padding: 18px;
+    margin: 0 0 18px 0;
+  }
+
+  .centerBlockInner {
+    width: 650px;
+    margin: 12px 0 0 0;
+  }
+
+  .logo {
+    width: 185px;
+    margin: 0 0 8px 0;
+  }
+
+  h1 {
+    font-size: 16px;
+  }
+
+  h2 {
+    margin: 0 0 3px 0;
+    font-size: 15px;
+  }
+
+  .contentIcon {
+    flex: none;
+    margin: 0 18px 0 0;
+    width: 28px !important;
+  }
+
+  td:first-child {
+    width: 70px;
+  }
+
+  .boxWrap {
+    padding: 8px;
+  }
+
+  input[type='text'] {
+    width: calc(100% - 65px);
+  }
+}

frontend/src/components/App.js

@@ -1,6 +1,6 @@
 import Github from './Github';
 import MainColumn from './MainColumn';
-import '../styles/App.css';
+import './App.css';
 
 const App = () => (
   <div className="App">

frontend/src/components/Block.js

@@ -1,9 +1,5 @@
 const ContentBlock = ({ children }) => (
-  <div className="contentBlock">
-    <div className="contentItem">
-      <div className="contentText">{children}</div>
-    </div>
-  </div>
+  <div className="contentBlock">{children}</div>
 );
 
 export default ContentBlock;

frontend/src/components/Blocks.css

@@ -0,0 +1,20 @@
+.centerBlockInner {
+  width: 500px;
+}
+
+.contentBlock {
+  color: var(--text);
+  background-color: #fff;
+  border-radius: 6px;
+  box-sizing: border-box;
+  padding: 24px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  margin: 0 0 24px 0;
+}
+
+@media screen and (max-width: 500px) {
+  .contentBlock {
+    padding: 18px;
+    margin: 0 0 18px 0;
+  }
+}

frontend/src/components/Blocks.js

@@ -9,6 +9,7 @@ import LocationBlock from './LocationBlock';
 import ConnectionBlock from './ConnectionBlock';
 // import FontsBlock from './FontsBlock';
 import { fetchAPI, getWebWorker } from '../utils/common';
+import './Blocks.css';
 
 const Blocks = () => {
   const [workerData, setWorkerData] = useState();

frontend/src/components/FingerprintBlock.css

@@ -0,0 +1,42 @@
+.fingerprintTable td:first-child {
+  width: 80px;
+  font-weight: 600;
+  word-break: normal;
+}
+
+.boxWrap {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.hash {
+  text-align: center;
+  font-weight: 600;
+}
+
+form {
+  margin: 12px 0 0 0;
+}
+
+.saveButton {
+  border: 1px solid var(--grey);
+  border-radius: 6px;
+  padding: 6px;
+  background-color: transparent;
+  cursor: pointer;
+  color: var(--text);
+  margin: 0 0 0 6px;
+}
+
+.saveButton:hover {
+  background-color: var(--border);
+}
+
+input[type='text'] {
+  border: 1px solid var(--grey);
+  border-radius: 6px;
+  padding: 6px;
+  width: 200px;
+  outline: none;
+}

frontend/src/components/FingerprintBlock.js

@@ -1,3 +1,4 @@
+import './FingerprintBlock.css';
 import { useState, useEffect } from 'react';
 import Block from './Block';
 import Table from './Table';
@@ -42,11 +43,16 @@ const FingerprintBlock = ({ workerData }) => {
       <form onSubmit={(e) => postSignature(hash, e.target[0].value)}>
         <input
           type="text"
-          id="name"
-          name="name"
+          id="signature"
+          name="signature"
           placeholder="Enter signature"
         />
-        <input type="submit" id="saveButton" value="Save" maxLength="100" />
+        <input
+          type="submit"
+          className="saveButton"
+          value="Save"
+          maxLength="100"
+        />
       </form>
     </Block>
   );

frontend/src/components/GitHub.css

@@ -0,0 +1,18 @@
+.gitHubButton {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+}
+
+@media screen and (max-width: 900px) {
+  .gitHubButton {
+    position: absolute;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .gitHubButton {
+    top: 8px;
+    right: 8px;
+  }
+}

frontend/src/components/Github.js

@@ -1,3 +1,4 @@
+import './GitHub.css';
 import GitHubButton from 'react-github-btn';
 
 const Github = () => (

frontend/src/components/IntlBlock.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import Block from './Block';
 import Table from './Table';
 import getIntl from '../utils/intl';

frontend/src/components/Logo.css

@@ -0,0 +1,10 @@
+.logoWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 0;
+}
+
+.logo {
+  width: 250px;
+}

frontend/src/components/Logo.js

@@ -1,3 +1,4 @@
+import './Logo.css';
 import { ReactComponent as LogoImg } from '../images/logo.svg';
 
 const Logo = () => (

frontend/src/components/MainColumn.css

@@ -0,0 +1,5 @@
+.centerBlockOuter {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+}

frontend/src/components/MainColumn.js

@@ -1,3 +1,4 @@
+import './MainColumn.css';
 import Logo from './Logo';
 import Blocks from './Blocks';
 

frontend/src/components/OtherBlock.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
 
 import Block from './Block';

frontend/src/components/Table.css

@@ -0,0 +1,14 @@
+table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+.tableWrap {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+tbody:not(:last-child) {
+  border-bottom: 1px solid var(--border);
+}

frontend/src/components/Table.js

@@ -1,3 +1,4 @@
+import './Table.css';
 import TableRow from './TableRow';
 
 const Table = ({ data }) => (

frontend/src/components/TableRow.css

@@ -0,0 +1,56 @@
+td {
+  padding: 12px;
+}
+
+td:first-child {
+  width: 150px;
+  font-weight: 600;
+  word-break: normal;
+}
+
+td:nth-child(3) {
+  width: 40px;
+  font-weight: 600;
+  word-break: normal;
+}
+
+.circleButton {
+  display: flex;
+  width: 20px;
+}
+
+.issue {
+  cursor: pointer;
+}
+
+.issue:hover {
+  background-color: var(--issueBackground);
+  color: var(--issueText);
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 6px 0;
+}
+
+.modalTitle {
+  font-weight: 600;
+}
+
+.closeButton {
+  fill: var(--border);
+  display: flex;
+  width: 12px;
+  cursor: pointer;
+  margin: -12px 0 0 0;
+}
+
+.closeButton:hover {
+  fill: var(--grey);
+}
+
+ul {
+  padding-left: 20px;
+  margin: 0px;
+}

frontend/src/components/TableRow.js

@@ -1,3 +1,4 @@
+import './TableRow.css';
 import Modal from 'react-modal';
 import { useState } from 'react';
 import { ReactComponent as XCircle } from '../images/xCircle.svg';
@@ -32,16 +33,18 @@ const TableRow = ({ item }) => {
     setIsOpen(false);
   };
   return (
-    <tr>
-      <td>{item.key}</td>
-      <td>{item.value}</td>
-      <td>
-        {issues ? (
-          <XCircle className="circleButton issueButton" onClick={openModal} />
-        ) : (
-          <CheckCircle className="circleButton" />
-        )}
-      </td>
+    <>
+      <tr className={issues ? 'issue' : ''} onClick={openModal}>
+        <td>{item.key}</td>
+        <td>{item.value}</td>
+        <td>
+          {issues ? (
+            <XCircle className="circleButton" />
+          ) : (
+            <CheckCircle className="circleButton" />
+          )}
+        </td>
+      </tr>
       <Modal
         isOpen={modalIsOpen}
         onRequestClose={closeModal}
@@ -58,7 +61,7 @@ const TableRow = ({ item }) => {
           ))}
         </ul>
       </Modal>
-    </tr>
+    </>
   );
 };
 

frontend/src/images/xCircle.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <g fill="#721c24">
+  <g fill="#f4c1c6">
     <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/>
   </g>
 </svg>

frontend/src/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './styles/index.css';
 import App from './components/App';
 import * as serviceWorker from './serviceWorker';
 

frontend/src/styles/App.css

@@ -1,288 +0,0 @@
-:root {
-  --main: #943ec5;
-  --grey: #9fa6b2;
-  --text: #4b5563;
-  --border: #ddd;
-  --issueBackground: #f8d7da;
-  --issueHover: #f4c1c6;
-  --issueBorder: #f5c6cb;
-  --issueText: #721c24;
-}
-
-.App {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.background {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background: var(--grey);
-  background: linear-gradient(
-    165deg,
-    rgba(87, 35, 117, 1) 0%,
-    rgba(148, 62, 197, 1) 55%,
-    rgba(211, 176, 231, 1) 100%
-  );
-  z-index: -1;
-}
-
-.gitHubButton {
-  position: fixed;
-  top: 12px;
-  right: 12px;
-}
-
-.logoWrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 20px 0;
-}
-
-.logo {
-  width: 250px;
-}
-
-.centerBlockOuter {
-  display: flex;
-  justify-content: center;
-  gap: 24px;
-}
-
-.centerBlockInner {
-  width: 500px;
-}
-
-.contentBlock {
-  color: var(--text);
-  background-color: #fff;
-  border-radius: 6px;
-  box-sizing: border-box;
-  padding: 24px;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
-  margin: 0 0 24px 0;
-}
-
-.contentItem {
-  display: flex;
-}
-
-.contentItem:not(:last-child) {
-  margin: 0 0 24px 0;
-}
-
-.contentIcon {
-  flex: none;
-  margin: 0 24px 0 0;
-  width: 32px !important;
-}
-
-.contentText {
-  line-height: 24px;
-}
-
-h1 {
-  margin: 0 0 12px 0;
-  font-weight: 600;
-  font-size: 19px;
-}
-
-h2 {
-  margin: 0 0 4px 0;
-  font-weight: 600;
-  font-size: 17px;
-}
-
-.contentList {
-  margin: 24px 0 0 0;
-}
-
-#scanButton {
-  display: block;
-  background-color: var(--main);
-  color: #fff;
-  padding: 12px;
-  border-radius: 6px;
-  box-sizing: border-box;
-  text-align: center;
-  width: 100%;
-  border: none;
-  cursor: pointer;
-  margin: 24px 0 0 0;
-  font-family: inherit;
-  font-size: inherit;
-  -webkit-appearance: none;
-}
-
-#scanButton:hover {
-  opacity: 0.7;
-}
-
-.boxWrap {
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 12px;
-}
-
-.tableWrap {
-  border: 1px solid var(--border);
-  border-radius: 6px;
-}
-
-table {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-
-tbody:not(:last-child) {
-  border-bottom: 1px solid var(--border);
-}
-
-td {
-  padding: 12px;
-}
-
-td:first-child {
-  width: 150px;
-  font-weight: 600;
-  word-break: normal;
-}
-
-.fingerprintTable td:first-child {
-  width: 80px;
-  font-weight: 600;
-  word-break: normal;
-}
-
-td:nth-child(3) {
-  width: 40px;
-  font-weight: 600;
-  word-break: normal;
-}
-
-.circleButton {
-  display: flex;
-  width: 20px;
-}
-
-p {
-  margin: 12px 0 0 0;
-}
-
-b {
-  font-weight: 600;
-}
-
-img {
-  width: 100%;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  box-sizing: border-box;
-  display: block;
-  margin: 0 0 12px 0;
-}
-
-.hash {
-  text-align: center;
-  font-weight: 600;
-}
-
-form {
-  margin: 12px 0 0 0;
-}
-
-input[type='text'] {
-  border: 1px solid var(--grey);
-  border-radius: 6px;
-  padding: 6px;
-  width: 200px;
-  outline: none;
-}
-
-#saveButton {
-  border: 1px solid var(--grey);
-  border-radius: 6px;
-  padding: 6px;
-  background-color: transparent;
-  cursor: pointer;
-  color: var(--text);
-  margin: 0 0 0 6px;
-}
-
-#saveButton:hover {
-  background-color: var(--border);
-}
-
-.issue {
-  background-color: var(--issueBackground);
-  color: var(--issueText);
-  border: 1px solid var(--issueBorder);
-  cursor: pointer;
-}
-
-.issue:hover {
-  background-color: var(--issueHover);
-}
-
-.newline {
-  display: block;
-}
-
-@media screen and (max-width: 500px) {
-  .github {
-    width: 24px;
-    position: absolute;
-    top: 8px;
-    right: 8px;
-  }
-
-  body {
-    font-size: 14px;
-  }
-
-  .contentBlock {
-    padding: 18px;
-    margin: 0 0 18px 0;
-  }
-
-  .centerBlockInner {
-    width: 650px;
-    margin: 12px 0 0 0;
-  }
-
-  .logo {
-    width: 185px;
-    margin: 0 0 8px 0;
-  }
-
-  h1 {
-    font-size: 16px;
-  }
-
-  h2 {
-    margin: 0 0 3px 0;
-    font-size: 15px;
-  }
-
-  .contentIcon {
-    flex: none;
-    margin: 0 18px 0 0;
-    width: 28px !important;
-  }
-
-  td:first-child {
-    width: 70px;
-  }
-
-  .boxWrap {
-    padding: 8px;
-  }
-
-  input[type='text'] {
-    width: calc(100% - 65px);
-  }
-}

frontend/src/styles/index.css

@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 15px;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}