Styling details (#131)

* Page container max width * Color snackbar to white * Align avatar and name/date on posts * Terms and policies * Moving max-width container to child to let handling scrollable event --------- Co-authored-by: Theo Auffeuvre <[email protected]>
BesLogic · May 2, 2024 · f04effa · f04effa
1 parent d8f653a
commit f04effa
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 52 deletions.
diff --git a/canopeum_frontend/src/assets/styles/GlobalStyles.scss b/canopeum_frontend/src/assets/styles/GlobalStyles.scss
@@ -58,6 +58,8 @@ body {
 
 .page-container {
   padding: 1rem 1rem;
+  max-width: 90em;
+  margin: 0 auto;
 }
 
 @media screen and (min-width: $medium-width) {

diff --git a/canopeum_frontend/src/components/context/SnackbarContext.tsx b/canopeum_frontend/src/components/context/SnackbarContext.tsx
@@ -93,6 +93,7 @@ const SnackbarContextProvider: FunctionComponent<{ readonly children?: ReactNode
             severity={snackbarAlertOptions?.severity ?? DEFAULT_SNACKBAR_ALERT_OPTIONS.severity}
             sx={{ width: '100%', boxShadow: 3 }}
             variant='filled'
+            style={{ color: 'white' }}
           >
             {messageInfo?.message}
           </Alert>

diff --git a/canopeum_frontend/src/components/settings/TermsAndPolicies.tsx b/canopeum_frontend/src/components/settings/TermsAndPolicies.tsx
@@ -0,0 +1,20 @@
+import { useTranslation } from 'react-i18next'
+
+const TermsAndPolicies = () => {
+  const { t: translate } = useTranslation()
+
+  return (
+    <div className='d-flex flex-column h-100'>
+      <h2 className='text-light'>{translate('settings.terms-and-policies.title')}</h2>
+      <div className='bg-white rounded-2 mt-4 px-4 py-3 flex-grow-1 row m-0 justify-content-center'>
+        <p>
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, rem architecto?
+          Reiciendis iusto debitis aspernatur sit. Quisquam, nihil quaerat natus cupiditate ea
+          officia numquam, reiciendis ex nobis obcaecati commodi ut?
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default TermsAndPolicies
diff --git a/canopeum_frontend/src/components/social/PostWidget.tsx b/canopeum_frontend/src/components/social/PostWidget.tsx
@@ -42,7 +42,7 @@ const PostWidget = ({ post }: Props) => {
   return (
     <div className='card'>
       <div className='card-body rounded-2 d-flex flex-column gap-3'>
-        <div className='d-flex justify-content-start gap-2'>
+        <div className='d-flex justify-content-start align-items-center gap-2'>
           <img
             alt='site'
             className='rounded-circle'

diff --git a/canopeum_frontend/src/locale/en/settings.json b/canopeum_frontend/src/locale/en/settings.json
@@ -22,5 +22,8 @@
     "assign-to-label": "Assign to",
     "generate-link-error": "There was a problem while trying to generate the link.",
     "copy-link-message": "Please copy and share this link with the owner of the following email address:"
+  },
+  "terms-and-policies": {
+    "title": "Terms & Policies"
   }
 }
diff --git a/canopeum_frontend/src/locale/fr/settings.json b/canopeum_frontend/src/locale/fr/settings.json
@@ -22,5 +22,8 @@
     "assign-to-label": "Assigner à",
     "generate-link-error": "Une erreur est survenue en essayant de générer le lien.",
     "copy-link-message": "Veuillez copier et partager ce lien avec le propriétaire de l'adresse courriel suivante:"
+  },
+  "terms-and-policies": {
+    "title": "Conditions & Politiques"
   }
 }
diff --git a/canopeum_frontend/src/pages/Home.tsx b/canopeum_frontend/src/pages/Home.tsx
@@ -58,25 +58,27 @@ const Home = () => {
 
   return (
     <div
-      className='page-container h-100 overflow-y-auto'
+      className='h-100 overflow-y-auto'
       onScroll={() => onScroll(listInnerRef)}
       ref={listInnerRef}
     >
-      <div className='mb-4'>
-        <h1 className='text-light'>
-          {translate('home.title', { username: currentUser.username })}
-        </h1>
+      <div className='page-container h-100'>
+        <div className='mb-4'>
+          <h1 className='text-light'>
+            {translate('home.title', { username: currentUser.username })}
+          </h1>
 
-        <h6 className='text-light'>{translate('home.subtitle')}</h6>
-      </div>
+          <h6 className='text-light'>{translate('home.subtitle')}</h6>
+        </div>
 
-      {renderPosts()}
+        {renderPosts()}
 
-      {isLoadingMore && (
-        <div className='w-100 d-flex justify-content-center align-items-center pt-4 pb-2'>
-          <CircularProgress color='secondary' size={50} thickness={5} />
-        </div>
-      )}
+        {isLoadingMore && (
+          <div className='w-100 d-flex justify-content-center align-items-center pt-4 pb-2'>
+            <CircularProgress color='secondary' size={50} thickness={5} />
+          </div>
+        )}
+      </div>
     </div>
   )
 }

diff --git a/canopeum_frontend/src/pages/SiteSocialPage.tsx b/canopeum_frontend/src/pages/SiteSocialPage.tsx
@@ -86,48 +86,50 @@ const SiteSocialPage = () => {
 
   return (
     <div
-      className='page-container h-100 overflow-y-auto d-flex flex-column gap-4'
+      className='h-100 overflow-y-auto'
       onScroll={() => onScroll(scrollableContainerRef)}
       ref={scrollableContainerRef}
     >
-      <SiteSocialHeader site={site} viewMode={viewMode} />
+      <div className='page-container d-flex flex-column gap-4'>
+        <SiteSocialHeader site={site} viewMode={viewMode} />
 
-      <div className='row row-gap-3 m-0'>
-        <div className='col-12 col-md-6 col-lg-5 col-xl-4'>
-          <div className='d-flex flex-column gap-4'>
-            <AnnouncementCard announcement={site.announcement} viewMode={viewMode} />
-            <ContactCard contact={site.contact} viewMode={viewMode} />
+        <div className='row row-gap-3 m-0'>
+          <div className='col-12 col-md-6 col-lg-5 col-xl-4'>
+            <div className='d-flex flex-column gap-4'>
+              <AnnouncementCard announcement={site.announcement} viewMode={viewMode} />
+              <ContactCard contact={site.contact} viewMode={viewMode} />
+            </div>
           </div>
-        </div>
 
-        <div className='col-12 col-md-6 col-lg-7 col-xl-8'>
-          <div className='rounded-2 d-flex flex-column gap-4'>
-            {viewMode === 'admin' && <CreatePostWidget addNewPost={addNewPost} siteId={siteId} />}
-            <div className='d-flex flex-column gap-4'>
-              {isLoadingFirstPage
-                ? (
-                  <div className='card'>
-                    <div className='card-body'>
-                      <LoadingPage />
+          <div className='col-12 col-md-6 col-lg-7 col-xl-8'>
+            <div className='rounded-2 d-flex flex-column gap-4'>
+              {viewMode === 'admin' && <CreatePostWidget addNewPost={addNewPost} siteId={siteId} />}
+              <div className='d-flex flex-column gap-4'>
+                {isLoadingFirstPage
+                  ? (
+                    <div className='card'>
+                      <div className='card-body'>
+                        <LoadingPage />
+                      </div>
                     </div>
-                  </div>
-                )
-                : loadingError
-                ? (
-                  <div className='card'>
-                    <div className='card-body'>
-                      <span>{loadingError}</span>
+                  )
+                  : loadingError
+                  ? (
+                    <div className='card'>
+                      <div className='card-body'>
+                        <span>{loadingError}</span>
+                      </div>
                     </div>
-                  </div>
-                )
-                : sitePosts.map(post => <PostWidget key={post.id} post={post} />)}
-            </div>
-
-            {isLoadingMore && (
-              <div className='w-100 d-flex justify-content-center align-items-center py-2'>
-                <CircularProgress color='secondary' size={50} thickness={5} />
+                  )
+                  : sitePosts.map(post => <PostWidget key={post.id} post={post} />)}
               </div>
-            )}
+
+              {isLoadingMore && (
+                <div className='w-100 d-flex justify-content-center align-items-center py-2'>
+                  <CircularProgress color='secondary' size={50} thickness={5} />
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>

diff --git a/canopeum_frontend/src/pages/UserManagement.tsx b/canopeum_frontend/src/pages/UserManagement.tsx
@@ -4,6 +4,7 @@ import { AuthenticationContext } from '@components/context/AuthenticationContext
 import EditProfile from '@components/settings/EditProfile'
 import ManageAdmins from '@components/settings/ManageAdmins'
 import SettingsTab from '@components/settings/SettingsTab'
+import TermsAndPolicies from '@components/settings/TermsAndPolicies'
 import type { RoleEnum } from '@services/api'
 import { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -37,11 +38,7 @@ const UserManagement = () => {
 
   const displayTabContent = () => {
     if (selectedTab === 'termsAndPolicies') {
-      return (
-        <div>
-          <h1>Terms And Policies</h1>
-        </div>
-      )
+      return <TermsAndPolicies />
     }
 
     if (selectedTab === 'manageAdmins' && currentUser?.role === 'MegaAdmin') {