Skip to content

Update QRCode and replace some icons to make it a bit fresher #845

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 9, 2025
Merged

Update QRCode and replace some icons to make it a bit fresher #845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62499ed
add material Paper and Box
T0biii Mar 8, 2025
5c063f7
replace: Apple and Windows Icon toi material Icons
T0biii Mar 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions website/src/components/GetConnected.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ import React, { Component, PropsWithChildren } from 'react';
import { AppState } from '../AppState';
import { isMobile } from '../Platform';
import { download } from '../Util';
import { LinuxIcon, MacOSIcon, WindowsIcon } from './Icons';
import { LinuxIcon } from './Icons';
import AppleIcon from '@mui/icons-material/Apple';
import MicrosoftIcon from '@mui/icons-material/Microsoft';
import { QRCode } from './QRCode';
import { TabPanel } from './TabPanel';

Expand Down Expand Up @@ -70,10 +72,10 @@ export class GetConnected extends Component<PropsWithChildren<Props>, any> {
<LinuxIcon />
</Button>
<Button onClick={() => this.go('https://www.wireguard.com/install/')}>
<WindowsIcon />
<MicrosoftIcon />
</Button>
<Button onClick={() => this.go('https://www.wireguard.com/install/#macos-app-store')}>
<MacOSIcon />
<AppleIcon />
</Button>
</ButtonGroup>
</ListItem>
Expand Down
60 changes: 0 additions & 60 deletions website/src/components/Icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,6 @@ import SvgIcon from '@mui/material/SvgIcon';

// from https://worldvectorlogo.com

export const MacOSIcon = () => (
<SvgIcon viewBox="0 0 256 256">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
<stop stopColor="#58B0E3" offset="0%" />
<stop stopColor="#F44E28" offset="100%" />
</linearGradient>
</defs>
<circle fill="#FFF" cx="128" cy="128" r="128" />
<path
d="M186.831 49.21h-7.774l-50.825 73.452h-.464L77.059 49.21h-7.89l54.77 79.022L69.4 206.79h7.774l50.477-73.22h.464l50.476 73.22h7.891l-54.538-78.558 54.886-79.022z"
fill="url(#a)"
/>
</SvgIcon>
);

export const IosIcon = () => (
<SvgIcon viewBox="0.276 0.525 124.326 79.116">
<path d="M4.621 6.965c0 1.368-.833 2.38-2.262 2.38-1.19 0-2.083-1.012-2.083-2.38 0-1.31.952-2.381 2.202-2.381 1.31 0 2.143 1.071 2.143 2.381zM1.327 78.5V23.78H3.57V78.5H1.327zM78.174 39.512c0 27.588-15.315 40.129-32.079 40.129-17.125 0-30.993-13.565-30.993-38.988C15.102 14.549 29.453.526 47.301.526 64.787.524 78.174 14.318 78.174 39.512zm-60.799.57C17.375 61 27.513 77.25 46.201 77.25c18.818 0 29.611-16.75 29.611-37.406 0-19.155-8.648-36.636-28.382-36.636S17.375 19.667 17.375 40.082zM86.406 72.571c3.763 2.508 10.258 4.93 15.844 4.93 10.602 0 20.031-7.417 20.031-18.334 0-10.131-6.281-15.417-16.945-19.958-9.544-4.064-18.125-8.475-18.125-19.305 0-11.285 8.891-19.267 20.975-19.267 6.498 0 11.4 1.824 13.68 3.42l-.906 1.968c-1.938-1.367-7.176-3.109-12.874-3.109-12.771 0-18.334 9.65-18.334 16.754 0 9.812 7.606 13.093 17.41 17.767 11.399 5.585 17.44 10.51 17.44 21.227 0 11.514-8.207 20.86-22.799 20.86-6.043 0-12.996-2.051-16.416-4.674l1.019-2.279z" />
</SvgIcon>
);

export const WindowsIcon = () => (
<SvgIcon viewBox="0 0 256 257">
<path
d="M0 36.357L104.62 22.11l.045 100.914-104.57.595L0 36.358zm104.57 98.293l.08 101.002L.081 221.275l-.006-87.302 104.494.677zm12.682-114.405L255.968 0v121.74l-138.716 1.1V20.246zM256 135.6l-.033 121.191-138.716-19.578-.194-101.84L256 135.6z"
fill="#00ADEF"
/>
</SvgIcon>
);

export const LinuxIcon = () => (
<SvgIcon viewBox="0 0 192.756 192.756">
<g>
Expand Down Expand Up @@ -69,32 +38,3 @@ export const LinuxIcon = () => (
</g>
</SvgIcon>
);

export const AndroidIcon = () => (
<SvgIcon viewBox="32.163 68.509 203.691 228.155">
<path
d="M101.885 207.092c7.865 0 14.241 6.376 14.241 14.241v61.09c0 7.865-6.376 14.24-14.241 14.24-7.864 0-14.24-6.375-14.24-14.24v-61.09c0-7.864 6.376-14.24 14.24-14.24z"
fill="#a4c639"
/>
<path
d="M69.374 133.645c-.047.54-.088 1.086-.088 1.638v92.557c0 9.954 7.879 17.973 17.66 17.973h94.124c9.782 0 17.661-8.02 17.661-17.973v-92.557c0-.552-.02-1.1-.066-1.638H69.374z"
fill="#a4c639"
/>
<path
d="M166.133 207.092c7.865 0 14.241 6.376 14.241 14.241v61.09c0 7.865-6.376 14.24-14.241 14.24-7.864 0-14.24-6.375-14.24-14.24v-61.09c0-7.864 6.376-14.24 14.24-14.24zM46.405 141.882c7.864 0 14.24 6.376 14.24 14.241v61.09c0 7.865-6.376 14.241-14.24 14.241-7.865 0-14.241-6.376-14.241-14.24v-61.09c-.001-7.865 6.375-14.242 14.241-14.242zM221.614 141.882c7.864 0 14.24 6.376 14.24 14.241v61.09c0 7.865-6.376 14.241-14.24 14.241-7.865 0-14.241-6.376-14.241-14.24v-61.09c0-7.865 6.376-14.242 14.241-14.242zM69.79 127.565c.396-28.43 25.21-51.74 57.062-54.812h14.312c31.854 3.073 56.666 26.384 57.062 54.812H69.79z"
fill="#a4c639"
/>
<path
d="M74.743 70.009l15.022 26.02M193.276 70.009l-15.023 26.02"
fill="none"
stroke="#a4c639"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M114.878 102.087c.012 3.974-3.277 7.205-7.347 7.216-4.068.01-7.376-3.202-7.388-7.176v-.04c-.011-3.975 3.278-7.205 7.347-7.216 4.068-.011 7.376 3.2 7.388 7.176v.04zM169.874 102.087c.012 3.974-3.277 7.205-7.347 7.216-4.068.01-7.376-3.202-7.388-7.176v-.04c-.011-3.975 3.278-7.205 7.347-7.216 4.068-.011 7.376 3.2 7.388 7.176v.04z"
fill="#fff"
/>
</SvgIcon>
);
29 changes: 27 additions & 2 deletions website/src/components/QRCode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import qrcode from 'qrcode';
import { lazy } from '../Util';
import { CircularProgress } from '@mui/material';
import { Paper, CircularProgress, Box } from '@mui/material';

interface Props {
content: string;
Expand All @@ -16,6 +16,31 @@ export class QRCode extends React.Component<Props> {
if (!this.uri.current) {
return <CircularProgress color="secondary" />;
}
return <img alt="WireGuard QR code" src={this.uri.current} />;
return (
<Box
component={Paper}
elevation={2}
sx={{
p: 0.5,
background: '#ffffff',
borderRadius: 3,
transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
'&:hover': {
transform: 'scale(1.02)',
boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
}
}}
>
<img
alt="WireGuard QR code"
src={this.uri.current}
style={{
display: 'block',
width: '250px',
height: '250px'
}}
/>
</Box>
);
}
}
Loading