Merge branch 'development' into 2476-solve-warnings-in-console

i18n/locales/en/common.json

@@ -17,7 +17,6 @@
   "Access your account by scanning the QR code below with the Lisk Mobile App:": "Access your account by scanning the QR code below with the Lisk Mobile App:",
   "Account": "Account",
   "Account Balance:          {{balance}} {{token}}": "Account Balance:          {{balance}} {{token}}",
-  "Account bookmarked": "Account bookmarked",
   "Account name": "Account name",
   "Account nickname": "Account nickname",
   "Activate ({{ fee }} LSK Fee)": "Activate ({{ fee }} LSK Fee)",
@@ -62,7 +61,7 @@
   "Bitcoin transactions are made with some delay that depends on two parameters: the fee and the bitcoin network’s congestion. The higher the fee, the higher the processing speed.": "Bitcoin transactions are made with some delay that depends on two parameters: the fee and the bitcoin network’s congestion. The higher the fee, the higher the processing speed.",
   "Blockchain Application Registration": "Blockchain Application Registration",
   "Blocks forged": "Blocks forged",
-  "Bookmark account": "Bookmark account",
+  "Bookmark": "Bookmark",
   "Bookmarked": "Bookmarked",
   "Bookmarks": "Bookmarks",
   "Browse through our tutorials, check out the FAQ section, connect with our community or take a look at our ": "Browse through our tutorials, check out the FAQ section, connect with our community or take a look at our ",
@@ -138,6 +137,7 @@
   "Each avatar is a unique visual representation of your Lisk address.": "Each avatar is a unique visual representation of your Lisk address.",
   "Each time you add or remove a vote it is counted as an action. There's {{fee}} LSK fee per every 33 actions.": "Each time you add or remove a vote it is counted as an action. There's {{fee}} LSK fee per every 33 actions.",
   "Edit": "Edit",
+  "Edit bookmark": "Edit bookmark",
   "Edit transaction": "Edit transaction",
   "Edit voting": "Edit voting",
   "Enable BTC": "Enable BTC",
@@ -281,7 +281,6 @@
   "OR": "OR",
   "Official guidelines": "Official guidelines",
   "Ok": "Ok",
-  "On your dashboard": "On your dashboard",
   "Once activated can’t be turned off.": "Once activated can’t be turned off.",
   "Oops! Wrong passphrase": "Oops! Wrong passphrase",
   "Oops, looks like something went wrong. Please try again.": "Oops, looks like something went wrong. Please try again.",
@@ -328,7 +327,7 @@
   "Reload the page": "Reload the page",
   "Remind me later": "Remind me later",
   "Remove Extension": "Remove Extension",
-  "Remove from bookmarks": "Remove from bookmarks",
+  "Remove bookmark": "Remove bookmark",
   "Removed votes": "Removed votes",
   "Report the error via E-Mail": "Report the error via E-Mail",
   "Request {{token}}": "Request {{token}}",
@@ -369,7 +368,6 @@
   "Sharing link": "Sharing link",
   "Show passphrase": "Show passphrase",
   "Show the QR code": "Show the QR code",
-  "Show this account's transactions on the dashboard.": "Show this account's transactions on the dashboard.",
   "Sign a message": "Sign a message",
   "Sign back in": "Sign back in",
   "Sign in": "Sign in",

src/components/bookmarks/bookmarkDropdown/bookmarkDropdown.css

@@ -3,14 +3,14 @@
 
 .wrapper {
   box-sizing: border-box;
-  padding: 24px;
+  padding: 10px 20px;
   width: 100%;
 
   & .fieldGroup {
     align-items: flex-start;
     display: flex;
     flex-direction: column;
-    margin-bottom: 20px;
+    margin-bottom: 12px;
   }
 
   & .fieldLabel {
@@ -20,6 +20,10 @@
     margin-bottom: 8px;
   }
 
+  & .input {
+    margin-bottom: 2px;
+  }
+
   & .fieldInput {
     align-items: center;
     display: flex;
@@ -32,63 +36,22 @@
     width: 100%;
   }
 
-  & .checkboxGroup {
-    display: flex;
-    flex-direction: row;
-
-    & > input {
-      display: none;
-
-      &:checked + .fakeCheckbox {
-        background-color: var(--color-primary-standard);
-        border-color: var(--color-primary-standard);
-      }
-    }
-
-    & .fakeCheckbox {
-      align-items: center;
-      background-color: var(--color-white);
-      border: 1px solid var(--color-dark-gray);
-      border-radius: var(--border-radius-standard);
-      box-sizing: border-box;
-      color: var(--color-white);
-      display: flex;
-      flex-shrink: 0;
-      justify-content: center;
-      margin-right: 16px;
-      height: 24px;
-      transition:
-        background var(--animation-speed-fast) linear,
-        border var(--animation-speed-fast) linear,
-        color var(--animation-speed-fast) linear;
-      width: 24px;
-
-      & > .icon {
-        font-size: var(--paragraph-font-size-s);
-      }
-    }
-
-    & .checkboxInfo {
-      display: flex;
-      flex-direction: column;
-    }
+  & .editButtonContainer {
+    transition:
+      opacity var(--animation-speed-fast) linear,
+      max-height var(--animation-speed-fast) linear,
+      margin-bottom var(--animation-speed-fast) linear;
 
-    & .label {
-      color: var(--color-content-light);
-      font-family: var(--content-font);
-      font-size: var(--paragraph-font-size-l);
-      font-weight: var(--font-weight-semi-bold);
-      line-height: 1.6;
+    &.show {
+      opacity: 1;
+      max-height: 200px;
+      margin-bottom: 12px;
     }
 
-    & .note {
-      color: var(--color-dark-gray);
-      font-family: var(--content-font);
-      font-size: var(--footnote-font-size);
-      font-weight: var(--font-weight-semi-bold);
-      line-height: 1.83;
-      margin-top: 3px;
-      width: 80%;
+    &.hide {
+      opacity: 0;
+      max-height: 0;
+      margin-bottom: 0;
     }
   }
 }