Merge pull request #3675 from tylershuster/misc-fixes

Misc fixes

pkg/interface/src/views/apps/chat/css/custom.css

@@ -387,8 +387,7 @@ pre.CodeMirror-placeholder.CodeMirror-line-like { color: var(--gray); }
   /* codemirror */
   .chat .cm-s-tlon.CodeMirror {
     color: #fff;
-    font-size: 16px;
-    margin-top: 6px;
+    font-size: 12px;
   }
 
   .chat .cm-s-tlon span.cm-def {

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

@@ -14,18 +14,20 @@ const innerSize = 124; // clock size
 //   }
 // }
 
-let text = '#000000', background = '#ffffff';
+let timeTextColor = '#000000', dateTextColor = '#333333', background = '#ffffff';
 
 const dark = window.matchMedia('(prefers-color-scheme: dark)');
 
 if (dark.matches) {
-  text = '#7f7f7f';
+  timeTextColor = '#ffffff';
+  dateTextColor = '#7f7f7f';
   background = '#333';
 }
 
 function darkColors(dark) {
   if (dark.matches) {
-    text = '#7f7f7f';
+    timeTextColor = '#ffffff';
+    dateTextColor = '#7f7f7f';
     background = '#ffffff';
   }
  }
@@ -344,10 +346,10 @@ class Clock extends React.Component {
       : moment().format('h:mm A');
     const dateText = moment().format('MMM Do');
     ctx.textAlign = 'center';
-    ctx.fillStyle = text;
+    ctx.fillStyle = timeTextColor;
     ctx.font = '12px Inter';
     ctx.fillText(timeText, ctr, ctr + 6 - 7);
-    ctx.fillStyle = text;
+    ctx.fillStyle = dateTextColor;
     ctx.font = '12px Inter';
     ctx.fillText(dateText, ctr, ctr + 6 + 7);
 
@@ -372,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%"
         >

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

@@ -54,34 +54,34 @@ export default class WeatherTile extends React.Component {
 
     switch (data.daily.icon) {
       case 'clear-day':
-        weatherStyle = { bg: '#FEF4E0', text: 'black' };
+        weatherStyle = { bg: '#FEF4E0', text: '#333' };
         break;
       case 'clear-night':
-        weatherStyle = { bg: '#000080', text: 'white' };
+        weatherStyle = { bg: '#000080', text: '#fff' };
         break;
       case 'rain':
-        weatherStyle = { bg: '#b0c7ff', text: 'black' };
+        weatherStyle = { bg: '#b0c7ff', text: '#333' };
         break;
       case 'snow':
-        weatherStyle = { bg: '#f9f9f9', text: 'black' };
+        weatherStyle = { bg: '#f9f9f9', text: '#333' };
         break;
       case 'sleet':
-        weatherStyle = { bg: '#f9f9f9', text: 'black' };
+        weatherStyle = { bg: '#f9f9f9', text: '#333' };
         break;
       case 'wind':
-        weatherStyle = { bg: '#fff', text: 'black' };
+        weatherStyle = { bg: '#fff', text: '#333' };
         break;
       case 'fog':
-        weatherStyle = { bg: '#fff', text: 'black' };
+        weatherStyle = { bg: '#fff', text: '#333' };
         break;
       case 'cloudy':
-        weatherStyle = { bg: '#b1b2b3', text: 'black' };
+        weatherStyle = { bg: '#b1b2b3', text: '#333' };
         break;
       case 'partly-cloudy-day':
-        weatherStyle = { bg: '#b1b2b3', text: 'black' };
+        weatherStyle = { bg: '#b1b2b3', text: '#333' };
         break;
       case 'partly-cloudy-night':
-        weatherStyle = { bg: '#56668e', text: 'white' };
+        weatherStyle = { bg: '#56668e', text: '#fff' };
         break;
       default:
         weatherStyle = { bg: 'white', text: 'black' };
@@ -93,7 +93,7 @@ export default class WeatherTile extends React.Component {
     weatherStyle = { bg: 'white', text: 'black' }
     ) {
     return (
-      <Tile bg={weatherStyle.bg} color={weatherStyle.color}>
+      <Tile bg={weatherStyle.bg} color={weatherStyle.text}>
         {child}
       </Tile>
     );
@@ -176,10 +176,10 @@ export default class WeatherTile extends React.Component {
         height='100%'
         onClick={() => this.setState({ manualEntry: !this.state.manualEntry })}
       >
-      <Box>
-        <Icon icon='Weather' color='black' display='inline-block' verticalAlign='top' pt='3px' pr='2px' />
-        <Text>Weather</Text>
-      </Box>
+        <Box>
+          <Icon icon='Weather' display='inline-block' verticalAlign='top' pt='3px' pr='2px' />
+          <Text>Weather</Text>
+        </Box>
         <Text style={{ cursor: 'pointer' }}>
           -> Set location
         </Text>
@@ -215,11 +215,12 @@ export default class WeatherTile extends React.Component {
         flexDirection='column'
         alignItems='space-between'
       >
-        <Text>
-          <Icon icon='Weather' color='black' display='inline' style={{ position: 'relative', top: '.3em'}} />
+        <Text color={weatherStyle.text}>
+          <Icon icon='Weather' color={weatherStyle.text} display='inline' style={{ position: 'relative', top: '.3em'}} />
           Weather
           <a
-          className='pointer'
+            style={{ color: weatherStyle.text }}
+            className='pointer'
             onClick={() =>
               this.setState({ manualEntry: !this.state.manualEntry })
             }
@@ -234,9 +235,9 @@ export default class WeatherTile extends React.Component {
           display="flex"
           flexDirection="column"
         >
-          <Text>{c.summary}</Text>
-          <Text>{Math.round(c.temperature)}°</Text>
-          <Text>{nextSolarEvent}</Text>
+          <Text color={weatherStyle.text}>{c.summary}</Text>
+          <Text color={weatherStyle.text}>{Math.round(c.temperature)}°</Text>
+          <Text color={weatherStyle.text}>{nextSolarEvent}</Text>
         </Box>
       </Box>
     , weatherStyle);

pkg/interface/src/views/landscape/components/Participants.tsx

@@ -288,7 +288,7 @@ function Participant(props: {
       </Box>
       <Col justifyContent="center" gapY="1" height="100%">
         {contact.nickname && (
-          <TruncText title={contact.nickname} maxWidth="85%">
+          <TruncText title={contact.nickname} maxWidth="85%" color="gray">
             {contact.nickname}
           </TruncText>
         )}
@@ -319,7 +319,7 @@ function Participant(props: {
               gapY={2}
               p={2}
             >
-              <Action>
+              <Action bg="transparent">
                 <Link to={`/~chat/new/dm/${contact.patp}`}>
                   <Text color="green">Send Message</Text>
                 </Link>
@@ -327,16 +327,16 @@ function Participant(props: {
               {props.role === "admin" && (
                 <>
                   {!isInvite && (
-                    <StatelessAsyncAction onClick={onBan}>
+                    <StatelessAsyncAction onClick={onBan} bg="transparent">
                       <Text color="red">Ban from {title}</Text>
                     </StatelessAsyncAction>
                   )}
                   {role === "admin" ? (
-                    <StatelessAsyncAction onClick={onDemote}>
+                    <StatelessAsyncAction onClick={onDemote} bg="transparent">
                       Demote from Admin
                     </StatelessAsyncAction>
                   ) : (
-                    <StatelessAsyncAction onClick={onPromote}>
+                    <StatelessAsyncAction onClick={onPromote} bg="transparent">
                       Promote to Admin
                     </StatelessAsyncAction>
                   )}