diff --git a/pkg/interface/src/logic/lib/sigil.js b/pkg/interface/src/logic/lib/sigil.js
index cfe0ee752..a455307b9 100644
--- a/pkg/interface/src/logic/lib/sigil.js
+++ b/pkg/interface/src/logic/lib/sigil.js
@@ -13,7 +13,7 @@ export const foregroundFromBackground = (background) => {
return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
}
-export const Sigil = memo(({ classes = '', color, ship, size, svgClass = '' }) => {
+export const Sigil = memo(({ classes = '', color, ship, size, svgClass = '', icon = false }) => {
return ship.length > 14
? (
)
})
-export default Sigil;
\ No newline at end of file
+export default Sigil;
diff --git a/pkg/interface/src/logic/lib/util.js b/pkg/interface/src/logic/lib/util.js
index fe98e6bdc..3de0e8515 100644
--- a/pkg/interface/src/logic/lib/util.js
+++ b/pkg/interface/src/logic/lib/util.js
@@ -2,6 +2,21 @@ import _ from 'lodash';
export const MOBILE_BROWSER_REGEX = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i;
+export function clamp(x,min,max) {
+ return Math.max(min, Math.min(max, x));
+}
+
+// color is a #000000 color
+export function adjustHex(color, amount) {
+ const res = _.chain(color.slice(1))
+ .split('').chunk(2) // get individual color channels
+ .map(c => parseInt(c.join(''), 16)) // as hex
+ .map(c => clamp(c + amount, 0, 255).toString(16)) // adjust
+ .join('').value();
+ return `#${res}`;
+}
+
+
export function resourceAsPath(resource) {
const { name, ship } = resource;
return `/ship/~${ship}/${name}`;
diff --git a/pkg/interface/src/views/apps/launch/app.js b/pkg/interface/src/views/apps/launch/app.js
index 6f1980aff..0986da78b 100644
--- a/pkg/interface/src/views/apps/launch/app.js
+++ b/pkg/interface/src/views/apps/launch/app.js
@@ -3,7 +3,7 @@ import Helmet from 'react-helmet';
import { Link } from 'react-router-dom';
import { Box, Row, Icon, Text, Center } from '@tlon/indigo-react';
-import { uxToHex } from "~/logic/lib/util";
+import { uxToHex, adjustHex } from "~/logic/lib/util";
import './css/custom.css';
@@ -62,6 +62,7 @@ export default class LaunchApp extends React.Component {
diff --git a/pkg/interface/src/views/apps/launch/components/tiles/clock.js b/pkg/interface/src/views/apps/launch/components/tiles/clock.js
index e35db3dc8..65393b1d0 100644
--- a/pkg/interface/src/views/apps/launch/components/tiles/clock.js
+++ b/pkg/interface/src/views/apps/launch/components/tiles/clock.js
@@ -26,9 +26,6 @@ if (dark.matches) {
function darkColors(dark) {
if (dark.matches) {
text = '#7f7f7f';
- background = '#333';
- } else {
- text = '#000000';
background = '#ffffff';
}
}
@@ -375,7 +372,7 @@ export default class ClockTile extends React.Component {
renderWrapper(child) {
return (
-
+
{child}
);
diff --git a/pkg/interface/src/views/apps/launch/components/tiles/tile.js b/pkg/interface/src/views/apps/launch/components/tiles/tile.js
index c95b28f0a..a7d458937 100644
--- a/pkg/interface/src/views/apps/launch/components/tiles/tile.js
+++ b/pkg/interface/src/views/apps/launch/components/tiles/tile.js
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
import defaultApps from '~/logic/lib/default-apps';
import { Box } from "@tlon/indigo-react";
+const routeList = defaultApps.map(a => `/~${a}`);
export default class Tile extends React.Component {
render() {
@@ -30,9 +31,16 @@ export default class Tile extends React.Component {
borderRadius={2}
borderColor="lightGray"
overflow="hidden"
+ bg={bg && "white"}
{...props}
>
- {childElement}
+
+ {childElement}
+
);
}