Page MenuHomePhabricator
Differential D9790

[web] introduce new --shades-black-90
ClosedPublic
Actions

Authored by ginsu on Nov 8 2023, 3:02 PM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Mar 18, 11:13 AM
Unknown Object (File)
Tue, Mar 18, 11:13 AM
Unknown Object (File)
Tue, Mar 18, 11:13 AM
Unknown Object (File)
Tue, Mar 18, 11:13 AM
Unknown Object (File)
Tue, Mar 18, 11:12 AM
Unknown Object (File)
Tue, Mar 18, 11:08 AM
Unknown Object (File)
Fri, Mar 7, 8:45 PM
Unknown Object (File)
Thu, Mar 6, 7:15 PM
View All 85 Files
Subscribers
ashoat
tomek
will

Details

Reviewers
atul
inka
rohan
ashoat
Commits
rCOMM84de7782bb5b: [web] introduce new --shades-black-90
Summary

This diff introduces a new --shades-black-90. The #191919 color is right now only used in one place so it never got a shade; however, the keyserver selection bottom sheet will use this + a lot of the web app redesign is going to use this color, so I think it makes sense to make this an official shade now.

Here is a screenshot to the new shades of black in the 2023 design system:

Screenshot 2023-11-08 at 6.22.00 PM.png (624×1 px, 51 KB)

Here is the figma doc: https://www.figma.com/file/fwKJ6eNgfxlx8a7WxSyAZL/2023-Design-System?type=design&node-id=1-426&mode=design

I still need to update the figma, but I want to do this after this diff gets accepted in case I need to make changes to this, but here is a task to track that
https://linear.app/comm/issue/DES-159/update-shades-of-black-in-figma

Depends on D9789

Test Plan

flow + went through the app to confirm that there were no regressions

