Minor style fixes

pioneer/packages/joy-utils/src/react/components/MemberByAccountPreview.tsx

@@ -35,7 +35,7 @@ const MemberByAccountPreview: React.FunctionComponent<Props> = ({
   return (
     // Span required to allow styled(MemberByAccountPreview)
     <span className={className}>
-      <PromiseComponent error={error} loading={loading} message='Fetching member profile...'>
+      <PromiseComponent inline={true} error={error} loading={loading} message='Fetching member profile...'>
         { member && (
           member.profile
             ? (

pioneer/packages/joy-utils/src/react/components/MemberProfilePreview.tsx

@@ -45,7 +45,7 @@ const Details = styled.div<StyledPartProps>`
 `;
 
 const DetailsHandle = styled.h4<StyledPartProps>`
-  ${(props) => props.size === 'small' && css`font-size: 1em`};
+  ${(props) => props.size === 'small' && css`font-size: 1em;`};
   margin: 0;
   font-weight: bold;
   color: #333;
@@ -63,7 +63,7 @@ export default function ProfilePreview (
       )}
       <Details size={size}>
         <DetailsHandle size={size}>{handle.toString()}</DetailsHandle>
-        { id !== undefined && <Label size={size}>ID <Label.Detail>{id.toString()}</Label.Detail></Label> }
+        { id !== undefined && <Label size={'small'}>ID <Label.Detail>{id.toString()}</Label.Detail></Label> }
         { children }
       </Details>
     </StyledProfilePreview>

pioneer/packages/joy-utils/src/react/components/PromiseComponent.tsx

@@ -20,13 +20,18 @@ export function Error ({ error }: ErrorProps) {
 
 type LoadingProps = {
   text: string;
+  inline?: boolean;
 };
 
-export function Loading ({ text }: LoadingProps) {
+export function Loading ({ text, inline }: LoadingProps) {
   return (
-    <Container style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <Loader active inline>{text}</Loader>
-    </Container>
+    inline
+      ? <Loader active inline size='small'>{text}</Loader>
+      : (
+        <Container style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <Loader active inline>{text}</Loader>
+        </Container>
+      )
   );
 }
 
@@ -34,11 +39,12 @@ type PromiseComponentProps = {
   loading: boolean;
   error: string | null;
   message: string;
+  inline?: boolean;
 }
 
-const PromiseComponent: React.FunctionComponent<PromiseComponentProps> = ({ loading, error, message, children }) => {
+const PromiseComponent: React.FunctionComponent<PromiseComponentProps> = ({ loading, error, message, children, inline }) => {
   if (loading && !error) {
-    return <Loading text={ message }/>;
+    return <Loading text={ message } inline={inline}/>;
   } else if (error) {
     return <Error error={error} />;
   }