Merge pull request #3162 from robsassack/page-header-update

Improved styling on header, fixed spacing and automatic hiding
odota · Mar 16, 2024 · 4ef2f8b · 4ef2f8b
2 parents 29cd17b + da14c41
commit 4ef2f8b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git a/src/components/AccountWidget/AccountWidget.jsx b/src/components/AccountWidget/AccountWidget.jsx
@@ -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>

diff --git a/src/components/AccountWidget/LoggedIn.jsx b/src/components/AccountWidget/LoggedIn.jsx
@@ -19,6 +19,7 @@ const StyledFlatButton = styled(FlatButton)`
    padding-right: 10px !important;
    padding-left: 0 !important;
  }
+ display: flex;
 `;
 
 const LoggedIn = ({ playerId, style, strings }) => {

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -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};
@@ -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;
   }
 `;
 
@@ -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 }) => (
@@ -310,7 +317,7 @@ const Header = ({ location, disableSearch }) => {
           {small && <LinkGroup navbarPages={navbarPages} />}
         </VerticalAlignDiv>
         {!disableSearch && <SearchGroup />}
-        <VerticalAlignDiv style={{ marginLeft: '16px' }}>
+        <VerticalAlignDiv>
           {small && <AccountGroup />}
           <SettingsGroup>
             <LocalizationMenu />
@@ -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)}
                 >

diff --git a/src/components/Search/SearchForm.jsx b/src/components/Search/SearchForm.jsx
@@ -17,7 +17,7 @@ class SearchForm extends React.Component {
     }),
     strings: PropTypes.shape({}),
     small: PropTypes.bool,
-  }
+  };
 
   constructor(props) {
     super(props);
@@ -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
@@ -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>