diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2022-04-20 10:45:29 +0200 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2022-04-20 10:45:29 +0200 |
| commit | 8a2f8b845b2c36e42e5535e8a2de82b4443b697b (patch) | |
| tree | ba11e7ab9305b98895085708aac749aee54970ea /gui/src | |
| parent | a96b1d873aa08c1dde9c176ba6c44624b9e960cb (diff) | |
| parent | 655a82c0d7a88e4c6b858aacdbdb2b47fee9d78f (diff) | |
| download | mullvadvpn-8a2f8b845b2c36e42e5535e8a2de82b4443b697b.tar.xz mullvadvpn-8a2f8b845b2c36e42e5535e8a2de82b4443b697b.zip | |
Merge branch 'vertically-fix-location-rows'
Diffstat (limited to 'gui/src')
| -rw-r--r-- | gui/src/renderer/components/TunnelControl.tsx | 30 |
1 files changed, 24 insertions, 6 deletions
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx index db91e9558f..5adcdee4b1 100644 --- a/gui/src/renderer/components/TunnelControl.tsx +++ b/gui/src/renderer/components/TunnelControl.tsx @@ -63,6 +63,10 @@ const Location = styled.div({ marginBottom: 2, }); +const LocationRow = styled.div({ + height: '36px', +}); + const StyledMarquee = styled(Marquee)(hugeText, { lineHeight: '36px', overflow: 'hidden', @@ -99,8 +103,8 @@ export default class TunnelControl extends React.Component<ITunnelControlProps> <Body> <Secured displayStyle={SecuredDisplayStyle.securing} /> <Location> - {this.renderCity()} {this.renderCountry()} + {this.renderCity()} </Location> <ConnectionPanelContainer /> </Body> @@ -116,8 +120,8 @@ export default class TunnelControl extends React.Component<ITunnelControlProps> <Body> <Secured displayStyle={SecuredDisplayStyle.secured} /> <Location> - {this.renderCity()} {this.renderCountry()} + {this.renderCity()} </Location> <ConnectionPanelContainer /> </Body> @@ -163,7 +167,10 @@ export default class TunnelControl extends React.Component<ITunnelControlProps> <Wrapper> <Body> <Secured displayStyle={SecuredDisplayStyle.unsecuring} /> - <Location>{this.renderCountry()}</Location> + <Location> + {this.renderCountry()} + <LocationRow /> + </Location> </Body> <Footer> {this.selectLocationButton()} @@ -180,7 +187,10 @@ export default class TunnelControl extends React.Component<ITunnelControlProps> <Wrapper> <Body> <Secured displayStyle={displayStyle} /> - <Location>{this.renderCountry()}</Location> + <Location> + {this.renderCountry()} + <LocationRow /> + </Location> </Body> <Footer> {this.selectLocationButton()} @@ -197,13 +207,21 @@ export default class TunnelControl extends React.Component<ITunnelControlProps> private renderCity() { const city = this.props.city === undefined ? '' : relayLocations.gettext(this.props.city); - return <StyledMarquee>{city}</StyledMarquee>; + return ( + <LocationRow> + <StyledMarquee>{city}</StyledMarquee> + </LocationRow> + ); } private renderCountry() { const country = this.props.country === undefined ? '' : relayLocations.gettext(this.props.country); - return <StyledMarquee>{country}</StyledMarquee>; + return ( + <LocationRow> + <StyledMarquee>{country}</StyledMarquee> + </LocationRow> + ); } private switchLocationButton() { |