Page MenuHomePhabricator
Differential D5588

added glow effect behind modals
ClosedPublic
Actions

Authored by • manan on Nov 9 2022, 1:45 PM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Mar 28, 4:27 PM
Unknown Object (File)
Tue, Mar 25, 1:12 AM
Unknown Object (File)
Tue, Mar 11, 3:10 PM
Unknown Object (File)
Mar 6 2025, 10:14 PM
Unknown Object (File)
Mar 6 2025, 1:54 AM
Unknown Object (File)
Feb 27 2025, 4:21 AM
Unknown Object (File)
Feb 24 2025, 9:50 AM
Unknown Object (File)
Feb 17 2025, 3:37 PM
View All Files
Subscribers
• abosh
ashoat
tomek

Details

Reviewers
ginsu
atul
• jon
Commits
rCOMM626fb77c224a: added glow effect behind modals
Summary

glow effect adds contrast between modals and background.

Test Plan

Checked different modals in app, all seem to show a glow.

Diff Detail

Repository
rCOMM Comm
Branch
master
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

• manan created this revision.Nov 9 2022, 1:45 PM
Herald added subscribers: • abosh, tomek, ashoat. · View Herald TranscriptNov 9 2022, 1:45 PM
• manan added a comment.Nov 9 2022, 1:46 PM

simulator_screenshot_4AFD6BCE-1A14-4221-BD01-734400B61D58.png (2×1 px, 151 KB)

Here is a screenshot of what the glow looks like.

Harbormaster completed remote builds in B13342: Diff 18294.Nov 9 2022, 2:00 PM
• manan requested review of this revision.Nov 9 2022, 2:00 PM
atul requested changes to this revision.EditedNov 9 2022, 2:07 PM

Hm, looks like it might be hard to get the glow to look right. Can we instead copy what we're doing in native/chat/settings/color-selector-modal.react.js:

borderColor: 'modalForegroundBorder',
borderWidth: 2,

and then remove the redundant style from the ColorSelectorModal component .

This revision now requires changes to proceed.Nov 9 2022, 2:07 PM
• manan updated this revision to Diff 18305.Nov 9 2022, 10:02 PM

copied what is done in native/chat/settings/color-selector-modal.react.js

Herald added a reviewer: • jon. · View Herald TranscriptNov 9 2022, 10:02 PM
• manan updated this revision to Diff 18306.Nov 9 2022, 10:06 PM

attempting to remove changes from un-rebased pull

• manan updated this revision to Diff 18307.Nov 9 2022, 10:10 PM

update

• manan added a comment.Nov 9 2022, 10:11 PM

simulator_screenshot_7D6C51A7-89F5-4E15-B07F-31F52801838B.png (2×1 px, 141 KB)

Here's what the glow looks like now

Harbormaster completed remote builds in B13350: Diff 18305.Nov 9 2022, 10:16 PM
Harbormaster completed remote builds in B13351: Diff 18306.Nov 9 2022, 10:19 PM
Harbormaster completed remote builds in B13352: Diff 18307.Nov 9 2022, 10:23 PM
atul accepted this revision.Nov 10 2022, 5:54 AM
This revision is now accepted and ready to land.Nov 10 2022, 5:54 AM
• manan closed this revision.Nov 10 2022, 8:44 AM
mananmanchanda <mananmanchanda@mananmanchandas-MacBook-Air.local> added a commit: rCOMM626fb77c224a: added glow effect behind modals.Nov 10 2022, 8:44 AM

Revision Contents
Changeset List

PathSize
keyserver/
src/
database/
11 lines
1 line
push/
1 line
landing/
5 lines
native/
account/
20 lines
121 lines
chat/
settings/
2 lines
components/
5 lines
data/
13 lines
flow-typed/
npm/
180 lines
profile/
43 lines
redux/
10 lines
50 lines
utils/
2 lines
scripts/
4 lines
services/
identity/
src/
1 line
lib/
src/
2 lines
2 lines
client-base-reactors/
2 lines
2 lines
2 lines
server-base-reactors/
40 lines
46 lines
40 lines

Diff 18305

View Options

keyserver/src/database/migration-config.js