This diff was handled using my code editor find + replace feature. Read through every value and all shades except for shades-black-100 should be decremented by 10

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu created this revision.Nov 8 2023, 3:02 PM
Herald added subscribers: will, tomek, ashoat. · View Herald TranscriptNov 8 2023, 3:02 PM
ginsu added inline comments.Nov 8 2023, 3:08 PM
desktop/scrollbar.css
8–9 ↗(On Diff #32981)

This will be fixed with https://linear.app/comm/issue/ENG-5687/desktop-app-scrollbar

web/modals/chat/message-results-modal.css
7 ↗(On Diff #32981)

This will be fixed with https://linear.app/comm/issue/ENG-5028/message-results-modal-for-pinned-messages

ginsu edited the summary of this revision. (Show Details)Nov 8 2023, 3:10 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, inka, rohan.
ginsu added a parent revision: D9789: [native] introduce new shadesBlack90.
ginsu attached a referenced file: F866271: Screenshot 2023-11-08 at 5.45.36 PM.png. (Show Details)
ginsu added a child revision: D9791: [native] update drawerOpenCommunityBackground color with panelBackgroundAccent.Nov 8 2023, 3:17 PM
ginsu edited the summary of this revision. (Show Details)Nov 8 2023, 3:22 PM
ginsu attached a referenced file: F866338: Screenshot 2023-11-08 at 6.22.00 PM.png. (Show Details)
ginsu published this revision for review.Nov 8 2023, 3:28 PM
Harbormaster completed remote builds in B23938: Diff 32981.Nov 8 2023, 5:35 PM
ashoat added a comment.Nov 9 2023, 3:44 AM

Same concerns as I laid out in D9789

ashoat requested changes to this revision.Nov 9 2023, 3:45 AM
This revision now requires changes to proceed.Nov 9 2023, 3:45 AM
ginsu updated this revision to Diff 33043.Nov 9 2023, 4:00 PM

update

ginsu added inline comments.Nov 9 2023, 4:02 PM
desktop/scrollbar.css
5 ↗(On Diff #33043)

This will be fixed with https://linear.app/comm/issue/ENG-5687/desktop-app-scrollbar

web/modals/chat/message-results-modal.css
7 ↗(On Diff #33043)

This will be fixed with https://linear.app/comm/issue/ENG-5028/message-results-modal-for-pinned-messages

Harbormaster completed remote builds in B23985: Diff 33043.Nov 9 2023, 4:36 PM
ashoat accepted this revision.Nov 11 2023, 11:00 AM

Glazed through most of this, trusting you did the find-replaces correctly

This revision is now accepted and ready to land.Nov 11 2023, 11:00 AM
ginsu updated this revision to Diff 33103.Nov 12 2023, 7:39 PM

rebase before landing

This revision was landed with ongoing or failed builds.Nov 12 2023, 7:48 PM
Closed by commit rCOMM84de7782bb5b: [web] introduce new --shades-black-90 (authored by ginsu). · Explain Why
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMM84de7782bb5b: [web] introduce new --shades-black-90.
Harbormaster completed remote builds in B24022: Diff 33103.Nov 12 2023, 8:01 PM

Revision Contents
Changeset List

PathSize
desktop/
6 lines
web/
modals/
chat/
2 lines
227 lines

Diff 33104

View Options

desktop/scrollbar.css

Show First 20 Lines • Show All 113 Lines • ▼ Show 20 Lines () =>
tab: 'chat', tab: 'chat',
}; };
dispatch({ type: updateNavInfoActionType, payload }); dispatch({ type: updateNavInfoActionType, payload });
}, },
), ),
[dispatch], [dispatch],
); );
// Handle invalid device token
const localToken = useSelector(
state => state.tunnelbrokerDeviceToken.localToken,
);
const prevLocalToken = React.useRef(localToken);
React.useEffect(() => {
if (prevLocalToken.current && !localToken) {
electron?.fetchDeviceToken?.();
}
prevLocalToken.current = localToken;
}, [localToken]);
} }
function useCreatePushSubscription(): () => Promise<void> { function useCreatePushSubscription(): () => Promise<void> {
const publicKey = useSelector(state => state.pushApiPublicKey); const publicKey = useSelector(state => state.pushApiPublicKey);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callSetDeviceToken = useSetDeviceTokenFanout(); const callSetDeviceToken = useSetDeviceTokenFanout();
const staffCanSee = useStaffCanSee(); const staffCanSee = useStaffCanSee();
▲ Show 20 Lines • Show All 136 Lines • ▼ Show 20 Lines const callback = (event: MessageEvent) => {
} }
}; };
navigator.serviceWorker.addEventListener('message', callback); navigator.serviceWorker.addEventListener('message', callback);
return () => return () =>
navigator.serviceWorker?.removeEventListener('message', callback); navigator.serviceWorker?.removeEventListener('message', callback);
}, [dispatch, supported]); }, [dispatch, supported]);
// Handle invalid device token
const localToken = useSelector(
state => state.tunnelbrokerDeviceToken.localToken,
);
const prevLocalToken = React.useRef(localToken);
React.useEffect(() => {
if (
!navigator.serviceWorker ||
!supported ||
Notification.permission !== 'granted'
) {
return;
}
if (prevLocalToken.current && !localToken) {
void createPushSubscription();
}
prevLocalToken.current = localToken;
}, [createPushSubscription, localToken, supported]);
return null; return null;
} }
export { PushNotificationsHandler, useCreatePushSubscription }; export { PushNotificationsHandler, useCreatePushSubscription };
View Options

web/modals/chat/message-results-modal.css

