hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Add rounded corners to welcome banners

Browse Source 
Signed-off-by: Juho Heikka <juho.heikka@gmail.com>
This commit is contained in:
Juho Heikka 2021-09-16 14:32:34 +03:00
parent 64fb590377
commit bcf66b1967
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/components/+welcome/welcome.scss
View File

@ -71,4 +71,10 @@
text-decoration: underline;
}
}
.BannerCarouselWrapper {
border-radius: var(--border-radius);
display: inline-block;
overflow: hidden;
}
}

12
src/renderer/components/+welcome/welcome.tsx
View File

@ -33,10 +33,10 @@ export const defaultWidth = 320;
@observer
export class Welcome extends React.Component {
render() {
const welcomeBanner = WelcomeBannerRegistry.getInstance().getItems();
const welcomeBanners = WelcomeBannerRegistry.getInstance().getItems();
// if there is banner with specified width, use it to calculate the width of the container
const maxWidth = welcomeBanner.reduce((acc, curr) => {
const maxWidth = welcomeBanners.reduce((acc, curr) => {
const currWidth = curr.width ?? 0;
if (acc > currWidth) {
@ -49,10 +49,10 @@ export class Welcome extends React.Component {
return (
<div className="flex justify-center Welcome align-center">
<div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
{welcomeBanner.length > 0 ? (
{welcomeBanners.length > 0 ? (
<Carousel
stopAutoPlayOnHover={true}
indicators={welcomeBanner.length > 1}
indicators={welcomeBanners.length > 1}
autoPlay={true}
navButtonsAlwaysInvisible={true}
indicatorIconButtonProps={{
@ -67,8 +67,8 @@ export class Welcome extends React.Component {
}}
interval={8000}
>
{welcomeBanner.map((item, index) =>
<item.Banner key={index} />
{welcomeBanners.map((item, index) =>
<div key={index} className="BannerCarouselWrapper"><item.Banner/></div>
)}
</Carousel>
) : <Icon svg="logo-lens" className="logo" />}