Page MenuHomePhabricator
Files F2756822

D3669.diff
No OneTemporary
Actions

D3669.diff
View Options

diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -115,7 +115,7 @@
}
return (
- <Modal name="Sidebars" onClose={popModal} fixedHeight={false}>
+ <Modal name="Sidebars" onClose={popModal}>
<div
className={classNames(
globalCSS['modal-body'],
diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -1,79 +1,60 @@
-div.modal-overlay {
+div.modalOverlay {
position: fixed;
left: 0;
top: 0;
- bottom: 0;
+ height: 100%;
z-index: 4;
width: 100%;
- background-color: rgba(0, 0, 0, 0.4);
+ background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- overflow: auto;
-}
-div.resizable-modal-overlay {
- min-height: 60px;
}
-div.modal-container {
- background: var(--bg);
- background-size: 3000px 2000px;
- max-width: 330px;
+
+div.modalContainer {
border-radius: 15px;
display: flex;
- min-height: 0;
- max-height: 500px;
-}
-div.large-modal-container {
- max-width: 500px;
-}
-div.modal {
- position: relative;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
background-color: var(--modal-bg);
- border-radius: 15px;
- flex: 1;
- display: flex;
+ border-radius: 8px;
flex-direction: column;
+ margin: 20px;
+ overflow: hidden;
}
-div.large-modal-container div.modal {
- width: 500px;
+
+div.modalContainerSmall {
+ width: 330px;
+ max-height: 500px;
}
-div.fixed-height-modal {
- height: 100%;
+
+div.modalContainerLarge {
+ width: 500px;
+ max-height: 500px;
}
-span.modal-close {
- float: right;
- font-size: 32px;
- font-weight: 300;
- line-height: 30px;
- color: var(--fg);
+
+span.modalClose {
+ display: flex;
+ color: var(--modal-close-color);
}
-span.modal-close:hover {
+
+span.modalClose:hover {
cursor: pointer;
+ color: var(--modal-close-color-hover);
}
-div.modal-header {
- padding: 32px 40px 16px 40px;
-}
-div.modal-header > h2 {
- font-size: var(--xl-font-20);
- font-weight: var(--bold);
- color: var(--fg);
+
+div.modalHeader {
display: flex;
+ justify-content: space-between;
align-items: center;
-}
-div.modal-header > h2 svg {
- padding-right: 8px;
- display: flex;
+ padding: 32px 32px 0px 32px;
}
-@media only screen and (-webkit-min-device-pixel-ratio: 2),
- only screen and (min--moz-device-pixel-ratio: 2),
- only screen and (-o-min-device-pixel-ratio: 2/1),
- only screen and (min-device-pixel-ratio: 2),
- only screen and (min-resolution: 320dpi),
- only screen and (min-resolution: 2dppx) {
- div.modal-container {
- background: var(--bg);
- }
+h2.title {
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 32px;
+ color: var(--fg);
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
}
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -6,15 +6,14 @@
import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
import css from './modal.css';
-export type ModalSize = 'small' | 'large';
+export type ModalSize = 'small' | 'large' | 'fit-content';
type Props = {
- +name: React.Node,
+ +name: string,
+icon?: Icon,
+onClose: () => void,
+withCloseButton?: boolean,
+children?: React.Node,
+size?: ModalSize,
- +fixedHeight?: boolean,
};
function Modal(props: Props): React.Node {
@@ -22,7 +21,6 @@
size = 'small',
children,
onClose,
- fixedHeight,
name,
icon,
withCloseButton = true,
@@ -53,34 +51,21 @@
}
}, []);
- const overlayClasses = React.useMemo(
- () =>
- classNames(css['modal-overlay'], {
- [css['resizable-modal-overlay']]: !fixedHeight,
- }),
- [fixedHeight],
- );
const modalContainerClasses = React.useMemo(
() =>
- classNames(css['modal-container'], {
- [css['large-modal-container']]: size === 'large',
+ classNames(css.modalContainer, {
+ [css.modalContainerLarge]: size === 'large',
+ [css.modalContainerSmall]: size === 'small',
}),
[size],
);
- const modalClasses = React.useMemo(
- () =>
- classNames(css['modal'], {
- [css['fixed-height-modal']]: fixedHeight,
- }),
- [fixedHeight],
- );
const cornerCloseButton = React.useMemo(() => {
if (!withCloseButton) {
return null;
}
return (
- <span className={css['modal-close']} onClick={onClose}>
+ <span className={css.modalClose} onClick={onClose}>
<SWMansionIcon size={24} icon="cross" />
</span>
);
@@ -95,23 +80,21 @@
return (
<div
- className={overlayClasses}
+ className={css.modalOverlay}
ref={overlayRef}
onClick={onBackgroundClick}
tabIndex={0}
onKeyDown={onKeyDown}
>
<div className={modalContainerClasses}>
- <div className={modalClasses}>
- <div className={css['modal-header']}>
- {cornerCloseButton}
- <h2>
- {headerIcon}
- {name}
- </h2>
- </div>
- {children}
+ <div className={css.modalHeader}>
+ <h2 className={css.title}>
+ {headerIcon}
+ {name}
+ </h2>
+ {cornerCloseButton}
</div>
+ {children}
</div>
</div>
);
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -143,4 +143,6 @@
--color-selector-active-bg: var(--shades-black-80);
--relationship-modal-color: var(--shades-black-60);
--arrow-extension-color: var(--shades-black-60);
+ --modal-close-color: var(--shades-black-60);
+ --modal-close-color-hover: var(--shades-white-100);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Sep 20, 1:43 AM (11 h, 17 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2143684
Default Alt Text
D3669.diff (5 KB)

Event Timeline