Merge branch 'master' into feature/onboarding-create-wallet-lightning

Author: pavlenex

_compress_images_cache.yml

@@ -1429,3 +1429,7 @@ assets/images/guide/glossary/signature@2x.jpg: signature@2x.jpg
 assets/images/contribute/alby.png: alby.png
 assets/images/contribute/bitcoin-smiles.png: bitcoin-smiles.png
 assets/images/contribute/hello-bitcoin.png: hello-bitcoin.png
+assets/images/guide/designing-products/wallet-interoperability/hardware-wallets.jpg: hardware-wallets.jpg
+assets/images/guide/designing-products/wallet-interoperability/hardware-wallets@2x.jpg: hardware-wallets@2x.jpg
+assets/images/guide/designing-products/wallet-interoperability/user-interface.jpg: user-interface.jpg
+assets/images/guide/designing-products/wallet-interoperability/user-interface@2x.jpg: user-interface@2x.jpg

_sass/minima/_units-and-symbols-page.scss

@@ -0,0 +1,122 @@
+
+#units-and-symbols-formatter {
+    background-color: #777777;
+    margin-top: 30px;
+    padding: 30px;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    box-sizing: border-box;
+
+    .units-and-symbols-formatter-top {
+        display: flex;
+
+        label {
+            margin: 0;
+            padding: 0;
+            display: block;
+            font-size: 16px;
+            color: #D2FA7B;
+        }
+
+        input {
+            display: block;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-size: 48px;
+            appearance: none;
+            border-width: 0;
+            color: #D2FA7B;
+            width: 100%;
+            background-color: transparent;
+            -moz-appearance: textfield;
+            border-bottom: 1px dashed #D2FA7B;
+
+            &::-webkit-outer-spin-button,
+            &::-webkit-inner-spin-button {
+                -webkit-appearance: none;
+                margin: 0;
+            }
+
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    #units-and-symbols-formatter-table {
+        div {
+            display: flex;
+            padding-top: 5px;
+            padding-bottom: 5px;
+            gap: 10px;
+
+            p {
+                margin: 0;
+                padding: 0;
+                flex-grow: 1;
+                font-size: 16px;
+                flex-basis: 30%;
+                color: #EBEBEB;
+
+                &:first-child {
+                    flex-grow: 1;
+                }
+
+                &:last-child {
+                    color: white;
+                    text-align: right;
+                }
+            }
+
+            & + div {
+                border-top: 1px solid #999999;
+            }
+        }
+    }
+
+    @include media-query(small) {
+        .units-and-symbols-formatter-top {
+            flex-grow: 1;
+            flex-basis: 30%;
+            flex-direction: column;
+        }
+
+        #units-and-symbols-formatter-table {
+            margin-top: 20px;
+
+            div {
+                p {
+                    font-size: 14px;
+                    flex-basis: 20%;
+
+                    &:first-child {
+                        flex-basis: 40%;
+                    }
+
+                    &:last-child {
+                        flex-basis: 40%;
+                    }
+                }
+            }
+        }
+    }
+
+    @include media-query(medium-up) {
+        display: flex;
+        justify-content: space-between;
+        gap: 40px;
+
+        .units-and-symbols-formatter-top {
+            flex-grow: 1;
+            flex-basis: 30%;
+            flex-direction: column;
+        }
+
+        #units-and-symbols-formatter-table {
+            flex-basis: 50%;
+            flex-grow: 1;
+        }
+    }
+}

_sass/minima/initialize.scss

@@ -23,6 +23,7 @@
   "minima/search-page",       // Formatting for the search page
   "minima/projects-page",       // Formatting for the projects page
   "minima/design-resources-page",       // Formatting for the design resources page
+  "minima/units-and-symbols-page",       // Formatting for the units and symbols page
   "minima/glossary-page",       // Formatting for the glossary page
   "minima/home-banner",
   "minima/skins/error-theme",

assets/images/guide/designing-products/wallet-interoperability/hardware-wallets.jpg

@@ -2,7 +2,7 @@
 layout: guide
 title: Common user flows
 description: Overview of the most common user activities in Bitcoin applications.
-nav_order: 7
+nav_order: 8
 parent: Designing Bitcoin products
 permalink: /guide/designing-products/common-user-flows/
 main_classes: -no-top-padding
@@ -276,7 +276,7 @@ Wallets can also be created with control shared between several other wallets, s
    layout = "float-left"
 %}
 
-Like fiat currencies, securely storing funds can be as simple as storing some coins in your pocket or highly complex with multiple banks’ safety deposit boxes. For self-custodial wallets, all of this is in the users’ hands, although wallet software ideally provides guidelines and support to more easily follow best practices. See also, the [Private key management](/guide/private-key-management/introduction/) section and [Protecting a wallet](guide/onboarding/protecting-a-wallet/).
+Like fiat currencies, securely storing funds can be as simple as storing some coins in your pocket or highly complex with multiple banks’ safety deposit boxes. For self-custodial wallets, all of this is in the users’ hands, although wallet software ideally provides guidelines and support to more easily follow best practices. See also, the [Private key management](/guide/private-key-management/introduction/) section and [Protecting a wallet](/guide/onboarding/protecting-a-wallet/).
 
 </div>
 
@@ -567,11 +567,11 @@ This can be a tricky experience to address. For one, non-custodial cryptocurrenc
 
 ---
 
-On to [wallet interoperability]({{ '/guide/designing-products/wallet-interoperability/' | relative_url }}) which is essential for smooth interaction and migration between Bitcoin products.
+On to [interoperability]({{ '/guide/designing-products/wallet-interoperability/' | relative_url }}) which is essential for smooth interaction and migration between Bitcoin products.
 
 {% include next-previous.html
-   previousUrl = "/guide/designing-products/personal-finance/"
-   previousName = "Personal finance"
+   previousUrl = "/guide/designing-products/getting-to-know-your-users/"
+   previousName = "Getting to know your users"
    nextUrl = "/guide/designing-products/wallet-interoperability/"
-   nextName = "Wallet interoperability"
+   nextName = "Interoperability"
 %}

assets/images/guide/designing-products/wallet-interoperability/hardware-wallets@2x.jpg

@@ -2,7 +2,7 @@
 layout: guide
 title: Design resources
 description: Design files by and for the Bitcoin Design Community
-nav_order: 9
+nav_order: 10
 parent: Designing Bitcoin products
 permalink: /guide/designing-products/design-resources/
 main_classes: -no-top-padding

assets/images/guide/designing-products/wallet-interoperability/user-interface.jpg

@@ -70,13 +70,19 @@ If we consider Bitcoin money, we need to consider how Bitcoin users think about
 
 ---
 
+### [Getting to know your users]({{ '/guide/designing-products/getting-to-know-your-users/' | relative_url }})
+
+This section will give you some tips on how best to understand and develop knowledge about your users. 
+
+---
+
 ### [Common user flows]({{ '/guide/designing-products/common-user-flows/' | relative_url }})
 
 Most Bitcoin applications share certain user activities, from initial setup to making a transaction. It is vital to follow users' expected patterns and behaviors to reduce mistakes and enable seamless switching between products.
 
 ---
 
-### [Wallet interoperability]({{ '/guide/designing-products/wallet-interoperability/' | relative_url }})
+### [Interoperability]({{ '/guide/designing-products/wallet-interoperability/' | relative_url }})
 
 Get to know the points of interaction and overlap connecting payment links, wallet recovery, node configurations, and more.