Skip to content

Commit

Permalink
feat: set header style for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimcase
jimcase committed Aug 21, 2023
1 parent 1ede8ac commit 1765b7d
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 55 deletions.
5 changes: 2 additions & 3 deletions ui/summit-2023/src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,10 @@ html,
top: -231px;
border-radius: 100px;
transform: rotate(21.27deg);
opacity: 0.60;
opacity: 0.6;
z-index: -1;

@media (max-width: 420px) {
@media (max-width: 420px) {
display: none;
}
}

25 changes: 14 additions & 11 deletions ui/summit-2023/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,22 @@ import BackgroundPolygon1 from './common/resources/images/polygon1.svg';
function App() {
return (
<>
<div className="main-container">
<img src={BackgroundPolygon1} alt="Background Shape" className="background-shape-1"/>
<div className="App">
<Router>
<Header />
<div className="content">
<PageRouter />
</div>
<Footer />
</Router>
<div className="main-container">
<img
src={BackgroundPolygon1}
alt="Background Shape"
className="background-shape-1"
/>
<div className="App">
<Router>
<Header />
<div className="content">
<PageRouter />
</div>
<Footer />
</Router>
</div>

</div>
</>
);
}
Expand Down
30 changes: 15 additions & 15 deletions ui/summit-2023/src/common/styles/colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,33 @@
--color-secondary: #363c4a;
--color-secondary-rgb: 54, 60, 74;

--color-light: #F6F9FF;
--color-light: #f6f9ff;

--text-color: var(--color-primary);
--text-color-rgb: var(--color-primary-rgb);

--color-ultra-light-grey: #FFF;
--color-light-grey: #6C6F89;
--color-ultra-light-grey: #fff;
--color-light-grey: #6c6f89;
--color-medium-grey: #434656;
--color-dark-grey: #24262E;
--color-dark-grey: #24262e;

--color-ultra-light-green: #EBFEF1;
--color-light-green: #ACFCC5;
--color-medium-green: #75FA9F;
--color-ultra-light-green: #ebfef1;
--color-light-green: #acfcc5;
--color-medium-green: #75fa9f;
--color-dark-green: #056122;

--color-ultra-light-blue: #F5F9FF;
--color-light-blue: #DAEEFB;
--color-medium-blue: #1894D6;
--color-ultra-light-blue: #f5f9ff;
--color-light-blue: #daeefb;
--color-medium-blue: #1894d6;
--color-dark-blue: #106593;
--color-ultra-dark-blue: #03021F;
--color-ultra-dark-blue: #03021f;

--color-ultra-light-orange: #FFF1EB;
--color-light-orange: #FD873C;
--color-ultra-light-orange: #fff1eb;
--color-light-orange: #fd873c;
--color-medium-orange: #652701;

--color-ultra-light-red: #FFEBEE;
--color-light-red: #C20024;
--color-ultra-light-red: #ffebee;
--color-light-red: #c20024;

--color-accent: #92ffc0;
}
31 changes: 30 additions & 1 deletion ui/summit-2023/src/components/common/Header/Header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@