Show All 20 Lines
import { import {
useServerCall, useServerCall,
useDispatchActionPromise, useDispatchActionPromise,
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import MenuItem from '../components/menu-item.react'; import MenuItem from '../components/menu-item.react';
import Menu from '../components/menu.react'; import Menu from '../components/menu.react';
import SidebarListModal from '../modals/chat/sidebar-list-modal.react'; import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react';
import { useModalContext } from '../modals/modal-provider.react'; import { useModalContext } from '../modals/modal-provider.react';
import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react'; import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';
import ThreadMembersModal from '../modals/threads/members/members-modal.react'; import ThreadMembersModal from '../modals/threads/members/members-modal.react';
import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react'; import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';
import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react'; import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react'; import SWMansionIcon from '../SWMansionIcon.react';
import css from './thread-menu.css'; import css from './thread-menu.css';
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Lines return (
text="Leave Thread" text="Leave Thread"
icon="logout" icon="logout"
dangerous dangerous
onClick={onClickLeaveThread} onClick={onClickLeaveThread}
/> />
); );
}, [onClickLeaveThread, threadInfo]); }, [onClickLeaveThread, threadInfo]);
const onClickPromoteSidebarToThread = React.useCallback(
() =>
pushModal(
<SidebarPromoteModal
threadInfo={threadInfo}
onClose={popModal}
onConfirm={onPromoteSidebar}
/>,
),
[pushModal, threadInfo, popModal, onPromoteSidebar],
);
const promoteSidebar = React.useMemo(() => { const promoteSidebar = React.useMemo(() => {
return ( return (
<MenuItem <MenuItem
key="promote" key="promote"
text="Promote Thread" text="Promote Thread"
icon="message-square-lines" icon="message-square-lines"
onClick={onPromoteSidebar} onClick={onClickPromoteSidebarToThread}
/> />
); );
}, [onPromoteSidebar]); }, [onClickPromoteSidebarToThread]);
const menuItems = React.useMemo(() => { const menuItems = React.useMemo(() => {
const notificationsItem = ( const notificationsItem = (
<MenuItem key="notifications" text="Notifications" icon="bell" /> <MenuItem key="notifications" text="Notifications" icon="bell" />
); );
const separator = <hr key="separator" className={css.separator} />; const separator = <hr key="separator" className={css.separator} />;
// TODO: Enable menu items when the modals are implemented // TODO: Enable menu items when the modals are implemented
Show All 33 Lines
View Options

keyserver/src/database/setup-db.js

Show All 20 Lines
import { import {
useServerCall, useServerCall,
useDispatchActionPromise, useDispatchActionPromise,
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import MenuItem from '../components/menu-item.react'; import MenuItem from '../components/menu-item.react';
import Menu from '../components/menu.react'; import Menu from '../components/menu.react';
import SidebarListModal from '../modals/chat/sidebar-list-modal.react'; import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react';
import { useModalContext } from '../modals/modal-provider.react'; import { useModalContext } from '../modals/modal-provider.react';
import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react'; import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';
import ThreadMembersModal from '../modals/threads/members/members-modal.react'; import ThreadMembersModal from '../modals/threads/members/members-modal.react';
import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react'; import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';
import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react'; import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react'; import SWMansionIcon from '../SWMansionIcon.react';
import css from './thread-menu.css'; import css from './thread-menu.css';
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Lines return (
text="Leave Thread" text="Leave Thread"
icon="logout" icon="logout"
dangerous dangerous
onClick={onClickLeaveThread} onClick={onClickLeaveThread}
/> />
); );
}, [onClickLeaveThread, threadInfo]); }, [onClickLeaveThread, threadInfo]);
const onClickPromoteSidebarToThread = React.useCallback(
() =>
pushModal(
<SidebarPromoteModal
threadInfo={threadInfo}
onClose={popModal}
onConfirm={onPromoteSidebar}
/>,
),
[pushModal, threadInfo, popModal, onPromoteSidebar],
);
const promoteSidebar = React.useMemo(() => { const promoteSidebar = React.useMemo(() => {
return ( return (
<MenuItem <MenuItem
key="promote" key="promote"
text="Promote Thread" text="Promote Thread"
icon="message-square-lines" icon="message-square-lines"
onClick={onPromoteSidebar} onClick={onClickPromoteSidebarToThread}
/> />
); );
}, [onPromoteSidebar]); }, [onClickPromoteSidebarToThread]);
const menuItems = React.useMemo(() => { const menuItems = React.useMemo(() => {
const notificationsItem = ( const notificationsItem = (
<MenuItem key="notifications" text="Notifications" icon="bell" /> <MenuItem key="notifications" text="Notifications" icon="bell" />
); );
const separator = <hr key="separator" className={css.separator} />; const separator = <hr key="separator" className={css.separator} />;
// TODO: Enable menu items when the modals are implemented // TODO: Enable menu items when the modals are implemented
Show All 33 Lines
View Options

keyserver/src/push/rescind.js

Show All 20 Lines
import { import {
useServerCall, useServerCall,
useDispatchActionPromise, useDispatchActionPromise,
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import MenuItem from '../components/menu-item.react'; import MenuItem from '../components/menu-item.react';
import Menu from '../components/menu.react'; import Menu from '../components/menu.react';
import SidebarListModal from '../modals/chat/sidebar-list-modal.react'; import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react';
import { useModalContext } from '../modals/modal-provider.react'; import { useModalContext } from '../modals/modal-provider.react';
import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react'; import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';
import ThreadMembersModal from '../modals/threads/members/members-modal.react'; import ThreadMembersModal from '../modals/threads/members/members-modal.react';
import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react'; import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';
import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react'; import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react'; import SWMansionIcon from '../SWMansionIcon.react';
import css from './thread-menu.css'; import css from './thread-menu.css';
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Lines return (
text="Leave Thread" text="Leave Thread"
icon="logout" icon="logout"
dangerous dangerous
onClick={onClickLeaveThread} onClick={onClickLeaveThread}
/> />
); );
}, [onClickLeaveThread, threadInfo]); }, [onClickLeaveThread, threadInfo]);
const onClickPromoteSidebarToThread = React.useCallback(
() =>
pushModal(
<SidebarPromoteModal
threadInfo={threadInfo}
onClose={popModal}
onConfirm={onPromoteSidebar}
/>,
),
[pushModal, threadInfo, popModal, onPromoteSidebar],
);
const promoteSidebar = React.useMemo(() => { const promoteSidebar = React.useMemo(() => {
return ( return (
<MenuItem <MenuItem
key="promote" key="promote"
text="Promote Thread" text="Promote Thread"
icon="message-square-lines" icon="message-square-lines"
onClick={onPromoteSidebar} onClick={onClickPromoteSidebarToThread}
/> />
); );
}, [onPromoteSidebar]); }, [onClickPromoteSidebarToThread]);
const menuItems = React.useMemo(() => { const menuItems = React.useMemo(() => {
const notificationsItem = ( const notificationsItem = (
<MenuItem key="notifications" text="Notifications" icon="bell" /> <MenuItem key="notifications" text="Notifications" icon="bell" />
); );
const separator = <hr key="separator" className={css.separator} />; const separator = <hr key="separator" className={css.separator} />;
// TODO: Enable menu items when the modals are implemented // TODO: Enable menu items when the modals are implemented
Show All 33 Lines
View Options

landing/team.react.js

Show All 20 Lines
import { import {
useServerCall, useServerCall,
useDispatchActionPromise, useDispatchActionPromise,
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import MenuItem from '../components/menu-item.react'; import MenuItem from '../components/menu-item.react';
import Menu from '../components/menu.react'; import Menu from '../components/menu.react';
import SidebarListModal from '../modals/chat/sidebar-list-modal.react'; import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react';
import { useModalContext } from '../modals/modal-provider.react'; import { useModalContext } from '../modals/modal-provider.react';
import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react'; import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';
import ThreadMembersModal from '../modals/threads/members/members-modal.react'; import ThreadMembersModal from '../modals/threads/members/members-modal.react';
import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react'; import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';
import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react'; import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react'; import SWMansionIcon from '../SWMansionIcon.react';
import css from './thread-menu.css'; import css from './thread-menu.css';
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Lines return (
text="Leave Thread" text="Leave Thread"
icon="logout" icon="logout"
dangerous dangerous
onClick={onClickLeaveThread} onClick={onClickLeaveThread}
/> />
); );
}, [onClickLeaveThread, threadInfo]); }, [onClickLeaveThread, threadInfo]);
const onClickPromoteSidebarToThread = React.useCallback(
() =>
pushModal(
<SidebarPromoteModal
threadInfo={threadInfo}
onClose={popModal}
onConfirm={onPromoteSidebar}
/>,
),
[pushModal, threadInfo, popModal, onPromoteSidebar],
);
const promoteSidebar = React.useMemo(() => { const promoteSidebar = React.useMemo(() => {
return ( return (
<MenuItem <MenuItem
key="promote" key="promote"
text="Promote Thread" text="Promote Thread"
icon="message-square-lines" icon="message-square-lines"
onClick={onPromoteSidebar} onClick={onClickPromoteSidebarToThread}
/> />
); );
}, [onPromoteSidebar]); }, [onClickPromoteSidebarToThread]);
const menuItems = React.useMemo(() => { const menuItems = React.useMemo(() => {
const notificationsItem = ( const notificationsItem = (
<MenuItem key="notifications" text="Notifications" icon="bell" /> <MenuItem key="notifications" text="Notifications" icon="bell" />
); );
const separator = <hr key="separator" className={css.separator} />; const separator = <hr key="separator" className={css.separator} />;
// TODO: Enable menu items when the modals are implemented // TODO: Enable menu items when the modals are implemented
Show All 33 Lines
View Options

native/account/logged-out-modal.react.js

Loading...
View Options

native/account/logged-out-staff-info.react.js

Loading...
View Options

native/chat/settings/color-selector-modal.react.js

Loading...
View Options

native/components/modal.react.js

Loading...
View Options

native/data/sqlite-context-provider.js

Loading...
View Options

native/flow-typed/npm/react-native-reanimated_v2.x.x.js

Loading...
View Options

native/profile/build-info.react.js

Loading...
View Options

native/redux/persist.js

Loading...
View Options

native/redux/redux-setup.js

Loading...
View Options

native/utils/staff-utils.js

Loading...
View Options

scripts/get_clang_paths.js

Loading...
View Options

services/identity/src/constants.rs

Loading...
View Options

services/lib/src/BaseReactor.h

Loading...
View Options

services/lib/src/GlobalTools.cpp

Loading...
View Options

services/lib/src/client-base-reactors/ClientBidiReactorBase.h

Loading...
View Options

services/lib/src/client-base-reactors/ClientReadReactorBase.h

Loading...
View Options

services/lib/src/client-base-reactors/ClientWriteReactorBase.h

Loading...
View Options

services/lib/src/server-base-reactors/ServerBidiReactorBase.h

Loading...
View Options

services/lib/src/server-base-reactors/ServerReadReactorBase.h

Loading...
View Options

services/lib/src/server-base-reactors/ServerWriteReactorBase.h

Loading...