feat: prepare project for cozy-ui migration (#157)
* 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
This commit is contained in:
lenhanphung
@@ -1,107 +0,0 @@
|
||||
/* Basic reset */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.twake {
|
||||
font-family: "Cal Sans";
|
||||
font-weight: 400;
|
||||
font-size: 28.07px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.calendar-text {
|
||||
font-family: "Cal Sans";
|
||||
padding: 0.2rem;
|
||||
font-weight: 400;
|
||||
font-size: 28.07px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: linear-gradient(180deg, #ffb73d, #f26c32);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
/* Optional for broader support */
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Menubar styles */
|
||||
.menubar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
height: 80px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.menubar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(330px - 0.5rem);
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-month {
|
||||
padding-right: 2px;
|
||||
padding-left: 2px;
|
||||
gap: 38px;
|
||||
}
|
||||
|
||||
.day-selector {
|
||||
font-weight: 100;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 600;
|
||||
height: 43.88999938964844;
|
||||
top: 18px;
|
||||
left: 887px;
|
||||
}
|
||||
|
||||
.app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-grid img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.app-grid p {
|
||||
margin-top: 6px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.right-menu {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
/* Basic reset */
|
||||
*
|
||||
margin 0
|
||||
padding 0
|
||||
box-sizing border-box
|
||||
|
||||
.twake
|
||||
font-family "Cal Sans"
|
||||
font-weight 400
|
||||
font-size 28.07px
|
||||
line-height 100%
|
||||
letter-spacing 0%
|
||||
text-align center
|
||||
vertical-align middle
|
||||
padding 0.2rem
|
||||
|
||||
.calendar-text
|
||||
font-family "Cal Sans"
|
||||
padding 0.2rem
|
||||
font-weight 400
|
||||
font-size 28.07px
|
||||
line-height 100%
|
||||
letter-spacing 0%
|
||||
text-align center
|
||||
vertical-align middle
|
||||
background linear-gradient(180deg, #ffb73d, #f26c32)
|
||||
-webkit-background-clip text
|
||||
-webkit-text-fill-color transparent
|
||||
/* Optional for broader support */
|
||||
background-clip text
|
||||
color transparent
|
||||
|
||||
/* Menubar styles */
|
||||
.menubar
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items center
|
||||
padding 0.5rem
|
||||
width 100%
|
||||
z-index 1000
|
||||
height 80px
|
||||
background-color #fff
|
||||
|
||||
.menubar-item
|
||||
display flex
|
||||
align-items center
|
||||
width calc(330px - 0.5rem)
|
||||
|
||||
.logo
|
||||
padding 0.5rem 1rem
|
||||
font-size 1.5rem
|
||||
|
||||
.nav-month
|
||||
padding-right 2px
|
||||
padding-left 2px
|
||||
gap 38px
|
||||
|
||||
.day-selector
|
||||
font-weight 100
|
||||
font-size small
|
||||
|
||||
.search-bar
|
||||
width 600
|
||||
height 43.88999938964844
|
||||
top 18px
|
||||
left 887px
|
||||
|
||||
.app-grid
|
||||
display grid
|
||||
grid-template-columns repeat(3, 1fr)
|
||||
gap 16px
|
||||
padding 16px
|
||||
justify-items center
|
||||
align-items center
|
||||
|
||||
.app-grid img
|
||||
width 48px
|
||||
height 48px
|
||||
|
||||
.app-grid p
|
||||
margin-top 6px
|
||||
font-size 14px
|
||||
text-align center
|
||||
|
||||
.left-menu
|
||||
display flex
|
||||
align-items center
|
||||
justify-content flex-start
|
||||
|
||||
.right-menu
|
||||
display flex
|
||||
justify-content flex-end
|
||||
align-items center
|
||||
@@ -4,7 +4,7 @@ import AppsIcon from "@mui/icons-material/Apps";
|
||||
import RefreshIcon from "@mui/icons-material/Refresh";
|
||||
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
|
||||
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
||||
import "./Menubar.css";
|
||||
import "./Menubar.styl";
|
||||
import { useAppDispatch, useAppSelector } from "../../app/hooks";
|
||||
import { stringToColor } from "../../features/Events/EventDisplay";
|
||||
import {
|
||||
@@ -141,7 +141,10 @@ export function Menubar({
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="menu-items">
|
||||
<FormControl size="small" sx={{ minWidth: 120, mr: 2 }}>
|
||||
<FormControl
|
||||
size="small"
|
||||
style={{ minWidth: 120, marginRight: 16 }}
|
||||
>
|
||||
<Select
|
||||
value={currentView}
|
||||
onChange={(e) => handleViewChange(e.target.value)}
|
||||
@@ -155,15 +158,15 @@ export function Menubar({
|
||||
</div>
|
||||
<div className="menu-items">
|
||||
{applist.length > 0 && (
|
||||
<IconButton onClick={handleOpen} sx={{ mr: 1 }}>
|
||||
<IconButton onClick={handleOpen} style={{ marginRight: 8 }}>
|
||||
<AppsIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
<div className="menu-items">
|
||||
<Avatar
|
||||
sx={{
|
||||
bgcolor: stringToColor(
|
||||
style={{
|
||||
backgroundColor: stringToColor(
|
||||
user && user.family_name
|
||||
? user.family_name
|
||||
: user && user.email
|
||||
|
||||
Reference in New Issue
Block a user