@gnar-engine/cli 1.0.4 → 1.0.5

package/bootstrap/services/portal/src/components/Sidebar/Sidebar.less

@@ -0,0 +1,37 @@
+.portal-sidebar {
+    background: @dark-1;
+    min-width: 264px;
+    min-width: 264px;
+    min-height: 100%;
+    padding: 43px 32px;
+    box-sizing: border-box;
+
+    .inner {
+
+        ul {
+            padding: 0px;
+
+            li {
+                list-style: none;
+                background-size: 28px 28px;
+                background-position: left center;
+                background-repeat: no-repeat;
+
+                a {
+                    display: block;
+                    text-decoration: none;
+                    color: @mid-grey;
+                    padding-top: 7px;
+                    padding-bottom: 7px;
+                    padding-left: 50px;
+                    font-size: 18px;
+                    cursor: pointer;
+                }
+
+                &:first-of-type a {
+                    color: @white;
+                }
+            }
+        }
+    }
+}

package/bootstrap/services/portal/src/components/Topbar/Topbar.jsx

@@ -0,0 +1,19 @@
+import { useState} from "react";
+
+function Topbar() {
+
+    const [agentQuest, setAgentQuestion] = useState('');
+
+    return (
+        <div className="portal-topbar">
+            <div className="content flex-row">
+                <label className="input icon icon-agent agent-question">
+                    Engine Agent
+                    <input type="text" id="agent-question" placeholder="I'll be able to help you with tasks soon!" />
+                </label>
+            </div>
+        </div>
+    )
+}
+
+export default Topbar;

package/bootstrap/services/portal/src/components/Topbar/Topbar.less

@@ -0,0 +1,22 @@
+.portal-topbar {
+    background: @green-main;
+    min-height: 100vh;
+    width: 100%;
+
+    .content {
+        padding-left: 45px;
+        padding-right: 45px;
+        box-sizing: border-box;
+    }
+
+    >.flex-row {
+        height: 71px;
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    .agent-question {
+        width: 50%;
+        box-sizing: border-box;
+    }
+}

package/bootstrap/services/portal/src/components/UserInfo/UserInfo.jsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { getGravatarUrl } from "../../services/gravatar";
+
+function UserInfo() {
+
+    const { authUser } = useSelector((state) => state.auth);
+    const [loading, setLoading] = useState(true);
+    const [gravatarUrl, setGravatarUrl] = useState('');
+
+    useEffect(() => {
+        if (authUser && authUser.email) {
+            const gravatar = getGravatarUrl(authUser.email, { size: 100 });
+            setGravatarUrl(gravatar);
+            setLoading(false);
+        }
+    }, [authUser])
+
+    return (
+        <div className="user-info">
+            {authUser && !loading && (
+                <div className="user-info-mini flex-row">
+                    {gravatarUrl && (
+                        <img src={gravatarUrl} alt="User Gravatar" className="gravatar-image" />
+                    )}
+                    <span className="email">{authUser.email}</span>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default UserInfo;

package/bootstrap/services/portal/src/components/UserInfo/UserInfo.less

@@ -0,0 +1,21 @@
+.user-info {
+    position: absolute;
+    bottom: 30px;
+
+    .user-info-mini {
+        align-items: center;
+
+        .email {
+            margin-top: auto;
+            margin-bottom: auto;
+            height: auto;
+            font-size: 18px;
+        }
+    }
+
+    .gravatar-image {
+        width: 35px;
+        border-radius: 20px;
+    }
+}
+