v3/packages/design-system/organisms/masthead/Guest.tsx

import { DynamicLogotype } from '@roleypoly/design-system/atoms/branding';
import { Button } from '@roleypoly/design-system/atoms/button';
import * as React from 'react';
import { FaSignInAlt } from 'react-icons/fa';
import {
  MastheadA,
  MastheadAlignment,
  MastheadBase,
  MastheadLeft,
  MastheadRight,
} from './Masthead.styled';

export const Guest = () => (
  <MastheadBase>
    <MastheadAlignment>
      <MastheadLeft>
        <MastheadA to="/">
          <DynamicLogotype height={30} />
        </MastheadA>
      </MastheadLeft>
      <MastheadRight>
        <MastheadA to="/auth/login">
          <Button size="small">
            Login <FaSignInAlt size="1em" style={{ transform: 'translateY(1px)' }} />
          </Button>
        </MastheadA>
      </MastheadRight>
    </MastheadAlignment>
  </MastheadBase>
);