summaryrefslogtreecommitdiffhomepage
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/assets/images/app-triangle-default-dark.svg5
-rw-r--r--app/components/HeaderBar.css8
-rw-r--r--app/components/HeaderBar.js2
-rw-r--r--app/components/Settings.css121
-rw-r--r--app/components/Settings.js37
-rw-r--r--app/main.js2
6 files changed, 171 insertions, 4 deletions
diff --git a/app/assets/images/app-triangle-default-dark.svg b/app/assets/images/app-triangle-default-dark.svg
new file mode 100644
index 0000000000..2585895c05
--- /dev/null
+++ b/app/assets/images/app-triangle-default-dark.svg
@@ -0,0 +1,5 @@
+<svg width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>app-triangle-extended</title>
+ <desc>Mullvad VPN app</desc>
+ <path fill="#192E45" d="M0,12 L30,12 L30,13 L0,13 L0,12 Z M0,12 C7.24137931,12 12.9310345,1.0135008e-16 15,0 C17.0689655,0 23.7931034,12 30,12 L0,12 Z" id="app-triangle-extended"></path>
+</svg> \ No newline at end of file
diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
index d250cfd968..d7478cfaf0 100644
--- a/app/components/HeaderBar.css
+++ b/app/components/HeaderBar.css
@@ -23,6 +23,14 @@
padding: 12px 0 0 0;
}
+.headerbar--style-defaultDark {
+ background-color: #192E45;
+}
+
+.headerbar--style-defaultDark:before {
+ background-image: url(../assets/images/app-triangle-default-dark.svg);
+}
+
.headerbar--style-error {
background-color: #D0021B;
}
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index decf561f5d..0f599a7a39 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -5,7 +5,7 @@ import Enum from '../lib/enum';
export default class HeaderBar extends Component {
/** Bar style */
- static Style = Enum('default', 'error', 'success');
+ static Style = Enum('default', 'defaultDark', 'error', 'success');
static propTypes = {
style: PropTypes.string,
diff --git a/app/components/Settings.css b/app/components/Settings.css
index 2468e972f5..30186446e4 100644
--- a/app/components/Settings.css
+++ b/app/components/Settings.css
@@ -1,14 +1,133 @@
.settings {
+ background: #192E45;
+ height: 100%;
+}
+
+.settings__container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.settings__header {
+ flex: 0 0 auto;
+ padding: 40px 24px 24px;
+ position: relative; /* anchor for close button */
+}
+.settings__content {
+ flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.settings__options {
+ flex: 1 1 auto;
+}
+
+.settings__footer {
+ flex: 0 0 auto;
}
.settings__close {
+ position: absolute;
display: block;
border: 0;
padding: 0;
- margin: 0 0 0 12px;
+ margin: 0;
width: 24px;
height: 24px;
+ top: 24px;
+ left: 12px;
background-color: transparent;
background-image: url(../assets/images/icon-close.svg);
+ opacity: 0.6;
+ z-index: 1; /* part of .settings__container convers the button */
+}
+
+.settings__title {
+ font-family: DINPro;
+ font-size: 32px;
+ font-weight: 900;
+ line-height: 40px;
+ color: #FFFFFF;
+ margin: 0 0 8px 0;
+}
+
+.settings__account {
+ font-family: "Open Sans";
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 20px;
+ color: rgba(255,255,255,0.8);
+}
+
+.settings__account-label {
+ display: inline-block;
+}
+
+.settings__account-id {
+ display: inline-block;
+ font-weight: 800;
+ margin-left: 4px;
+}
+
+.settings__cell {
+ background-color: #294D73;
+ padding: 15px 16px 15px 24px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
+
+.settings__cell + .settings__cell {
+ margin-top: 1px;
+}
+
+.settings__cell-label {
+ font-family: DINPro;
+ font-size: 20px;
+ font-weight: 900;
+ line-height: 26px;
+ color: #FFFFFF;
+ flex: 1 0 auto;
+}
+
+.settings__cell-icon {
+ width: 24px;
+ height: 24px;
+ flex: 0 0 auto;
+ margin-right: 8px;
+}
+
+.settings__cell-value {
+
+}
+
+.settings__cell-footer {
+ padding: 8px 24px 24px;
+ font-family: "Open Sans";
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 20px;
+ color: rgba(255,255,255,0.8);
+}
+
+.settings__footer {
+ margin: 24px;
+}
+
+.settings__logout-button {
+ display: block;
+ width: 100%;
+ padding: 7px 12px 9px;
+ background-color: #D0021B;
+ border-radius: 4px;
+ border: 0;
+ font-family: DINPro;
+ font-size: 20px;
+ font-weight: 900;
+ text-align: center;
+ line-height: 26px;
+ color: #FFFFFF;
+} \ No newline at end of file
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 6e077356c0..5b36d8a64c 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -14,10 +14,45 @@ export default class Settings extends Component {
render() {
return (
<Layout>
- <Header hidden={ true } />
+ <Header hidden={ true } style={ Header.Style.defaultDark } />
<Container>
<div className="settings">
<button className="settings__close" onClick={ ::this.onClose } />
+ <div className="settings__container">
+ <div className="settings__header">
+ <h2 className="settings__title">Settings</h2>
+ <div className="settings__account">
+ <div className="settings__account-label">Account ID</div>
+ <div className="settings__account-id">{ this.props.user.account }</div>
+ </div>
+ </div>
+ <div className="settings__content">
+ <div className="settings__options">
+ <div className="settings__cell">
+ <div className="settings__cell-label">Auto-secure</div>
+ <div className="settings__cell-value">
+ <input type="checkbox" className="settings__switch" />
+ </div>
+ </div>
+ <div className="settings__cell-footer">
+ When this device connects to the internet it will automatically connect to a secure server
+ </div>
+ <div className="settings__cell">
+ <div className="settings__cell-label">FAQs</div>
+ </div>
+ <div className="settings__cell">
+ <div className="settings__cell-label">Guides</div>
+ </div>
+ <div className="settings__cell">
+ <img className="settings__cell-icon" src="./assets/images/icon-email.svg" />
+ <div className="settings__cell-label">Contact support</div>
+ </div>
+ </div>
+ <div className="settings__footer">
+ <button className="settings__logout-button">Logout</button>
+ </div>
+ </div>
+ </div>
</div>
</Container>
</Layout>
diff --git a/app/main.js b/app/main.js
index 81e5d39e4c..4c2e123573 100644
--- a/app/main.js
+++ b/app/main.js
@@ -67,7 +67,7 @@ const getWindowPosition = () => {
const createWindow = () => {
window = new BrowserWindow({
width: 320,
- height: 568,
+ height: 568 + 12, // 12 is the size of transparent area around arrow
frame: false,
resizable: false,
maximizable: false,
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.