From 5f28e8f5fc71ca3f32b28fded03148b8b0aa995e Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kyle.l.doherty@gmail.com>
Date: Thu, 10 Sep 2015 16:17:26 -0700
Subject: [PATCH] actually add avatar component and align tabs
---
.../app/components/UserAvatar.react.js | 55 +++++++++++++++++++
.../app/home/components/HeaderTabs.react.js | 2 +-
2 files changed, 56 insertions(+), 1 deletion(-)
create mode 100644 resources/frontend_client/app/components/UserAvatar.react.js
diff --git a/resources/frontend_client/app/components/UserAvatar.react.js b/resources/frontend_client/app/components/UserAvatar.react.js
new file mode 100644
index 00000000000..aa7053a5edf
--- /dev/null
+++ b/resources/frontend_client/app/components/UserAvatar.react.js
@@ -0,0 +1,55 @@
+'use strict';
+
+import React, { Component } from 'react';
+import cx from 'classnames';
+
+export default class UserAvatar extends Component {
+ constructor(props) {
+ super(props)
+ this.styles = {
+ fontSize: '0.85rem',
+ borderWidth: '1px',
+ borderStyle: 'solid',
+ borderRadius: '99px',
+ width: '2rem',
+ height: '2rem',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }
+ }
+ userInitials() {
+ const { first_name, last_name } = this.props.user;
+
+ let initials = '??';
+
+ if (first_name !== 'undefined') {
+ initials = first_name.substring(0, 1);
+ }
+
+ if (last_name !== 'undefined') {
+ initials = initials + last_name.substring(0, 1);
+ }
+
+ return initials;
+ }
+
+ render() {
+ const { background } = this.props;
+ const classes = {
+ 'flex': true,
+ 'align-center': true,
+ }
+ classes[background] = true;
+
+ return (
+ <div className={cx(classes)} style={Object.assign(this.styles, this.props.style)}>
+ {this.userInitials()}
+ </div>
+ )
+ }
+}
+
+UserAvatar.defaultProps = {
+ background: 'bg-brand',
+}
diff --git a/resources/frontend_client/app/home/components/HeaderTabs.react.js b/resources/frontend_client/app/home/components/HeaderTabs.react.js
index 251e1c284b3..705fe690c58 100644
--- a/resources/frontend_client/app/home/components/HeaderTabs.react.js
+++ b/resources/frontend_client/app/home/components/HeaderTabs.react.js
@@ -43,7 +43,7 @@ export default class HeaderTabs extends Component {
return (
<div className="bg-brand text-white">
- <a className={activityTab} href="/">Activity</a>
+ <a className={activityTab} style={{marginLeft: '10px'}} href="/">Activity</a>
<a className={questionsTab} href="/?questions">Saved Questions</a>
</div>
);
--
GitLab