Refactoring

canopeum_frontend/src/assets/styles/theme-variables.scss

@@ -65,15 +65,16 @@ $colors: (
   cream: $cream
 );
 $theme-color-interval: 8%;
+$table-bg-scale: -80%;
 $table-variants: (
   "primary": shift-color(map-get($theme-colors, primary), $table-bg-scale),
-  "secondary": shift-color($secondary, $table-bg-scale),
-  "success": shift-color($success, $table-bg-scale),
-  "info": shift-color($info, $table-bg-scale),
-  "warning": shift-color($warning, $table-bg-scale),
-  "danger": shift-color($danger, $table-bg-scale),
-  "light": $light,
-  "dark": $dark,
+  "secondary": shift-color(map-get($theme-colors, secondary), $table-bg-scale),
+  "success": shift-color(map-get($theme-colors, success), $table-bg-scale),
+  "info": shift-color(map-get($theme-colors, info), $table-bg-scale),
+  "warning": shift-color(map-get($theme-colors, warning), $table-bg-scale),
+  "danger": shift-color(map-get($theme-colors, danger), $table-bg-scale),
+  "light": map-get($theme-colors, light),
+  "dark": map-get($theme-colors, dark),
 );
 
 // Spacing

canopeum_frontend/src/components/AnnouncementCard.tsx

@@ -0,0 +1,19 @@
+import { Link } from 'react-router-dom'
+import type { Announcement } from '../services/api'
+
+const AnnouncementCard = ({ announcement }: { readonly announcement: Announcement }) => (
+  <div className='card rounded px-3 py-2'>
+    <div className='card-body'>
+      <div className='d-flex justify-content-between align-items-center'>
+        <h2 className='card-title'>Announcement</h2>
+        <span className='material-symbols-outlined text-primary fs-2'>edit_square</span>
+      </div>
+      <p className='card-text text-justify'>
+        {announcement.body}
+      </p>
+      {announcement.link && <Link className='card-text' to={announcement.link}>{announcement.link}</Link>}
+    </div>
+  </div>
+)
+
+export default AnnouncementCard

canopeum_frontend/src/components/ContactCard.tsx

