From 282581c0d113f1484021f1067042052f42c72f6c Mon Sep 17 00:00:00 2001
From: Pavel Rybalko <pavel@parity.io>
Date: Mon, 6 Dec 2021 13:52:38 +0100
Subject: [PATCH] ui: adjust text and styles

Update src/components/GeneralInfo.vue

Co-authored-by: Kirill Pimenov <kirill@parity.io>
---
 src/App.vue                    |  79 ++++++++-----------
 src/components/ForkMe.vue      |   4 +-
 src/components/GeneralInfo.vue | 137 ++++++++++++---------------------
 src/views/Info.vue             |  22 +++++-
 4 files changed, 102 insertions(+), 140 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7b8faee..ed5babc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,34 +3,23 @@
     <div id="app" class="measure">
       <ForkMe url="https://github.com/paritytech/banana_split" />
       <nav>
-        <h1 id="logo">
-          Banana
-          <br />
-          Split
-          <span>
+        <router-link id="logo" to="/">
+          <span class="logo-text">
+            Banana Split
+          </span>
+          <span class="logo-icon">
             🍌
           </span>
-        </h1>
+        </router-link>
         <Alert />
-        <GeneralInfo />
-        <div class="measure">
-          <div v-if="secure">
-            <router-link id="shareNav" class="button-nav" to="/share">
-              Create
-            </router-link>
-            <router-link id="combineNav" class="button-nav" to="/combine">
-              Restore
-            </router-link>
-          </div>
-        </div>
       </nav>
 
       <router-view v-if="secure" />
       <SavePageInfo v-else-if="!localFile" />
       <GoOfflineInfo v-else-if="isOnline" />
-      <p class="version-footer">
+      <div class="version-footer">
         BananaSplit version {{ version }}, git revision {{ gitRevision }}
-      </p>
+      </div>
     </div>
     <div id="print" class="measure flex" />
   </div>
@@ -38,7 +27,6 @@
 
 <script lang="ts">
 import Alert from "./components/Alert.vue";
-import GeneralInfo from "./components/GeneralInfo.vue";
 import GoOfflineInfo from "./components/GoOfflineInfo.vue";
 import SavePageInfo from "./components/SavePageInfo.vue";
 import ForkMe from "./components/ForkMe.vue";
