Skip to content
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

Jump to bottom

Change LHN header to Expensify #18802

Merged
merged 35 commits into from
May 16, 2023
Merged

Change LHN header to Expensify #18802

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
b548a3e
change LHN header to Expensify
bondydaa May 4, 2023
3b461e2
update the header component so it can accept react components (or any…
bondydaa May 5, 2023
735725c
import the wordmark logo and render it in the header
bondydaa May 5, 2023
5a5b4d7
fix style
bondydaa May 5, 2023
1fa9eed
create new component for imageheader to properly use children to rend…
bondydaa May 5, 2023
fc93302
remove unused props
bondydaa May 5, 2023
0bc7607
removing unneeded string
bondydaa May 5, 2023
398546c
remove unnecessary new component since we have a wordmark that we can…
bondydaa May 8, 2023
6be4be4
remove in-svg styles so we can modify them via props
bondydaa May 8, 2023
9968ab7
update the wordmark component to accept more customization so it can …
bondydaa May 8, 2023
8a14e2e
fix typo
bondydaa May 8, 2023
4843a61
update usage of wordmark component based on new api
bondydaa May 8, 2023
c7acacd
Merge branch 'main' of github.com:Expensify/App into bondy-rename-lhn
bondydaa May 8, 2023
8920c49
linter fixes
bondydaa May 8, 2023
64de69b
fixing proptypes b/c linter complains
bondydaa May 8, 2023
2d1eb9b
remove the unneeded badge component from header component
bondydaa May 8, 2023
8d25d70
include const lib
bondydaa May 8, 2023
b4aee41
remove unneeded import
bondydaa May 8, 2023
24c3259
linter be damned this is what works
bondydaa May 8, 2023
d1596bc
Merge branch 'main' of github.com:Expensify/App into bondy-rename-lhn
bondydaa May 9, 2023
a29631b
import style props to appease linter
bondydaa May 9, 2023
e91e970
Merge branch 'main' of github.com:Expensify/Expensify.cash into bondy…
parasharrajat May 11, 2023
e76740c
Fix the icon
parasharrajat May 11, 2023
b9e5209
Logo dimensions adjustments
parasharrajat May 11, 2023
ca38c16
Merge branch 'main' of github.com:Expensify/Expensify.cash into bondy…
parasharrajat May 15, 2023
af95cb1
New design for header
parasharrajat May 16, 2023
79ee408
Code cleanuo
parasharrajat May 16, 2023
1a44a13
Merge branch 'main' of github.com:Expensify/Expensify.cash into bondy…
parasharrajat May 16, 2023
f10b4e8
More refactor to clean the code
parasharrajat May 16, 2023
bae718b
Revert Changes
parasharrajat May 16, 2023
c09f945
Remove left gap from badge
parasharrajat May 16, 2023
ea3d582
Reset changes
parasharrajat May 16, 2023
fdb9b39
font weight bold
parasharrajat May 16, 2023
898cf53
lineHeight Auto
parasharrajat May 16, 2023
ca85fad
Lint fixes
parasharrajat May 16, 2023
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
19 changes: 9 additions & 10 deletions assets/images/expensify-logo--dev.svg
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can probably undo the changes to this file and the assets/images/expensify-logo--staging.svg file since we're no longer using them for the LHN stuff.

I'm actually a bit confused how the sign in pages aren't black and still render as the green color... oh nvm it's b/c of this line

App/src/components/ExpensifyWordmark.js

Line 39 in ca85fad

<LogoComponent fill={themeColors.success} />

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fill={themeColors.success} prop is actually irrelevant

On Login page, expensify-wordmark.svg, expensify-logo--dev.svg, expensify-logo--staging.svg, expensify-logo--adhoc.svg are used.
expensify-wordmark.svg is production logo and doesn't have env badge. But other svgs have env badge

On LHN, only expensify-wordmark.svg is used. And env badge is fully customized RN view, not image.

As a follow-up, we can remove all these svgs and remain only expensify-wordmark.svg. So refactor login logo to be same as LHN logo.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have plan on this?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think that is necessary to both look the same. Also, technically this change is out of the scope of this issue. I am happy to do this but I am busy with other stuff, feel free to spin up a PR if you want to help with this. Thanks.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 9 additions & 10 deletions assets/images/expensify-logo--staging.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 6 additions & 1 deletion src/components/Badge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ const propTypes = {
// eslint-disable-next-line react/forbid-prop-types
badgeStyles: PropTypes.arrayOf(PropTypes.object),

/** Styles for Badge Text */
// eslint-disable-next-line react/forbid-prop-types
textStyles: PropTypes.arrayOf(PropTypes.object),

/** Callback to be called on onPress */
onPress: PropTypes.func,
};
Expand All @@ -35,6 +39,7 @@ const defaultProps = {
error: false,
pressable: false,
badgeStyles: [],
textStyles: [],
onPress: undefined,
environment: CONST.ENVIRONMENT.DEV,
};
Expand All @@ -55,7 +60,7 @@ const Badge = (props) => {
onPress={props.onPress}
>
<Text
style={[styles.badgeText, textStyles]}
style={[styles.badgeText, textStyles, ...props.textStyles]}
numberOfLines={1}
>
{props.text}
Expand Down
3 changes: 2 additions & 1 deletion src/components/EnvironmentBadge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ const EnvironmentBadge = (props) => {
success={props.environment === CONST.ENVIRONMENT.STAGING || props.environment === CONST.ENVIRONMENT.ADHOC}
error={props.environment !== CONST.ENVIRONMENT.STAGING && props.environment !== CONST.ENVIRONMENT.ADHOC}
text={text}
badgeStyles={[styles.alignSelfCenter]}
badgeStyles={[styles.alignSelfEnd, styles.headerEnvBadge]}
textStyles={[styles.headerEnvBadgeText]}
environment={props.environment}
/>
);
Expand Down
21 changes: 13 additions & 8 deletions src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import EnvironmentBadge from './EnvironmentBadge';

const propTypes = {
/** Title of the Header */
title: PropTypes.string.isRequired,
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),

/** Subtitle of the header */
subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
Expand All @@ -22,19 +22,24 @@ const propTypes = {
};

const defaultProps = {
shouldShowEnvironmentBadge: false,
title: '',
subtitle: '',
textStyles: [],
shouldShowEnvironmentBadge: false,
};
const Header = (props) => (
<View style={[styles.flex1, styles.flexRow]}>
<View style={styles.mw100}>
<Text
numberOfLines={2}
style={[styles.headerText, styles.textLarge, ...props.textStyles]}
>
{props.title}
</Text>
{_.isString(props.title)
? Boolean(props.title) && (
<Text
numberOfLines={2}
style={[styles.headerText, styles.textLarge, ...props.textStyles]}
>
{props.title}
</Text>
)
: props.title}
{/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
{_.isString(props.subtitle)
? Boolean(props.subtitle) && (
Expand Down
1 change: 0 additions & 1 deletion src/languages/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,6 @@ export default {
newChat: 'New chat',
newGroup: 'New group',
newRoom: 'New room',
headerChat: 'Chats',
buttonSearch: 'Search',
buttonMySettings: 'My settings',
fabNewChat: 'New chat (Floating action)',
Expand Down
1 change: 0 additions & 1 deletion src/languages/es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,6 @@ export default {
newChat: 'Nuevo chat',
newGroup: 'Nuevo grupo',
newRoom: 'Nueva sala de chat',
headerChat: 'Chats',
buttonSearch: 'Buscar',
buttonMySettings: 'Mi configuración',
fabNewChat: 'Nuevo chat',
Expand Down
15 changes: 11 additions & 4 deletions src/pages/home/sidebar/SidebarLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import compose from '../../../libs/compose';
import Navigation from '../../../libs/Navigation/Navigation';
import ROUTES from '../../../ROUTES';
import Icon from '../../../components/Icon';
import Header from '../../../components/Header';
import * as Expensicons from '../../../components/Icon/Expensicons';
import AvatarWithIndicator from '../../../components/AvatarWithIndicator';
import Tooltip from '../../../components/Tooltip';
Expand All @@ -30,7 +29,11 @@ import LHNOptionsList from '../../../components/LHNOptionsList/LHNOptionsList';
import SidebarUtils from '../../../libs/SidebarUtils';
import reportPropTypes from '../../reportPropTypes';
import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
import Header from '../../../components/Header';
import defaultTheme from '../../../styles/themes/default';
import OptionsListSkeletonView from '../../../components/OptionsListSkeletonView';
import variables from '../../../styles/variables';
import LogoComponent from '../../../../assets/images/expensify-wordmark.svg';

const propTypes = {
/** Toggles the navigation menu open and closed */
Expand Down Expand Up @@ -148,11 +151,15 @@ class SidebarLinks extends React.Component {
nativeID="drag-area"
>
<Header
title={this.props.translate('sidebarScreen.headerChat')}
accessibilityLabel={this.props.translate('sidebarScreen.headerChat')}
title={
<LogoComponent
fill={defaultTheme.textLight}
width={variables.lhnLogoWidth}
height={variables.lhnLogoHeight}
/>
}
accessibilityRole="text"
shouldShowEnvironmentBadge
textStyles={[styles.textHeadline]}
/>
<Tooltip text={this.props.translate('common.search')}>
<TouchableOpacity
Expand Down
15 changes: 15 additions & 0 deletions src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3245,6 +3245,21 @@ const styles = {
borderWidth: 2,
backgroundColor: themeColors.highlightBG,
},

headerEnvBadge: {
marginLeft: 0,
marginBottom: 2,
height: 12,
paddingLeft: 4,
paddingRight: 4,
alignItems: 'center',
},

headerEnvBadgeText: {
fontSize: 7,
fontWeight: fontWeightBold,
lineHeight: undefined,
},
};

export default styles;
2 changes: 2 additions & 0 deletions src/styles/variables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,8 @@ export default {
signInLogoWidth: 120,
signInLogoWidthLargeScreen: 144,
signInLogoWidthPill: 132,
lhnLogoWidth: 108,
lhnLogoHeight: 28,
signInLogoWidthLargeScreenPill: 162,
modalContentMaxWidth: 360,
listItemHeightNormal: 64,
Expand Down