feat: logo

gmus-web/src/components/logo.tsx

@@ -0,0 +1,23 @@
+import { rem } from 'polished';
+import React from 'react';
+import styled from 'styled-components';
+
+import logo1x from '../images/logo1x.png';
+import logo2x from '../images/logo2x.png';
+
+export type Props = {
+  size?: number;
+};
+
+const Picture = styled.picture<Required<Props>>`
+  img {
+    height: ${({ size }): string => rem(size)};
+    width: ${({ size }): string => rem(size)};
+  }
+`;
+
+export const Logo: React.FC<Props> = ({ size = 256 }) => (
+  <Picture size={size}>
+    <img srcSet={`${logo2x} 2x, ${logo1x} 1x`} alt="logo" />
+  </Picture>
+);

gmus-web/src/components/ui/mobile/buttons.tsx

@@ -9,6 +9,8 @@ export type Props = {
   onNext: () => void;
 };
 
+const buttonColor = 'white';
+
 const Container = styled.div`
   box-sizing: border-box;
   display: flex;
@@ -27,7 +29,7 @@ const Button = styled.button`
   outline: none;
 
   svg {
-    border: 2px solid black;
+    border: 2px solid ${buttonColor};
     border-radius: 100%;
     flex: 0 0 auto;
     width: 100%;
@@ -38,8 +40,6 @@ const PlayPauseButton = styled(Button)`
   flex: 4;
 `;
 
-const buttonColor = 'black';
-
 export const Buttons: React.FC<Props> = ({ onPrev, onPlayPause, onNext, playing }) => (
   <Container>
     <Button onClick={onPrev}>

gmus-web/src/components/ui/mobile/info.tsx

@@ -11,10 +11,16 @@ export type Props = {
   onSeek: (time: number) => void;
 };
 
+const Wrapper = styled.div`
+  flex: 1;
+  width: 100%;
+`;
+
 const Container = styled.div`
   align-items: center;
   background: #e9fff3;
   border-radius: ${rem(4)};
+  box-sizing: border-box;
   display: flex;
   flex-flow: column;
   justify-content: center;
@@ -96,31 +102,33 @@ export const SongInfo: React.FC<Props> = ({ song, player, onSeek }) => {
   );
 
   return (
-    <Container>
-      {song && (
-        <>
-          <Title>
-            {song.track ? `${song.track} - ` : ''}
-            {song.title}
-          </Title>
-          <Meta>
-            <Artist>{song.artist || 'Unknown Artist'}</Artist>
-            <Dash>-</Dash>
-            <Album>{song.album || 'Unknown Album'}</Album>
-          </Meta>
-          <Master>Playing on {player.master || '<unknown>'}</Master>
-          <Seeker>
-            <Time>{formatTime(player.currentTime)}</Time>
-            <Gutter ref={gutter} onTouchEnd={seekToTouch}>
-              <Progress style={{ flexBasis: `${(100 * player.currentTime) / song.time}%` }}>
-                <PlayHead />
-              </Progress>
-            </Gutter>
-            <TotalTime>{formatTime(song.time)}</TotalTime>
-          </Seeker>
-        </>
-      )}
-      {!song && <Dash>-</Dash>}
-    </Container>
+    <Wrapper>
+      <Container>
+        {song && (
+          <>
+            <Title>
+              {song.track ? `${song.track} - ` : ''}
+              {song.title}
+            </Title>
+            <Meta>
+              <Artist>{song.artist || 'Unknown Artist'}</Artist>
+              <Dash>-</Dash>
+              <Album>{song.album || 'Unknown Album'}</Album>
+            </Meta>
+            <Master>Playing on {player.master || '<unknown>'}</Master>
+            <Seeker>
+              <Time>{formatTime(player.currentTime)}</Time>
+              <Gutter ref={gutter} onTouchEnd={seekToTouch}>
+                <Progress style={{ flexBasis: `${(100 * player.currentTime) / song.time}%` }}>
+                  <PlayHead />
+                </Progress>
+              </Gutter>
+              <TotalTime>{formatTime(song.time)}</TotalTime>
+            </Seeker>
+          </>
+        )}
+        {!song && <Dash>-</Dash>}
+      </Container>
+    </Wrapper>
   );
 };

gmus-web/src/components/ui/mobile/wrapper.styles.ts

@@ -1,12 +1,14 @@
 import { rem } from 'polished';
 import styled from 'styled-components';
+import { systemColors } from '../../../constants/theme';
 
 export const Container = styled.div`
+  align-items: center;
+  background: ${systemColors.background};
   bottom: 0;
   display: flex;
   flex-flow: column;
   font: ${rem(16)} sans-serif;
-  justify-content: space-between;
   position: absolute;
   right: 0;
   top: 0;

gmus-web/src/components/ui/mobile/wrapper.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useContext } from 'react';
 import { playPaused, seeked } from '../../../actions';
 
 import { DispatchContext, StateContext } from '../../../context/state';
+import { Logo } from '../../logo';
 import { UIProviderComponent } from '../types';
 import { Buttons } from './buttons';
 import { SongInfo } from './info';
@@ -17,6 +18,7 @@ export const MobileUIProvider: UIProviderComponent = ({ prevSong, nextSong, curr
 
   return (
     <Styled.Container>
+      <Logo size={128} />
       <SongInfo song={currentSong} player={state.player} onSeek={onSeek} />
       <Buttons
         playing={state.player.playing}

gmus-web/src/constants/theme.ts

@@ -0,0 +1,5 @@
+import { rgb } from 'polished';
+
+export const systemColors = {
+  background: rgb(57, 0, 93),
+};