diff --git a/package-lock.json b/package-lock.json index d96ae01..383f9aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -911,6 +911,48 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz", "integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==" }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.34", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz", + "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA==" + }, + "@fortawesome/fontawesome-free": { + "version": "5.15.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz", + "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.34", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz", + "integrity": "sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.34" + } + }, + "@fortawesome/free-brands-svg-icons": { + "version": "5.15.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.2.tgz", + "integrity": "sha512-YPlVjE1cEO+OJ9I9ay3TQ3I88+XkxMTYwnnddqAboxLhPNGncsHV0DjWOVLCyuAY66yPfyndWwVn4v7vuqsO1g==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.34" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.15.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz", + "integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.34" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.14", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz", + "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@hapi/address": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz", diff --git a/package.json b/package.json index 1abd5e2..8f423b6 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,11 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-free": "^5.15.2", + "@fortawesome/fontawesome-svg-core": "^1.2.34", + "@fortawesome/free-brands-svg-icons": "^5.15.2", + "@fortawesome/free-solid-svg-icons": "^5.15.2", + "@fortawesome/react-fontawesome": "^0.1.14", "@types/enzyme": "^3.9.4", "@types/jest": "^24.0.15", "@types/node": "^12.0.10", diff --git a/src/img/feedback-dark.png b/src/img/feedback-dark.png deleted file mode 100644 index c693b65..0000000 Binary files a/src/img/feedback-dark.png and /dev/null differ diff --git a/src/img/feedback-light.png b/src/img/feedback-light.png deleted file mode 100644 index 8377929..0000000 Binary files a/src/img/feedback-light.png and /dev/null differ diff --git a/src/img/github-dark.png b/src/img/github-dark.png deleted file mode 100644 index 07ecd24..0000000 Binary files a/src/img/github-dark.png and /dev/null differ diff --git a/src/img/github-light.png b/src/img/github-light.png deleted file mode 100644 index 8df17f1..0000000 Binary files a/src/img/github-light.png and /dev/null differ diff --git a/src/img/twitter-dark.png b/src/img/twitter-dark.png deleted file mode 100644 index e0d2f6f..0000000 Binary files a/src/img/twitter-dark.png and /dev/null differ diff --git a/src/img/twitter-light.png b/src/img/twitter-light.png deleted file mode 100644 index ee35e40..0000000 Binary files a/src/img/twitter-light.png and /dev/null differ diff --git a/src/index.css b/src/index.css index c7ae1c8..13743c9 100644 --- a/src/index.css +++ b/src/index.css @@ -6,11 +6,6 @@ code { font-size: 1.2em; font-weight: bold; } .header-cmd { color: #c5c5c5 } -.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 } -.top-links li { float: left; } -.top-links a { display: inline-block; padding: 10px 15px} -.top-links .icon { margin-right: 5px; } - .mono { font-family: monospace; font-size: 1.3em } .expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; } @@ -51,19 +46,6 @@ code { font-size: 1.2em; font-weight: bold; } .cur { color: lightgray; } -.icon { width: 16px; height: 16px; display: inline-block; } -.light .twitter { background: url('./img/twitter-light.png') } -.dark .twitter { background: url('./img/twitter-dark.png') } -.midnight .twitter { background: url('./img/twitter-dark.png') } - -.light .feedback { background: url('./img/feedback-light.png') } -.dark .feedback { background: url('./img/feedback-dark.png') } -.midnight .feedback { background: url('./img/feedback-dark.png') } - -.light .github { background: url('./img/github-light.png') } -.dark .github { background: url('./img/github-dark.png') } -.midnight .github { background: url('./img/github-dark.png') } - /* Light */ .light { background: #fafafa; } .light a, .light a:visited { color: #222; } diff --git a/src/shell/components/AppRoot.tsx b/src/shell/components/AppRoot.tsx index 75f7b87..d9ae9b5 100644 --- a/src/shell/components/AppRoot.tsx +++ b/src/shell/components/AppRoot.tsx @@ -6,6 +6,8 @@ import cmd from '../cmd'; import log from 'loglevel'; import Indicators from './Indicators'; import hash from '../../core/hash'; +import TopLinks from './TopLinks'; + type AppRootProps = { appState: AppState, @@ -51,17 +53,7 @@ export default class AppRoot extends React.Component

BitwiseCmd

- +
diff --git a/src/shell/components/TopLinks.css b/src/shell/components/TopLinks.css new file mode 100644 index 0000000..5e14e82 --- /dev/null +++ b/src/shell/components/TopLinks.css @@ -0,0 +1,5 @@ + +.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 } +.top-links li { float: left; } +.top-links a { display: inline-block; padding: 10px 15px} +.top-links .icon { margin-right: 5px; vertical-align: middle; } \ No newline at end of file diff --git a/src/shell/components/TopLinks.tsx b/src/shell/components/TopLinks.tsx new file mode 100644 index 0000000..93084f3 --- /dev/null +++ b/src/shell/components/TopLinks.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import { faEnvelope } from "@fortawesome/free-solid-svg-icons"; +import { faTwitter, faGithub} from "@fortawesome/free-brands-svg-icons"; +import './TopLinks.css'; + +function TopLinks() { + return ; +} + +export default TopLinks; \ No newline at end of file