FS-94 Add Nav bar (#22)

frontend/public/index.html

@@ -5,7 +5,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
       rel="stylesheet"
     />
   </head>

frontend/src/app.tsx

@@ -3,12 +3,14 @@ import styles from './app.module.css';
 import { Chat } from './components/chat';
 import { Input } from './components/input';
 import { useMessages } from './useMessages';
+import { NavBar } from './components/navbar';
 
 export const App = () => {
   const { sendMessage, messages, waiting } = useMessages();
 
   return (
     <div className={styles.container}>
+      <NavBar />
       <Chat messages={messages} waiting={waiting} />
       <Input sendMessage={sendMessage} waiting={waiting} />
     </div>

frontend/src/components/button.module.css

@@ -0,0 +1,42 @@
+.button_container {
+  background-color: var(--primary);
+  border-radius: 20px;
+}
+
+.button {
+  height: 40px;
+  box-sizing: border-box;
+  color: var(--grey-900);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  border-radius: 20px;
+  border: none;
+  padding: 0 24px;
+  background-color: transparent;
+  display: inline-flex;
+  align-items: center;
+}
+
+.button:hover {
+  background-color: rgb(255 255 255 / 0.15);
+  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.2);
+  cursor: pointer;
+}
+
+.button:active:enabled {
+  background-color: var(--primary-dark);
+}
+
+.button_container:has(.button:disabled) {
+  background-color: var(--grey-400);
+  opacity: 0.5;
+}
+
+.icon {
+  margin-right: 8px;
+}
+
+.button:has(.icon) {
+  padding-left: 16px;
+}

frontend/src/components/button.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './button.module.css';
+
+interface ButtonProps {
+  text: string;
+  icon?: string;
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+export const Button = ({ text, icon, disabled, onClick }: ButtonProps) => {
+  return (
+    <div className={styles.button_container}>
+      <button disabled={disabled} className={styles.button} onClick={onClick}>
+        {icon && <img src={icon} className={styles.icon} />}
+        {text}
+      </button>
+    </div>
+  );
+};

frontend/src/components/navbar.module.css

@@ -0,0 +1,10 @@
+.container {
+  width: 100%;
+  height: 80px;
+  padding: 0 36px;
+  background-color: var(--grey-900);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

frontend/src/components/navbar.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './navbar.module.css';
+import ChatIcon from '../icons/chat.svg';
+import { Button } from './button';
+import logo from '../icons/primary-logo-dark.svg';
+
+export const NavBar = () => {
+  return (
+    <div className={styles.container}>
+      <div>
+        <img src={logo} title="Infer ESG" />
+      </div>
+      <div>
+        <Button
+          icon={ChatIcon}
+          text="Start new chat"
+          onClick={() => {
+            console.log('Start new chat');
+          }}
+        />
+      </div>
+    </div>
+  );
+};

frontend/src/styles.css

@@ -1,10 +1,25 @@
 html,
 body,
 #app-root {
-  font-family: 'Source Sans 3', sans-serif;
+  font-family: 'Roboto', sans-serif;
   height: 100%;
   margin: 0;
 
+  --primary: #f29900;
+  --primary-dark: #f28900;
+  --grey-50: #faf7f5;
+  --grey-100: #f5f2f0;
+  --grey-200: #eeebe9;
+  --grey-300: #e0dddc;
+  --grey-400: #bdbbb9;
+  --grey-500: #9e9c9b;
+  --grey-600: #757473;
+  --grey-700: #62605f;
+  --grey-800: #424141;
+  --grey-900: #212120;
+  --black: #000000;
+  --white: #ffffff;
+
   --background-color-primary: #282828;
   --blue: #007bff;
   --border-primary: #424242;