Skip to content

Commit

Permalink
UI: Remove header title
Browse files Browse the repository at this point in the history
  • Loading branch information
clemlesne committed Jul 13, 2023
1 parent 8809f07 commit ce8b435
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 43 deletions.
53 changes: 25 additions & 28 deletions src/conversation-ui/src/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { header } from "./Utils";
import { ThemeContext, ConversationContext } from "./App";
import { useAuth } from "oidc-react";
import { useContext } from "react";
import { useNavigate, Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import Button from "./Button";
import Conversations from "./Conversations";

Expand All @@ -17,39 +17,36 @@ function Header() {

return (
<div className="header">
<div className="header__top">
<Link to="/" className="a--unstyled">
<h1>🔒 Private GPT</h1>
</Link>
<div className="header__actions">
{/* This button is never disabled and this is on purpose.
It is the central point of the application and should always be clickable. UX interviews with users showed that they were confused when the button was disabled. They thought that the application was broken. */}
{auth.userData && <>
<Button
onClick={() => {
header(false);
navigate("/");
}}
text="New chat"
emoji="+"
active={true}
/>
<Button
onClick={() => {
header(false);
navigate("/search");
}}
text="Search"
emoji="🔍"
/>
</>}
<Button
className="header__top__toggle"
className="header__actions__toggle"
emoji="="
text="Menu"
onClick={() => header() }
/>
</div>
{auth.userData && <div className="header__actions">
{/* This button is never disabled and this is on purpose.
It is the central point of the application and should always be clickable. UX interviews with users showed that they were confused when the button was disabled. They thought that the application was broken. */}
<Button
onClick={() => {
header(false);
navigate("/");
}}
text="New chat"
emoji="+"
active={true}
/>
<Button
onClick={() => {
header(false);
navigate("/search");
}}
text="Search"
emoji="🔍"
/>
</div>}
<div className="header__content">
{auth.userData && (
<Conversations
Expand Down
23 changes: 8 additions & 15 deletions src/conversation-ui/src/header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,13 @@ html {
flex-direction: row;

> * {
flex-grow: 1;
&.header__actions__toggle {
flex-grow: 1;
}

&:not(.header__actions__toggle) {
flex-grow: 2;
}
}

// Add spaces around actions
Expand Down Expand Up @@ -67,7 +73,7 @@ html {
}

// Hide the toggle button
.header__top__toggle {
.header__actions__toggle {
display: none;
}

Expand Down Expand Up @@ -98,19 +104,6 @@ html {
padding: calc(var(--header-padding-v) / 2) var(--header-padding-h);
}

.header__top {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;

// Add spaces around title and toggle button
> *:not(:last-child) {
margin-right: var(--header-padding-h);
}
}

.header__actions {
display: flex;
}
Expand Down

0 comments on commit ce8b435

Please sign in to comment.