settings — identity

renderer/components/settings/identity.js

@@ -0,0 +1,124 @@
+'use strict'
+
+// Packages
+import reactHashAvatar from 'react-hash-avatar'
+import renderHTML from 'react-render-html'
+
+import ButtonLink from './../button-link'
+
+// Theme
+import { colors, typography } from './../../theme'
+
+const Identity = ({ username, email }) => {
+  return (
+    <div className="user">
+      <div>
+        {username && email ? (
+          <div>
+            <div className="avatar">
+              {renderHTML(
+                reactHashAvatar(username, { size: 75, radius: '50px' })
+              )}
+              <h4>{username.substring(0, 2)}</h4>
+
+              <div className="badge">Pro</div>
+            </div>
+
+            <h3>
+              Your username is <span className="strong">{username}</span>
+            </h3>
+
+            <span className="email">{email}</span>
+          </div>
+        ) : (
+          <div>
+            <h3 className="free">
+              You are on <span className="strong">Free version</span>.
+            </h3>
+
+            <ButtonLink href="/signup">Pro — 14 days free trial</ButtonLink>
+            <ButtonLink href="/login" color="dark">
+              Login into your account
+            </ButtonLink>
+          </div>
+        )}
+      </div>
+
+      <style jsx>{`
+        .user {
+          height: calc(580px - 215px);
+          padding-bottom: 10px;
+          overflow-y: auto;
+          text-align: center;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+
+        .avatar {
+          position: relative;
+          margin-left: auto;
+          margin-right: auto;
+          width: 75px;
+        }
+
+        h4 {
+          position: absolute;
+          color: ${colors.white};
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          font-size: ${typography.f24};
+          font-weight: ${typography.bold};
+          line-height: 75px;
+          text-align: center;
+        }
+
+        h3 {
+          color: ${colors.white};
+          font-size: ${typography.f16};
+          text-align: center;
+          font-weight: ${typography.regular};
+          margin-top: 20px;
+          margin-bottom: 10px;
+        }
+
+        .strong {
+          font-weight: ${typography.bold};
+        }
+
+        .email {
+          color: ${colors.romanSilver};
+          font-size: ${typography.f14};
+          text-align: center;
+          font-weight: ${typography.regular};
+        }
+
+        .badge {
+          margin-top: 20px;
+          height: 20px;
+          line-height: 20px;
+          text-align: center;
+          width: 40px;
+          margin-left: auto;
+          margin-right: auto;
+          color: ${colors.white};
+          background-color: ${colors.brightTurquoise};
+          text-transform: uppercase;
+          font-size: ${typography.f10};
+          font-weight: ${typography.bold};
+          border-radius: 2px;
+        }
+
+        .free {
+          margin-bottom: 30px;
+          display: block;
+          width: 100%;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default Identity

renderer/pages/settings.js

@@ -11,6 +11,7 @@ import Page from './../layouts/page'
 import Row from './../components/row'
 import Hero from './../components/hero'
 import Navigation from './../components/navigation'
+import Identity from './../components/settings/identity'
 import AppInfo from './../components/settings/app-info'
 import Social from './../components/settings/social'
 
@@ -90,7 +91,7 @@ class Settings extends Component {
 
     switch (tabSelected) {
       case 'Identity':
-        content = <h1>Identity</h1>
+        content = <Identity />
         break
 
       case 'Account':