.connect-button.MuiButton-root {
display: inline-flex;
margin-top: 15px;
padding: 16px 24px 16px 16px;
align-items: flex-start;
gap: 8px;
Expand All @@ -42,3 +41,33 @@
.connect-button.MuiButton-root:hover {
transform: scale(1.02);
}

.menuButton.MuiButtonBase-root {
width: 51px;
height: 51px;
flex-shrink: 0;
border-radius: 8px;
border: 1px solid var(--color-ultra-dark-blue);
background: var(--color-ultra-light-blue);
}

.closeIcon.MuiSvgIcon-root {
width: 29px;
height: 29px;
flex-shrink: 0;
color: var(--color-ultra-dark-blue);
}

.listItem.MuiListItem-root {
display: flex;
margin-left: 20px;
width: 335px;
padding: 16px 24px;
align-items: flex-start;
gap: 10px;
color: #434656;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
64 changes: 39 additions & 25 deletions ui/summit-2023/src/components/common/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@ import {
Divider,
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import CloseIcon from '@mui/icons-material/Close';
import './Header.scss';
import {i18n} from '../../../i18n';
import { i18n } from '../../../i18n';

const Header: React.FC = () => {
const [drawerOpen, setDrawerOpen] = useState(false);
Expand All @@ -24,34 +25,44 @@ const Header: React.FC = () => {

const drawerItems = (
<List>
<ListItem>
<img
src="/static/cardano-ballot.png"
alt="Cardano Logo"
style={{ flexGrow: 1, height: '40px' }}
/>
<ListItem style={{ justifyContent: 'space-between' }}>
<Button
className="connect-button"
color="inherit"
>
{i18n.t('header.connectWalletButton')}
</Button>
<IconButton
className="menuButton"
onClick={() => setDrawerOpen(false)}
>
<CloseIcon className="closeIcon" />
</IconButton>
</ListItem>
<Divider style={{ marginTop: '3px' }} />
<ListItem
onClick={() => setDrawerOpen(false)}
component={NavLink}
to="/categories"
className="listItem"
style={{marginTop: '20px'}}
>
{i18n.t('header.menu.categories')}
{i18n.t('header.menu.categories')}
</ListItem>
<ListItem
onClick={() => setDrawerOpen(false)}
component={NavLink}
to="/leaderboard"
className="listItem"
>
{i18n.t('header.menu.leaderboard')}
{i18n.t('header.menu.leaderboard')}
</ListItem>
<ListItem
onClick={() => setDrawerOpen(false)}
component={NavLink}
to="/user-guide"
className="listItem"
>
{i18n.t('header.menu.userGuide')}
{i18n.t('header.menu.userGuide')}
</ListItem>
</List>
);
Expand All @@ -65,20 +76,20 @@ const Header: React.FC = () => {
<Toolbar>
{isMobile ? (
<>
<img
src="/static/cardano-ballot.png"
alt="Cardano Logo"
style={{ height: isMobile ? '29px' : '40px' }}
/>
<div style={{ flexGrow: 1 }}></div>
<IconButton
edge="start"
edge="end"
color="inherit"
className="menuButton"
onClick={() => setDrawerOpen(true)}
>
<MenuIcon />
<MenuIcon className="closeIcon" />
</IconButton>
<div style={{ flexGrow: 1 }}></div>
<Button
className="connect-button"
color="inherit"
>
{i18n.t('header.connectWalletButton')}
</Button>
</>
) : (
<Grid
Expand All @@ -98,27 +109,27 @@ const Header: React.FC = () => {
to="/categorias"
className="nav-link"
>
{i18n.t('header.menu.categories')}
{i18n.t('header.menu.categories')}
</NavLink>
<NavLink
to="/leaderboard"
className="nav-link"
>
{i18n.t('header.menu.leaderboard')}
{i18n.t('header.menu.leaderboard')}
</NavLink>
<NavLink
to="/user-guide"
className="nav-link"
>
{i18n.t('header.menu.userGuide')}
{i18n.t('header.menu.userGuide')}
</NavLink>
</Grid>
<Grid item>
<Button
className="connect-button"
color="inherit"
>
{i18n.t('header.connectWalletButton')}
{i18n.t('header.connectWalletButton')}
</Button>
</Grid>
</Grid>
Expand All @@ -127,9 +138,12 @@ const Header: React.FC = () => {
</AppBar>

<Drawer
anchor="left"
anchor="right"
open={drawerOpen}
onClose={() => setDrawerOpen(false)}
PaperProps={{
style: isMobile ? { width: '100%' } : {},
}}
>
{drawerItems}
</Drawer>
Expand Down

0 comments on commit 1765b7d

Please sign in to comment.