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} + ); }