lenhanphung
3870bceb6d
* feat: prepare project for cozy-ui migration Build Configuration - Add Stylus support via @rsbuild/plugin-stylus - Add SVGR support via @rsbuild/plugin-svgr - Update rsbuild.config.ts with custom configuration - Add historyApiFallback for SPA routing ESLint Configuration - Create .eslintrc.json with react-app configuration - Remove eslintConfig from package.json CSS to Stylus Migration Convert all 5 CSS files to Stylus (.styl) format: - src/App.css to src/App.styl - src/index.css to src/index.styl - src/components/Calendar/Calendar.css to src/components/Calendar/Calendar.styl - src/components/Calendar/CustomCalendar.css to src/components/Calendar/CustomCalendar.styl - src/components/Menubar/Menubar.css to src/components/Menubar/Menubar.styl - Update all imports from .css to .styl - Preserve all styling rules and values MUI Styling Cleanup - Replace all MUI sx props with standard style props across 15+ components - Convert MUI spacing units (mr: 2 to marginRight: 16px) - Convert MUI shorthand props (p: 2 to padding: 16px, mb: 1 to marginBottom: 8px) - Remove MUI-specific syntax (&.Mui-checked selectors) - Maintain exact visual appearance FullCalendar Fixes - Comment out problematic CSS rule in CustomCalendar.styl - Fix display issues with timegrid slot labels Files Modified - Config: rsbuild.config.ts, .eslintrc.json, package.json - Styling: 5 CSS to Stylus conversions, 15+ component sx to style updates - Components: All components using MUI sx props updated Development Workflow - Continue using existing development commands - Stylus files are now the source of truth for styling - MUI components work with standard style props - ESLint uses familiar react-app rules Dependencies Added - @rsbuild/plugin-stylus - @rsbuild/plugin-svgr
136 lines
2.4 KiB
Stylus
136 lines
2.4 KiB
Stylus
.App
|
|
background-color #f3f6f9
|
|
display flex
|
|
flex-direction column
|
|
justify-content space-between
|
|
|
|
.main-layout
|
|
background-color #fff
|
|
flex-direction row
|
|
height calc(100vh - 90px)
|
|
display flex
|
|
|
|
.calendar
|
|
flex-grow 1
|
|
height 100%
|
|
overflow hidden
|
|
|
|
.calendarListHeader
|
|
padding-top 10px
|
|
display flex
|
|
align-items center
|
|
margin-left 25%
|
|
|
|
.sidebar
|
|
border-right 2px solid #f3f4f6
|
|
width 330px
|
|
padding 16px 25px
|
|
height 90vh
|
|
flex-direction column
|
|
overflow auto
|
|
|
|
.declined-event
|
|
opacity 0.7
|
|
|
|
.needs-action-event
|
|
opacity 0.7
|
|
border dashed 1px #ffffff
|
|
|
|
.fc-event-main span,
|
|
.fc-daygrid-event div
|
|
display block !important
|
|
white-space nowrap !important
|
|
overflow hidden !important
|
|
text-overflow ellipsis !important
|
|
|
|
[data-theme="dark"] .fc-timegrid-slot::after
|
|
border-top 1px dotted rgba(255, 255, 255, 0.2)
|
|
|
|
#calendar
|
|
flex 1
|
|
overflow hidden /* Important: let FullCalendar handle internal scroll */
|
|
|
|
/* Base container */
|
|
.fc-daygrid-day-top
|
|
display flex
|
|
flex-direction column
|
|
align-items center
|
|
padding 0.5rem 0
|
|
font-family "Inter", sans-serif
|
|
|
|
/* sidebar*/
|
|
.sidebar-calendar
|
|
width 280px
|
|
background-color #fff
|
|
border-radius 12px
|
|
box-shadow 0 4px 12px rgba(0, 0, 0, 0.1)
|
|
padding 20px
|
|
display flex
|
|
flex-direction column
|
|
gap 30px
|
|
font-family "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
|
|
|
|
/* mini calendar style */
|
|
.react-calendar
|
|
border none
|
|
font-size 14px
|
|
width 100%
|
|
user-select none
|
|
|
|
/* selected day hover */
|
|
.react-calendar__tile
|
|
transition background-color 0.3s ease, color 0.3s ease
|
|
border none
|
|
background-color white
|
|
width 12px
|
|
height 37.52px
|
|
|
|
.react-calendar__tile--active
|
|
background-color rgb(255, 255, 255)
|
|
|
|
.today
|
|
background orange !important
|
|
color white
|
|
|
|
.selectedWeek
|
|
background-color lightgrey
|
|
|
|
.react-calendar__month-view__days__day--neighboringMonth
|
|
color gray
|
|
|
|
/* sidebar header */
|
|
.sidebar-calendar h2
|
|
font-size 1.3rem
|
|
font-weight 700
|
|
color #333
|
|
margin 0 0 10px 0
|
|
|
|
/* Calendar list */
|
|
.calendar-list
|
|
list-style none
|
|
padding 0
|
|
margin 0
|
|
display flex
|
|
flex-direction column
|
|
gap 15px
|
|
|
|
.calendar-list li
|
|
display flex
|
|
align-items center
|
|
gap 10px
|
|
font-weight 600
|
|
color #444
|
|
padding 10px 15px
|
|
border-radius 10px
|
|
transition background-color 0.2s ease
|
|
cursor pointer
|
|
|
|
.event-dot
|
|
margin-top 2px
|
|
width 6px
|
|
height 6px
|
|
background-color #d93025
|
|
border-radius 50%
|
|
margin-left auto
|
|
margin-right auto
|