UIUX: Apply copy improvements & Electrum UX cleanup (#2237)

* Apply feedback revisions

* add favicon and fix wallet reveal triangle

* fix favicon

* fix favicon sizing

* fix tooltip width

* increase constract of message box

* fix explorer-link classes

* fix width of 500 exception

* fix web title

* missing classes for explorer links

---------

Co-authored-by: moneymanolis <moneymanolis@protonmail.com>
This commit is contained in:
OTK 2023-02-22 13:25:03 -05:00 committed by GitHub
parent b11c3d2646
commit a6acdca282
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 4021 additions and 534 deletions

View file

@ -280,6 +280,7 @@ function initMainWindow() {
const iconPath = isDev ? path.join(__dirname, 'assets-dev/app_icon.png') : ""
mainWindow = new BrowserWindow({
width: parseInt(dimensions.width * 0.8),
minWidth: 1120,
height: parseInt(dimensions.height * 0.8),
icon: iconPath,
webPreferences

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 8 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

File diff suppressed because it is too large Load diff

View file

@ -1,15 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='img/icon.png') }}"/>
<title>{{ _("Specter Desktop") }}</title>
<link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}"/>
<title>{{ _("Specter") }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='output.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='typography.css') }}">
</head>
<body class="bg-dark-900 text-white">
<main class="flex flex-col items-center">
<div class="max-w-[700px]">
<div class="max-w-[1100px]">
<h1 class="mt-20">{{ _("Server error") }}</h1>
<div class="mt-5">
<h3>{{ _("Exception") }}</h3>
@ -21,7 +21,7 @@
<div class="mt-8">
<h3>{{ _("Details") }}</h3>
<pre class="max-w-[700px] overflow-scroll bg-dark-700 p-4 rounded-lg"><code>{{ traceback }}</code></pre>
<pre class="max-w-[1100px] break-all whitespace-pre-wrap bg-dark-700 p-4 rounded-lg"><code>{{ traceback }}</code></pre>
</div>
<p class="mt-3">
{{ _('Please let us know! Create an ') }}<a href="https://github.com/cryptoadvance/specter-desktop/issues" target="_blank">{{ _("issue") }}</a>{{ _(" or ping us on ") }}<a href="https://t.me/spectersupport" target="_blank">{{ _("Telegram") }}</a>{{ _(" to fix it.") }}

View file

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html class="bg-dark-900 overflow-hidden max-h-screen">
<head>
<title>{{ _("Specter Desktop") }}</title>
<title>{{ _("Specter") }}</title>
<link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='img/icon.png') }}"/>
<link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">

View file

@ -1,21 +1,9 @@
<template id="explorer-link">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='output.css') }}">
<div style="display: none;"><!--<style>-->
.explorer-link {
color: inherit;
text-decoration: none;
}
.explorer-link:hover {
color: #fff !important;
text-decoration: underline !important;
cursor: pointer;
}
</div><!--</style>-->
{% if specter.explorer %}
<a class="explorer-link" target="_blank"></a>
<a class="explorer-link cursor-pointer no-underline hover:underline hover:text-white" target="_blank"></a>
{% else %}
<span class="explorer-link"></span>
<span class="explorer-link cursor-pointer no-underline hover:underline hover:text-white"></span>
{% endif %}
</template>

View file

@ -6,7 +6,7 @@
<template id="messagebox">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='output.css') }}">
<div class="shadow-md rounded-xl p-4 mr-4 mb-4 bg-dark-700" id="main">
<div class="shadow-md rounded-xl px-4 py-3 mr-4 mb-3 bg-dark-500" id="main">
<slot class="text-white" id="error-text">Error: Something bad happened!</slot>
<a class="ml-4 text-white cursor-pointer" id="cancel-icon">&#x2715;</a>
</div>

View file