@@ -48,7 +36,7 @@ import Vue from "vue";
 
 export default Vue.extend({
   name: "App",
-  components: { Alert, GeneralInfo, GoOfflineInfo, SavePageInfo, ForkMe },
+  components: { Alert, GoOfflineInfo, SavePageInfo, ForkMe },
   computed: {
     localFile(): boolean {
       return window.location.protocol === "file:";
@@ -91,7 +79,7 @@ export default Vue.extend({
 }
 html {
   font-family: var(--f_main);
-  font-size: 8px;
+  font-size: 9px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -214,12 +202,12 @@ nav {
 
 h1 {
   font-weight: 600;
-  font-size: 3rem;
+  font-size: 3.5rem;
   line-height: 0.9em;
   letter-spacing: -0.02em;
 }
 h2 {
-  font-size: 2.3rem;
+  font-size: 2.5rem;
   font-weight: 500;
 }
 a {
@@ -247,33 +235,42 @@ textarea:disabled {
   background: transparent;
   opacity: 0.5;
 }
-
 #logo {
-  margin: 0 2rem 0 0;
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 250%;
+  margin: 10px auto 0;
+  color: var(--c_text-main);
 }
-#logo span {
-  font-size: 1.2em;
-  position: absolute;
-  margin: 0.25em 0 0 0.1em;
+#logo:hover > .logo-text {
+  text-decoration: underline;
+}
+#logo > .logo-icon {
+  position: relative;
+  top: 5px;
+  left: 5px;
+  font-size: 140%;
 }
-
 .button-nav {
   display: inline-block;
   font-weight: 600;
   font-size: 1.4em;
-  color: var(--c_text-main);
   border: 1px solid transparent;
   padding: 1rem 3rem 1.2rem;
   margin: 0 1rem 0 0;
   border-radius: 1rem;
   text-decoration: none;
+  background-color: var(--c_bg-emphasis-main);
+  color: var(--c_text-onEmphasis);
+  text-decoration: none;
 }
 .button-nav:hover,
 .button-nav.router-link-exact-active {
   border-color: var(--c_border-main);
 }
 .button-nav.router-link-exact-active {
-  background: white;
+  background-color: var(--c_bg-app);
+  color: var(--c_text-main);
 }
 
 button {
@@ -292,23 +289,11 @@ button {
 }
 
 .version-footer {
+  padding-top: 30px;
   font-size: 80%;
   font-style: italic;
   color: darkgray;
-}
-
-@media screen and (min-width: 850px) {
-  #logo {
-    position: absolute;
-    top: 2.5rem;
-    left: 2rem;
-    margin: 0;
-  }
-}
-@media screen and (max-width: 530px) {
-  #logo {
-    display: none;
-  }
+  text-align: center;
 }
 @media screen and (max-width: 415px) {
   .fold input:checked ~ .fold-content {
diff --git a/src/components/ForkMe.vue b/src/components/ForkMe.vue
index 6afed46..3f07568 100644
--- a/src/components/ForkMe.vue
+++ b/src/components/ForkMe.vue
@@ -1,6 +1,6 @@
 <template>
   <span id="forkongithub">
-    <a :href="url">🥄Fork me on GitHub</a>
+    <a :href="url">🥄&nbsp;Fork me on GitHub</a>
   </span>
 </template>
 
@@ -31,7 +31,7 @@ export default {
   text-align: center;
   font-weight: bold;
   padding: 0.5rem 0 1rem;
-  font-size: 2rem;
+  font-size: 1.5rem;
   width: 240px;
   position: absolute;
   bottom: 40px;
diff --git a/src/components/GeneralInfo.vue b/src/components/GeneralInfo.vue
index 962017b..c0880f0 100644
--- a/src/components/GeneralInfo.vue
+++ b/src/components/GeneralInfo.vue
@@ -1,41 +1,45 @@
 <template>
-  <div class="fold">
-    <input id="fold-header" v-model="unfolded" type="checkbox" name="fold" />
-    <label for="fold-header">
-      <h2>What is this?</h2>
-    </label>
-    <div class="fold-content measure card-alt">
-      <h2>Shamir Secret Sharing for people with friends</h2>
-      <p>
-        Banana Split uses
-        <a href="https://en.wikipedia.org/wiki/Shamir%27s_Secret_Sharing">
-          Shamir's secret sharing
-        </a>
-        to make your paper backups more resilient and secure.
-      </p>
-      <p>
-        After you type in your secret into Banana Split, it will be encrypted
-        with a autogenerated passphrase and split into N QR-codes, ready to be
-        printed out. You'll need N/2+1 of those printouts to reconstruct the
-        secret, and then the passphrase to decrypt it.
-      </p>
-      <p>
-        Banana Split tries to protect your secret from the attack vectors like
-        "attacker is able to intercept everything you're sending to your
-        printer", and that's why you'll have to write down the passphrase on
-        your printouts by hand.
-      </p>
-      <p>
-        Banana Split is a self-contained HTML page, and should only be opened
-        from your local Documents folder, while browser is in the Offline mode —
-        this way the risk of compromise will be minimal.
-      </p>
-      <p>
-        Recovery can be done on any device with a webcam — just show your QR
-        codes to the webcam and follow the notifications on screen in the
-        process.
-      </p>
-    </div>
+  <div class="general-info">
+    <h2>What is this?</h2>
+    <p>
+      Banana Split is a self-contained HTML page, which makes your paper 
+      backups more resilient and secure using 
+      <a href="https://en.wikipedia.org/wiki/Shamir%27s_Secret_Sharing" target="_blank">
+        Shamir's secret sharing scheme</a>.
+      You can encrypt and split particularly sensitive information 
+      so that it's not physically stored in one place — your master 
+      assword, seed phrase, etc.
+    </p>
+    <h2>How does it work?</h2>
+    <p>
+      After you type in your secret into Banana Split, it will be encrypted with 
+      an autogenerated passphrase and split into N QR-codes, ready to be printed out. 
+      You'll need N/2+1 of those printouts to reconstruct the secret, and 
+      then the passphrase to decrypt it.
+    </p>
+    <p>
+      Banana Split tries to protect your secret from the attack vectors like 
+      "attacker is able to intercept everything you're sending to your printer", 
+      and that's why you'll have to write down the passphrase on your printouts 
+      by hand.
+    </p>
+    <p>
+      Of course you should seal your printouts in non-transparent envelopes and distribute among different locations as soon as you're done writing your seed phrase — Banana Split is only more secure than a single paper with your secret as long as the secrets can't be lost/stolen altogether.
+    </p>
+    <p>
+      All operations must be performed in Offline mode. Recovery can be done 
+      on any device with a webcam — just show your QR codes to the webcam 
+      and follow the notifications on screen in the process. 
+    </p>
+    <h2>How to use it?</h2>
+    <ol>
+      <li>Save this HTML page into your local Documents folder</li>
+      <li>Turn off Wi-Fi, Bluetooth and any other connectivity on your device</li>
+      <li>Open the downloaded HTML page and follow the instructions</li>
+    </ol>
+    <p>
+      This way the risk of compromise will be minimal.
+    </p>
   </div>
 </template>
 
@@ -44,63 +48,18 @@ import Vue from "vue";
 
 export default Vue.extend({
   name: "GeneralInfo",
-  data: function() {
-    return { unfolded: true };
-  },
-  created: function() {
-    const self = this;
-    this.$eventHub.$on("foldGeneralInfo", function() {
-      self.unfolded = false;
-    });
-  }
 });
 </script>
 
 <style>
-.fold {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  width: 150px;
+.general-info {
+  display: block;
+  padding-bottom: 30px;
 }
-.fold input {
-  position: absolute;
-  visibility: hidden;
+p {
+  line-height: 1.5em;
 }
-.fold label {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  transform: translateY(0.5rem);
-}
-.fold-content {
-  max-height: 0;
-  padding: 0 !important;
-  overflow: hidden;
-  transition: max-height 0.3s, margin 0.3s, opacity 0.25s;
-}
-.fold-content > * {
-  padding: 0 3rem;
-}
-.fold input[type="checkbox"]:not(:checked) ~ .fold-content {
-  margin: 0;
-  opacity: 0;
-}
-.fold input:checked ~ .fold-content {
-  max-height: 999px;
-  margin-bottom: 30px;
-  opacity: 1;
-}
-
-.fold label::before {
-  margin: 0 4px 0 0;
-  width: 1em;
-  overflow: hidden;
-}
-.fold input[type="checkbox"]:not(:checked) + label::before {
-  content: "▶";
-}
-.fold input[type="checkbox"]:checked + label::before {
-  content: "▼";
+li {
+  padding-bottom: 0.5em;
 }
 </style>
diff --git a/src/views/Info.vue b/src/views/Info.vue
index dfb56f1..7331156 100644
--- a/src/views/Info.vue
+++ b/src/views/Info.vue
@@ -1,9 +1,27 @@
 <template>
-  <div />
+  <div>
+    <GeneralInfo />
+    <div class="measure">
+      <div>
+        <router-link id="shareNav" class="button-nav" to="/share">
+          Create
+        </router-link>
+        <router-link id="combineNav" class="button-nav" to="/combine">
+          Restore
+        </router-link>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-export default {};
+import GeneralInfo from "../components/GeneralInfo.vue";
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "Info",
+  components: { GeneralInfo },
+});
 </script>
 
 <style></style>