diff --git a/background.html b/background.html index 7ffa8a138..59bd31eaa 100644 --- a/background.html +++ b/background.html @@ -606,27 +606,29 @@
Enter a name that will be shown to all your contacts
-

Register using mnenomic

+

Restore using seed

- - + +
+ +
- Register + Restore

Register a new account

- 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