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

Improved styling on header, fixed spacing and automatic hiding #3162

Merged
merged 1 commit into from
Mar 16, 2024
Merged

Improved styling on header, fixed spacing and automatic hiding #3162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 6 additions & 1 deletion src/components/AccountWidget/AccountWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,12 @@ const AccountWidget = ({
:
<Button href={`${config.VITE_API_HOST}/login`}>
<IconSteam />
<ButtonLabel>{strings.app_login}</ButtonLabel>
<ButtonLabel
style={{
lineHeight: '1px',
}}
>{strings.app_login}
</ButtonLabel>
</Button>
}
</div>
Expand Down
1 change: 1 addition & 0 deletions src/components/AccountWidget/LoggedIn.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const StyledFlatButton = styled(FlatButton)`
padding-right: 10px !important;
padding-left: 0 !important;
}
display: flex;
`;

const LoggedIn = ({ playerId, style, strings }) => {
Expand Down
21 changes: 14 additions & 7 deletions src/components/Header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,17 @@ const TabContainer = styled.div`
margin: 0 12px;
text-align: center;
position: relative;
`;
line-height: 1;

const AppLogoWrapper = styled.div`
@media screen and (max-width: 800px) {
@media only screen and (max-width: 1500px) {
display: none;
}
`;

const AppLogoWrapper = styled.div`
line-height: 1;
`;

const DropdownMenu = styled(Menu)`
& .MuiMenu-paper {
background: ${constants.primarySurfaceColor};
Expand Down Expand Up @@ -111,7 +114,7 @@ const DrawerLink = styled(Link)`

& li:hover {
background-color: rgba(0, 0, 0, 0.08);
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
`;

Expand Down Expand Up @@ -164,6 +167,10 @@ const SettingsGroup = ({ children }) => {

const MenuButtonWrapper = styled.div`
margin-right: 12px;

@media only screen and (min-width: 1500px) {
display: none;
}
`;

const LogoGroup = ({ onMenuClick }) => (
Expand Down Expand Up @@ -310,7 +317,7 @@ const Header = ({ location, disableSearch }) => {
{small && <LinkGroup navbarPages={navbarPages} />}
</VerticalAlignDiv>
{!disableSearch && <SearchGroup />}
<VerticalAlignDiv style={{ marginLeft: '16px' }}>
<VerticalAlignDiv>
{small && <AccountGroup />}
<SettingsGroup>
<LocalizationMenu />
Expand All @@ -331,8 +338,8 @@ const Header = ({ location, disableSearch }) => {
</MenuLogoWrapper>
<List>
{drawerPages.map((page) => (
<DrawerLink
key={`drawer__${page.to}`}
<DrawerLink
key={`drawer__${page.to}`}
to={page.to}
onClick={() => setMenuState(false)}
>
Expand Down
15 changes: 11 additions & 4 deletions src/components/Search/SearchForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ class SearchForm extends React.Component {
}),
strings: PropTypes.shape({}),
small: PropTypes.bool,
}
};

constructor(props) {
super(props);
Expand Down Expand Up @@ -61,11 +61,18 @@ class SearchForm extends React.Component {
render() {
const { strings, small } = this.props;
return (
<form onSubmit={this.formSubmit} style={{ width: small ? '280px' : 'auto' }}>
<form
onSubmit={this.formSubmit}
style={{ width: small ? '260px' : 'auto' }}
>
<TextField
id="searchField"
aria-label={strings.search_title}
hintText={strings.search_title}
hintText={
small
? strings.search_title
: `${strings.search_title.slice(0, -13)}...`
}
value={this.state.query}
onChange={this.handleChange}
fullWidth
Expand All @@ -75,7 +82,7 @@ class SearchForm extends React.Component {
left: '-40px',
width: 'calc(100% + 40px)',
}}
style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}
style={{ whiteSpace: 'nowrap', overflow: 'hidden', display: 'flex' }}
underlineStyle={{ borderColor: 'transparent' }}
/>
</form>
Expand Down
Loading