diff --git a/webclient/public/manifest.json b/webclient/public/manifest.json
index e4c94e6..448ac7f 100644
--- a/webclient/public/manifest.json
+++ b/webclient/public/manifest.json
@@ -1,6 +1,6 @@
{
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "QNN",
+ "name": "Qot News Network",
"icons": [
{
"src": "favicon.ico",
@@ -21,5 +21,5 @@
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
- "background_color": "#ffffff"
+ "background_color": "#000000"
}
diff --git a/webclient/src/Article.js b/webclient/src/Article.js
index 265bbac..33c1647 100644
--- a/webclient/src/Article.js
+++ b/webclient/src/Article.js
@@ -1,6 +1,6 @@
import React from 'react';
import { Link } from 'react-router-dom';
-import { sourceLink, infoLine } from './utils.js';
+import { sourceLink, infoLine, ToggleDot } from './utils.js';
const apiUrl = 'http://news-api.dns.t0.vc/';
@@ -33,6 +33,7 @@ class Article extends React.Component {
}
render() {
+ const id = this.props.match.params.id;
const story = this.state.story;
const error = this.state.error;
@@ -61,6 +62,7 @@ class Article extends React.Component {
:
loading...
}
+
}
diff --git a/webclient/src/Comments.js b/webclient/src/Comments.js
index d467f5d..1d24daf 100644
--- a/webclient/src/Comments.js
+++ b/webclient/src/Comments.js
@@ -1,7 +1,7 @@
import React from 'react';
import { Link } from 'react-router-dom';
import moment from 'moment';
-import { sourceLink, infoLine } from './utils.js';
+import { sourceLink, infoLine, ToggleDot } from './utils.js';
const apiUrl = 'http://news-api.dns.t0.vc/';
@@ -48,6 +48,7 @@ class Article extends React.Component {
}
render() {
+ const id = this.props.match.params.id;
const story = this.state.story;
const error = this.state.error;
@@ -74,6 +75,7 @@ class Article extends React.Component {
:
loading...
}
+
}
diff --git a/webclient/src/Style-light.css b/webclient/src/Style-light.css
index 0690961..b5ab58a 100644
--- a/webclient/src/Style-light.css
+++ b/webclient/src/Style-light.css
@@ -65,6 +65,10 @@ span.source {
color: #444444;
}
+.article {
+ padding-bottom: 3rem;
+}
+
.article-container {
margin: 1rem auto;
max-width: 38rem;
@@ -151,3 +155,20 @@ span.source {
.comment .text {
margin-top: -0.5rem;
}
+
+.toggleDot {
+ position: fixed;
+ bottom: 1rem;
+ right: 1rem;
+ height: 3rem;
+ width: 3rem;
+ background-color: #828282;
+ border-radius: 50%;
+}
+
+.toggleDot .button {
+ font: 3rem/1 serif;
+ position: relative;
+ top: 0.1rem;
+ left: 0.1rem;
+}
diff --git a/webclient/src/switch.svg b/webclient/src/switch.svg
new file mode 100644
index 0000000..2091882
--- /dev/null
+++ b/webclient/src/switch.svg
@@ -0,0 +1,74 @@
+
+
+
+
diff --git a/webclient/src/utils.js b/webclient/src/utils.js
index 08327e5..917dd34 100644
--- a/webclient/src/utils.js
+++ b/webclient/src/utils.js
@@ -2,6 +2,8 @@ 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);
@@ -26,3 +28,22 @@ export const clearStorage = () => {
localStorage.clear();
localStorage.setItem('theme', themeSetting);
};
+
+export class ToggleDot extends React.Component {
+ scrollTop() {
+ window.scrollTo(0, 0);
+ }
+ render() {
+ const id = this.props.id;
+ const article = this.props.article;
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}