diff --git a/background.html b/background.html
index 7ffa8a138..59bd31eaa 100644
--- a/background.html
+++ b/background.html
@@ -606,27 +606,29 @@
- Please save the mnemonic words below in a safe location.
+ Please save the seed below in a safe location.
They can be used to restore your account if you lose access or migrate to a new device.
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 85d374b97..bfda09310 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -276,7 +276,7 @@
display: block;
max-height: 100px;
padding: 10px;
- border-radius: 2px;
+ border-radius: 4px;
background-color: $color-loki-light-gray;
color: $color-light-90;
border: 1px solid rgba(0, 0, 0, 0.2);
@@ -392,7 +392,7 @@
margin-bottom: 15px;
border: 0;
outline: none;
- border-radius: 100px;
+ border-radius: 4px;
background-color: $color-loki-light-gray;
}
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index c13cc6093..d761d3012 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -826,11 +826,38 @@ textarea {
.section-toggle {
background: $color-dark-75;
+
+ &:first-of-type {
+ border-radius: 8px 8px 0 0;
+ }
+
+ &:last-of-type {
+ border-radius: 0 0 8px 8px;
+ }
+ }
+
+ .section-toggle-visible:last-of-type {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
}
.section-content {
padding: 1em 0;
background-color: $color-dark-72;
+
+ &:last-of-type {
+ border-radius: 0 0 8px 8px;
+ }
+ }
+
+ #display-name {
+ font-weight: bold;
+ font-size: 25px;
+ border-radius: 100px;
+
+ &:focus {
+ outline: none;
+ }
}
#status {
@@ -853,14 +880,18 @@ textarea {
input {
border: 1px solid $color-light-60;
- color: $color-dark-05;
- background-color: $color-gray-95;
+ border-radius: 4px;
&:focus {
outline: solid 1px $blue;
}
}
+ .button {
+ background: $color-loki-green-gradient;
+ border-radius: 100px;
+ }
+
#mnemonic-display {
margin: 2em 8px;
font-size: 16px;
@@ -882,6 +913,55 @@ textarea {
background: $grey;
}
+ .select-container {
+ position: relative;
+ display: block;
+ width: 10em;
+ line-height: 2.8;
+ background: white;
+ overflow: hidden;
+ border-radius: .25em;
+
+ select {
+ // Reset select
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ outline: 0;
+ box-shadow: none;
+ border: 0 !important;
+ background: white;
+ background-image: none;
+
+ // Our own stlying
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0 0 0 .5em;
+ color: black;
+ cursor: pointer;
+
+ ::-ms-expand {
+ display: none;
+ }
+ }
+
+ &:after {
+ content: '\25BC';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ padding: 0 1em;
+ background: $color-dark-85;
+ pointer-events: none;
+ -webkit-transition: .25s all ease;
+ -o-transition: .25s all ease;
+ transition: .25s all ease;
+ }
+ }
+
@media (min-height: 750px) and (min-width: 700px) {
.display-name-header {
font-size: 18px;
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index a07d35b5b..2d35849df 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -31,6 +31,7 @@ $color-loki-dark-gray: #323232;
$color-loki-extra-dark-gray: #101010;
$color-loki-green: #3bd110;
$color-loki-green-dark: #32b10e;
+$color-loki-green-gradient: linear-gradient(to right, rgb(120, 190, 32) 0%, rgb(0, 133, 34) 100%);
// New colors