diff --git a/webclient/src/App.js b/webclient/src/App.js index f977f31..85cb474 100644 --- a/webclient/src/App.js +++ b/webclient/src/App.js @@ -4,6 +4,7 @@ import localForage from 'localforage'; import './Style-light.css'; import './Style-dark.css'; import './fonts/Fonts.css'; +import { ForwardDot } from './utils.js'; import Feed from './Feed.js'; import Article from './Article.js'; import Comments from './Comments.js'; @@ -71,6 +72,8 @@ class App extends React.Component { } /> + + diff --git a/webclient/src/Style-light.css b/webclient/src/Style-light.css index 9de3e89..98d61c4 100644 --- a/webclient/src/Style-light.css +++ b/webclient/src/Style-light.css @@ -174,10 +174,27 @@ span.source { } .toggleDot .button { - font: 3rem/1 serif; + font: 2rem/1 'icomoon'; position: relative; - top: 0.1rem; - left: 0.1rem; + top: 0.5rem; + left: 0.55rem; +} + +.forwardDot { + position: fixed; + bottom: 1rem; + right: 1rem; + height: 3rem; + width: 3rem; + background-color: #828282; + border-radius: 50%; +} + +.forwardDot .button { + font: 2.5rem/1 'icomoon'; + position: relative; + top: 0.25rem; + left: 0.3rem; } .search form { diff --git a/webclient/src/fonts/Fonts.css b/webclient/src/fonts/Fonts.css index 02e387e..91982fd 100644 --- a/webclient/src/fonts/Fonts.css +++ b/webclient/src/fonts/Fonts.css @@ -21,3 +21,8 @@ font-style: italic; src: url('AppSILBI.ttf') format('truetype'); } + +@font-face { + font-family: 'Icomoon'; + src: url('icomoon.ttf') format('truetype'); +} diff --git a/webclient/src/fonts/icomoon.ttf b/webclient/src/fonts/icomoon.ttf new file mode 100644 index 0000000..901aaa1 Binary files /dev/null and b/webclient/src/fonts/icomoon.ttf differ diff --git a/webclient/src/switch.svg b/webclient/src/switch.svg deleted file mode 100644 index 2091882..0000000 --- a/webclient/src/switch.svg +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - - - - diff --git a/webclient/src/utils.js b/webclient/src/utils.js index 23d2bbd..e0dc2f2 100644 --- a/webclient/src/utils.js +++ b/webclient/src/utils.js @@ -2,8 +2,6 @@ import React from 'react'; import moment from 'moment'; import { Link } from 'react-router-dom'; -import Switch from './switch.svg'; - export const sourceLink = (story) => { const url = story.url || story.link; const urlObj = new URL(url); @@ -31,7 +29,7 @@ export class ToggleDot extends React.Component {
- toggle between article and comments + {article ? '' : ''}
@@ -39,6 +37,20 @@ export class ToggleDot extends React.Component { } } +export class ForwardDot extends React.Component { + render() { + return ( +
+ +
+ ); + } +} + export const logos = { hackernews: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4wgeBhwhciGZUAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGCSURBVFjD7Za/S0JRFMc/+oSgLWjLH/2AIKEhC2opIp1amqw/INCo9lbHghCnKDdpN5OoIGhISSLwx2RCEYSjUWhWpO+9hicopCHh8w29Mx3u/XLv95z7Pedcg+y1VQEBbUw0ang5gGBEY9MJ6ARMbaH6HdBnBlmC+5PfsVYX9PTCSx4KyQ4RsI6DxwcYIGSFxF5znHkOtvZBECDoa4tAe0+QDMFDVvFd7ta4pU0QTAo2GeqwBqIHIEkwMAQzaz/3LfNgn1Qw0aAKIswdQzZVy8Jyk+g3lNTfpSEXUakKjgJQrYB5GKY9DRpZALsDxCqEAyqWYT4G6etaFlYaol8HowCZBOSvVO4DR374+gTLCEytgs0JYxPKWtivUh9otOcM3FzC7CI43fBWVKK/vYBCqkudMLIN7yUYHFXe/qMMkZ0utuLyE8ROwWBU6j5+BqXHLs+C+GHdP9/VYBhJ1bpfedXHsU5A5Q9JKxEWa+KT5T8fY5C9NlnXgE7g3xMQNbxf/AZyEGqvyYs/dQAAAABJRU5ErkJggg==', reddit: 'data:image/png;base64,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',