Fix/ui improvements (codesandbox#41)

* Basic improvements to UI

* Change location of UI elements

Author: CompuIves

src/app/components/sandbox/CodeEditor/index.js

@@ -153,6 +153,9 @@ export default class CodeEditor extends React.PureComponent {
       } else if (kind[1] === 'html') {
         await System.import('codemirror/mode/htmlmixed/htmlmixed');
         return 'htmlmixed';
+      } else if (kind[1] === 'md') {
+        await System.import('codemirror/mode/markdown/markdown');
+        return 'markdown';
       }
     }
 

src/app/components/sandbox/GithubBadge.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import GithubIcon from 'react-icons/lib/go/mark-github';
+
+const BorderRadius = styled.div`
+  transition: 0.3s ease all;
+  border-radius: 4px;
+  border: 1px solid #4f5459;
+  font-size: .75rem;
+  margin-right: 1rem;
+
+  ${props =>
+    props.hasUrl &&
+    css`
+    &:hover {
+      background-color: #4f5459;
+    }
+  `};
+`;
+
+const Text = styled.span`
+  display: inline-block;
+  font-weight: .875rem;
+
+  color: rgba(255, 255, 255, 0.6);
+  border-radius: 4px;
+  padding: 3px 5px;
+`;
+
+const Icon = styled.span`
+  display: inline-block;
+  padding: 3px 5px;
+  background-color: #4f5459;
+  border-radius: 2px;
+  color: ${props => props.theme.background};
+`;
+
+const StyledA = styled.a`text-decoration: none;`;
+
+type Props = {
+  username: string,
+  repo: string,
+  url: ?string,
+};
+
+const DivOrA = ({ href, ...props }) =>
+  href
+    ? <StyledA
+        target="_blank"
+        rel="noopener noreferrer"
+        href={href}
+        {...props}
+      />
+    : <div {...props} />;
+
+export default ({ username, repo, url }: Props) =>
+  <DivOrA href={url}>
+    <BorderRadius hasUrl={!!url}>
+      <Icon>
+        <GithubIcon />
+      </Icon>
+      <Text>
+        {username}/{repo}
+      </Text>
+    </BorderRadius>
+  </DivOrA>;

src/app/components/sandbox/Stats/Stat.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const CenteredText = styled.div`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+
+  svg {
+    opacity: 0.8;
+  }
+`;
+
+type Props = {
+  Icon: React.CElement,
+  count: number,
+};
+
+export default ({ Icon, count }: Props) =>
+  <CenteredText>
+    {Icon}
+    <span
+      style={{
+        marginLeft: '0.5em',
+        fontWeight: 300,
+      }}
+    >
+      {count.toLocaleString()}
+    </span>
+  </CenteredText>;

src/app/components/sandbox/Stats/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import EyeIcon from 'react-icons/lib/fa/eye';
+import ForkIcon from 'react-icons/lib/go/repo-forked';
+
+import Stat from './Stat';
+import LikeHeart from '../../../containers/LikeHeart/index';
+
+const Stats = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-around;
+`;
+
+type Props = {
+  viewCount: number,
+  forkCount: number,
+  likeCount: number,
+  sandboxId: string,
+};
+
+export default ({ viewCount, forkCount, likeCount, sandboxId }: Props) =>
+  <Stats>
+    <Stat Icon={<EyeIcon />} count={viewCount} />
+    <Stat
+      Icon={<LikeHeart colorless sandboxId={sandboxId} />}
+      count={likeCount}
+    />
+    <Stat Icon={<ForkIcon />} count={forkCount} />
+  </Stats>;

src/app/components/user/UserWithAvatar.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const CenteredText = styled.div`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+`;
+
+const AuthorName = styled.span`
+  text-transform: uppercase;
+  margin: 0 0.5em;
+  margin-right: 1em;
+  font-weight: 400;
+`;
+
+const Image = styled.img`
+  width: 1.75em;
+  height: 1.75em;
+  border-radius: 4px;
+`;
+
+type Props = {
+  avatarUrl: string,
+  username: string,
+};
+
+export default ({ avatarUrl, username }: Props) =>
+  <CenteredText>
+    <Image src={avatarUrl} alt={username} />
+    <AuthorName>
+      {username}
+    </AuthorName>
+  </CenteredText>;

src/app/containers/LikeHeart/LikeHeart.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import HeartIcon from 'react-icons/lib/fa/heart-o';
 import FullHeartIcon from 'react-icons/lib/fa/heart';
 
@@ -18,16 +18,20 @@ const Container = styled.div`
   display: inline-block;
   transition: 0.3s ease all;
 
-  cursor: pointer;
-
   transform: scale(1);
 
+  ${props =>
+    props.loggedIn &&
+    css`
+  cursor: pointer;
   &:hover {
     transform: scale(1.1);
-    color: #E01F4E;
-  }
+  }`};
 `;
 
+const MaybeTooltip = ({ loggedIn, ...props }) =>
+  loggedIn ? <Tooltip {...props} /> : <div {...props} />;
+
 export default class LikeHeart extends React.PureComponent {
   props: Props;
 
@@ -40,20 +44,21 @@ export default class LikeHeart extends React.PureComponent {
   };
 
   render() {
-    const { isLiked, loggedIn, className } = this.props;
-
-    if (!loggedIn) return null;
+    const { isLiked, colorless, loggedIn, className } = this.props;
 
     return (
-      <Container className={className}>
-        <Tooltip title={isLiked ? 'Undo like' : 'Like'}>
+      <Container loggedIn={loggedIn} className={className}>
+        <MaybeTooltip
+          loggedIn={loggedIn}
+          title={isLiked ? 'Undo like' : 'Like'}
+        >
           {isLiked
             ? <FullHeartIcon
-                style={{ color: '#E01F4E' }}
-                onClick={this.unlikeSandbox}
+                style={!colorless && { color: '#E01F4E' }}
+                onClick={loggedIn && this.unlikeSandbox}
               />
-            : <HeartIcon onClick={this.likeSandbox} />}
-        </Tooltip>
+            : <HeartIcon onClick={loggedIn && this.likeSandbox} />}
+        </MaybeTooltip>
       </Container>
     );
   }

src/app/pages/Profile/Header/UserInfo/Stats.js

@@ -25,10 +25,9 @@ type Props = {
   forkCount: number,
 };
 
-export default ({ viewCount, likeCount, forkCount }: Props) => (
+export default ({ viewCount, likeCount, forkCount }: Props) =>
   <Container>
     <Stat name="Likes" count={likeCount} />
     <Stat name="Views" count={viewCount} />
     <Stat name="Forked" count={forkCount} />
-  </Container>
-);
+  </Container>;