fix(app): fix bugs, remove some blemishes in the design

src/components/table/TableHead.tsx

@@ -42,7 +42,7 @@ const TableHead = (props: EnhancedTableProps) => {
             sortDirection={orderBy === headCell.id ? order : false}
             sx={{
               backgroundColor: 'var(--accent-100)',
-              borderColor: 'var(--accent-200)',
+              borderColor: 'rgba(224, 224, 224, 1);',
               ...headCell.sx,
             }}
           >

src/features/app_start/vip/congregation_create/congregation_access_code/index.tsx

@@ -71,7 +71,7 @@ const CongregationAccessCode = () => {
           }}
         >
           <IconError color="var(--orange-dark)" />
-          <Typography className="body-regular" color="var(--orange-dark)">
+          <Typography className="body-small-regular" color="var(--orange-dark)">
             {t('tr_congregationAccessCodeNotice')}
           </Typography>
         </Box>

src/features/app_start/vip/congregation_create/congregation_master_key/index.tsx

@@ -70,7 +70,7 @@ const CongregationMasterKey = () => {
           }}
         >
           <IconError color="var(--red-main)" />
-          <Typography className="body-regular" color="var(--red-main)">
+          <Typography className="body-small-regular" color="var(--red-main)">
             {t('tr_encryptionCodeNotice')}
           </Typography>
         </Box>

src/features/congregation/settings/congregation_basic/index.tsx

