status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

app locked screen design review changes (#15927)

This commit is contained in:
Ajay Sivan 2023-05-19 05:17:03 -07:00 committed by GitHub
parent 77ddd8688f
commit 7e8f1fac8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 204 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons2/16x16/unlocked@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 685 B

After

Width:  |  Height:  |  Size: 788 B

BIN
resources/images/icons2/16x16/unlocked@3x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
resources/images/icons2/20x20/unlocked@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 801 B

After

Width:  |  Height:  |  Size: 868 B

BIN
resources/images/icons2/20x20/unlocked@3x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

264
src/quo2/components/buttons/button.cljs
View File

@ -8,134 +8,142 @@
(defn themes
[customization-color]
{:light {:primary {:icon-color colors/white
:label-color colors/white
:background-color {:default (colors/custom-color customization-color 50)
:pressed (colors/custom-color customization-color 60)
:disabled (colors/custom-color customization-color 50)}}
:secondary {:icon-color colors/primary-50
:label-color colors/primary-50
:background-color {:default colors/primary-50-opa-20
:pressed colors/primary-50-opa-40
:disabled colors/primary-50-opa-20}}
:grey {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:default colors/neutral-10
:pressed colors/neutral-20
:disabled colors/neutral-10}}
:dark-grey {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:default colors/neutral-20
:pressed colors/neutral-30
:disabled colors/neutral-20}}
:outline {:icon-color colors/neutral-50
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:border-color {:default colors/neutral-30
:pressed colors/neutral-40
:disabled colors/neutral-30}}
:ghost {:icon-color colors/neutral-50
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:pressed colors/neutral-10}}
:danger {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/danger-50
:pressed colors/danger-60
:disabled colors/danger-50}}
:positive {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/success-50
:pressed colors/success-60
:disabled colors/success-50-opa-30}}
:photo-bg {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:background-color {:default colors/white-opa-40
:pressed colors/white-opa-50
:disabled colors/white-opa-40}}
:blur-bg {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:background-color {:default colors/neutral-80-opa-5
:pressed colors/neutral-80-opa-10
:disabled colors/neutral-80-opa-5}}
:blur-bg-outline {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:border-color {:default colors/neutral-80-opa-10
:pressed colors/neutral-80-opa-20
:disabled colors/neutral-80-opa-10}}
:shell {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/neutral-95
:pressed colors/neutral-95
:disabled colors/neutral-95}}}
:dark {:primary {:icon-color colors/white
:label-color colors/white
:background-color {:default (colors/custom-color customization-color 60)
:pressed (colors/custom-color customization-color 50)
:disabled (colors/custom-color customization-color 60)}}
:secondary {:icon-color colors/primary-50
:label-color colors/primary-50
:background-color {:default colors/primary-50-opa-20
:pressed colors/primary-50-opa-30
:disabled colors/primary-50-opa-20}}
:grey {:icon-color colors/white
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:default colors/neutral-80
:pressed colors/neutral-60
:disabled colors/neutral-80}}
:dark-grey {:icon-color colors/white
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:default colors/neutral-70
:pressed colors/neutral-60
:disabled colors/neutral-70}}
:outline {:icon-color colors/neutral-40
:icon-secondary-color colors/neutral-40
:label-color colors/white
:border-color {:default colors/neutral-70
:pressed colors/neutral-60
:disabled colors/neutral-70}}
:ghost {:icon-color colors/neutral-40
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:pressed colors/neutral-80}}
:danger {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/danger-60
:pressed colors/danger-50
:disabled colors/danger-60}}
:positive {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/success-60
:pressed colors/success-50
:disabled colors/success-60-opa-30}}
:photo-bg {:icon-color colors/white
:icon-secondary-color colors/neutral-30
:label-color colors/white
:background-color {:default colors/neutral-80-opa-40
:pressed colors/neutral-80-opa-50
:disabled colors/neutral-80-opa-40}}
:blur-bg {:icon-color colors/white
:icon-secondary-color colors/white-opa-40
:label-color colors/white
:background-color {:default colors/white-opa-5
:pressed colors/white-opa-10
:disabled colors/white-opa-5}}
:blur-bg-outline {:icon-color colors/white
:icon-secondary-color colors/white-opa-40
:label-color colors/white
:border-color {:default colors/white-opa-10
:pressed colors/white-opa-20
:disabled colors/white-opa-5}}
:shell {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/neutral-95}}}})
{:light
{:primary {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default (colors/custom-color customization-color 50)
:pressed (colors/custom-color customization-color 60)
:disabled (colors/custom-color customization-color 50)}}
:secondary {:icon-color colors/primary-50
:label-color colors/primary-50
:background-color {:default colors/primary-50-opa-20
:pressed colors/primary-50-opa-40
:disabled colors/primary-50-opa-20}}
:grey {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:default colors/neutral-10
:pressed colors/neutral-20
:disabled colors/neutral-10}}
:dark-grey {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:default colors/neutral-20
:pressed colors/neutral-30
:disabled colors/neutral-20}}
:outline {:icon-color colors/neutral-50
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:border-color {:default colors/neutral-30
:pressed colors/neutral-40
:disabled colors/neutral-30}}
:ghost {:icon-color colors/neutral-50
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:pressed colors/neutral-10}}
:danger {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/danger-50
:pressed colors/danger-60
:disabled colors/danger-50}}
:positive {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/success-50
:pressed colors/success-60
:disabled colors/success-50-opa-30}}
:photo-bg {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:background-color {:default colors/white-opa-40
:pressed colors/white-opa-50
:disabled colors/white-opa-40}}
:blur-bg {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:background-color {:default colors/neutral-80-opa-5
:pressed colors/neutral-80-opa-10
:disabled colors/neutral-80-opa-5}}
:blur-bg-outline {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:border-color {:default colors/neutral-80-opa-10
:pressed colors/neutral-80-opa-20
:disabled colors/neutral-80-opa-10}}
:shell {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/neutral-95
:pressed colors/neutral-95
:disabled colors/neutral-95}}}
:dark
{:primary {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default (colors/custom-color customization-color 60)
:pressed (colors/custom-color customization-color 50)
:disabled (colors/custom-color customization-color 60)}}
:secondary {:icon-color colors/primary-50
:label-color colors/primary-50
:background-color {:default colors/primary-50-opa-20
:pressed colors/primary-50-opa-30
:disabled colors/primary-50-opa-20}}
:grey {:icon-color colors/white
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:default colors/neutral-80
:pressed colors/neutral-60
:disabled colors/neutral-80}}
:dark-grey {:icon-color colors/white
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:default colors/neutral-70
:pressed colors/neutral-60
:disabled colors/neutral-70}}
:outline {:icon-color colors/neutral-40
:icon-secondary-color colors/neutral-40
:label-color colors/white
:border-color {:default colors/neutral-70
:pressed colors/neutral-60
:disabled colors/neutral-70}}
:ghost {:icon-color colors/neutral-40
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:pressed colors/neutral-80}}
:danger {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/danger-60
:pressed colors/danger-50
:disabled colors/danger-60}}
:positive {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/success-60
:pressed colors/success-50
:disabled colors/success-60-opa-30}}
:photo-bg {:icon-color colors/white
:icon-secondary-color colors/neutral-30
:label-color colors/white
:background-color {:default colors/neutral-80-opa-40
:pressed colors/neutral-80-opa-50
:disabled colors/neutral-80-opa-40}}
:blur-bg {:icon-color colors/white
:icon-secondary-color colors/white-opa-40
:label-color colors/white
:background-color {:default colors/white-opa-5
:pressed colors/white-opa-10
:disabled colors/white-opa-5}}
:blur-bg-outline {:icon-color colors/white
:icon-secondary-color colors/white-opa-40
:label-color colors/white
:border-color {:default colors/white-opa-10
:pressed colors/white-opa-20
:disabled colors/white-opa-5}}
:shell {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/neutral-95}}}})
(defn shape-style-container
[type icon size]

4
src/quo2/components/inputs/input/view.cljs
View File

@ -4,7 +4,8 @@
[quo2.components.inputs.input.style :as style]
[quo2.components.markdown.text :as text]
[react-native.core :as rn]
[reagent.core :as reagent]))
[reagent.core :as reagent]
[quo2.theme :as theme]))
(defn- label-&-counter
[{:keys [label current-chars char-limit variant-colors]}]
@ -100,6 +101,7 @@
(cond-> {:style (style/input colors-by-status small? @multiple-lines?)
:accessibility-label :input
:placeholder-text-color (:placeholder colors-by-status)
:keyboard-appearance (theme/theme-value :light :dark override-theme)
:cursor-color (:cursor variant-colors)
:editable (not disabled?)
:on-focus (fn []

4
src/quo2/components/inputs/recovery_phrase/view.cljs
View File

@ -2,7 +2,8 @@
(:require [clojure.string :as string]
[quo2.components.inputs.recovery-phrase.style :as style]
[react-native.core :as rn]
[reagent.core :as reagent]))
[reagent.core :as reagent]
[quo2.theme :as theme]))
(def ^:private custom-props
[:customization-color :override-theme :blur? :cursor-color :multiline :on-focus :on-blur
@ -42,6 +43,7 @@
:style (style/input)
:placeholder-text-color (style/placeholder-color @state override-theme blur?)
:cursor-color (style/cursor-color customization-color override-theme)
:keyboard-appearance (theme/theme-value :light :dark override-theme)
:multiline true
:on-focus (fn []
(set-focused)

4
src/quo2/components/inputs/search_input/view.cljs
View File

@ -3,7 +3,8 @@
[quo2.components.icon :as icon]
[quo2.components.inputs.search-input.style :as style]
[react-native.core :as rn]
[reagent.core :as reagent]))
[reagent.core :as reagent]
[quo2.foundations.colors :as colors]))
(def ^:private tag-separator [rn/view {:style style/tag-separator}])
@ -68,6 +69,7 @@
:placeholder-text-color (style/placeholder-color @state blur? override-theme)
:editable (not disabled?)
:on-key-press #(handle-backspace % @scroll-view-ref)
:keyboard-appearance (colors/theme-colors :light :dark override-theme)
:on-change-text (fn [new-text]
(when on-change-text
(on-change-text new-text))

4
src/quo2/components/inputs/title_input/view.cljs
View File

@ -3,7 +3,8 @@
[quo2.components.inputs.title-input.style :as style]
[quo2.components.markdown.text :as text]
[reagent.core :as reagent]
[react-native.core :as rn]))
[react-native.core :as rn]
[quo2.theme :as theme]))
(defn- pad-0
[value]
@ -38,6 +39,7 @@
:style (style/title-text disabled? blur? override-theme)})
:default-value default-value
:accessibility-label :profile-title-input
:keyboard-appearance (theme/theme-value :light :dark override-theme)
:on-focus #(swap! focused? (fn [] true))
:on-blur #(swap! focused? (fn [] false))
:input-mode :text

