Add minor UI fixes on summon-safe-app

apps/summon-safe/src/components/Toggle.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import { Control, Controller } from 'react-hook-form';
 import { Switch, Text } from '@gnosis.pm/safe-react-components';
 
@@ -8,11 +9,18 @@ interface ToggleProps {
   required?: boolean;
   disabled?: boolean;
   shouldUnregister: boolean;
+  switchLabel?: string;
   control: Control;
 }
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
 const Toggle: React.FC<ToggleProps> = (props: ToggleProps) => {
-  const { id, label, required, control, shouldUnregister } = props;
+  const { id, label, required, control, shouldUnregister, switchLabel } = props;
 
   return (
     <Controller
@@ -26,7 +34,14 @@ const Toggle: React.FC<ToggleProps> = (props: ToggleProps) => {
       render={({ field }) => (
         <>
           <Text size="md">{`${label}${required ? ' (*)' : ''}`}</Text>
-          <Switch key={id} checked={field.value} onChange={field.onChange} />
+          <Container>
+            <Switch key={id} checked={field.value} onChange={field.onChange} />
+            {switchLabel && (
+              <Text size="md">{`${
+                field.value === false ? 'Not ' : ''
+              }${switchLabel}`}</Text>
+            )}
+          </Container>
         </>
       )}
     />

apps/summon-safe/src/views/SummonForm.tsx

@@ -260,6 +260,7 @@ const SummonForm: React.FC<SummonFormProps> = (props: SummonFormProps) => {
                 required
                 control={methods.control}
                 shouldUnregister={false}
+                switchLabel="Transferrable"
               />
             </Grid>
             <Grid item xs={5}>
@@ -269,6 +270,7 @@ const SummonForm: React.FC<SummonFormProps> = (props: SummonFormProps) => {
                 required
                 control={methods.control}
                 shouldUnregister={false}
+                switchLabel="Transferrable"
               />
             </Grid>
           </StyledPairInputContainer>
@@ -382,55 +384,55 @@ const SummonForm: React.FC<SummonFormProps> = (props: SummonFormProps) => {
           <Divider />
 
           <Title size="sm" withoutMargin>
-            Starting Shamans
+            Starting Members
           </Title>
           <Text size="md">
-            Shamans are powerful and have control over key components of the
-            DAO. Use caution in the spirit world.
+            You must have at least one member to summon. Add other summoning
+            members as desired. Members can be added later through a proposal.
           </Text>
           <RecordsDataTable
-            id="shamans"
-            label="Shamans"
-            description="Addresses & Permissions"
-            placeholder="0xbeef 3"
-            tooltip="Input Shaman list with contract address and permission level per row using spaces. E.g. 0xbeef 3"
-            columns={SHAMAN_PROPS}
-            required={false}
+            id="members"
+            label="Members"
+            description="Addresses & Stake Amounts"
+            placeholder="0xbeef 10 10"
+            tooltip="Input member list with member address, voting stake amount, and no-voting stake amount per row using spaces. E.g. 0xdeed 10 10 \n0xbeef 0 10"
+            columns={MEMBER_PROPS}
+            required
             disabled={formDisabled}
             control={methods.control}
             shouldUnregister={false}
             register={methods.register}
             registerOptions={{
-              transform: transformShamans,
-              validate: validateShamanData,
+              transform: transformMemberData,
+              validate: validateMemberData,
             }}
             setValue={methods.setValue}
             getValues={methods.getValues}
           />
           <Divider />
 
           <Title size="sm" withoutMargin>
-            Starting Members
+            Starting Shamans
           </Title>
           <Text size="md">
-            You must have at least one member to summon. Add other summoning
-            members as desired. Members can be added later through a proposal.
+            Shamans are powerful and have control over key components of the
+            DAO. Use caution in the spirit world.
           </Text>
           <RecordsDataTable
-            id="members"
-            label="Members"
-            description="Addresses & Stake Amounts"
-            placeholder="0xbeef 10 10"
-            tooltip="Input member list with member address, voting stake amount, and no-voting stake amount per row using spaces. E.g. 0xdeed 10 10 \n0xbeef 0 10"
-            columns={MEMBER_PROPS}
-            required
+            id="shamans"
+            label="Shamans"
+            description="Addresses & Permissions"
+            placeholder="0xbeef 3"
+            tooltip="Input Shaman list with contract address and permission level per row using spaces. E.g. 0xbeef 3"
+            columns={SHAMAN_PROPS}
+            required={false}
             disabled={formDisabled}
             control={methods.control}
             shouldUnregister={false}
             register={methods.register}
             registerOptions={{
-              transform: transformMemberData,
-              validate: validateMemberData,
+              transform: transformShamans,
+              validate: validateShamanData,
             }}
             setValue={methods.setValue}
             getValues={methods.getValues}