@ -16,9 +16,7 @@
{% if (specter.wallet_manager.wallets | length) > 1 %}
<a class="text-dark-200 py-1 font-medium hover:bg-dark-800 rounded-lg px-3 flex space-x-2 items-center hover:text-dark-50" id="wallets_overview_link" href="{{ url_for('wallets_endpoint.wallets_overview') }}" data-style="cursor: pointer;" title="Wallets Overview">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3154 16.8815H4.69043C3.82749 16.8815 3.12793 16.1819 3.12793 15.319V12.9214V12.9211C3.12793 12.6449 3.14624 12.3689 3.18274 12.0951L4.19721 4.48747C4.30071 3.71119 4.9629 3.13144 5.74605 3.13147H14.2601C15.0432 3.13148 15.7053 3.71121 15.8088 4.48747L16.8232 12.0953V12.0953C16.8598 12.3691 16.8781 12.6451 16.8781 12.9213V15.319V15.319C16.8781 16.1819 16.1785 16.8815 15.3156 16.8815C15.3155 16.8815 15.3155 16.8815 15.3155 16.8815L15.3154 16.8815ZM15.5696 12.1527L14.5696 4.65267C14.5489 4.49743 14.4165 4.3815 14.2599 4.38148H5.74599C5.5894 4.38151 5.45701 4.49744 5.4363 4.65267L4.4363 12.1527C4.41349 12.3237 4.53368 12.4809 4.70475 12.5037C4.71844 12.5056 4.73224 12.5065 4.74605 12.5065H6.96543C7.09994 12.5065 7.21937 12.5926 7.2619 12.7202L7.74446 14.1678C7.78699 14.2954 7.90642 14.3815 8.04093 14.3815H11.9654C12.0999 14.3815 12.2194 14.2954 12.2619 14.1678L12.7445 12.7202C12.787 12.5926 12.9064 12.5065 13.0409 12.5065H15.2602C15.4328 12.5064 15.5726 12.3664 15.5725 12.1938C15.5725 12.1801 15.5716 12.1663 15.5698 12.1527H15.5696Z"/>
</svg>
<svg class="fill-current" width="20" height="20" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M48.01,10.0209h-8.74228e-08c1.10457,-4.82823e-08 2,0.89543 2,2v8.5253l2.18947e-08,-2.53808e-05c-0.000350312,0.414213 -0.336421,0.749716 -0.750634,0.749365c-0.198522,-0.000167896 -0.38888,-0.0790377 -0.529348,-0.219322l-6.13412,-6.13622l-1.41661e-07,-1.41718e-07c-0.374915,-0.375067 -0.585519,-0.883682 -0.5855,-1.414v-1.5051l2.13163e-14,3.01992e-07c-1.66785e-07,-1.10457 0.89543,-2 2,-2Zm0,44h-9h-8.74228e-08c-1.10457,-4.82823e-08 -2,-0.895431 -2,-2c0,0 0,-1.42109e-14 0,-1.42109e-14v-12v0c0,-1.10457 -0.895431,-2 -2,-2h-6h-8.74228e-08c-1.10457,4.82823e-08 -2,0.895431 -2,2c0,0 0,7.10543e-15 0,7.10543e-15v12v0c0,1.10457 -0.895431,2 -2,2h-9h-8.74228e-08c-1.10457,-4.82823e-08 -2,-0.895431 -2,-2c0,0 0,-1.42109e-14 0,-1.42109e-14v-18.0131h-3.99l-7.28213e-08,-3.70051e-11c-1.10496,-0.000561575 -2.00024,-0.896761 -1.99968,-2.00172c0.000269422,-0.530115 0.210917,-1.03845 0.585683,-1.41338l21.994,-22.0065l-1.68542e-07,1.68624e-07c0.780468,-0.780848 2.04616,-0.781156 2.82701,-0.000687509c0.000229113,0.000229002 0.000458171,0.000458059 0.000687172,0.000687172l21.994,22.0065l4.69126e-08,4.69217e-08c0.781207,0.781359 0.781084,2.04807 -0.000275155,2.82928c-0.374911,0.374838 -0.883273,0.585539 -1.41343,0.585824h-3.998v18.013l7.10543e-15,1.68524e-07c0,1.10457 -0.895431,2 -2,2c-5.62169e-08,0 -1.12307e-07,0 -1.68524e-07,-7.10543e-15Z" fill="currentColor" fill-rule="evenodd"></path></svg>
<span>{{ _("Wallets Overview") }}</span>
</a>
{% endif %}
@ -240,7 +238,7 @@
{% endif %}
<script>
if (localStorage.wallets === 'true') {
if (localStorage.wallets === 'true' || localStorage.wallets === undefined) {
document.getElementById('wallets_list').classList.remove('hidden')
document.getElementById('toggle_wallets_list').innerHTML = 'Wallets ▾';
} else {
@ -248,7 +246,7 @@
document.getElementById('toggle_wallets_list').innerHTML = 'Wallets ▸';
}
if (localStorage.devices === 'true') {
if (localStorage.devices === 'true' || localStorage.devices === undefined) {
document.getElementById('devices_list').classList.remove('hidden')
document.getElementById('toggle_devices_list').innerHTML = 'Devices ▾';
} else {

View file

@ -84,6 +84,7 @@ You can use the move-right attribute, to move the tooltip to the right if necess
display: none;
position: absolute;
z-index: 2000;
width: 180px;
left: 28px;
top: -20px;
background: black;

View file

@ -1,19 +1,6 @@
<template id="tx-data">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='output.css') }}">
<!-- <div style="display: none;"><!--<style>-1->-->
<!-- .tx-data-table td {-->
<!-- text-align: left;-->
<!-- }-->
<!-- .tx_info {-->
<!-- padding: 1em;-->
<!-- border: 1px solid #506072;-->
<!-- border-radius: 4px;-->
<!-- text-align: center;-->
<!-- margin-bottom: 2em;-->
<!-- }-->
<!-- </div><!--</style>-1->-->
<div class="tx-data bg-dark-800 rounded-xl p-4">
<div class="flex justify-between mb-2">
<h3 class="mb-0">{{ _("Transaction Details") }}</h3>
@ -105,7 +92,7 @@
rawtxHTML += `
<table class="tx-data-table -mx-4 mt-8">
<tbody>
<tr><td><span class="optional">{{ _("Transaction id") }}:</span><span class="mobile-only">TxID:</span></td><td data-style="word-break: break-all;"><explorer-link data-type="tx" data-value="${this.txid}"></explorer-link></td></tr>
<tr><td><span class="optional">{{ _("Transaction ID") }}:</span></td><td data-style="word-break: break-all;"><explorer-link data-type="tx" data-value="${this.txid}"></explorer-link></td></tr>
<tr><td>From wallet:</td><td><a href=${walletLink}>${walletName}<a></td></tr>
<tr><td>Size:</td><td>${rawtx.vsize} vbytes <span class="note">(${rawtx.size} bytes)</span></td></tr>
`;

