✨ 40 - user profile page

components/Button.tsx

@@ -0,0 +1,100 @@
+import React, { ReactNode, ReactNodeArray } from 'react';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+
+import defaultTheme from './theme';
+import { Spinner } from './theme/icons';
+
+const ButtonElement = styled('button')`
+  ${({ theme }: { theme: typeof defaultTheme }) => css`
+    color: ${theme.colors.white};
+    background-color: ${theme.colors.accent};
+    ${theme.typography.subheading2};
+    line-height: 24px;
+    border-radius: 5px;
+    border: 1px solid ${theme.colors.accent};
+    padding: 6px 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    &:hover {
+      background-color: ${theme.colors.accent_dark};
+    }
+    &:disabled,
+    &:disabled:hover {
+      background-color: ${theme.colors.grey_4};
+      cursor: not-allowed;
+      color: ${theme.colors.white};
+      border: 1px solid ${theme.colors.grey_4};
+    }
+  `}
+`;
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  {
+    children?: ReactNode | ReactNodeArray;
+    disabled?: boolean;
+    onClick?: (
+      e: React.SyntheticEvent<HTMLButtonElement>,
+    ) => any | ((e: React.SyntheticEvent<HTMLButtonElement>) => Promise<any>);
+    isAsync?: boolean;
+    className?: string;
+    isLoading?: boolean;
+  }
+>(
+  (
+    {
+      children,
+      onClick = (e) => {},
+      disabled = false,
+      isAsync = false,
+      className,
+      isLoading: controlledLoadingState,
+    },
+    ref = React.createRef(),
+  ) => {
+    const [isLoading, setLoading] = React.useState(false);
+
+    /**
+     * controlledLoadingState will allows consumer to control the loading state.
+     * Else, that is set by the component internally
+     */
+    const shouldShowLoading = !!controlledLoadingState || (isLoading && isAsync);
+
+    const onClickFn = async (event: any) => {
+      setLoading(true);
+      await onClick(event);
+      setLoading(false);
+    };
+    return (
+      <ButtonElement
+        ref={ref}
+        onClick={isAsync ? onClickFn : onClick}
+        disabled={disabled || shouldShowLoading}
+        className={className}
+      >
+        <span
+          css={css`
+            visibility: ${shouldShowLoading ? 'hidden' : 'visible'};
+          `}
+        >
+          {children}
+        </span>
+        <span
+          css={(theme) => css`
+            position: absolute;
+            visibility: ${shouldShowLoading ? 'visible' : 'hidden'};
+            bottom: 1px;
+          `}
+        >
+          <Spinner height={20} width={20} />
+        </span>
+      </ButtonElement>
+    );
+  },
+);
+
+export default Button;

components/Footer.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
 import { css } from '@emotion/core';
-import styled from '@emotion/styled';
 
 import defaultTheme from './theme';
 import { OvertureLogoWithText } from './theme/icons';
 
-const StyledLink = styled('a')`
-  color: ${({ theme }: { theme: typeof defaultTheme }) => css(theme.colors.secondary_accessible)};
-  ${({ theme }) => css(theme.typography.subheading2)};
-  line-height: 24px;
-`;
+import StyledLink from './Link';
 
 const Footer = () => {
   return (
@@ -27,7 +22,8 @@ const Footer = () => {
       `}
     >
       <StyledLink
-        css={css`
+        css={(theme) => css`
+          ${theme.typography.subheading2};
           padding-right: 13px;
         `}
         // TODO: broken link
@@ -38,7 +34,8 @@ const Footer = () => {
       </StyledLink>
       |
       <StyledLink
-        css={css`
+        css={(theme) => css`
+          ${theme.typography.subheading2};
           padding-left: 13px;
           padding-right: 5px;
         `}

components/Link.tsx

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+
+import defaultTheme from './theme';
+
+const StyledLink = styled('a')`
+  ${({ theme }: { theme: typeof defaultTheme }) => css`
+    color: ${theme.colors.secondary_accessible};
+    ${theme.typography.regular};
+    line-height: 24px;
+    &:hover {
+      color: ${theme.colors.accent};
+    }
+  `}
+`;
+
+export default StyledLink;

components/PageLayout.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { css } from '@emotion/core';
 
-import defaultTheme from './theme';
 import NavBar from './NavBar';
 import Footer from './Footer';
 
 const PageLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div
-      css={(theme: typeof defaultTheme) => css`
-        background-color: ${theme.colors.grey_2};
+      css={(theme) => css`
         display: grid;
         grid-template-rows: 50px 1fr;
         min-height: 100vh;

components/UserDropdown.tsx

@@ -33,21 +33,23 @@ const CurrentUser = ({ userName = 'TestUser' }: { userName?: string }) => (
 );
 
 const StyledListLink = styled('a')`
-  text-decoration: none;
+  ${({ theme }: { theme: typeof defaultTheme }) => css`
+text-decoration: none;
   height: 40px;
   display: flex;
   align-items: center;
-  background: ${({ theme }: { theme: typeof defaultTheme }) => css(theme.colors.white)};
+  background: (theme.colors.white)};
   padding: 6px 12px;
-  color: ${({ theme }: { theme: typeof defaultTheme }) => css(theme.colors.black)};
-  border: 1px solid ${({ theme }: { theme: typeof defaultTheme }) => css(theme.colors.grey_3)};
+  color: ${theme.colors.black};
+  border: 1px solid ${theme.colors.grey_3};
   outline: none;
   font-size: 16px;
   cursor: pointer;
   width: 100%;
   &:hover {
-    background-color: ${({ theme }: { theme: typeof defaultTheme }) => css(theme.colors.grey_1)};
+    background-color: ${theme.colors.grey_1};
   }
+`}
 `;
 
 const UserDropdown = () => {
@@ -130,7 +132,7 @@ const UserDropdown = () => {
           `}
         >
           <li>
-            <StyledListLink href="/profile">Profile & Token</StyledListLink>
+            <StyledListLink href="/user">Profile & Token</StyledListLink>
           </li>
           {/* TODO: implement logout */}
           <li>

components/pages/repository/PageContent.tsx

@@ -11,9 +11,11 @@ import defaultTheme from '../../theme';
 import Footer from '../../Footer';
 
 export const Collapsible = styled('div')`
-  border-top: 1px solid ${({ theme }: { theme: typeof defaultTheme }) => theme.colors.grey_2};
-  height: 47px;
-  width: 100%;
+  ${({ theme }: { theme: typeof defaultTheme }) => css`
+    border-top: 1px solid ${theme.colors.grey_2};
+    height: 47px;
+    width: 100%;
+  `}
 `;
 
 const PageContent = (props: PageContentProps) => {