Skip to content

Commit 011e2ed

Browse files
leekahungleekahung
committed
Include icon as site favicon; Added site logo to webpage; Include site mascot to initial city selector
1 parent d781b75 commit 011e2ed

File tree

6 files changed

+329
-9
lines changed

6 files changed

+329
-9
lines changed

‎frontend/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<title>Tenant First Aid</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="icon" type="image/svg" href="/favicon.svg" />
78
<script
89
src="https://www.datadoghq-browser-agent.com/us5/v6/datadog-rum.js"
910
type="text/javascript"

‎frontend/public/favicon.svg

Lines changed: 6 additions & 0 deletions
Loading

‎frontend/src/pages/Chat/components/CitySelectField.tsx

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState } from "react";
22
import useMessages, { IMessage } from "../../../hooks/useMessages";
3+
import BeaverIcon from "../../../shared/components/BeaverIcon";
34

45
const CitySelectOptions = {
56
portland: {
@@ -59,11 +60,18 @@ export default function CitySelectField({ setMessages }: Props) {
5960

6061
return (
6162
<div className="flex flex-col gap-2">
62-
<p className="text-center text-[#888] mb-10">
63-
{city === "other"
64-
? "Unfortunately we can only answer questions about tenant rights in Oregon right now."
65-
: "Welcome to Tenant First Aid! I can answer your questions about tenant rights in Oregon. To get started, what city are you located in?"}
66-
</p>
63+
<div className="flex px-4 gap-4 items-center">
64+
<div>
65+
<BeaverIcon />
66+
</div>
67+
<div>
68+
<p className="text-center text-[#888]">
69+
{city === "other"
70+
? "Unfortunately we can only answer questions about tenant rights in Oregon right now."
71+
: "Welcome to Tenant First Aid! I can answer your questions about tenant rights in Oregon. To get started, what city are you located in?"}
72+
</p>
73+
</div>
74+
</div>
6775
<select
6876
name="city"
6977
value={city || ""}

‎frontend/src/pages/Chat/components/Navbar.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { useState } from "react";
22
import { Link } from "react-router-dom";
3+
import TenantFirstAidLogo from "../../../shared/components/TenatFirstAidLogo";
34

45
export default function Navbar() {
56
const [sidebarOpen, setSidebarOpen] = useState(false);
67

78
return (
89
<nav className="fixed top-0 left-0 w-full bg-[#1F584F] shadow-md py-3 px-6 z-50">
9-
<div className="mx-auto flex items-center ">
10-
<div className="m-auto flex items-center ">
11-
<Link to="/" className="text-2xl font-bold text-[#F4F4F2]">
12-
Tenant First Aid
10+
<div className="mx-auto flex items-center justify-between">
11+
<div className="flex items-center">
12+
<Link to="/">
13+
<TenantFirstAidLogo />
1314
</Link>
1415
</div>
1516
<button

‎frontend/src/shared/components/BeaverIcon.tsx

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
export default function BeaverIcon() {
2+
return (
3+
<svg
4+
width="82"
5+
height="88"
6+
viewBox="0 0 82 88"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<path
11+
d="M78.9381 58.0899C78.981 56.9506 77.8988 56.0083 76.5482 56.0083H66.9942C66.3917 56.0083 65.8321 56.3252 65.5208 56.8421L55.984 72.7178C55.2901 73.8714 56.1324 75.3362 57.4745 75.3219L77.1079 75.1135C78.3871 75.0992 79.4264 74.2397 79.4692 73.1576L78.941 58.0927L78.9381 58.0899Z"
12+
fill="#1F584F"
13+
/>
14+
<path
15+
d="M55.5581 73.3085C59.5499 68.5315 63.1819 62.4239 65.6404 56.6133C70.4916 45.1576 64.6838 32.2971 63.8129 29.8415C63.753 29.6701 63.8529 29.4817 64.0299 29.4388C66.0173 28.942 72.0535 26.3351 75.2515 22.9029C75.4656 22.6745 70.2346 21.0612 71.4482 19.2281C72.1506 18.1631 76.8134 17.9261 76.8134 17.9261C80.7395 17.572 80.9137 8.31208 75.4542 6.49607C71.1912 5.07696 66.397 3.59789 60.7549 3.31235C58.2707 3.18672 56.5689 3.48939 51.9518 3.57219C50.33 3.60075 48.1228 4.78286 45.5844 5.92786C37.4038 9.61412 32.6582 15.6218 29.266 23.1771C29.266 23.1771 23.6552 23.6453 16.9537 30.4239C7.9308 39.5554 5.93205 51.9676 10.7319 64.5825C11.6228 66.9268 12.902 72.1635 16.1913 72.3148"
16+
fill="#BACAB2"
17+
/>
18+
<path
19+
d="M55.5581 73.3085C59.5499 68.5315 63.1819 62.4239 65.6404 56.6133C70.4916 45.1576 64.6838 32.2971 63.8129 29.8415C63.753 29.6701 63.8529 29.4817 64.0299 29.4388C66.0173 28.942 72.0535 26.3351 75.2515 22.9029C75.4656 22.6745 70.2346 21.0612 71.4482 19.2281C72.1506 18.1631 76.8134 17.9261 76.8134 17.9261C80.7395 17.572 80.9137 8.31208 75.4542 6.49607C71.1912 5.07696 66.397 3.59789 60.7549 3.31235C58.2707 3.18672 56.5689 3.48939 51.9518 3.57219C50.33 3.60075 48.1228 4.78286 45.5844 5.92786C37.4038 9.61412 32.6582 15.6218 29.266 23.1771C29.266 23.1771 23.6552 23.6453 16.9537 30.4239C7.9308 39.5554 5.93205 51.9676 10.7319 64.5825C11.6228 66.9268 12.902 72.1635 16.1913 72.3148"
20+
stroke="#1F584F"
21+
strokeWidth="2.85535"
22+
strokeLinecap="round"
23+
strokeLinejoin="round"
24+
/>
25+
<path
26+
d="M57.0029 45.9428C60.5921 43.3787 64.344 42.6335 67.1651 43.0161"
27+
stroke="#1F584F"
28+
strokeWidth="2.85535"
29+
strokeMiterlimit="10"
30+
strokeLinecap="round"
31+
/>
32+
<path
33+
d="M44.8447 69.939C44.8447 69.939 45.0789 63.4002 48.1998 57.2155C48.9793 55.6708 49.3933 54.6343 50.2242 53.3779"
34+
stroke="#1F584F"
35+
strokeWidth="2.85535"
36+
strokeMiterlimit="10"
37+
strokeLinecap="round"
38+
/>
39+
<path
40+
d="M74.5997 7.00156C75.9417 5.25693 76.7783 5.41398 78.2745 6.56469C79.7707 7.71539 80.4903 10.6593 79.6051 11.573C78.0604 13.1691 76.3729 13.3947 74.8767 12.2411C73.3805 11.0904 73.2548 8.74332 74.5968 6.9987L74.5997 7.00156Z"
41+
fill="#1F584F"
42+
/>
43+
<path
44+
d="M46.8039 10.7706C46.2528 10.7706 45.7474 10.448 45.5161 9.9483L43.9828 6.65893C43.4745 5.57104 43.5745 4.33753 44.254 3.27248C45.0364 2.04468 46.4184 1.28516 47.8632 1.28516C48.2287 1.28516 48.5913 1.3337 48.9425 1.43078L50.9727 1.99043C51.6123 2.16746 52.0777 2.70427 52.1548 3.36385C52.2348 4.02344 51.9092 4.65447 51.3296 4.97713C49.6592 5.90226 48.5313 7.51554 48.2344 9.40293L48.2087 9.57425C48.1002 10.2681 47.5091 10.7735 46.8039 10.7735V10.7706Z"
45+
fill="#1F584F"
46+
/>
47+
<path
48+
d="M47.8622 2.56982C48.1049 2.56982 48.3534 2.60123 48.6018 2.66976L50.6319 3.22941C50.926 3.30936 50.9717 3.70625 50.7062 3.85187C48.7017 4.96261 47.3197 6.93851 46.9656 9.20281L46.94 9.37127C46.9285 9.44551 46.8657 9.48549 46.8029 9.48549C46.7544 9.48549 46.7058 9.45979 46.6801 9.40554L45.1439 6.11617C44.3701 4.45721 45.9806 2.56696 47.8594 2.56696M47.8622 0C45.9834 0 44.1845 0.990808 43.168 2.5841C42.2486 4.0289 42.1201 5.71071 42.8168 7.20406L44.353 10.4934C44.7956 11.4414 45.7578 12.0553 46.8057 12.0553C48.1478 12.0553 49.2728 11.0931 49.4812 9.76817L49.5069 9.5997C49.7411 8.10635 50.6319 6.83001 51.954 6.09904C52.9933 5.52226 53.5729 4.38868 53.433 3.20942C53.2931 2.03016 52.4622 1.06505 51.3172 0.750958L49.2842 0.191309C48.8216 0.0628178 48.3419 0 47.8622 0Z"
49+
fill="#1F584F"
50+
/>
51+
<path
52+
d="M62.7593 6.22205C61.5572 5.88226 60.3065 6.58182 59.9696 7.78393C59.6298 8.98603 60.3294 10.2367 61.5315 10.5736C62.7336 10.9134 63.9842 10.2138 64.3212 9.01173C64.661 7.80963 63.9614 6.55898 62.7593 6.22205ZM62.2824 8.04377C62.1539 8.32645 61.8199 8.44923 61.5372 8.32074C61.2545 8.19224 61.1317 7.85817 61.2602 7.57549C61.3887 7.29281 61.7228 7.17003 62.0055 7.29852C62.2882 7.42701 62.4109 7.76109 62.2824 8.04377Z"
53+
fill="#1F584F"
54+
/>
55+
<path
56+
d="M58.6611 15.9536C59.0553 15.9536 59.3749 15.634 59.3749 15.2397C59.3749 14.8455 59.0553 14.5259 58.6611 14.5259C58.2669 14.5259 57.9473 14.8455 57.9473 15.2397C57.9473 15.634 58.2669 15.9536 58.6611 15.9536Z"
57+
fill="#1F584F"
58+
/>
59+
<path
60+
d="M59.9414 17.498C60.3356 17.498 60.6552 17.1784 60.6552 16.7842C60.6552 16.3899 60.3356 16.0703 59.9414 16.0703C59.5471 16.0703 59.2275 16.3899 59.2275 16.7842C59.2275 17.1784 59.5471 17.498 59.9414 17.498Z"
61+
fill="#1F584F"
62+
/>
63+
<path
64+
d="M57.9482 17.8002C58.3425 17.8002 58.6621 17.4806 58.6621 17.0864C58.6621 16.6922 58.3425 16.3726 57.9482 16.3726C57.554 16.3726 57.2344 16.6922 57.2344 17.0864C57.2344 17.4806 57.554 17.8002 57.9482 17.8002Z"
65+
fill="#1F584F"
66+
/>
67+
<path
68+
d="M71.8425 58.9979V57.2076C71.8425 55.0747 70.352 53.233 68.2676 52.7847"
69+
stroke="#1F584F"
70+
strokeWidth="2.85535"
71+
strokeMiterlimit="10"
72+
/>
73+
<path
74+
d="M28.4004 39.7809C32.4264 45.7657 37.1606 50.5084 43.8993 51.9247C44.062 51.959 50.6979 53.9006 55.4749 52.6899C57.0482 52.2902 59.6722 51.5164 59.8064 49.6604C60.0063 46.9221 56.7112 46.3682 55.4434 46.114C53.9815 45.8199 51.78 45.3003 50.6236 44.6521C49.4786 44.0068 46.4948 42.0052 44.8872 39.4354C44.2276 38.3789 43.5852 36.9512 43.0826 35.7148"
75+
stroke="#1F584F"
76+
strokeWidth="2.85535"
77+
strokeMiterlimit="10"
78+
strokeLinecap="round"
79+
/>
80+
<path
81+
d="M9.47844 61.3359C7.6453 62.124 6.29757 62.9521 4.94413 64.4169C4.8185 64.5511 4.47872 64.948 4.43017 65.0022C0.472654 69.822 1.39207 77.2631 6.8715 80.8666C6.90005 80.8865 6.93146 80.9065 6.96287 80.9265C12.3195 84.4814 20.2031 85.4323 28.0011 85.9577C35.2023 86.4431 43.6171 86.1204 50.6555 84.9069C55.5553 84.0617 59.5556 82.6426 60.3637 80.1327C62.6908 72.9201 45.3274 70.3246 43.3943 70.0933C37.1183 69.3424 30.4339 69.1396 20.4744 71.5952C17.5248 72.3233 11.3687 73.4997 11.0375 70.7929C10.9661 70.2132 11.5543 69.4623 11.9426 69.0254"
82+
fill="#BACAB2"
83+
/>
84+
<path
85+
d="M9.47844 61.3359C7.6453 62.124 6.29757 62.9521 4.94413 64.4169C4.8185 64.5511 4.47872 64.948 4.43017 65.0022C0.472654 69.822 1.39207 77.2631 6.8715 80.8666C6.90005 80.8865 6.93146 80.9065 6.96287 80.9265C12.3195 84.4814 20.2031 85.4323 28.0011 85.9577C35.2023 86.4431 43.6171 86.1204 50.6555 84.9069C55.5553 84.0617 59.5556 82.6426 60.3637 80.1327C62.6908 72.9201 45.3274 70.3246 43.3943 70.0933C37.1183 69.3424 30.4339 69.1396 20.4744 71.5952C17.5248 72.3233 11.3687 73.4997 11.0375 70.7929C10.9661 70.2132 11.5543 69.4623 11.9426 69.0254"
86+
stroke="#1F584F"
87+
strokeWidth="2.85535"
88+
strokeMiterlimit="10"
89+
strokeLinecap="round"
90+
/>
91+
<path
92+
d="M77.6162 19.8506L77.7761 19.1482C77.9417 18.5057 77.9988 18.1916 77.9874 17.4492"
93+
stroke="#1F584F"
94+
strokeWidth="2.28428"
95+
strokeMiterlimit="10"
96+
strokeLinecap="round"
97+
/>
98+
<path
99+
d="M75.9824 19.5365L76.2594 18.8598C76.425 18.2173 76.4279 18.6028 76.4193 17.8633"
100+
stroke="#1F584F"
101+
strokeWidth="2.28428"
102+
strokeMiterlimit="10"
103+
strokeLinecap="round"
104+
/>
105+
<path
106+
d="M6.54883 64.668L27.4015 85.7319"
107+
stroke="#1F584F"
108+
strokeWidth="0.999374"
109+
strokeMiterlimit="10"
110+
strokeLinecap="round"
111+
/>
112+
<path
113+
d="M21.8047 71.2412L35.9558 86.0691"
114+
stroke="#1F584F"
115+
strokeWidth="0.999374"
116+
strokeMiterlimit="10"
117+
strokeLinecap="round"
118+
/>
119+
<path
120+
d="M28.8408 69.5513L44.1712 85.961"
121+
stroke="#1F584F"
122+
strokeWidth="0.999374"
123+
strokeMiterlimit="10"
124+
strokeLinecap="round"
125+
/>
126+
<path
127+
d="M37.1748 69.4194L51.463 84.4243"
128+
stroke="#1F584F"
129+
strokeWidth="0.999374"
130+
strokeMiterlimit="10"
131+
strokeLinecap="round"
132+
/>
133+
<path
134+
d="M47.0176 70.4673L57.4767 81.4518"
135+
stroke="#1F584F"
136+
strokeWidth="0.999374"
137+
strokeMiterlimit="10"
138+
strokeLinecap="round"
139+
/>
140+
<path
141+
d="M2.52246 67.3921L19.1292 85.2095"
142+
stroke="#1F584F"
143+
strokeWidth="0.999374"
144+
strokeMiterlimit="10"
145+
strokeLinecap="round"
146+
/>
147+
<path
148+
d="M16.9453 84.7839L30.6053 69.8447"
149+
stroke="#1F584F"
150+
strokeWidth="0.999374"
151+
strokeMiterlimit="10"
152+
strokeLinecap="round"
153+
/>
154+
<path
155+
d="M24.46 85.8635L38.0914 70.042"
156+
stroke="#1F584F"
157+
strokeWidth="0.999374"
158+
strokeMiterlimit="10"
159+
strokeLinecap="round"
160+
/>
161+
<path
162+
d="M31.9473 86.4831L45.8728 70.5303"
163+
stroke="#1F584F"
164+
strokeWidth="0.999374"
165+
strokeMiterlimit="10"
166+
strokeLinecap="round"
167+
/>
168+
<path
169+
d="M41.1123 86.2748L53.8814 71.9038"
170+
stroke="#1F584F"
171+
strokeWidth="0.999374"
172+
strokeMiterlimit="10"
173+
strokeLinecap="round"
174+
/>
175+
<path
176+
d="M49.7734 85.3072L58.5565 75.2734"
177+
stroke="#1F584F"
178+
strokeWidth="0.999374"
179+
strokeMiterlimit="10"
180+
strokeLinecap="round"
181+
/>
182+
<path
183+
d="M10.1729 83.3767L21.0032 71.5869"
184+
stroke="#1F584F"
185+
strokeWidth="0.999374"
186+
strokeMiterlimit="10"
187+
strokeLinecap="round"
188+
/>
189+
<path
190+
d="M5.06152 78.8364L13.5733 69.9448"
191+
stroke="#1F584F"
192+
strokeWidth="0.999374"
193+
strokeMiterlimit="10"
194+
strokeLinecap="round"
195+
/>
196+
<path
197+
d="M2.71973 72.8859L10.4663 64.5283"
198+
stroke="#1F584F"
199+
strokeWidth="0.999374"
200+
strokeMiterlimit="10"
201+
strokeLinecap="round"
202+
/>
203+
<path
204+
d="M53.514 29.1478C53.6025 27.6488 54.4363 26.3753 55.627 25.6814C55.5184 25.6043 55.4099 25.5301 55.2929 25.4644L52.9486 24.1081C50.453 22.6662 47.2922 24.1909 46.8639 27.0406L46.5755 28.9765C46.1529 31.809 48.697 34.1847 51.4953 33.5679L54.1307 32.9883C54.442 32.9197 54.7361 32.8141 55.0159 32.6799C54.0308 31.8404 53.434 30.5555 53.5168 29.1478H53.514Z"
205+
fill="#1F584F"
206+
/>
207+
<path
208+
d="M68.8409 29.8561L68.7153 27.9031C68.5297 25.0449 65.5373 23.2631 62.936 24.4567L60.4833 25.5817C60.3263 25.6531 60.1749 25.7359 60.0293 25.8272C61.2285 26.641 61.9881 28.063 61.8939 29.6391C61.8168 30.9669 61.1543 32.1176 60.1778 32.8457C60.4148 32.9799 60.6689 33.0941 60.9373 33.1826L63.5157 34.0107C66.2597 34.893 69.0265 32.7315 68.8409 29.859V29.8561Z"
209+
fill="#1F584F"
210+
/>
211+
<path
212+
d="M61.2921 29.6042C61.41 27.5891 59.904 25.8618 57.9283 25.7462C55.9526 25.6305 54.2554 27.1703 54.1374 29.1854C54.0194 31.2004 55.5255 32.9277 57.5012 33.0434C59.4769 33.159 61.1741 31.6192 61.2921 29.6042Z"
213+
fill="#1F584F"
214+
/>
215+
</svg>
216+
);
217+
}

0 commit comments

Comments
 (0)