View file

@ -20,7 +20,7 @@
</div>
<div class="main-description-box p-5 bg-dark-800 flex flex-col items-center border-2 border-dark-700 rounded-lg opacity-20">
<h2 class="text-center">{{ _("Using an Electrum server") }}</h2>
<p class="mb-12 text-center flex grow">{{ _("This is the easiest way to get started since you can connect to a third-party server. However, it exposes your financial activity. You can also choose your own server.") }}</p>
<a href="#" class="mb-0 button bg-accent text-white w-full" data-cy="spectrum-connection-btn" disabled>{{ _('Spectrum Connection') }}</a>
<p class="mb-12 text-center flex grow">{{ _("Connect to a public server run by a reputable Bitcoin company, or choose your own Electrum server. Connecting to a public server may expose your IP address and transaction information.") }}</p>
<a href="#" class="mb-0 button bg-accent text-white w-full" data-cy="spectrum-connection-btn" disabled>{{ _('Electrum Connection') }}</a>
</div>
</div>

View file

@ -1,57 +1,61 @@
{% extends "spectrum/base.jinja" %}
{% block main %}
<h1>{{ _("Spectrum - Connecting to Electrum server") }}</h1>
<h1>{{ _("Connect with Electrum") }}</h1>
<p>
{{ _("- Choose from a list of Electrum servers or connect to your own server") }}<br/>
{{ _("- Connecting to a third-party server without Tor leaks private information") }}<br/>
{{ _("Choose from a list of Electrum servers or connect to your own server. ") }}
{{ _("Connecting to a third-party server without Tor leaks private information. ") }}
</p>
<div class="flex p-4 mt-3 mb-4 bg-dark-600 rounded-lg" role="alert">
<svg class="flex-shrink-0 inline w-6 h-6 mr-3" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M32.0022,55.9844l-1.04907e-06,-2.84217e-14c-13.2548,-5.79387e-07 -24,-10.7452 -24,-24c5.79387e-07,-13.2548 10.7452,-24 24,-24c13.2548,5.79387e-07 24,10.7452 24,24l2.13163e-14,-1.04907e-06c0,13.2548 -10.7452,24 -24,24Zm1.5,-32l3.82016e-08,-2.71086e-09c-1.79133,0.127116 -3.35165,-1.21031 -3.5,-3l6.50646e-08,-7.8524e-07c0.148296,-1.78972 1.70866,-3.12717 3.5,-3l-5.85322e-09,4.15529e-10c1.79134,-0.127171 3.3517,1.21028 3.5,3l-5.57104e-08,6.72365e-07c-0.148295,1.78976 -1.70872,3.12723 -3.5001,3Zm1.4206,6.7635l-2.7853,10.5093l-8.37179e-08,3.15667e-07c-0.270677,1.02062 0.262417,2.08281 1.2425,2.4757l-5.91015e-08,-2.36708e-08c0.379505,0.151996 0.628277,0.519688 0.6282,0.9285v0.323l8.52651e-14,4.05e-07c0,0.551933 -0.447167,0.999503 -0.9991,1h-2.9891l-4.04477e-08,1.96948e-10c-1.65938,0.00807986 -3.01111,-1.33056 -3.01919,-2.98993c-0.00127082,-0.260991 0.0314695,-0.521035 0.0973943,-0.773566l2.7852,-10.5094l2.79671e-08,-1.05468e-07c0.270652,-1.02067 -0.262537,-2.08289 -1.2427,-2.4757l-2.20542e-08,-8.83296e-09c-0.379505,-0.151996 -0.628276,-0.519688 -0.6282,-0.9285v-0.3229l-1.77636e-14,-9.40042e-08c-8.33514e-08,-0.552011 0.447289,-0.999614 0.9993,-1h2.9887l1.06497e-07,-5.28143e-10c1.65943,-0.00822943 3.01133,1.33033 3.01956,2.98976c0.00129458,0.261047 -0.0314356,0.52115 -0.0973639,0.773738Z" fill="currentColor" fill-rule="evenodd"></path></svg>
<span class="sr-only">Info</span>
<div>
{{ _("Currently, it's not supported to use a Bitcoin Core connection alongside Spectrum.") }}<br/>
{{ _("Switching between Electrum and Bitcoin Core connections will require wallet reconfiguration.") }}
</div>
</div>
<form action="{{ url_for(service.get_blueprint_name() + '.index_post') }}" method="POST" role="form">
<form action="{{ url_for(service.get_blueprint_name() + '.index_post') }}" method="POST" role="form" class="space-y-3">
<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
<div style="margin-top: 20px;">
{{ _("Electrum server:") }}
<label><input type="radio" class="inline" style="margin: 0 10px 0 20px;" id="elec_option_list" name="option_mode" value="list" >{{ _("list") }}</label>
<label><input type="radio" class="inline" style="margin: 0 10px 0 20px" id="elec_option_manual" name="option_mode" value="manual" >{{ _("manual") }}</label>
</div>
<div id = "elec_manual_container" style="display: none">
<div style="margin-top: 20px">
Host:<br><input id="host-input" type="text" name="host" type="text" value="{{ host }}" placeholder="127.0.0.1">
</div>
<div style="margin-top: 20px; margin-bottom: 10px">
Port:<br><input id="port-input" type="text" name="port" type="text" value="{{ port }}" placeholder="50000">
</div>
<label style="font-size: 1em;">{{ _("Use ssl:") }}&nbsp;</label>
<label class="switch">
<input id="ssl-input" type="checkbox" name="ssl" style="margin: auto;" value="on" {% if ssl %} checked {% endif %}>
<span id="ssl-slider" class="slider"></span>
<div class="grid grid-cols-2 gap-3">
<label class="checkbox-wrapper">
<input type="radio" class="peer checkbox-input" id="elec_option_list" name="option_mode" value="list" >
<span class="checkbox-label">{{ _("Pick a public server") }}</span>
</label>
<label class="checkbox-wrapper">
<input type="radio" class="peer checkbox-input" id="elec_option_manual" name="option_mode" value="manual" >
<span class="checkbox-label">{{ _("Enter my own") }}</span>
</label>
</div>
<div id ="elec_list_container" style="display: none; margin-top: 20px;">
{% if elec_chosen_option in elec_options %}
Currently selected:
{% else %}
Select server:
{% endif %}
<select id="server-list" name="elec_option">
<div id="elec_manual_container" class="hidden grid grid-cols-2 gap-3">
<div class="floating-wrapper">
<input class="floating-input peer" id="host-input" type="text" name="host" type="text" value="{{ host }}" placeholder=" ">
<label class="floating-label">Host (127.0.0.1)</label>
</div>
<div class="floating-wrapper">
<input class="floating-input peer" id="port-input" type="text" name="port" type="text" value="{{ port }}" placeholder=" ">
<label class="floating-label">Port (50000)</label>
</div>
<div class="flex items-center">
<label class="switch">
<input id="ssl-input" type="checkbox" name="ssl" style="margin: auto;" value="on" {% if ssl %} checked {% endif %}>
<span id="ssl-slider" class="slider"></span>
</label>
<label for="ssl-input" class="ml-2">{{ _("Use SSL") }}&nbsp;</label>
</div>
</div>
<div id ="elec_list_container" class="floating-wrapper">
<select id="server-list" name="elec_option" class="floating-input peer">
<option selected style='display: none'></option>
{% for electrum_option in elec_options %}
<option value="{{ electrum_option }}" {% if elec_chosen_option == electrum_option %}selected{% endif %}>{{ electrum_option }}</option>
{% endfor %}
</select>
<label for="server-list" class="floating-label">Public Server</label>
</div>
<div class="mt-3">Spectrum icon in sidebar:</div>
<select name="show_menu">
<option value="yes" {% if show_menu == 'yes' %}selected{% endif %}>Yes</option>
<option value="no" {% if show_menu == 'no' %}selected{% endif %}>No</option>
<select name="show_menu" hidden>
<option value="yes">Yes</option>
<option value="no" selected>No</option>
</select>
<div class="lg:flex gap-2 mt-10 justify-end">
<div class="lg:flex gap-2 mt-10 justify-end pt-8">
{% if node_is_available %}
<button type="submit" class="button" name="action" value="delete">{{ _("Delete") }}</button>
{% endif %}
@ -79,7 +83,7 @@
this.elecListContainer.style.display = 'block'
} else {
this.elecOptionManual.checked = true
this.elecManualContainer.style.display ='block'
this.elecManualContainer.style.display ='grid'
this.elecListContainer.style.display = 'none'
}
}
@ -105,4 +109,4 @@
this.showElecOption("list")
});
</script>
{% endblock %}
{% endblock %}