@@ -0,0 +1,63 @@
+import facebookLogo from '@assets/icons/facebook-contact-logo.svg'
+import instagramLogo from '@assets/icons/instagram-contact-logo.svg'
+import linkedinLogo from '@assets/icons/linkedin-contact-logo.svg'
+import xLogo from '@assets/icons/x-contact-logo.svg'
+import { Link } from 'react-router-dom'
+import type { Contact } from '@services/api'
+
+const ContactCard = ({ contact }: { readonly contact: Contact }) => {
+  const renderContactCard = () => (
+    <div className='card rounded px-3 py-2'>
+      <div className='card-body'>
+        <div className='d-flex justify-content-between align-items-center pb-3'>
+          <h2 className='card-title'>Contact</h2>
+          <span className='material-symbols-outlined text-primary fs-2'>edit_square</span>
+        </div>
+        <div className='info-section d-flex flex-column'>
+          <div className='card-text adress d-flex align-items-center pb-3 gap-2'>
+            <span className='material-symbols-outlined fs-4'>home_work</span>
+            <p className='mb-0'>{contact.address}</p>
+          </div>
+          <div className='email d-flex align-items-center pb-3 gap-2'>
+            <span className='material-symbols-outlined fs-4'>mail</span>
+            <p className='mb-0'>{contact.email}</p>
+          </div>
+          <div className='phone d-flex align-items-center pb-3 gap-2'>
+            <span className='material-symbols-outlined fs-4'>perm_phone_msg</span>
+            <p className='mb-0'>{contact.phone}</p>
+          </div>
+        </div>
+        <div className='social-icons d-flex flex-row-reverse pt-3'>
+          {contact.linkedInLink && (
+            <Link target='_blank' to={contact.linkedInLink}>
+              <img alt='linkedin-logo' className='px-2' src={linkedinLogo} />
+            </Link>
+          )}
+          {contact.instagramLink && (
+            <Link target='_blank' to={contact.instagramLink}>
+              <img alt='instagram-logo' className='px-2' src={instagramLogo} />
+            </Link>
+          )}
+          {contact.xLink && (
+            <Link target='_blank' to={contact.xLink}>
+              <img alt='x-logo' className='px-2' src={xLogo} />
+            </Link>
+          )}
+          {contact.facebookLink && (
+            <Link target='_blank' to={contact.facebookLink}>
+              <img alt='facebook-logo' className='px-2' src={facebookLogo} />
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+
+  return (
+    <div>
+      {renderContactCard()}
+    </div>
+  )
+}
+
+export default ContactCard

canopeum_frontend/src/components/CreatePostWidget.tsx

@@ -16,11 +16,9 @@
       </div>
       <div className='position-relative'>
         <div className='position-absolute top-0 left-0 m-3 d-flex gap-3 fs-3'>
-          <span className='material-symbols-outlined'>mood</span>
           <span className='material-symbols-outlined'>add_a_photo</span>
-          <span className='material-symbols-outlined'>smart_display</span>
         </div>
         <textarea className='form-control pt-5' id='exampleFormControlTextarea1' placeholder='Post a New Message...'>
         </textarea>
       </div>
     </div>

canopeum_frontend/src/components/site/SiteSummaryCard.tsx

@@ -1,8 +1,9 @@
 import headerLogo from '@assets/images/map/MARR4059.png'
+import { LanguageContext } from '@components/context/LanguageContext'
 import ToggleSwitch from '@components/inputs/ToggleSwitch'
 import PrimaryIconBadge from '@components/PrimaryIconBadge'
 import type { SiteSocial } from '@services/api'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
@@ -11,24 +12,27 @@
 }
 
 const onFollowClick = () => {
   // TODO implement follow here when backend is available
 }
 
 const updateSiteIsPublic = async (_: boolean) => {
   // TODO Implement site update when backend is ready
 }
 const SiteSummaryCard = ({ site, viewMode }: Props) => {
   const { t } = useTranslation()
+  const { translateValue } = useContext(LanguageContext)
   const [isPublic, setIsPublic] = useState(true)
 
   useEffect(() => void updateSiteIsPublic(isPublic), [isPublic])
 
   return (
-    <div className='card mb-3'>
+    <div className='card'>
       <div className='row g-0'>
-        <div className='col-md-4'>
+        <div
+          className='col-md-4'
+          style={{ backgroundImage: `url(${headerLogo})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
+        >
           {/* TODO: replace img source when backend offers an image endpoint */}
-          <img alt='header logo' className='img-fluid' src={headerLogo} />
         </div>
         <div className='col-md-8'>
           <div className='card-body'>
@@ -50,7 +54,7 @@
             </div>
             <div className='card-text d-flex flex-row gap-1'>
               <PrimaryIconBadge type='school' />
-              <h4 className='fw-bold text-primary'>{site.type.en}</h4>
+              <h4 className='fw-bold text-primary'>{translateValue(site.siteType)}</h4>
             </div>
             <p className='card-text'>{site.description ?? ''}</p>
             <div className='container fw-bold'>

canopeum_frontend/src/pages/MapSite.tsx

@@ -1,4 +1,4 @@
 import { AuthenticationContext } from '@components/context/AuthenticationContext'
 import SiteSummaryCard from '@components/site/SiteSummaryCard'
 import type { Post, SiteSocial } from '@services/api'
 import api from '@services/apiInterface'
@@ -7,22 +7,8 @@
 import { useParams } from 'react-router-dom'
 import CreatePostWidget from '../components/CreatePostWidget'
 import PostWidget from '../components/PostWidget'
-import AnnouncementCard from '../components/AnnouncementCard/AnnouncementCard';
-
-
-import ContactCard  from '../components/ContactCard/ContactCard';
-import SiteSummaryCard from '../components/site/SiteSummaryCard'
-import type { SiteSocial } from '../services/api'
-import api from '../services/apiInterface'
-
-const fetchSite = async (siteId: number, setSite: (site: SiteSocial) => void) => {
-  try {
-    const site = await api().social.site(siteId)
-    setSite(site)
-  } catch (error) {
-    console.error(error)
-  }
-}
+import AnnouncementCard from '../components/AnnouncementCard'
+import ContactCard from '../components/ContactCard'
 
 const MapSite = () => {
   const { siteId } = useParams()
@@ -53,7 +39,7 @@
   }, [siteId])
 
   return (
-    <div className='container mt-2 d-flex flex-column gap-2'>
+    <div className='container mt-2 d-flex flex-column gap-4' style={{ padding: '1rem 10rem' }}>
       {isLoadingSite
         ? (
           <div className='bg-white rounded-2 2 py-2'>
@@ -70,18 +56,18 @@
       <div className='container px-0'>
         <div className='row'>
           <div className='col-4'>
-            <div className='d-flex flex-column gap-2'>
-              { site?.announcement && <AnnouncementCard announcement={site.announcement} />}
-              { site?.contact && <ContactCard contact={site.contact} />}
+            <div className='d-flex flex-column gap-4'>
+              {site?.announcement && <AnnouncementCard announcement={site.announcement} />}
+              {site?.contact && <ContactCard contact={site.contact} />}
             </div>
           </div>
           <div className='col-8'>
-            <div className='rounded-2 d-flex flex-column gap-2'>
+            <div className='rounded-2 d-flex flex-column gap-4'>
               {site && (
                 <>
                   <CreatePostWidget site={site} />
-                  <div className='d-flex flex-column gap-2'>
+                  <div className='d-flex flex-column gap-4'>
                     {site.posts?.map((post: Post) => <PostWidget key={post.id} post={post} />)}
                   </div>
                 </>
               )}