- {icon}
+const PageCaption = ({ children, iconLeft, iconRight }) => {
+ let title = children;
+ if (isString(children)) {
+ title =
diff --git a/src/components/page/captions.js b/src/components/page/captions.js
new file mode 100644
index 00000000..438cefaa
--- /dev/null
+++ b/src/components/page/captions.js
@@ -0,0 +1,44 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2016 Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program. If not, see
.
+ */
+import React from 'react';
+
+import { getName } from '../../utils/user';
+import Avatar from '../user/avatar';
+import Icon from '../icon';
+import {
+ PageCaption
+} from '../page';
+
+
+export const UserCaption = ({ user }) => {
+ if (!user) {
+ return (
+
+ );
+ }
+
+ return (
+
}
+ iconRight={
}
+ >
+
{user.get('username')}
+
{getName(user)}
+
+ );
+};
diff --git a/src/less/blocks/icon.less b/src/less/blocks/icon.less
index 5328382d..dde920c5 100644
--- a/src/less/blocks/icon.less
+++ b/src/less/blocks/icon.less
@@ -16,6 +16,10 @@
&--dark_green {
background: @color__dark_green;
}
+
+ &--khaki {
+ background: #D4D366;
+ }
}
&-midi.icon-outline {
diff --git a/src/less/blocks/page_head.less b/src/less/blocks/page-head.less
similarity index 86%
rename from src/less/blocks/page_head.less
rename to src/less/blocks/page-head.less
index 4b6387f3..7f80bc18 100644
--- a/src/less/blocks/page_head.less
+++ b/src/less/blocks/page-head.less
@@ -17,20 +17,29 @@
*/
// A block representing a header on a page of a certain entity (user, tag, whatever).
-.page_head {
+.page-head {
@size: 60px;
min-height: @size;
display: flex;
- background-color: white;
align-items: center;
- justify-content: space-between;
+ margin-bottom: 2px;
+ background-color: white;
- &__title {
+ &__title-wrapper {
display: block;
padding-left: @space;
- color: @color__text;
+ flex-grow: 1;
+ }
+
+ &__title {
font-size: 20px;
+ color: #0077B5;
+ }
+
+ &__subtitle {
+ font-size: 12px;
+ color: @color__dark_gray;
}
&__icon {
@@ -39,6 +48,7 @@
height: @size;
align-items: center;
justify-content: space-around;
+ background-color: #FAFAFA;
//background-color: #f3f3f3; // TODO: Choose background color depending on the type of an item.
}
}
diff --git a/src/less/styles.less b/src/less/styles.less
index 7fde9572..61943b2f 100644
--- a/src/less/styles.less
+++ b/src/less/styles.less
@@ -53,7 +53,7 @@
@import 'blocks/micon';
@import 'blocks/page';
-@import 'blocks/page_head';
+@import 'blocks/page-head';
@import 'blocks/header';
@import 'blocks/logo';
@import 'blocks/footer';
diff --git a/src/pages/base/settings.js b/src/pages/base/settings.js
index e72acacc..24ce42e8 100644
--- a/src/pages/base/settings.js
+++ b/src/pages/base/settings.js
@@ -42,9 +42,8 @@ import Sidebar from '../../components/sidebar';
import Messages from '../../components/messages';
import SidebarAlt from '../../components/sidebarAlt';
import PageContentLink from '../../components/page-content-link';
+import { UserCaption } from '../../components/page/captions';
-import Avatar from '../../components/user/avatar';
-import { getName } from '../../utils/user';
class BaseSettingsPage extends React.Component {
static displayName = 'BaseSettingsPage';
@@ -117,16 +116,10 @@ class BaseSettingsPage extends React.Component {