10
src/quo2/theme.cljs
View File

@ -13,4 +13,12 @@
(defn set-theme
[value]
(reset! theme value))
(reset! theme value))
(defn theme-value
"Returns a value based on the current/override-theme theme."
([light-value dark-value]
(theme-value light-value dark-value nil))
([light-value dark-value override-theme]
(let [theme (or override-theme (get-theme))]
(if (= theme :light) light-value dark-value))))

4
src/status_im2/contexts/chat/composer/view.cljs
View File

@ -21,7 +21,8 @@
[status-im2.contexts.chat.composer.gesture :as drag-gesture]
[status-im2.contexts.chat.composer.handlers :as handler]
[status-im2.contexts.chat.composer.gradients.view :as gradients]
[status-im2.contexts.chat.composer.selection :as selection]))
[status-im2.contexts.chat.composer.selection :as selection]
[quo2.theme :as theme]))
(defn sheet-component
[{:keys [insets window-height blur-height opacity background-y]} props state]
@ -99,6 +100,7 @@
:on-change-text #(handler/change-text % props state)
:on-selection-change #(handler/selection-change % props state)
:on-selection #(selection/on-selection % props state)
:keyboard-appearance (theme/theme-value :light :dark)
:max-height max-height
:max-font-size-multiplier 1
:multiline true

16
src/status_im2/contexts/onboarding/profiles/style.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.onboarding.profiles.style
(:require [quo2.foundations.colors :as colors]
[react-native.platform :as platform]))
(:require [quo2.foundations.colors :as colors]))
;; Profiles Section
@ -48,15 +47,10 @@
(def login-profile-card
{:margin-bottom 20})
(def info-message
{:margin-top 8})
(def forget-password-button
{:margin-vertical 8})
(defn login-button
[]
{:margin-bottom (if platform/android? 20 46)})
(def error-message
{:margin-top 8
:flex-direction :row
:align-items :center})
(def forget-password-doc-container {:margin-right 16})
(def forget-password-step-container {:flex-direction :row :margin-top 14})

