chat: migrate settings to indigo-react

pkg/interface/src/views/apps/chat/components/lib/delete-button.js

@@ -1,11 +1,7 @@
 import React, { memo } from 'react';
+import { Button, Text, Box } from '@tlon/indigo-react';
 
 export const DeleteButton = memo(({ isOwner, station, changeLoading, association, contacts, api, history }) => {
-  const leaveButtonClasses = (!isOwner) ? 'pointer' : 'c-default';
-  const deleteButtonClasses = (isOwner) ? 
-    'b--red2 red2 pointer bg-gray0-d' :
-    'b--gray3 gray3 bg-gray0-d c-default';
-
   const deleteChat = () => {
     changeLoading(
       true,
@@ -13,7 +9,7 @@ export const DeleteButton = memo(({ isOwner, station, changeLoading, association
       isOwner ? 'Deleting chat...' : 'Leaving chat...',
       () => {
         api.chat.delete(station).then(() => {
-          history.push("/~chat");
+          history.push('/~chat');
         });
       }
     );
@@ -23,34 +19,30 @@ export const DeleteButton = memo(({ isOwner, station, changeLoading, association
   const unmanagedVillage = !contacts[groupPath];
 
   return (
-    <div className="w-100 cf">
-      <div className={'w-100 fl mt3 ' + ((isOwner) ? 'o-30' : '')}>
-        <p className="f8 mt3 lh-copy db">Leave Chat</p>
-        <p className="f9 gray2 db mb4">
+    <Box width='100%'>
+      <Box width='100%' mt='3' opacity={(isOwner) ? '0.3' : '1'}>
+        <Text fontSize='1' mt='3' display='block' mb='1'>Leave Chat</Text>
+        <Text fontSize='0' gray display='block' mb='4'>
           Remove this chat from your chat list.{' '}
-          {unmanagedVillage 
+          {unmanagedVillage
             ? 'You will need to request for access again'
-            : 'You will need to join again from the group page.'
+            : 'You will need to join again from the group page'
           }
-        </p>
-        <a onClick={(!isOwner) ? deleteChat : null}
-           className={
-             'dib f9 black gray4-d bg-gray0-d ba pa2 b--black b--gray1-d ' +
-             leaveButtonClasses
-           }>
+        </Text>
+        <Button onClick={(!isOwner) ? deleteChat : null}>
           Leave this chat
-        </a>
-      </div>
-      <div className={'w-100 fl mt3 ' + ((!isOwner) ? 'o-30' : '')}>
-        <p className="f8 mt3 lh-copy db">Delete Chat</p>
-          <p className="f9 gray2 db mb4">
+        </Button>
+      </Box>
+      <Box width='100%' mt='3' opacity={(isOwner) ? '0.3' : '1'}>
+        <Text display='block' fontSize='1' mt='3' mb='1'>Delete Chat</Text>
+          <Text display='block' gray fontSize='0' mb='4'>
             Permanently delete this chat.{' '}
             All current members will no longer see this chat.
-          </p>
-          <a onClick={(isOwner) ? deleteChat : null}
-           className={'dib f9 ba pa2 ' + deleteButtonClasses}
-          >Delete this chat</a>
-      </div>
-    </div>
+          </Text>
+          <Button destructive onClick={(isOwner) ? deleteChat : null}>Delete this chat</Button>
+      </Box>
+    </Box>
   );
-})
+});
+
+DeleteButton.displayName = 'DeleteButton';

pkg/interface/src/views/apps/chat/components/lib/groupify-button.js

@@ -2,9 +2,9 @@ import React, { Component } from 'react';
 import Toggle from '~/views/components/toggle';
 import { InviteSearch } from '~/views/components/InviteSearch';
 
+import { Button, Text, Box } from '@tlon/indigo-react';
 
 export class GroupifyButton extends Component {
-
   constructor(props) {
     super(props);
 
@@ -26,23 +26,23 @@ export class GroupifyButton extends Component {
     this.setState({ inclusive: Boolean(event.target.checked) });
   }
 
-  renderInclusiveToggle() {
+  renderInclusiveToggle(inclusive) {
     return this.state.targetGroup ? (
-      <div className="mt4">
+      <Box mt='4'>
       <Toggle
         boolean={inclusive}
         change={this.changeInclusive.bind(this)}
       />
-        <span className="dib f9 white-d inter ml3">
+        <Text display='inline-block' fontSize='0' ml='3'>
           Add all members to group
-        </span>
-        <p className="f9 gray2 pt1" style={{ paddingLeft: 40 }}>
+        </Text>
+        <Text display='block' fontSize='0' gray pt='1' pl='40px'>
           Add chat members to the group if they aren't in it yet
-        </p>
-      </div>
-    ) : <div />;
+        </Text>
+      </Box>
+    ) : <Box />;
   }
-  
+
   render() {
     const { inclusive, targetGroup } = this.state;
     const {
@@ -65,12 +65,12 @@ export class GroupifyButton extends Component {
     }
 
     return (
-      <div className={'w-100 fl mt3'} style={{ maxWidth: '29rem' }}>
-        <p className="f8 mt3 lh-copy db">Convert Chat</p>
-        <p className="f9 gray2 db mb4">
+      <Box width='100%' mt='3' maxWidth='29rem'>
+        <Text display='block' fontSize='1' mt='3' mb='1'>Convert Chat</Text>
+        <Text gray display='block' mb='4' fontSize='0'>
           Convert this chat into a group with associated chat, or select a
-          group to add this chat to.
-        </p>
+          group to add this chat to
+        </Text>
         <InviteSearch
           groups={groups}
           contacts={contacts}
@@ -83,8 +83,8 @@ export class GroupifyButton extends Component {
           }}
           setInvite={this.changeTargetGroup.bind(this)}
         />
-        {this.renderInclusiveToggle()}
-        <a onClick={() => {
+        {this.renderInclusiveToggle(inclusive)}
+        <Button mt='3' onClick={() => {
           changeLoading(true, true, 'Converting to group...', () => {
             api.chat.groupify(
               station, targetGroup, inclusive
@@ -93,11 +93,8 @@ export class GroupifyButton extends Component {
             });
           });
         }}
-           className={
-             'dib f9 black gray4-d bg-gray0-d ba pa2 mt4 b--black ' + 
-             'b--gray1-d pointer'
-           }>Convert to group</a>
-      </div>
+        >Convert to group</Button>
+      </Box>
     );
   }
 }

pkg/interface/src/views/apps/chat/components/settings.js

@@ -8,6 +8,8 @@ import ChatHeader from './lib/ChatHeader';
 import { DeleteButton } from './lib/delete-button';
 import { GroupifyButton } from './lib/groupify-button';
 
+import { Text, Col, Box } from '@tlon/indigo-react';
+
 export class SettingsScreen extends Component {
   constructor(props) {
     super(props);
@@ -59,7 +61,6 @@ export class SettingsScreen extends Component {
   }
 
   renderNormal() {
-    const { state } = this;
     const {
       associations,
       association,
@@ -74,7 +75,7 @@ export class SettingsScreen extends Component {
 
     return (
       <Fragment>
-        <h2 className="f8 pb2">Chat Settings</h2>
+        <Text display='block' pb='2' fontSize='1'>Chat Settings</Text>
         <GroupifyButton
           isOwner={isOwner}
           association={association}
@@ -122,15 +123,8 @@ export class SettingsScreen extends Component {
       location
     } = this.props;
 
-    const isInPopout = popout ? "popout/" : "";
-    const title =
-      ( association &&
-        ('metadata' in association) &&
-        (association.metadata.title !== '')
-      ) ? association.metadata.title : station.substr(1);
-
     return (
-      <div className="h-100 w-100 overflow-x-hidden flex flex-column white-d">
+      <Col height='100%' width='100%' overflowX='hidden'>
         <ChatHeader
           match={match}
           location={location}
@@ -140,10 +134,10 @@ export class SettingsScreen extends Component {
           station={station}
           sidebarShown={sidebarShown}
           popout={popout} />
-        <div className="w-100 pl3 mt4 cf">
+        <Box width='100%' pl='3' mt='3'>
           {(state.isLoading) ? this.renderLoading() : this.renderNormal() }
-        </div>
-      </div>
+        </Box>
+      </Col>
     );
   }
 }