Skip to content

Commit 154fca8

Browse files
ShahanaFarooquiShahanaFarooqui
committed
Header Responsiveness
1 parent f922b84 commit 154fca8

5 files changed

Lines changed: 116 additions & 93 deletions

File tree

‎apps/frontend/src/components/bookkeeper/BkprHome/BkprHome.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
@use '../../../styles/constants' as *;
22

3-
[data-screensize='SM'],
4-
[data-screensize='XS'] {
5-
& .cards-container {
6-
height: 77vh;
7-
}
8-
}
9-
103
.bookkeeper-dashboard-container {
114
padding: 0 1rem;
125
}

‎apps/frontend/src/components/ui/Header/Header.tsx‎

Lines changed: 77 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -42,75 +42,84 @@ const Header = (props) => {
4242

4343
if (currentScreenSize === Breakpoints.XS || currentScreenSize === Breakpoints.SM) {
4444
return (
45-
<Row className="header mb-5 mx-1" data-testid="header">
45+
<Row className="header mb-2 mx-1" data-testid="header">
4646
<Col xs={12} data-testid="header-info">
47-
<AnimatePresence>
48-
<motion.img
49-
key='cln-logo'
50-
alt='Core Lightning Logo'
51-
src={isDarkMode ? '/images/cln-logo-dark.png' : '/images/cln-logo-light.png'}
52-
className='header-info-logo me-3 rounded float-start'
53-
initial={{ opacity: 0 }}
54-
animate={{ opacity: 1 }}
55-
transition={{ delay: 0.05, duration: 0.01 }}
56-
/>
57-
</AnimatePresence>
58-
<Col className="h-100 d-flex align-items-center justify-content-between">
59-
<h4 className="m-0 text-dark">
60-
<strong>CLN</strong>
61-
</h4>
62-
<div className="d-flex align-items-center">
63-
<Menu compact={true} />
64-
<Settings compact={true} onShowConnectWallet={props.onShowConnectWallet} />
65-
{serverConfig.singleSignOn === true || serverConfig.singleSignOn === "true" ?
66-
<span className='mx-3'></span>
67-
:
68-
<div onClick={logoutHandler}>
69-
<LogoutSVG className="svg-logout ms-3 cursor-pointer" />
70-
</div>
71-
}
72-
<div onClick={modeChangeHandler}>
73-
{(isDarkMode) ? <NightModeSVG className='svg-night me-3' /> : <DayModeSVG className='svg-day me-3' />}
74-
</div>
75-
</div>
76-
</Col>
77-
<Row className='header-info-text my-2'>
78-
<Col xs={12} className='d-flex align-items-center text-light'>
79-
{isAuthenticated && nodeInfo.isLoading ?
80-
<>
81-
<OverlayTrigger
82-
placement="auto"
83-
delay={{ show: 250, hide: 250 }}
84-
overlay={<Tooltip>Loading</Tooltip>}
85-
>
86-
<span className="d-inline-block mx-3 dot bg-warning"></span>
87-
</OverlayTrigger>
88-
<span className="fs-7">Loading...</span>
89-
</>
90-
:
91-
nodeInfo.error ?
92-
<>
93-
<OverlayTrigger
94-
placement='auto'
95-
delay={{ show: 250, hide: 250 }}
96-
overlay={<Tooltip>Error</Tooltip>}
97-
>
98-
<span className='d-inline-block mx-3 dot bg-danger'></span>
99-
</OverlayTrigger>
100-
<span className='fs-7'>{('Error: ' + nodeInfo.error)}</span>
101-
</>
102-
:
103-
<>
104-
<OverlayTrigger
105-
placement='auto'
106-
delay={{ show: 250, hide: 250 }}
107-
overlay={<Tooltip>Connected</Tooltip>}
108-
>
109-
<span className='d-inline-block mx-3 dot bg-success'></span>
110-
</OverlayTrigger>
111-
<span className='fs-7'>{nodeInfo.alias?.replace('--', '-').replace(/-\d+-.*$/, '') + ' (' + nodeInfo.version + ')'}</span>
112-
</>
113-
}
47+
<Row>
48+
<Col xs={3} className='mb-3'>
49+
<AnimatePresence>
50+
<motion.img
51+
key='cln-logo'
52+
alt='Core Lightning Logo'
53+
src={isDarkMode ? '/images/cln-logo-dark.png' : '/images/cln-logo-light.png'}
54+
className='header-info-logo me-3 rounded float-start'
55+
initial={{ opacity: 0 }}
56+
animate={{ opacity: 1 }}
57+
transition={{ delay: 0.05, duration: 0.01 }}
58+
/>
59+
</AnimatePresence>
60+
</Col>
61+
<Col xs={9}>
62+
<h4 className="ms-3 m-0 text-dark">
63+
<strong>Core Lightning Node</strong>
64+
</h4>
65+
<Row className='header-info-text my-1'>
66+
<Col xs={12} className='d-flex align-items-center text-light'>
67+
{isAuthenticated && nodeInfo.isLoading ?
68+
<>
69+
<OverlayTrigger
70+
placement="auto"
71+
delay={{ show: 250, hide: 250 }}
72+
overlay={<Tooltip>Loading</Tooltip>}
73+
>
74+
<span className="d-inline-block mx-3 dot bg-warning"></span>
75+
</OverlayTrigger>
76+
<span className="fs-7">Loading...</span>
77+
</>
78+
:
79+
nodeInfo.error ?
80+
<>
81+
<OverlayTrigger
82+
placement='auto'
83+
delay={{ show: 250, hide: 250 }}
84+
overlay={<Tooltip>Error</Tooltip>}
85+
>
86+
<span className='d-inline-block mx-3 dot bg-danger'></span>
87+
</OverlayTrigger>
88+
<span className='fs-7'>{('Error: ' + nodeInfo.error)}</span>
89+
</>
90+
:
91+
<>
92+
<OverlayTrigger
93+
placement='auto'
94+
delay={{ show: 250, hide: 250 }}
95+
overlay={<Tooltip>Connected</Tooltip>}
96+
>
97+
<span className='d-inline-block mx-3 dot bg-success'></span>
98+
</OverlayTrigger>
99+
<span className='fs-7'>{nodeInfo.alias?.replace('--', '-').replace(/-\d+-.*$/, '')}</span>
100+
</>
101+
}
102+
</Col>
103+
</Row>
104+
<Row className='ms-1'>
105+
<Col className="h-100 d-flex align-items-end justify-content-between">
106+
<div className="d-flex align-items-center">
107+
<Menu compact={true} />
108+
<Settings compact={true} onShowConnectWallet={props.onShowConnectWallet} />
109+
{serverConfig.singleSignOn === true || serverConfig.singleSignOn === "true" ?
110+
<span className='mx-2'></span>
111+
:
112+
<div onClick={logoutHandler}>
113+
<LogoutSVG className="svg-logout ms-2 cursor-pointer" />
114+
</div>
115+
}
116+
<div onClick={modeChangeHandler}>
117+
{(isDarkMode) ? <NightModeSVG className='svg-night mx-2' /> : <DayModeSVG className='svg-day mx-2' />}
118+
</div>
119+
</div>
120+
</Col>
121+
</Row>
122+
114123
</Col>
115124
</Row>
116125
</Col>
@@ -213,4 +222,3 @@ const Header = (props) => {
213222
};
214223

215224
export default Header;
216-

‎apps/frontend/src/components/ui/Menu/Menu.scss‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
text-decoration: none;
55
& .dropdown-toggle.btn-menu {
66
background-color: $primary;
7-
width: 8rem;
87
padding: 1.25rem 1.375rem;
98
&::after {
109
display: none;
@@ -32,8 +31,13 @@
3231
.menu-dropdown.dropdown {
3332
& .dropdown-toggle.btn-menu {
3433
color: $white;
35-
& svg path {
36-
fill: $white;
34+
& svg {
35+
.cls-1 {
36+
fill:none;
37+
stroke:$white;
38+
stroke-linecap:round;
39+
stroke-linejoin:round;
40+
}
3741
}
3842
}
3943
& > .dropdown-menu {
@@ -42,18 +46,28 @@
4246
}
4347
.btn-compact {
4448
background-color: $primary;
45-
& svg > path {
46-
fill: $dark;
47-
}
49+
& svg {
50+
.cls-1 {
51+
fill:none;
52+
stroke:$dark;
53+
stroke-linecap:round;
54+
stroke-linejoin:round;
55+
}
56+
}
4857
}
4958
}
5059

5160
@include color-mode(dark) {
5261
.menu-dropdown.dropdown {
5362
& .dropdown-toggle.btn-menu {
5463
color: $card-bg-dark;
55-
& svg path {
56-
fill: $card-bg-dark;
64+
& svg {
65+
.cls-1 {
66+
fill:none;
67+
stroke:$card-bg-dark;
68+
stroke-linecap:round;
69+
stroke-linejoin:round;
70+
}
5771
}
5872
}
5973
& .dropdown-menu {
@@ -64,8 +78,13 @@
6478
}
6579
.btn-compact {
6680
background-color: $primary;
67-
& svg > path {
68-
fill: $dark;
81+
& svg {
82+
.cls-1 {
83+
fill:none;
84+
stroke:$dark;
85+
stroke-linecap:round;
86+
stroke-linejoin:round;
87+
}
6988
}
7089
}
7190
}

‎apps/frontend/src/components/ui/Menu/Menu.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { Link, useLocation } from 'react-router-dom';
33
import Dropdown from 'react-bootstrap/Dropdown';
44
import { useSelector } from 'react-redux';
55
import { selectIsAuthenticated, selectNodeInfo } from '../../../store/rootSelectors';
6+
import { HomeSVG } from '../../../svgs/Home';
7+
import { BookkeeperSVG } from '../../../svgs/Bookkeeper';
68

79
const Menu = props => {
810
const isAuthenticated = useSelector(selectIsAuthenticated);
@@ -21,19 +23,17 @@ const Menu = props => {
2123
>
2224
<Dropdown.Toggle
2325
variant={props.compact ? '' : 'primary'}
24-
disabled={
25-
!!(
26-
nodeInfo.error ||
27-
(isAuthenticated && nodeInfo.isLoading)
28-
)
29-
}
26+
disabled={!!(nodeInfo.error || (isAuthenticated && nodeInfo.isLoading))}
3027
className={
3128
props.compact
3229
? 'd-flex align-items-center justify-content-between btn-rounded btn-compact btn-menu'
3330
: 'd-flex align-items-center justify-content-between btn-rounded btn-menu'
3431
}
3532
>
36-
<span className={props.compact ? '' : 'me-3'}>{location.pathname.includes('bookkeeper') ? 'Dashboard' : 'Bookkeeper'}</span>
33+
<span className={props.compact ? '' : 'me-3'}>
34+
<span className={props.compact ? '' : 'me-2'}>{props.compact ? '' : location.pathname.includes('bookkeeper') ? 'Dashboard' : 'Bookkeeper'}</span>
35+
{location.pathname.includes('bookkeeper') ? <HomeSVG className={((!!nodeInfo.error || (isAuthenticated && nodeInfo.isLoading)) ? 'svg-fill-disabled' : '')} /> : <BookkeeperSVG className={((!!nodeInfo.error || (isAuthenticated && nodeInfo.isLoading)) ? 'svg-fill-disabled' : '')} />}
36+
</span>
3737
</Dropdown.Toggle>
3838
</Dropdown>
3939
);

‎apps/frontend/src/components/ui/Settings/Settings.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22

33
.settings-menu.dropdown {
44
& .dropdown-toggle.btn-settings-menu {
5+
&.btn-compact {
6+
margin-left: 0;
7+
}
58
margin-left: 0.5rem;
69
padding: 1.25rem 1.375rem;
710
&::after {

0 commit comments

Comments
 (0)