Skip to content

StudyMesh:MAIN Add visual clarity polish #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Pichikachu wants to merge 2 commits into
base: main
Choose a base branch
from
Open

StudyMesh:MAIN Add visual clarity polish #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
afc4e13
add visual clarity polish
Pichikachu May 26, 2026
e2afefb
make workspace visuals dramatically bolder
Pichikachu May 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/studymesh/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,8 @@ const WorkspacePage = () => {
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
background:
'radial-gradient(circle at 8% -8%, rgba(34,197,94,0.22), transparent 32%), radial-gradient(circle at 92% 0%, rgba(14,165,233,0.16), transparent 30%), #020617',
}}
>
<TopNavBar
Expand Down
157 changes: 136 additions & 21 deletions apps/studymesh/src/components/Dasboard/DashboardEmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,14 @@ const DashboardEmptyState = ({
sx={{
minHeight: { xs: 'auto', lg: 560 },
p: { xs: 1.25, sm: 2, md: 2.5 },
borderRadius: 3,
borderRadius: 4,
border: 1,
borderColor: 'divider',
borderColor: (theme) => alpha(theme.palette.primary.main, 0.18),
bgcolor: 'background.paper',
backgroundImage: (theme) =>
theme.palette.mode === 'dark'
? 'linear-gradient(180deg, rgba(34,197,94,0.08), transparent 320px)'
: 'linear-gradient(180deg, rgba(34,197,94,0.055), transparent 320px)',
display: 'flex',
flexDirection: 'column',
gap: { xs: 1.5, md: 2 },
Expand All @@ -142,25 +146,40 @@ const DashboardEmptyState = ({
: '0 20px 56px rgba(15,23,42,0.08)',
}}
>
<Box>
<Box
sx={{
p: { xs: 1.5, md: 2 },
mx: { xs: -0.25, md: -0.5 },
mt: { xs: -0.25, md: -0.5 },
borderRadius: 3,
background: (theme) =>
`radial-gradient(circle at 0% 0%, ${alpha(theme.palette.primary.main, 0.22)}, transparent 38%), radial-gradient(circle at 100% 18%, ${alpha('#b66cff', 0.18)}, transparent 34%)`,
border: 1,
borderColor: (theme) => alpha(theme.palette.primary.main, 0.18),
}}
>
<Typography
variant="caption"
color="primary"
fontWeight={900}
sx={{ textTransform: 'uppercase', letterSpacing: 0.8 }}
fontWeight={950}
sx={{ textTransform: 'uppercase', letterSpacing: 1 }}
>
Start creating
Empty dashboard mission control
</Typography>
<Typography variant="h5" fontWeight={950} sx={{ mt: 0.75 }}>
What do you want to build?
</Typography>
<Typography
variant="h4"
variant="h3"
fontWeight={950}
sx={{
mt: 0.5,
lineHeight: 1.08,
fontSize: { xs: '1.45rem', sm: '1.85rem', md: '2.2rem' },
lineHeight: 0.96,
fontSize: { xs: '1.8rem', sm: '2.25rem', md: '2.8rem' },
maxWidth: 620,
}}
>
What do you want to build?
Turn a blank page into a learning cockpit.
</Typography>
<Typography
variant="body2"
Expand All @@ -170,6 +189,30 @@ const DashboardEmptyState = ({
Create a guided Study Path, or add material first to generate a
focused quiz, flashcards, or clean notes.
</Typography>
<Stack
direction="row"
spacing={0.75}
flexWrap="wrap"
sx={{ mt: 1.25 }}
>
{['1 Add material', '2 Pick output', '3 Review dashboard'].map(
(label) => (
<Chip
key={label}
size="small"
label={label}
sx={{
fontWeight: 800,
bgcolor: (theme) =>
alpha(theme.palette.primary.main, 0.08),
border: 1,
borderColor: (theme) =>
alpha(theme.palette.primary.main, 0.16),
}}
/>
),
)}
</Stack>
</Box>

<Paper
Expand All @@ -180,16 +223,19 @@ const DashboardEmptyState = ({
disabled={!isAdmin}
sx={{
width: '100%',
p: { xs: 1.5, sm: 2 },
borderRadius: 2.5,
p: { xs: 1.75, sm: 2.35 },
borderRadius: 3,
border: 1,
borderColor: (theme) => alpha(theme.palette.primary.main, 0.42),
bgcolor: (theme) => alpha(theme.palette.primary.main, 0.075),
color: 'text.primary',
cursor: isAdmin ? 'pointer' : 'default',
textAlign: 'left',
display: 'grid',
gridTemplateColumns: 'auto minmax(0, 1fr) auto',
gridTemplateColumns: {
xs: 'auto minmax(0, 1fr)',
sm: 'auto minmax(0, 1fr) auto',
},
alignItems: 'center',
gap: { xs: 1.25, sm: 1.5 },
boxShadow: (theme) =>
Expand Down Expand Up @@ -230,7 +276,7 @@ const DashboardEmptyState = ({
Recommended
</Typography>
</Stack>
<Typography variant="h5" fontWeight={950} lineHeight={1.12}>
<Typography variant="h4" fontWeight={950} lineHeight={1.02}>
Create Study Path
</Typography>
<Typography
Expand Down Expand Up @@ -265,7 +311,16 @@ const DashboardEmptyState = ({
fontWeight: 900,
}}
>
Upload material
<Stack alignItems="flex-start" spacing={0}>
<span>Upload material</span>
<Typography
component="span"
variant="caption"
sx={{ opacity: 0.78, fontWeight: 700 }}
>
PDF, slides, images, text
</Typography>
</Stack>
</Button>
<Button
variant="outlined"
Expand All @@ -281,7 +336,17 @@ const DashboardEmptyState = ({
bgcolor: 'background.paper',
}}
>
Paste notes
<Stack alignItems="flex-start" spacing={0}>
<span>Paste notes</span>
<Typography
component="span"
variant="caption"
color="text.secondary"
sx={{ fontWeight: 700 }}
>
Fastest for copied text
</Typography>
</Stack>
</Button>
</Box>

Expand All @@ -298,14 +363,15 @@ const DashboardEmptyState = ({
<Stack spacing={1.25}>
<Box>
<Typography variant="subtitle1" fontWeight={900}>
Fast creation from material
Material launch bay · fast creation from material
</Typography>
<Typography
variant="body2"
color="text.secondary"
sx={{ mt: 0.3 }}
>
This dashboard is empty, so add sources in Creation first.
This dashboard is empty, so these actions open Create from
Material with the right setup ready.
</Typography>
</Box>
<Box
Expand All @@ -327,9 +393,9 @@ const DashboardEmptyState = ({
onClick={() => onQuickCreate(action.intent)}
disabled={!isAdmin}
sx={{
minHeight: 92,
p: 1.25,
borderRadius: 2,
minHeight: 124,
p: 1.45,
borderRadius: 2.75,
border: 1,
borderColor: alpha(action.accent, 0.24),
bgcolor: alpha(action.accent, 0.07),
Expand Down Expand Up @@ -374,13 +440,62 @@ const DashboardEmptyState = ({
<Typography variant="subtitle2" fontWeight={900}>
{action.label}
</Typography>
<Chip
size="small"
label="opens material flow"
sx={{
alignSelf: 'flex-start',
height: 21,
fontSize: '0.66rem',
fontWeight: 800,
bgcolor: alpha(action.accent, 0.12),
}}
/>
</Stack>
<ChevronRightIcon sx={{ color: action.accent }} />
</Paper>
))}
</Box>
</Stack>
</Paper>
<Box
sx={{
display: 'grid',
gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
gap: 0.75,
}}
>
{['Source in', 'AI builds', 'Dashboard opens'].map(
(label, index) => (
<Paper
key={label}
elevation={0}
sx={{
p: 1,
borderRadius: 2,
border: 1,
borderColor: 'divider',
bgcolor: 'background.default',
}}
>
<Typography
variant="caption"
color="primary"
fontWeight={950}
>
0{index + 1}
</Typography>
<Typography
variant="caption"
display="block"
fontWeight={800}
>
{label}
</Typography>
</Paper>
),
)}
</Box>
</Paper>

<Paper
Expand Down
71 changes: 54 additions & 17 deletions apps/studymesh/src/components/dashboardChat/DashboardChatPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
useMediaQuery,
useTheme,
} from '@mui/material'
import { alpha } from '@mui/material/styles'
import ChevronRightIcon from '@mui/icons-material/ChevronRight'
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
import SendIcon from '@mui/icons-material/Send'
Expand Down Expand Up @@ -213,9 +214,9 @@ const DashboardChatPanel = ({
>
<Box
sx={{
minHeight: 76,
minHeight: 112,
px: 2,
py: 1.5,
py: 1.75,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
Expand All @@ -224,12 +225,25 @@ const DashboardChatPanel = ({
borderColor: 'divider',
background:
theme.palette.mode === 'dark'
? 'linear-gradient(135deg, rgba(34,197,94,0.14), rgba(14,165,233,0.08))'
: 'linear-gradient(135deg, rgba(34,197,94,0.10), rgba(14,165,233,0.06))',
? 'radial-gradient(circle at 0% 0%, rgba(34,197,94,0.28), transparent 38%), linear-gradient(135deg, rgba(34,197,94,0.14), rgba(14,165,233,0.10))'
: 'radial-gradient(circle at 0% 0%, rgba(34,197,94,0.22), transparent 38%), linear-gradient(135deg, rgba(34,197,94,0.12), rgba(14,165,233,0.08))',
}}
>
<Box sx={{ minWidth: 0 }}>
<Typography variant="subtitle1" fontWeight={900} noWrap>
<Typography
variant="caption"
color="primary"
fontWeight={950}
sx={{ textTransform: 'uppercase', letterSpacing: 1 }}
>
Source intelligence
</Typography>
<Typography
variant="h5"
fontWeight={950}
noWrap
sx={{ lineHeight: 1.02 }}
>
Ask Sources
</Typography>
<Typography variant="caption" color="text.secondary" noWrap>
Expand Down Expand Up @@ -309,43 +323,66 @@ const DashboardChatPanel = ({
<Stack spacing={2.25}>
<Box
sx={{
p: 2,
p: 2.4,
border: 1,
borderColor: 'divider',
borderRadius: 2.5,
borderColor: alpha(theme.palette.primary.main, 0.22),
borderRadius: 3.5,
bgcolor: 'background.paper',
background:
theme.palette.mode === 'dark'
? 'radial-gradient(circle at 100% 0%, rgba(14,165,233,0.18), transparent 34%), linear-gradient(135deg, rgba(34,197,94,0.12), rgba(14,165,233,0.07))'
: 'radial-gradient(circle at 100% 0%, rgba(14,165,233,0.14), transparent 34%), linear-gradient(135deg, rgba(34,197,94,0.10), rgba(14,165,233,0.06))',
}}
>
<Typography variant="h6" fontWeight={900}>
What do you want to understand?
<Typography
variant="caption"
color="primary"
fontWeight={900}
sx={{ textTransform: 'uppercase', letterSpacing: 0.8 }}
>
Grounded chat
</Typography>
<Typography
variant="h4"
fontWeight={950}
sx={{ lineHeight: 1.02, mt: 0.5 }}
>
Interrogate your dashboard.
</Typography>
<Typography variant="body2" color="text.secondary">
Ask questions based on the sources and study material in this
dashboard. I’ll keep answers grounded in what’s here.
</Typography>
</Box>
<Stack spacing={1}>
{suggestions.map((suggestion) => (
<Box
sx={{
display: 'grid',
gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' },
gap: 1,
}}
>
{suggestions.map((suggestion, index) => (
<Button
key={suggestion}
variant="outlined"
size="small"
onClick={() => sendQuestion(suggestion)}
sx={{
justifyContent: 'flex-start',
borderRadius: 2,
py: 1,
px: 1.25,
minHeight: 76,
borderRadius: 2.75,
py: 1.25,
px: 1.35,
bgcolor: 'background.paper',
borderColor: 'divider',
borderColor: alpha(theme.palette.primary.main, 0.16),
color: 'text.primary',
textTransform: 'none',
}}
>
{suggestion}
</Button>
))}
</Stack>
</Box>
</Stack>
) : (
<Stack spacing={1.5}>
Expand Down
Loading