View file

@ -3,8 +3,8 @@
<div class="mb-8 grid grid-cols-2 gap-5">
<div class="main-description-box p-5 bg-dark-800 flex flex-col items-center border-2 border-dark-700 rounded-lg">
<h2 class="text-center">{{ _("Using an Electrum server") }}</h2>
<p class="mb-12 text-center flex grow">{{ _("This is the easiest way to get started since you can connect to a third-party server. However, it exposes your financial activity. You can also choose your own server.") }}</p>
<a href="{{url_for('spectrum_endpoint.index')}}" class="mb-0 button bg-accent text-white w-full" data-cy="spectrum-connection-btn">{{ _('Spectrum Connection') }}</a>
<p class="mb-12 text-center flex grow">{{ _("Connect to a public server run by a reputable Bitcoin company, or choose your own Electrum server. Connecting to a public server may expose your IP address and transaction information.") }}</p>
<a href="{{url_for('spectrum_endpoint.index')}}" class="mb-0 button bg-accent text-white w-full" data-cy="spectrum-connection-btn">{{ _('Electrum Connection') }}</a>
</div>
<div class="main-description-box p-5 bg-dark-800 flex flex-col items-center border-2 border-dark-700 rounded-lg">

3492
yarn.lock Normal file

File diff suppressed because it is too large Load diff