Show First 20 Lines • Show All 113 Lines • ▼ Show 20 Lines () =>
tab: 'chat', tab: 'chat',
}; };
dispatch({ type: updateNavInfoActionType, payload }); dispatch({ type: updateNavInfoActionType, payload });
}, },
), ),
[dispatch], [dispatch],
); );
// Handle invalid device token
const localToken = useSelector(
state => state.tunnelbrokerDeviceToken.localToken,
);
const prevLocalToken = React.useRef(localToken);
React.useEffect(() => {
if (prevLocalToken.current && !localToken) {
electron?.fetchDeviceToken?.();
}
prevLocalToken.current = localToken;
}, [localToken]);
} }
function useCreatePushSubscription(): () => Promise<void> { function useCreatePushSubscription(): () => Promise<void> {
const publicKey = useSelector(state => state.pushApiPublicKey); const publicKey = useSelector(state => state.pushApiPublicKey);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callSetDeviceToken = useSetDeviceTokenFanout(); const callSetDeviceToken = useSetDeviceTokenFanout();
const staffCanSee = useStaffCanSee(); const staffCanSee = useStaffCanSee();
▲ Show 20 Lines • Show All 136 Lines • ▼ Show 20 Lines const callback = (event: MessageEvent) => {
} }
}; };
navigator.serviceWorker.addEventListener('message', callback); navigator.serviceWorker.addEventListener('message', callback);
return () => return () =>
navigator.serviceWorker?.removeEventListener('message', callback); navigator.serviceWorker?.removeEventListener('message', callback);
}, [dispatch, supported]); }, [dispatch, supported]);
// Handle invalid device token
const localToken = useSelector(
state => state.tunnelbrokerDeviceToken.localToken,
);
const prevLocalToken = React.useRef(localToken);
React.useEffect(() => {
if (
!navigator.serviceWorker ||
!supported ||
Notification.permission !== 'granted'
) {
return;
}
if (prevLocalToken.current && !localToken) {
void createPushSubscription();
}
prevLocalToken.current = localToken;
}, [createPushSubscription, localToken, supported]);
return null; return null;
} }
export { PushNotificationsHandler, useCreatePushSubscription }; export { PushNotificationsHandler, useCreatePushSubscription };
View Options

web/theme.css

Show First 20 Lines • Show All 113 Lines • ▼ Show 20 Lines () =>
tab: 'chat', tab: 'chat',
}; };
dispatch({ type: updateNavInfoActionType, payload }); dispatch({ type: updateNavInfoActionType, payload });
}, },
), ),
[dispatch], [dispatch],
); );
// Handle invalid device token
const localToken = useSelector(
state => state.tunnelbrokerDeviceToken.localToken,
);
const prevLocalToken = React.useRef(localToken);
React.useEffect(() => {
if (prevLocalToken.current && !localToken) {
electron?.fetchDeviceToken?.();
}
prevLocalToken.current = localToken;
}, [localToken]);
} }
function useCreatePushSubscription(): () => Promise<void> { function useCreatePushSubscription(): () => Promise<void> {
const publicKey = useSelector(state => state.pushApiPublicKey); const publicKey = useSelector(state => state.pushApiPublicKey);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callSetDeviceToken = useSetDeviceTokenFanout(); const callSetDeviceToken = useSetDeviceTokenFanout();
const staffCanSee = useStaffCanSee(); const staffCanSee = useStaffCanSee();
▲ Show 20 Lines • Show All 136 Lines • ▼ Show 20 Lines const callback = (event: MessageEvent) => {
} }
}; };
navigator.serviceWorker.addEventListener('message', callback); navigator.serviceWorker.addEventListener('message', callback);
return () => return () =>
navigator.serviceWorker?.removeEventListener('message', callback); navigator.serviceWorker?.removeEventListener('message', callback);
}, [dispatch, supported]); }, [dispatch, supported]);
// Handle invalid device token
const localToken = useSelector(
state => state.tunnelbrokerDeviceToken.localToken,
);
const prevLocalToken = React.useRef(localToken);
React.useEffect(() => {
if (
!navigator.serviceWorker ||
!supported ||
Notification.permission !== 'granted'
) {
return;
}
if (prevLocalToken.current && !localToken) {
void createPushSubscription();
}
prevLocalToken.current = localToken;
}, [createPushSubscription, localToken, supported]);
return null; return null;
} }
export { PushNotificationsHandler, useCreatePushSubscription }; export { PushNotificationsHandler, useCreatePushSubscription };