launch: change borders to box shadows

pkg/interface/src/views/apps/launch/app.js

@@ -48,18 +48,22 @@ export default class LaunchApp extends React.Component {
           >
             <Tile
               border={1}
-              bg="washedGreen"
+              bg="#fff"
               borderColor="green"
               to="/~landscape/home"
+              boxShadow='none'
+              p={0}
             >
-              <Row alignItems="center">
-                <Icon
-                  color="green"
-                  fill="rgba(0,0,0,0)"
-                  icon="Circle"
-                />
-                <Text ml="1" color="green">Home</Text>
-              </Row>
+              <Box p={2} height='100%' width='100%' bg='washedGreen'>
+                <Row alignItems='center'>
+                  <Icon
+                    color="green"
+                    fill="rgba(0,0,0,0)"
+                    icon="Circle"
+                  />
+                  <Text ml="1" color="green">Home</Text>
+                </Row>
+              </Box>
             </Tile>
             <Tile
               borderColor={adjustHex(sigilColor, -40)}

pkg/interface/src/views/apps/launch/components/Groups.tsx

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import { useLocalStorageState } from "~/logic/lib/useLocalStorageState";
 import { Associations, Association } from "~/types";
 import { alphabeticalOrder } from "~/logic/lib/util";
+import Tile from '../components/tiles/tile';
 
 interface GroupsProps {
   associations: Associations;
@@ -101,20 +102,9 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
         </Box>
       ))}
       {groups.map((group) => (
-        <Link to={`/~landscape${group["group-path"]}`}>
-          <Box
-            height="100%"
-            width="100%"
-            bg="white"
-            border={1}
-            borderRadius={2}
-            borderColor="lightGray"
-            p={2}
-            fontSize={0}
-          >
-            <Text>{group.metadata.title}</Text>
-          </Box>
-        </Link>
+        <Tile to={`/~landscape${group["group-path"]}`}>
+          <Text>{group.metadata.title}</Text>
+        </Tile>
       ))}
     </Box>
   );

pkg/interface/src/views/apps/launch/components/tiles/clock.js

@@ -374,7 +374,7 @@ export default class ClockTile extends React.Component {
 
   renderWrapper(child) {
     return (
-      <Tile p={0} border={0}>
+      <Tile p={0} border={0} bg='transparent' boxShadow='none'>
         {child}
       </Tile>
     );

pkg/interface/src/views/apps/launch/components/tiles/tile.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import defaultApps from '~/logic/lib/default-apps';
 
-import { Box } from "@tlon/indigo-react";
+import { Box, DisclosureBox } from "@tlon/indigo-react";
 const routeList = defaultApps.map(a => `/~${a}`);
 
 export default class Tile extends React.Component {
   render() { 
-    const { bg, to, href, p, ...props } = this.props;
+    const { bg, to, href, p, boxShadow, ...props } = this.props;
 
     let childElement = (
       <Box p={typeof p === 'undefined' ? 2 : p} width="100%" height="100%">
@@ -27,15 +27,13 @@ export default class Tile extends React.Component {
 
     return (
       <Box
-        border={1}
         borderRadius={2}
-        borderColor="lightGray"
         overflow="hidden"
-        bg={bg && "white"}
+        bg={bg || "white"}
+        boxShadow={boxShadow || '0 0 0px 1px rgba(0, 0, 0, 0.3) inset'}
         {...props}
       >
         <Box
-          bg={bg}
           height="100%"
           width="100%"
         >