tweak(styles): refine meeting schedule layout and interactivity

Author: ux-git

src/components/scrollable_tabs/index.tsx

@@ -94,7 +94,14 @@ function ScrollableTabs({
                 background: 'var(--accent-150)',
                 borderRadius: 'var(--radius-max)',
               },
-              '& button:not(.Mui-selected)': { color: 'var(--grey-350)' },
+              '& .MuiTab-root:not(.Mui-selected)': {
+                color: 'var(--grey-350)',
+                '&:hover': {
+                  background:
+                    'color-mix(in srgb, var(--accent-150) 38%, transparent)',
+                  borderRadius: 'var(--radius-max)',
+                },
+              },
               // Programatically changing color of ripple (wave) when click happens:
               '& span.MuiTouchRipple-rippleVisible': {
                 color: 'var(--accent-main)',
@@ -114,6 +121,9 @@ function ScrollableTabs({
               },
               alignItems: 'center',
               minHeight,
+              [`& .${tabsClasses.flexContainer}`]: {
+                gap: '4px',
+              },
               ...sx,
             }}
           >

src/features/meetings/weekly_schedules/midweek_meeting/index.tsx

@@ -30,7 +30,7 @@ import { MidweekMeetingProps } from './index.types';
 const MidweekMeeting = (props: MidweekMeetingProps) => {
   const { t } = useAppTranslation();
 
-  const { laptopUp, desktopUp } = useBreakpoints();
+  const { laptopUp, tabletUp } = useBreakpoints();
 
   const {
     week,
@@ -48,9 +48,9 @@ const MidweekMeeting = (props: MidweekMeetingProps) => {
         <PrimaryFieldContainer
           sx={{
             display: 'flex',
-            alignItems: desktopUp ? 'center' : 'unset',
-            gap: desktopUp ? '16px' : '4px',
-            flexDirection: desktopUp ? 'row' : 'column',
+            alignItems: tabletUp ? 'center' : 'unset',
+            gap: tabletUp ? '16px' : '4px',
+            flexDirection: tabletUp ? 'row' : 'column',
           }}
         >
           <WeekHeader week={week} dataView={props.dataView} />

src/features/meetings/weekly_schedules/part_timing/index.tsx

@@ -8,6 +8,7 @@ const PartTiming = ({ time }: PartTimingProps) => {
       color="grey"
       text={time}
       centerContent
+      className="label-small-medium"
       sx={{
         width: '45px',
         borderRadius: 'var(--radius-max)',

src/features/meetings/weekly_schedules/weekend_meeting/index.tsx

@@ -23,7 +23,7 @@ import WatchtowerStudy from './watchtower_study';
 const WeekendMeeting = (props: WeekendMeetingProps) => {
   const { t } = useAppTranslation();
 
-  const { laptopUp, desktopUp } = useBreakpoints();
+  const { laptopUp, tabletUp } = useBreakpoints();
 
   const {
     week,
@@ -42,9 +42,9 @@ const WeekendMeeting = (props: WeekendMeetingProps) => {
         <PrimaryFieldContainer
           sx={{
             display: 'flex',
-            alignItems: desktopUp ? 'center' : 'unset',
-            gap: desktopUp ? '16px' : '4px',
-            flexDirection: desktopUp ? 'row' : 'column',
+            alignItems: tabletUp ? 'center' : 'unset',
+            gap: tabletUp ? '16px' : '4px',
+            flexDirection: tabletUp ? 'row' : 'column',
           }}
         >
           <Typography className="h2">{weekDateLocale}</Typography>