diff options
| -rw-r--r-- | gui/assets/images/icon-close-down.svg | 8 | ||||
| -rw-r--r-- | gui/src/renderer/components/NavigationBar.tsx | 6 |
2 files changed, 13 insertions, 1 deletions
diff --git a/gui/assets/images/icon-close-down.svg b/gui/assets/images/icon-close-down.svg new file mode 100644 index 0000000000..4ef12ed6eb --- /dev/null +++ b/gui/assets/images/icon-close-down.svg @@ -0,0 +1,8 @@ +<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>icon-close-down</title> + <desc>Mullvad VPN app</desc> + <defs></defs> + <g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.6"> + <path d="M12,24 C5.37312,24 -3.2900871e-16,18.62688 -7.34788079e-16,12 C-1.14056745e-15,5.37312 5.37312,0 12,0 C18.62688,0 24,5.37312 24,12 C24,18.62688 18.62688,24 12,24 Z M7.00548958,11.9978652 C6.97547323,12.2732292 7.06852694,12.5603856 7.28524783,12.7773547 L13.2129013,18.7117979 C13.5936146,19.0929473 14.2231287,19.090784 14.6233317,18.7027276 L14.6942341,18.6339771 C15.09248,18.2478183 15.1055305,17.6195657 14.7108992,17.2180331 L9.58045095,11.9978652 L14.7108992,6.77769718 C15.1055305,6.37616462 15.09248,5.74791199 14.6942341,5.36175323 L14.6233317,5.29300272 C14.2231287,4.90494629 13.5936146,4.90278303 13.2129013,5.28393238 L7.28524783,11.2183756 C7.06852694,11.4353448 6.97547323,11.7225011 7.00548958,11.9978652 L7.00548958,11.9978652 Z" id="path" fill="#FFFFFF" transform="rotate(-90 12 12)"></path> + </g> +</svg> diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx index 82a8ed3dbd..f5d8fa82f4 100644 --- a/gui/src/renderer/components/NavigationBar.tsx +++ b/gui/src/renderer/components/NavigationBar.tsx @@ -447,9 +447,13 @@ interface ICloseBarItemProps { export class CloseBarItem extends Component<ICloseBarItemProps> { public render() { + // Use the arrow down icon on Linux, to avoid confusion with the close button in the window + // title bar. + const iconName = process.platform === 'linux' ? 'icon-close-down' : 'icon-close'; + return ( <Button style={[styles.closeBarItem.default]} onPress={this.props.action}> - <ImageView height={24} width={24} style={[styles.closeBarItem.icon]} source="icon-close" /> + <ImageView height={24} width={24} style={[styles.closeBarItem.icon]} source={iconName} /> </Button> ); } |