45
src/status_im2/contexts/onboarding/profiles/view.cljs
View File

@ -10,7 +10,9 @@
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[utils.security.core :as security]
[utils.transforms :as types]))
[utils.transforms :as types]
[quo2.foundations.colors :as colors]
[react-native.safe-area :as safe-area]))
(defn login-multiaccount
[]
@ -178,7 +180,8 @@
sign-in-enabled? (rf/sub [:sign-in-enabled?])
profile-picture (:uri (first (:images multiaccount)))]
[rn/keyboard-avoiding-view
{:style style/login-container}
{:style style/login-container
:keyboardVerticalOffset (- (safe-area/get-bottom))}
[quo/button
{:size 32
:type :blur-bg
@ -213,23 +216,25 @@
:default-value (security/safe-unmask-data password)
:on-submit-editing (when sign-in-enabled? login-multiaccount)}]
(when (seq error)
[quo/info-message
{:type :error
:size :default
:icon :i/info
:style style/info-message}
error])]
[quo/button
{:size 40
:type :ghost
:before :i/info
:disabled processing
:accessibility-label :forget-password-button
:override-theme :dark
:style style/forget-password-button
:on-press #(rf/dispatch [:show-bottom-sheet
{:content forget-password-doc :shell? true}])}
(i18n/label :t/forgot-password)]
[rn/view {:style style/error-message}
[quo/info-message
{:type :error
:size :default
:icon :i/info}
error]
[rn/touchable-opacity
{:hit-slop {:top 6 :bottom 20 :left 0 :right 0}
:style {:margin-left -4}
:disabled processing
:active-opacity 1
:on-press #(rf/dispatch [:show-bottom-sheet
{:content forget-password-doc :shell? true}])}
[rn/text
{:style {:text-decoration-line :underline
:color colors/danger-60}
:size :paragraph-2
:suppress-highlighting true}
(i18n/label :t/forgot-password)]]])]
[quo/button
{:size 40
:type :primary
@ -239,7 +244,7 @@
:before :i/unlocked
:disabled (or (not sign-in-enabled?) processing)
:on-press login-multiaccount
:style (style/login-button)}
:style {:margin-bottom (+ (safe-area/get-bottom) 12)}}
(i18n/label :t/log-in)]]))
(defn views

26
src/status_im2/contexts/quo_preview/preview.cljs
View File

@ -4,7 +4,8 @@
[react-native.blur :as blur]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.common.resources :as resources])
[status-im2.common.resources :as resources]
[quo2.theme :as theme])
(:require-macros status-im2.contexts.quo-preview.preview))
(def container
@ -106,17 +107,18 @@
[rn/view {:style {:flex 0.6}}
[rn/text-input
(merge
{:value @state*
:show-cancel false
:style {:border-radius 4
:border-width 1
:color (colors/theme-colors colors/neutral-100 colors/white)
:border-color (colors/theme-colors colors/neutral-100 colors/white)}
:on-change-text #(do
(reset! state* (if (and suffix (> (count %) (count @state*)))
(str (string/replace % suffix "") suffix)
%))
(reagent/flush))}
{:value @state*
:show-cancel false
:style {:border-radius 4
:border-width 1
:color (colors/theme-colors colors/neutral-100 colors/white)
:border-color (colors/theme-colors colors/neutral-100 colors/white)}
:keyboard-appearance (theme/theme-value :light :dark)
:on-change-text #(do
(reset! state* (if (and suffix (> (count %) (count @state*)))
(str (string/replace % suffix "") suffix)
%))
(reagent/flush))}
(when limit
{:max-length limit}))]]]))