diff --git a/src/images/github.svg b/src/images/github.svg new file mode 100644 index 0000000..ff0af48 --- /dev/null +++ b/src/images/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c450c79..5c20f92 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -5,6 +5,7 @@ import styles from '../styles/Home.module.css' import { getData } from '../utils/getData' import LogoAsset from '../images/logo.svg' import CheckAsset from '../images/check.svg' +import GithubAsset from '../images/github.svg' import addresses from '@oceanprotocol/contracts/addresses/address.json' import { statusApiUri } from '../../app.config' import relativeDate from 'tiny-relative-date' @@ -99,7 +100,15 @@ export default function HomePage(): ReactElement { )}`} >
{component.version}
@@ -116,6 +125,21 @@ export default function HomePage(): ReactElement {
)}
) : null}
+
))}
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
index 827d070..e6f06d6 100644
--- a/src/styles/Home.module.css
+++ b/src/styles/Home.module.css
@@ -59,11 +59,45 @@
border-radius: var(--border-radius);
box-shadow: 0 6px 17px 0 var(--box-shadow-color);
border: 1px solid var(--border-color);
+ display: flex;
+ flex-wrap: wrap;
}
.titleComponent {
font-size: var(--font-size-large);
margin: 0;
+ width: 100%;
+}
+
+.titleComponent a {
+ color: inherit;
+}
+
+.titleComponent a:hover,
+.titleComponent a:focus {
+ color: var(--color-primary);
+}
+
+.links {
+ width: calc(100% + 1rem);
+ margin-top: calc(var(--spacer) / 2);
+ font-size: var(--font-size-small);
+ text-align: right;
+ margin-bottom: -1.2rem;
+ margin-right: -1rem;
+ align-self: flex-end;
+}
+
+.links svg {
+ display: inline-block;
+ stroke: var(--color-secondary);
+ width: 1.2em;
+ height: 1.2em;
+}
+
+.links a:hover svg,
+.links a:focus svg {
+ stroke: var(--color-primary);
}
.warning {
@@ -97,6 +131,7 @@
}
.messages {
+ width: 100%;
list-style-type: square;
margin-left: 1rem;
margin-top: calc(var(--spacer) / 4);
@@ -130,6 +165,7 @@
.contracts .titleComponent {
display: inline-block;
+ width: auto;
}
.loading {