Skip to content

Commit 1fbc9ae

Browse files
shonsirshashonsirsha
committed
frontend: add and use ContentWrapper for Status outside of View
Using our new ContentWrapper in order for components that are using Status and were outside of the content view, to look like they are in the view. It's done to improve aesthetics. Also, they will be scrolling with the content instead of "sticking on top" like it used to be.
1 parent 765e6d7 commit 1fbc9ae

File tree

15 files changed

+163
-87
lines changed

15 files changed

+163
-87
lines changed

‎frontends/web/src/app.module.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.parentContainer {
2+
min-width: 0;
3+
overflow: auto;
4+
}

‎frontends/web/src/app.tsx

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ import { Darkmode } from './components/darkmode/darkmode';
4343
import { AuthRequired } from './components/auth/authrequired';
4444
import { WCSigningRequest } from './components/wallet-connect/incoming-signing-request';
4545
import { Providers } from './contexts/providers';
46+
import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
47+
import styles from './app.module.css';
4648

4749
export const App = () => {
4850
const { t } = useTranslation();
@@ -154,42 +156,47 @@ export const App = () => {
154156
<Providers>
155157
<Darkmode />
156158
<div className="app">
157-
<AuthRequired/>
159+
<AuthRequired />
158160
<Sidebar
159161
accounts={activeAccounts}
160162
deviceIDs={deviceIDs}
161163
devices={devices}
162164
/>
163-
<div className="appContent flex flex-column flex-1" style={{ minWidth: 0 }}>
164-
<Update />
165-
<Banner msgKey="bitbox01" />
166-
<Banner msgKey="bitbox02" />
167-
<MobileDataWarning />
168-
<WCSigningRequest />
169-
<Aopp />
170-
<KeystoreConnectPrompt />
171-
{
172-
Object.entries(devices).map(([deviceID, productName]) => {
173-
if (productName === 'bitbox02') {
174-
return (
175-
<Fragment key={deviceID}>
176-
<BitBox02Wizard
177-
deviceID={deviceID}
178-
/>
179-
</Fragment>
180-
);
181-
}
182-
return null;
183-
})
184-
}
185-
<AppRouter
186-
accounts={accounts}
187-
activeAccounts={activeAccounts}
188-
deviceIDs={deviceIDs}
189-
devices={devices}
190-
devicesKey={devicesKey}
191-
/>
192-
<RouterWatcher />
165+
<div className={`appContent flex flex-column flex-1 ${styles.parentContainer}`}>
166+
<div className="flex flex-column">
167+
<ContentWrapper className={`flex flex-column ${styles.banners}`}>
168+
<Update />
169+
<MobileDataWarning />
170+
<Banner msgKey="bitbox01" />
171+
<Banner msgKey="bitbox02" />
172+
</ContentWrapper>
173+
<WCSigningRequest />
174+
<Aopp />
175+
<KeystoreConnectPrompt />
176+
{
177+
Object.entries(devices).map(([deviceID, productName]) => {
178+
if (productName === 'bitbox02') {
179+
return (
180+
<Fragment key={deviceID}>
181+
<BitBox02Wizard
182+
deviceID={deviceID}
183+
/>
184+
</Fragment>
185+
);
186+
}
187+
return null;
188+
})
189+
}
190+
<AppRouter
191+
accounts={accounts}
192+
activeAccounts={activeAccounts}
193+
deviceIDs={deviceIDs}
194+
devices={devices}
195+
devicesKey={devicesKey}
196+
/>
197+
<RouterWatcher />
198+
</div>
199+
193200
</div>
194201
<Alert />
195202
<Confirm />

‎frontends/web/src/components/banner/banner.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,11 @@ export const Banner = ({ msgKey }: TBannerProps) => {
4848
<Status
4949
dismissible={banner.dismissible ? `banner-${msgKey}-${banner.id}` : ''}
5050
type={banner.type ? banner.type : 'warning'}>
51-
{ message[i18n.resolvedLanguage] || message[(i18n.options.fallbackLng as string[])[0]] }
51+
{message[i18n.resolvedLanguage] || message[(i18n.options.fallbackLng as string[])[0]]}
5252
&nbsp;
53-
{ link && (
53+
{link && (
5454
<A href={link.href} className={style.link}>
55-
{ link.text || t('clickHere') }
55+
{link.text || t('clickHere')}
5656
</A>
5757
)}
5858
</Status>

‎frontends/web/src/components/contentwrapper/contentwrapper.module.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.contentWrapper {
2+
margin: auto;
3+
max-width: var(--content-width);
4+
padding: 0 var(--space-default);
5+
width: 100%;
6+
}
7+
8+
.contentWrapper > div:first-child {
9+
margin-top: var(--space-half);
10+
}
11+
12+
.contentWrapper > div {
13+
margin-bottom: var(--space-half);
14+
}
15+
16+
.contentWrapper div:last-child {
17+
margin-bottom: 0;
18+
}
19+
20+
@media (max-width: 768px) {
21+
.contentWrapper {
22+
padding: 0 var(--space-half);
23+
}
24+
}

‎frontends/web/src/components/contentwrapper/contentwrapper.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// Copyright 2024 Shift Crypto AG
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// http://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
import { ReactNode } from 'react';
16+
import style from './contentwrapper.module.css';
17+
18+
type TProps = {
19+
className?: string
20+
children: ReactNode
21+
}
22+
23+
export const ContentWrapper = ({ className = '', children }: TProps) => {
24+
return (
25+
<div className={`${className} ${style.contentWrapper}`}>{children}</div>
26+
);
27+
};

‎frontends/web/src/components/message/message.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
}
3434

3535
.message img {
36-
margin-right: 12px;
36+
margin-right: 4px;
3737
max-width: 30px;
3838
}
3939

‎frontends/web/src/components/message/message.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ type MessageProps = {
5050
small?: boolean;
5151
title?: string;
5252
type?: TMessageTypes;
53+
noIcon?: boolean;
5354
children: ReactNode;
5455
}
5556

@@ -58,14 +59,15 @@ export const Message = ({
5859
small,
5960
title,
6061
type = 'info',
62+
noIcon = false,
6163
children,
6264
}: MessageProps) => {
6365
if (hidden) {
6466
return null;
6567
}
6668
return (
6769
<div className={`${styles[type]} ${small ? styles.small : ''}`}>
68-
<MessageIcon type={type} />
70+
{!noIcon && <MessageIcon type={type} />}
6971
<div className={styles.content}>
7072
{title && (
7173
<h2 className={`subTitle ${styles.title}`}>{title}</h2>

‎frontends/web/src/components/status/status.module.css

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.content {
2-
margin-right: var(--space-half);
2+
margin-right: var(--space-eight);
33
}
44

55
.container {
@@ -21,7 +21,3 @@
2121
width: 16px;
2222
height: 16px;
2323
}
24-
25-
.messageWrapper {
26-
margin-bottom: calc(var(--spacing-default) * -1);
27-
}

‎frontends/web/src/components/status/status.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ import { getConfig, setConfig } from '@/utils/config';
2020
import { CloseXDark, CloseXWhite } from '@/components/icon';
2121
import { useDarkmode } from '@/hooks/darkmode';
2222
import { Message } from '@/components/message/message';
23-
import style from './status.module.css';
2423
import { TMessageTypes } from '@/utils/types';
24+
import style from './status.module.css';
2525

26-
27-
type TPRops = {
26+
type TProps = {
2827
hidden?: boolean;
2928
type?: TMessageTypes;
29+
noIcon?: boolean;
3030
// used as keyName in the config if dismissing the status should be persisted, so it is not
3131
// shown again. Use an empty string if it should be dismissible without storing it in the
3232
// config, so the status will be shown again the next time.
@@ -38,10 +38,11 @@ type TPRops = {
3838
export const Status = ({
3939
hidden,
4040
type = 'warning',
41+
noIcon = false,
4142
dismissible,
4243
className = '',
4344
children,
44-
}: TPRops) => {
45+
}: TProps) => {
4546
const [show, setShow] = useState(dismissible ? false : true);
4647

4748
const { isDarkMode } = useDarkmode();
@@ -75,7 +76,7 @@ export const Status = ({
7576

7677
return (
7778
<div className={`${style.messageWrapper} ${className}`}>
78-
<Message type={type}>
79+
<Message noIcon={noIcon} type={type}>
7980
<div className={style.container}>
8081
<div className={style.content}>
8182
{children}
@@ -92,3 +93,4 @@ export const Status = ({
9293
</div>
9394
);
9495
};
96+

‎frontends/web/src/routes/account/account.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ import { Status } from '@/components/status/status';
3535
import { Transactions } from '@/components/transactions/transactions';
3636
import { useLoad } from '@/hooks/api';
3737
import { HideAmountsButton } from '@/components/hideamountsbutton/hideamountsbutton';
38-
import style from './account.module.css';
3938
import { ActionButtons } from './actionButtons';
4039
import { Insured } from './components/insuredtag';
4140
import { AccountGuide } from './guide';
@@ -47,6 +46,8 @@ import { Dialog } from '@/components/dialog/dialog';
4746
import { A } from '@/components/anchor/anchor';
4847
import { getConfig, setConfig } from '@/utils/config';
4948
import { i18n } from '@/i18n/i18n';
49+
import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
50+
import style from './account.module.css';
5051

5152
type Props = {
5253
accounts: accountApi.IAccount[];
@@ -276,18 +277,20 @@ export const Account = ({
276277
return (
277278
<div className="contentWithGuide">
278279
<div className="container">
279-
<Status hidden={!hasCard} type="warning">
280-
{t('warning.sdcard')}
281-
</Status>
280+
<ContentWrapper>
281+
<Status hidden={!hasCard} type="warning">
282+
{t('warning.sdcard')}
283+
</Status>
284+
</ContentWrapper>
282285
<Dialog open={insured && uncoveredFunds.length !== 0} medium title={t('account.warning')} onClose={() => setUncoveredFunds([])}>
283286
<MultilineMarkup tagName="p" markup={t('account.uncoveredFunds', {
284287
name: account.name,
285288
uncovered: uncoveredFunds,
286-
})}/>
289+
})} />
287290
<A href={getBitsuranceGuideLink()}>{t('account.uncoveredFundsLink')}</A>
288291
</Dialog>
289292
<Header
290-
title={<h2><span>{account.name}</span>{insured && (<Insured/>)}</h2>}>
293+
title={<h2><span>{account.name}</span>{insured && (<Insured />)}</h2>}>
291294
<HideAmountsButton />
292295
<Link to={`/account/${code}/info`} title={t('accountInfo.title')} className="flex flex-row flex-items-center m-left-half">
293296
<Info className={style.accountIcon} />
@@ -326,7 +329,7 @@ export const Account = ({
326329
handleExport={exportAccount}
327330
explorerURL={account.blockExplorerTxPrefix}
328331
transactions={transactions}
329-
/> }
332+
/>}
330333
</div>
331334
</div>
332335
</div>

0 commit comments

Comments
 (0)