Add MSC4522 username colors, release notes dialog, and profile layout fixes.
All checks were successful
Trigger cinny-mobile / dispatch (push) Successful in 1s
All checks were successful
Trigger cinny-mobile / dispatch (push) Successful in 1s
Replace legacy profile style metadata with MSC4133 profile fields, add in-app update notes, tighten account profile name spacing, and wire desktop media save helpers through the client.
This commit is contained in:
296
src/app/components/updates-dialog/UpdatesDialog.css.ts
Normal file
296
src/app/components/updates-dialog/UpdatesDialog.css.ts
Normal file
@@ -0,0 +1,296 @@
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
import { color, config, toRem } from 'folds';
|
||||
|
||||
const MOBILE_BREAKPOINT = '480px';
|
||||
|
||||
/** Dialog height cap — 85% of the viewport, minus safe areas. */
|
||||
const DIALOG_MAX_HEIGHT =
|
||||
'calc(85vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))';
|
||||
|
||||
export const OverlayFrame = style({
|
||||
boxSizing: 'border-box',
|
||||
maxHeight: '100vh',
|
||||
maxWidth: '100vw',
|
||||
padding:
|
||||
'env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px)',
|
||||
});
|
||||
|
||||
export const DialogShell = style({
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
maxWidth: `min(${toRem(560)}, calc(100vw - ${config.space.S800}))`,
|
||||
maxHeight: DIALOG_MAX_HEIGHT,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: color.Surface.Container,
|
||||
color: color.Surface.OnContainer,
|
||||
'@media': {
|
||||
[`(max-width: ${MOBILE_BREAKPOINT})`]: {
|
||||
maxWidth: `calc(100vw - ${config.space.S400})`,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const Hero = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: config.space.S200,
|
||||
padding: config.space.S500,
|
||||
paddingBottom: config.space.S400,
|
||||
backgroundColor: color.Primary.Container,
|
||||
color: color.Primary.OnContainer,
|
||||
borderBottom: `${config.borderWidth.B300} solid ${color.Primary.ContainerLine}`,
|
||||
'@media': {
|
||||
[`(max-width: ${MOBILE_BREAKPOINT})`]: {
|
||||
padding: config.space.S400,
|
||||
paddingBottom: config.space.S300,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const HeroRow = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: config.space.S300,
|
||||
minWidth: 0,
|
||||
});
|
||||
|
||||
export const HeroLogo = style({
|
||||
width: toRem(48),
|
||||
height: toRem(48),
|
||||
flexShrink: 0,
|
||||
'@media': {
|
||||
[`(max-width: ${MOBILE_BREAKPOINT})`]: {
|
||||
width: toRem(40),
|
||||
height: toRem(40),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const HeroTitleWrap = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: config.space.S100,
|
||||
minWidth: 0,
|
||||
});
|
||||
|
||||
export const BodyScroll = style({
|
||||
flex: '1 1 auto',
|
||||
minHeight: 0,
|
||||
backgroundColor: color.Surface.Container,
|
||||
color: color.Surface.OnContainer,
|
||||
});
|
||||
|
||||
export const BodyContent = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
padding: config.space.S500,
|
||||
paddingTop: config.space.S400,
|
||||
'@media': {
|
||||
[`(max-width: ${MOBILE_BREAKPOINT})`]: {
|
||||
padding: config.space.S400,
|
||||
paddingTop: config.space.S300,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const BodyLoading = style({
|
||||
padding: config.space.S800,
|
||||
});
|
||||
|
||||
export const Markdown = style({
|
||||
width: '100%',
|
||||
color: color.Surface.OnContainer,
|
||||
fontSize: toRem(14),
|
||||
lineHeight: 1.55,
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} h1, ${Markdown} h2, ${Markdown} h3, ${Markdown} h4`, {
|
||||
margin: 0,
|
||||
marginTop: config.space.S400,
|
||||
marginBottom: config.space.S200,
|
||||
lineHeight: 1.3,
|
||||
color: color.Surface.OnContainer,
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} h1:first-child, ${Markdown} h2:first-child, ${Markdown} h3:first-child, ${Markdown} h4:first-child`, {
|
||||
marginTop: 0,
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} h2`, { fontSize: toRem(18) });
|
||||
globalStyle(`${Markdown} h3`, { fontSize: toRem(16) });
|
||||
|
||||
globalStyle(`${Markdown} p`, {
|
||||
margin: 0,
|
||||
marginBottom: config.space.S300,
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} p:last-child`, { marginBottom: 0 });
|
||||
|
||||
globalStyle(`${Markdown} ul, ${Markdown} ol`, {
|
||||
margin: 0,
|
||||
marginBottom: config.space.S300,
|
||||
paddingLeft: config.space.S500,
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} li`, { marginBottom: config.space.S100 });
|
||||
globalStyle(`${Markdown} li:last-child`, { marginBottom: 0 });
|
||||
|
||||
globalStyle(`${Markdown} a`, {
|
||||
color: color.Primary.Main,
|
||||
textDecoration: 'underline',
|
||||
textUnderlineOffset: toRem(2),
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} a:hover`, { color: color.Primary.MainHover });
|
||||
|
||||
globalStyle(`${Markdown} img`, {
|
||||
display: 'block',
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
marginTop: config.space.S200,
|
||||
marginBottom: config.space.S300,
|
||||
borderRadius: config.radii.R300,
|
||||
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} code`, {
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
|
||||
fontSize: toRem(13),
|
||||
padding: `0 ${config.space.S100}`,
|
||||
borderRadius: config.radii.R200,
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
color: color.SurfaceVariant.OnContainer,
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} pre`, {
|
||||
margin: 0,
|
||||
marginBottom: config.space.S300,
|
||||
padding: config.space.S300,
|
||||
borderRadius: config.radii.R300,
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
overflow: 'auto',
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} pre code`, {
|
||||
padding: 0,
|
||||
backgroundColor: 'transparent',
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} blockquote`, {
|
||||
margin: 0,
|
||||
marginBottom: config.space.S300,
|
||||
paddingLeft: config.space.S300,
|
||||
borderLeft: `${toRem(3)} solid ${color.Primary.Main}`,
|
||||
color: color.Surface.OnContainer,
|
||||
opacity: 0.9,
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} hr`, {
|
||||
border: 'none',
|
||||
borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
margin: `${config.space.S400} 0`,
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} table`, {
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
marginBottom: config.space.S300,
|
||||
fontSize: toRem(13),
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} th, ${Markdown} td`, {
|
||||
padding: config.space.S200,
|
||||
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
textAlign: 'left',
|
||||
});
|
||||
|
||||
globalStyle(`${Markdown} th`, {
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
});
|
||||
|
||||
export const OlderSection = style({
|
||||
width: '100%',
|
||||
marginTop: config.space.S500,
|
||||
});
|
||||
|
||||
export const OlderToggle = style({
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const OlderList = style({
|
||||
listStyle: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: config.space.S100,
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const OlderListItem = style({
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const OlderItem = style({
|
||||
all: 'unset',
|
||||
boxSizing: 'border-box',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
gap: config.space.S100,
|
||||
width: '100%',
|
||||
minHeight: toRem(48),
|
||||
padding: config.space.S300,
|
||||
borderRadius: config.radii.R300,
|
||||
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
color: color.SurfaceVariant.OnContainer,
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left',
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
backgroundColor: color.SurfaceVariant.ContainerHover,
|
||||
},
|
||||
'&[data-active="true"]': {
|
||||
borderColor: color.Primary.Main,
|
||||
backgroundColor: color.Primary.Container,
|
||||
color: color.Primary.OnContainer,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const Footer = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: config.space.S200,
|
||||
padding: config.space.S400,
|
||||
paddingTop: config.space.S300,
|
||||
paddingBottom: `calc(${config.space.S400} + env(safe-area-inset-bottom, 0px))`,
|
||||
borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
backgroundColor: color.Surface.Container,
|
||||
'@media': {
|
||||
[`(max-width: ${MOBILE_BREAKPOINT})`]: {
|
||||
padding: config.space.S300,
|
||||
paddingTop: config.space.S300,
|
||||
paddingBottom: `calc(${config.space.S300} + env(safe-area-inset-bottom, 0px))`,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const FooterButton = style({
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const CloseButton = style({
|
||||
position: 'absolute',
|
||||
top: config.space.S300,
|
||||
right: config.space.S300,
|
||||
'@media': {
|
||||
[`(max-width: ${MOBILE_BREAKPOINT})`]: {
|
||||
top: config.space.S200,
|
||||
right: config.space.S200,
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user