shelter: show icon in header and footer

BetterAngelsLA · Dec 21, 2024 · f983a4e · f983a4e
1 parent 48777b0
commit f983a4e
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 2 deletions.
diff --git a/apps/shelter-web/src/app/layout/footer.tsx b/apps/shelter-web/src/app/layout/footer.tsx
@@ -1,3 +1,4 @@
+import { BetterangelsLogoIcon } 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">
+        <BetterangelsLogoIcon className="h-8 text-brand-yellow" />
+        <div className="text-white flex ml-2 text-sm">
+          <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>

diff --git a/apps/shelter-web/src/app/layout/header.tsx b/apps/shelter-web/src/app/layout/header.tsx
@@ -1,3 +1,4 @@
+import { BetterangelsLogoIcon } 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">
+        <BetterangelsLogoIcon className="h-4 text-brand-yellow" />
+        <div className="text-white flex ml-2 text-sm">
+          <div className="font-normal">Shelters</div>
+          <div className="font-semibold">LA</div>
+        </div>
+      </div>
+    </header>
+  );
 }
diff --git a/apps/shelter-web/src/assets/styles/global.css b/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;

diff --git a/apps/shelter-web/tailwind.config.js b/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)',

diff --git a/libs/assets/src/icons/svg/better_angels/betterAngelsLogo.svg b/libs/assets/src/icons/svg/better_angels/betterAngelsLogo.svg
diff --git a/libs/react/icons/src/lib/components/betterangelsLogo.tsx b/libs/react/icons/src/lib/components/betterangelsLogo.tsx
@@ -0,0 +1,4 @@
+import svg from '../../../../../assets/src/icons/svg/better_angels/betterAngelsLogo.svg';
+import { createSvgComponent } from '../../toComponent';
+
+export default createSvgComponent(svg);
diff --git a/libs/react/icons/src/lib/index.ts b/libs/react/icons/src/lib/index.ts
@@ -1,3 +1,4 @@
+export { default as BetterangelsLogoIcon } from './components/betterangelsLogo';
 export { default as CloseIcon } from './components/closeIcon';
 export { default as FilterIcon } from './components/filterIcon';
 export { default as FindMeIcon } from './components/findMeIcon';