fix(components): update tabs styles

sws2apps · Jan 12, 2025 · b549e7a · b549e7a
1 parent 2454da5
commit b549e7a
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 3 deletions.
diff --git a/src/components/scrollable_tabs/index.tsx b/src/components/scrollable_tabs/index.tsx
@@ -24,6 +24,7 @@ function ScrollableTabs({
   className,
   variant = 'scrollable',
   minHeight = '48px',
+  tabsCountOnScreen = 0,
   sx,
 }: CustomTabProps) {
   const { tabletDown } = useBreakpoints();
@@ -108,6 +109,10 @@ function ScrollableTabs({
                 iconPosition="end"
                 sx={{
                   minHeight,
+                  width:
+                    tabsCountOnScreen !== 0
+                      ? `calc(100% / ${tabsCountOnScreen})`
+                      : 'auto',
                   fontSize: 16,
                   textTransform: 'none',
                   ':not(&.Mui-selected)': { fontWeight: 400 },

diff --git a/src/components/tabs/index.types.ts b/src/components/tabs/index.types.ts
@@ -82,6 +82,12 @@ export interface CustomTabProps extends TabOwnProps {
    */
   minHeight?: string;
 
+  /**
+   * The number of tabs that should be displayed on the screen at once.
+   * Useful for responsive layouts or custom tab implementations.
+   */
+  tabsCountOnScreen?: number;
+
   /**
    * Custom styling applied to the tab component using MUI's `sx` prop.
    */

diff --git a/src/features/meetings/weekly_schedules/midweek_meeting/index.tsx b/src/features/meetings/weekly_schedules/midweek_meeting/index.tsx
@@ -48,7 +48,11 @@ const MidweekMeeting = () => {
       {noSchedule && <NoSchedule />}
 
       {!noSchedule && (
-        <Box>
+        <Box
+          sx={{
+            marginTop: '8px',
+          }}
+        >
           <WeekSelector value={value} onChange={handleValueChange} />
 
           <WeekScheduleHeader

diff --git a/src/features/meetings/weekly_schedules/outgoing_talks/index.tsx b/src/features/meetings/weekly_schedules/outgoing_talks/index.tsx
@@ -12,6 +12,7 @@ const OutgoingTalks = () => {
         display: 'flex',
         flexDirection: 'column',
         gap: '16px',
+        marginTop: '8px',
       }}
     >
       <ScheduleHeader />

diff --git a/src/features/meetings/weekly_schedules/week_selector/index.tsx b/src/features/meetings/weekly_schedules/week_selector/index.tsx
@@ -10,6 +10,7 @@ const WeekSelector = (props: WeekSelectorProps) => {
     <Box sx={{ marginTop: '-16px', marginBottom: '-32px' }}>
       <ScrollableTabs
         className="schedules-view-week-selector"
+        tabsCountOnScreen={8}
         tabs={weeksTab}
         value={currentTab}
         onChange={handleWeekChange}

diff --git a/src/features/meetings/weekly_schedules/weekend_meeting/index.tsx b/src/features/meetings/weekly_schedules/weekend_meeting/index.tsx
@@ -46,7 +46,11 @@ const WeekendMeeting = () => {
     <>
       {noSchedule && <NoSchedule />}
       {!noSchedule && (
-        <Box>
+        <Box
+          sx={{
+            marginTop: '8px',
+          }}
+        >
           <WeekSelector value={value} onChange={handleValueChange} />
 
           <WeekScheduleHeader

diff --git a/src/features/reports/publisher_records/publisher_tabs/index.tsx b/src/features/reports/publisher_records/publisher_tabs/index.tsx
@@ -17,7 +17,7 @@ const PublisherTabs = () => {
             background: 'unset',
             borderRadius: 'unset',
           },
-          '& span.MuiTouchRipple-root': { borderRadius: 'unset' },
+          '& span.MuiTouchRipple-root': { borderRadius: 'var(--radius-l)' },
         }}
       />
     </Card>

diff --git a/src/pages/meetings/schedules/index.tsx b/src/pages/meetings/schedules/index.tsx
@@ -26,6 +26,14 @@ const WeeklySchedules = () => {
           tabs={tabs}
           value={value}
           onChange={handleScheduleChange}
+          sx={{
+            '& button.Mui-selected': {
+              color: 'var(--accent-main)',
+              background: 'unset',
+              borderRadius: 'unset',
+            },
+            '& span.MuiTouchRipple-root': { borderRadius: 'var(--radius-l)' },
+          }}
         />
       </Box>
     </Box>