From 388ebbd93957dadaaf88d9c46741b554a847136c Mon Sep 17 00:00:00 2001
From: Meliora Ho <nho10@fordham.edu>
Date: Sat, 23 Mar 2024 16:53:13 +0000
Subject: [PATCH] Prettify the UI

---
 compass/components/resource/Callout.tsx          | 2 +-
 compass/components/resource/Card.tsx             | 2 +-
 compass/components/resource/LandingSearchBar.tsx | 2 +-
 compass/components/resource/Sidebar.tsx          | 6 +++---
 compass/components/resource/SidebarItem.tsx      | 2 ++
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/compass/components/resource/Callout.tsx b/compass/components/resource/Callout.tsx
index 5ccb360..c51f3f2 100644
--- a/compass/components/resource/Callout.tsx
+++ b/compass/components/resource/Callout.tsx
@@ -6,7 +6,7 @@ interface CalloutProps {
 
 const Callout = ({ children }: CalloutProps) => {
   return (
-    <div className="p-4 mb-4 flex items-center bg-purple-100 rounded-sm">
+    <div className="p-4 mb-4 flex items-center bg-purple-50 rounded-sm">
       <span className="text-sm text-gray-800">{children}</span>
     </div>
   );
diff --git a/compass/components/resource/Card.tsx b/compass/components/resource/Card.tsx
index 61cee1d..140542b 100644
--- a/compass/components/resource/Card.tsx
+++ b/compass/components/resource/Card.tsx
@@ -9,7 +9,7 @@ interface TagProps {
 const Card: React.FC<TagProps> = ({ text, icon }) => {
   return (
     <div className="flex flex-row space-x-2 items-start justify-start border border-gray-200 bg-white hover:bg-gray-50 shadow rounded-md p-4">
-      <span className="h-5 text-gray-800 w-5">
+      <span className="h-5 text-purple-700 w-5">
         {icon}
       </span>
       <span className="text-sm text-gray-800 font-semibold">{text}</span>
diff --git a/compass/components/resource/LandingSearchBar.tsx b/compass/components/resource/LandingSearchBar.tsx
index 9b6f35c..612ea77 100644
--- a/compass/components/resource/LandingSearchBar.tsx
+++ b/compass/components/resource/LandingSearchBar.tsx
@@ -38,7 +38,7 @@ export const LandingSearchBar: React.FC = () => {
       </div>
       <div className="flex flex-col pt-16 space-y-2 justify-center items-center">
         <Image alt="Landing illustration" src="/landing_illustration.png" width={250} height={250} />
-        <h2 className="font-medium text-medium text-gray-800">Need to find something? Use the links above or the search bar to get your results.</h2>
+        <h2 className="font-medium text-medium text-gray-800">Need to find something? Use the links or the search bar above to get your results.</h2>
       </div>
     </div>
   );
diff --git a/compass/components/resource/Sidebar.tsx b/compass/components/resource/Sidebar.tsx
index 9a4d0b7..8bfcec6 100644
--- a/compass/components/resource/Sidebar.tsx
+++ b/compass/components/resource/Sidebar.tsx
@@ -33,9 +33,9 @@ const Sidebar: React.FC<SidebarProps> = ({ setIsSidebarOpen }) => {
         <div className="flex flex-col space-y-2">
           <h4 className="text-xs font-semibold text-gray-500">Pages</h4>
           <nav className="flex flex-col">
-            <SidebarItem icon={<BookmarkIcon className="w-4 h-4 text-gray-500" />} text="Resources" />
-            <SidebarItem icon={<ClipboardIcon className="w-4 h-4 text-gray-500" />} text="Services" />
-            <SidebarItem icon={<BookOpenIcon className="w-4 h-4 text-gray-500" />} text="Training Manuals" />
+            <SidebarItem icon={<BookmarkIcon  />} text="Resources" />
+            <SidebarItem icon={<ClipboardIcon />} text="Services" />
+            <SidebarItem icon={<BookOpenIcon  />} text="Training Manuals" />
           </nav>
         </div>
       </div>
diff --git a/compass/components/resource/SidebarItem.tsx b/compass/components/resource/SidebarItem.tsx
index 52220c5..db7a4db 100644
--- a/compass/components/resource/SidebarItem.tsx
+++ b/compass/components/resource/SidebarItem.tsx
@@ -7,7 +7,9 @@ interface SidebarItemProps {
 export const SidebarItem: React.FC<SidebarItemProps> = ({ icon, text }) => {
   return (
     <a href="#" className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md">
+      <span className="h-5 text-gray-500 w-5">
       {icon}
+      </span>
       <span className="flex-grow font-medium text-xs text-gray-500">{text}</span>
     </a>
   );