launch: more design fixes

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
     ? (<div
       className={'bg-black dib ' + classes}
@@ -27,6 +27,7 @@ export const Sigil = memo(({ classes = '', color, ship, size, svgClass = '' }) =
         patp: ship,
         renderer: reactRenderer,
         size: size,
+        icon,
         colors: [
           color,
           foregroundFromBackground(color)
@@ -36,4 +37,4 @@ export const Sigil = memo(({ classes = '', color, ship, size, svgClass = '' }) =
     </div>)
 })
 
-export default Sigil;
+export default Sigil;

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}`;

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 {
               </Row>
             </Tile>
             <Tile
+              borderColor={adjustHex(sigilColor, -40)}
               bg={sigilColor}
               to="/~profile"
             >

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 (
-      <Tile p={0} bg="transparent" border={0}>
+      <Tile p={0} border={0}>
         {child}
       </Tile>
     );

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}
+        <Box
+          bg={bg}
+          height="100%"
+          width="100%"
+        >
+          {childElement}
+        </Box>
       </Box>
     );
   }