feat(features/oauth): just jsx

just jsx
ISSUES CLOSED: #4

ISSUES CLOSED: #14

src/features/oauth/components/index.ts

@@ -0,0 +1 @@
+export { LoginButton } from './login-button';

src/features/oauth/components/login-button.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { button } from 'ui/atoms';
+
+export const LoginButton = () => <button.Base>Sign in</button.Base>;

src/features/oauth/index.ts

@@ -0,0 +1 @@
+export * from './components';

src/features/searchbar/organisms/searchbar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { ContentCenteredTemplate, IconLogo, button } from 'ui';
+import { LoginButton } from 'features/oauth';
 
 import { Search } from '../molecules';
 
@@ -13,7 +14,10 @@ export const Searchbar = () => {
           <SearchWrapper>
             <Search />
           </SearchWrapper>
-          <Avatar />
+          <LoginBlock>
+            {/* <Avatar /> */}
+            <LoginButton />
+          </LoginBlock>
           <button.Base>New card</button.Base>
         </Nav>
       </ContentCenteredTemplate>
@@ -26,25 +30,28 @@ const Container = styled.header`
   box-shadow: 0px 6px 9px #f6f5f8;
   display: flex;
   flex-shrink: 0;
-  height: 72px;
   justify-content: center;
   position: relative;
 `;
 
 const Nav = styled.nav`
   align-items: center;
   display: flex;
+  height: 72px;
 `;
 
 const SearchWrapper = styled.div`
   flex-grow: 1;
   margin-left: 3.125rem;
 `;
 
+const LoginBlock = styled.div`
+  margin: 0 1.125rem;
+`;
+
 export const Avatar = styled.div`
   background-color: #f4f2f7;
   border-radius: 3px;
   height: 42px;
-  margin: 1.125rem;
   width: 42px;
 `;