From 1702fa98fdd557e78891bb8b3549c69a3c97edd3 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Mon, 19 Mar 2018 16:31:41 -0700
Subject: [PATCH] Dialog header
---
src/assets/account.svg | 14 ++++++++++++++
src/react-components/ui-root.js | 10 ++++++++--
src/room.scss | 28 ++++++++++++++++++++++++++++
webpack.config.js | 2 +-
4 files changed, 51 insertions(+), 3 deletions(-)
create mode 100755 src/assets/account.svg
diff --git a/src/assets/account.svg b/src/assets/account.svg
new file mode 100755
index 000000000..a39a815fd
--- /dev/null
+++ b/src/assets/account.svg
@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>account</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(-42 105)">
+<g id="account">
+<g id="Vector">
+<use xlink:href="#path0_fill" transform="translate(42 -105)" fill="#FFFFFF"/>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" d="M 8 0C 9.06087 8.88178e-16 10.0783 0.421427 10.8284 1.17157C 11.5786 1.92172 12 2.93913 12 4C 12 5.06087 11.5786 6.07828 10.8284 6.82843C 10.0783 7.57857 9.06087 8 8 8C 6.93913 8 5.92172 7.57857 5.17157 6.82843C 4.42143 6.07828 4 5.06087 4 4C 4 2.93913 4.42143 1.92172 5.17157 1.17157C 5.92172 0.421427 6.93913 8.88178e-16 8 0L 8 0ZM 8 10C 12.42 10 16 11.79 16 14L 16 16L 0 16L 0 14C 0 11.79 3.58 10 8 10Z"/>
+</defs>
+</svg>
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 2a3255c0b..3a1a03da0 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -64,8 +64,14 @@ const AutoExitWarning = (props) => (
);
const ProfileInfoHeader = (props) => (
- <div className="profile-info-header" onClick={props.onClick}>
- {props.name}
+ <div className="profile-info-header">
+ <img src="./src/assets/account.svg" onClick={props.onClick} className="profile-info-header__icon"/>
+ <div className="profile-info-header__profile_display_name" onClick={props.onClick}>
+ {props.name}
+ </div>
+ <div className="profile-info-header__app_name">
+ <b>moz://a</b> duck
+ </div>
</div>
);
diff --git a/src/room.scss b/src/room.scss
index a4a046c7c..4d2d9d328 100644
--- a/src/room.scss
+++ b/src/room.scss
@@ -85,6 +85,7 @@ $darker-grey: rgba(64, 64, 64, 1.0);
.entry-dialog {
display: flex;
+ flex-direction: column;
}
.name-entry {
@@ -145,4 +146,31 @@ $darker-grey: rgba(64, 64, 64, 1.0);
background-color: transparent;
font-weight: bold;
color: white;
+ cursor: pointer;
+}
+
+.profile-info-header {
+ display: flex;
+ flex: 1 1 40px;
+ width: 100%;
+}
+
+.profile-info-header__icon {
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ padding: 15px;
+}
+
+.profile-info-header__profile_display_name {
+ cursor: pointer;
+ flex: 6 1 auto;
+ font-size: 1.2em;
+ line-height: 50px;
+}
+
+.profile-info-header__app_name {
+ font-size: 1.8em;
+ padding-right: 18px;
+ line-height: 50px;
}
diff --git a/webpack.config.js b/webpack.config.js
index da402af41..3fd0ea732 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -167,7 +167,7 @@ const config = {
})
},
{
- test: /\.(png|jpg|gif|glb|ogg|woff2)$/,
+ test: /\.(png|jpg|gif|glb|ogg|woff2|svg)$/,
use: {
loader: "file-loader",
options: {
--
GitLab