feat: login portal styling

    * feat: some identify form styling
    * feat: logo

gmus/src/components/identify.spec.tsx

@@ -50,49 +50,5 @@ describe(Identify.name, () => {
       const button = getByText('Connect') as HTMLButtonElement;
       expect(button.disabled).toBe(true);
     });
-
-    it('should display a loading spinner', () => {
-      expect.assertions(1);
-
-      const { container } = render(<Identify {...propsConnecting} />);
-      expect(container).toMatchInlineSnapshot(`
-        <div>
-          <div>
-            <div>
-              <span>
-                Set client name:
-              </span>
-              <input
-                type="text"
-              />
-              <button
-                disabled=""
-              >
-                Connect
-              </button>
-              <div
-                class="css-1d9ls5a"
-              >
-                <div
-                  class="css-18jumju"
-                />
-                <div
-                  class="css-1ix8i79"
-                />
-                <div
-                  class="css-mdd9ud"
-                />
-                <div
-                  class="css-qbu4to"
-                />
-                <div
-                  class="css-1wtwgn9"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      `);
-    });
   });
 });

gmus/src/components/identify.styles.ts

@@ -0,0 +1,46 @@
+import { rem } from 'polished';
+import { CSSProperties } from 'react';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  align-items: center;
+  background: #39005d;
+  color: white;
+  display: flex;
+  flex-flow: column;
+  font-family: Hack, monospace;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+
+  input,
+  button {
+    outline: none;
+
+    &:focus {
+      border-color: #f55a00;
+    }
+  }
+`;
+
+export const Title = styled.h1`
+  align-items: center;
+  display: flex;
+  font-size: ${rem(24)};
+  margin-bottom: ${rem(16)};
+`;
+
+export const Instruction = styled.p`
+  font-size: ${rem(16)};
+  margin-bottom: ${rem(8)};
+`;
+
+export const InputGroup = styled.div`
+  display: flex;
+`;
+
+export const Loader = styled.div<{ visible: boolean }>`
+  margin: ${rem(24)} 0;
+  visibility: ${({ visible }): CSSProperties['visibility'] => (visible ? 'visible' : 'hidden')};
+`;

gmus/src/components/identify.tsx

@@ -1,5 +1,8 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { CircleLoader } from 'react-spinners';
+import { useCTA } from '../hooks/cta';
+
+import * as Styled from './identify.styles';
 
 export type Props = {
   connecting: boolean;
@@ -16,16 +19,36 @@ export const Identify: React.FC<Props> = ({ connecting, onIdentify }) => {
     onIdentify(name);
   }, [name, onIdentify]);
 
+  const input = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    setImmediate(() => {
+      input.current?.focus();
+    });
+  }, []);
+
+  const inputOnKeydown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        onConnect();
+      }
+    },
+    [onConnect],
+  );
+  const buttonHandlers = useCTA(onConnect);
+
   return (
-    <div>
-      <div>
-        <span>Set client name:</span>
-        <input type="text" onChange={onChange} />
-        <button onClick={onConnect} disabled={connecting}>
+    <Styled.Container>
+      <Styled.Title>go-music-player</Styled.Title>
+      <Styled.Instruction>Set client name:</Styled.Instruction>
+      <Styled.InputGroup>
+        <input ref={input} type="text" onChange={onChange} onKeyDown={inputOnKeydown} />
+        <button disabled={connecting} {...buttonHandlers}>
           Connect
         </button>
-        {connecting && <CircleLoader size={50} />}
-      </div>
-    </div>
+      </Styled.InputGroup>
+      <Styled.Loader visible={connecting}>
+        <CircleLoader size={50} color="white" />
+      </Styled.Loader>
+    </Styled.Container>
   );
 };