@@ -33,7 +33,11 @@ const CongregationBasic = () => {
   } = useCongregationBasic();
 
   return (
-    <CardSection>
+    <CardSection
+      sx={{
+        marginTop: '16px',
+      }}
+    >
       <Box
         sx={{
           display: 'flex',

src/features/congregation/settings/meeting_forms/index.tsx

@@ -1,5 +1,9 @@
 import { Stack } from '@mui/material';
-import { useAppTranslation, useCurrentUser } from '@hooks/index';
+import {
+  useAppTranslation,
+  useBreakpoints,
+  useCurrentUser,
+} from '@hooks/index';
 import {
   CardSection,
   CardSectionContent,
@@ -22,6 +26,8 @@ const MeetingForms = () => {
   const { isMidweekEditor, isWeekendEditor, isPublicTalkCoordinator } =
     useCurrentUser();
 
+  const { laptopDown } = useBreakpoints();
+
   const {
     sourceAutoUpdate,
     handleSourceAutoUpdateToggle,
@@ -30,7 +36,11 @@ const MeetingForms = () => {
   } = useMeetingForms();
 
   return (
-    <CardSection>
+    <CardSection
+      sx={{
+        marginTop: laptopDown ? '0' : '16px',
+      }}
+    >
       <CardSectionHeader title={t('tr_meetinMaterialsTitle')} />
 
       <CardSectionContent marginTop="-8px !important">

src/features/congregation/settings/shared_styles/index.tsx

@@ -6,7 +6,6 @@ import Typography from '@components/typography';
 import Divider from '@components/divider';
 
 export const CardSection = styled(Box)({
-  marginTop: '16px',
   backgroundColor: 'var(--white)',
   padding: '15px',
   border: '1px solid var(--accent-300)',

src/features/meeting_materials/public_talks/index.tsx

@@ -6,7 +6,7 @@ import TalksTableView from './tableView';
 import Typography from '@components/typography';
 import usePublicTalks from './usePublicTalks';
 import { useAppTranslation, useBreakpoints } from '@hooks/index';
-import { IconCollapse, IconExpand, IconExport } from '@components/icons';
+import { IconCollapse, IconExpand } from '@components/icons';
 import { PublicTalksType } from './index.types';
 
 const PublicTalks = ({ view }: PublicTalksType) => {
@@ -88,17 +88,6 @@ const PublicTalks = ({ view }: PublicTalksType) => {
             {isExpandAll ? t('tr_collapseAll') : t('tr_expandAll')}
           </Button>
         )}
-
-        {view === 'table' && laptopUp && (
-          <Button
-            variant="tertiary"
-            startIcon={
-              <IconExport height={22} width={22} color="var(--accent-dark)" />
-            }
-          >
-            {t('tr_exportS99')}
-          </Button>
-        )}
       </Box>
 
       {view === 'list' && (

src/features/meetings/schedule_publish/month_item/index.tsx

@@ -23,7 +23,13 @@ const MonthItem = ({ data, onChange }: MonthItemProps) => {
       />
 
       {data.published && (
-        <Box title={t('tr_published')}>
+        <Box
+          title={t('tr_published')}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
           <IconPublishedSchedule color="var(--accent-main)" />
         </Box>
       )}

src/features/persons/speakers_catalog/my_congregation/header/index.tsx

@@ -25,6 +25,7 @@ const OutgoingSpeakersHeader = ({
   const {
     congName,
     congNumber,
+    circuitNumber,
     handleCloseAccess,
     handleOpenAccess,
     openAccess,
@@ -69,6 +70,17 @@ const OutgoingSpeakersHeader = ({
           >
             {congNumber}
           </Typography>
+          <Typography
+            className="body-small-semibold"
+            color="var(--grey-400)"
+            sx={{
+              borderRadius: 'var(--radius-s)',
+              padding: '2px 8px',
+              backgroundColor: 'var(--grey-150)',
+            }}
+          >
+            {t('tr_circuit', { circuitNumber: circuitNumber })}
+          </Typography>
         </Box>
       </Box>
 

src/features/persons/speakers_catalog/my_congregation/header/useHeader.tsx

@@ -1,12 +1,17 @@
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { congNameState, congNumberState } from '@states/settings';
+import {
+  circuitNumberState,
+  congNameState,
+  congNumberState,
+} from '@states/settings';
 import { congAccountConnectedState } from '@states/app';
 
 const useHeader = () => {
   const congName = useRecoilValue(congNameState);
   const congNumber = useRecoilValue(congNumberState);
   const congAccountConnected = useRecoilValue(congAccountConnectedState);
+  const circuitNumber = useRecoilValue(circuitNumberState);
 
   const [openAccess, setOpenAccess] = useState(false);
 
@@ -17,6 +22,7 @@ const useHeader = () => {
   return {
     congName,
     congNumber,
+    circuitNumber,
     handleOpenAccess,
     handleCloseAccess,
     openAccess,

src/layouts/navbar/index.tsx

@@ -154,7 +154,7 @@ const NavBar = ({ isSupported }: NavBarType) => {
                   edge="start"
                   disableRipple
                   sx={{
-                    padding: '2px 8px',
+                    padding: tabletDown ? 'none' : '2px 8px',
                     marginLeft: '0px',
                     borderRadius: '8px',
                     '&:hover': {

src/locales/en/general.json

@@ -133,5 +133,6 @@
   "tr_noNotificationsDesc": "Important notifications will be displayed here.",
   "tr_userRoleChanged": "Access changed",
   "tr_userRoleChangedDesc": "Your access in Organized has been changed recently. Log in to your account again for the changes to take effect.",
-  "tr_appliesOnlyToBrothers": "Applies only to brothers"
+  "tr_appliesOnlyToBrothers": "Applies only to brothers",
+  "tr_circuit": "Circuit: {{ circuitNumber }}"
 }

src/pages/meeting_materials/public_talks_list/index.tsx

@@ -1,13 +1,14 @@
 import { Box } from '@mui/material';
-import { IconListView, IconSpreadsheet } from '@components/icons';
+import { IconExport, IconListView, IconSpreadsheet } from '@components/icons';
 import Button from '@components/button';
 import PageTitle from '@components/page_title';
 import usePublicTalksList from './usePublicTalksList';
-import { useAppTranslation } from '@hooks/index';
+import { useAppTranslation, useBreakpoints } from '@hooks/index';
 import { PublicTalks } from '@features/index';
 
 const PublicTalksList = () => {
   const { t } = useAppTranslation();
+  const { laptopUp } = useBreakpoints();
 
   const { currentView, handleToggleView } = usePublicTalksList();
 
@@ -16,27 +17,43 @@ const PublicTalksList = () => {
       <PageTitle
         title={t('tr_publicTalksList')}
         buttons={
-          <Button
-            variant="secondary"
-            startIcon={
-              currentView === 'list' ? (
-                <IconSpreadsheet
-                  height={22}
-                  width={22}
-                  color="var(--accent-main)"
-                />
-              ) : (
-                <IconListView
-                  height={22}
-                  width={22}
-                  color="var(--accent-main)"
-                />
-              )
-            }
-            onClick={handleToggleView}
-          >
-            {currentView === 'list' ? t('tr_tableView') : t('tr_listView')}
-          </Button>
+          <>
+            <Button
+              variant="secondary"
+              startIcon={
+                currentView === 'list' ? (
+                  <IconSpreadsheet
+                    height={22}
+                    width={22}
+                    color="var(--accent-main)"
+                  />
+                ) : (
+                  <IconListView
+                    height={22}
+                    width={22}
+                    color="var(--accent-main)"
+                  />
+                )
+              }
+              onClick={handleToggleView}
+            >
+              {currentView === 'list' ? t('tr_tableView') : t('tr_listView')}
+            </Button>
+            {currentView === 'table' && laptopUp && (
+              <Button
+                variant="main"
+                startIcon={
+                  <IconExport
+                    height={22}
+                    width={22}
+                    color="var(--accent-dark)"
+                  />
+                }
+              >
+                {t('tr_exportS99')}
+              </Button>
+            )}
+          </>
         }
       />