shelter: show icon in header and footer

apps/shelter-web/src/app/layout/footer.tsx

@@ -1,3 +1,4 @@
+import { BaShelterLogoIcon } from '@monorepo/react/icons';
 import { ReactElement } from 'react';
 
 type IParams = {
@@ -19,7 +20,14 @@ export function Footer(props: IParams): ReactElement {
 
   return (
     <footer className={parentCss}>
-      <div className="border-t-[0.5px] border-white pt-6 flex justify-end">
+      <div className="flex items-center">
+        <BaShelterLogoIcon className="h-8" />
+        <div className="text-white flex ml-3 text-2xl">
+          <div className="font-normal">Shelters</div>
+          <div className="font-semibold">LA</div>
+        </div>
+      </div>
+      <div className="mt-6 border-t-[0.5px] border-white pt-6 flex justify-end">
         <div className="text-xs">
           © 2024 Better Angels Inc. All rights reserved.
         </div>

apps/shelter-web/src/app/layout/header.tsx

@@ -1,3 +1,4 @@
+import { BaShelterLogoIcon } from '@monorepo/react/icons';
 import { ReactElement } from 'react';
 
 type IParams = {
@@ -16,5 +17,15 @@ export function Header(props: IParams): ReactElement {
     'text-white',
   ].join(' ');
 
-  return <header className={parentCss}>hello shelter-app</header>;
+  return (
+    <header className={parentCss}>
+      <div className="flex items-center">
+        <BaShelterLogoIcon className="h-4" />
+        <div className="text-white flex ml-2 text-sm">
+          <div className="font-normal">Shelters</div>
+          <div className="font-semibold">LA</div>
+        </div>
+      </div>
+    </header>
+  );
 }

apps/shelter-web/src/assets/styles/global.css

@@ -4,6 +4,7 @@
 
 :root {
   --font-primary: 'Poppins', 'sans-serif';
+  --color-brand-yellow: #fff82e;
   --color-primary-20: #052b73;
   --color-primary-60: #216af8;
   --color-steel-blue: #375c76;

apps/shelter-web/tailwind.config.js

@@ -21,6 +21,7 @@ module.exports = {
         primary: ['Poppins', 'sans-serif'],
       },
       colors: {
+        'brand-yellow': 'var(--color-brand-yellow)',
         'primary-20': 'var(--color-primary-20)',
         'primary-60': 'var(--color-primary-60)',
         'steel-blue': 'var(--color-steel-blue)',

libs/react/icons/src/lib/components/baShelterLogoIcon.tsx

@@ -0,0 +1,10 @@
+import { SVGProps } from 'react';
+import BetterAngelsLogoIcon from './betterAngelsLogoIcon';
+
+interface IProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+export default function BaShelterLogo(props?: IProps) {
+  return <BetterAngelsLogoIcon fill="#fff82e" {...props} />;
+}

libs/react/icons/src/lib/components/betterAngelsLogoIcon.tsx

@@ -0,0 +1,4 @@
+import svg from '../../../../../assets/src/icons/svg/better_angels/betterAngelsLogo.svg';
+import { createSvgComponent } from '../../toComponent';
+
+export default createSvgComponent(svg);

libs/react/icons/src/lib/index.ts

@@ -1,3 +1,5 @@
+export { default as BaShelterLogoIcon } from './components/baShelterLogoIcon';
+export { default as BetterAngelsLogoIcon } from './components/betterAngelsLogoIcon';
 export { default as CloseIcon } from './components/closeIcon';
 export { default as FilterIcon } from './components/filterIcon';
 export { default as FindMeIcon } from './components/findMeIcon';