From 885cd0f0c5e2066120a6594df612a4db8b9a236a Mon Sep 17 00:00:00 2001 From: enesozturk Date: Fri, 12 Jan 2024 02:04:53 +0300 Subject: [PATCH] feat: add submit app button, refactor theme accent colors --- src/assets/AllApps.svg | 27 +++++-------------- src/assets/Icon.svg | 2 +- src/assets/SubmitApp.svg | 3 +++ .../general/ExternalLink/ExternalLink.scss | 2 +- src/components/general/ExternalLink/index.tsx | 2 +- src/components/general/Icon/CircleIcon.tsx | 2 +- .../general/Icon/ExternalLinkIcon.tsx | 25 +++++++++++++++++ src/components/general/Icon/SignatureIcon.tsx | 2 +- src/components/general/Icon/VerifiedIcon.tsx | 2 +- src/components/general/Label/Label.scss | 2 +- src/components/general/NavLink/NavLink.scss | 2 +- src/components/general/Radio/Radio.scss | 2 +- src/components/layout/Sidebar/Sidebar.scss | 4 +-- .../AppExplorer/AppExplorer.scss | 2 +- .../AppNotifications/AppNotifications.scss | 4 +-- .../AppSelector/AppSelector.scss | 24 ++++++++++++++--- .../notifications/AppSelector/index.tsx | 22 +++++++++++++++ .../SettingsSelector/SettingsSelector.scss | 2 +- .../SettingsThemeButton.scss | 5 ++-- .../SignatureLoadingVisual.scss | 2 +- src/utils/hooks.ts | 9 ++++--- 21 files changed, 102 insertions(+), 45 deletions(-) create mode 100644 src/assets/SubmitApp.svg create mode 100644 src/components/general/Icon/ExternalLinkIcon.tsx diff --git a/src/assets/AllApps.svg b/src/assets/AllApps.svg index febd26a5..bc65ee61 100644 --- a/src/assets/AllApps.svg +++ b/src/assets/AllApps.svg @@ -1,20 +1,7 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + \ No newline at end of file diff --git a/src/assets/Icon.svg b/src/assets/Icon.svg index 06cc5784..7a4b2fdc 100644 --- a/src/assets/Icon.svg +++ b/src/assets/Icon.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/SubmitApp.svg b/src/assets/SubmitApp.svg new file mode 100644 index 00000000..1619eedf --- /dev/null +++ b/src/assets/SubmitApp.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/general/ExternalLink/ExternalLink.scss b/src/components/general/ExternalLink/ExternalLink.scss index 2909ad97..b8b61188 100644 --- a/src/components/general/ExternalLink/ExternalLink.scss +++ b/src/components/general/ExternalLink/ExternalLink.scss @@ -4,7 +4,7 @@ align-items: center; justify-content: center; width: 100%; - color: #3396ff; + color: #089c96; background: rgba(51, 150, 255, 0.15); border-radius: 28px; padding: 7px 0px; diff --git a/src/components/general/ExternalLink/index.tsx b/src/components/general/ExternalLink/index.tsx index 24e83377..1f4e2534 100644 --- a/src/components/general/ExternalLink/index.tsx +++ b/src/components/general/ExternalLink/index.tsx @@ -18,7 +18,7 @@ const ExternalLink: React.FC = ({ children, link, ...props }) => { {children} diff --git a/src/components/general/Icon/CircleIcon.tsx b/src/components/general/Icon/CircleIcon.tsx index 7d2be4a3..9f7cc0c0 100644 --- a/src/components/general/Icon/CircleIcon.tsx +++ b/src/components/general/Icon/CircleIcon.tsx @@ -1,7 +1,7 @@ const CircleIcon = () => { return ( - + ) } diff --git a/src/components/general/Icon/ExternalLinkIcon.tsx b/src/components/general/Icon/ExternalLinkIcon.tsx new file mode 100644 index 00000000..eb6f79ae --- /dev/null +++ b/src/components/general/Icon/ExternalLinkIcon.tsx @@ -0,0 +1,25 @@ +import React from 'react' + +interface IIconProps { + fillColor?: string + className?: string +} + +const ExternalLinkIcon: React.FC = props => { + return ( + + + + + + ) +} + +export default ExternalLinkIcon diff --git a/src/components/general/Icon/SignatureIcon.tsx b/src/components/general/Icon/SignatureIcon.tsx index 037459a5..16b33062 100644 --- a/src/components/general/Icon/SignatureIcon.tsx +++ b/src/components/general/Icon/SignatureIcon.tsx @@ -3,7 +3,7 @@ import React from 'react' const SignatureIcon: React.FC = () => { return ( - + { diff --git a/src/components/general/Label/Label.scss b/src/components/general/Label/Label.scss index 94245b08..5e874c05 100644 --- a/src/components/general/Label/Label.scss +++ b/src/components/general/Label/Label.scss @@ -4,6 +4,6 @@ } &__accent { - color: #3396ff; + color: var(--accent-color-1); } } diff --git a/src/components/general/NavLink/NavLink.scss b/src/components/general/NavLink/NavLink.scss index dab5fe2c..5aa77746 100644 --- a/src/components/general/NavLink/NavLink.scss +++ b/src/components/general/NavLink/NavLink.scss @@ -19,7 +19,7 @@ &:hover, &-active { @media (hover: hover) { - background: var(--accent-color-2); + background: var(--accent-color-3); } } diff --git a/src/components/general/Radio/Radio.scss b/src/components/general/Radio/Radio.scss index ca0b4a1b..93995344 100644 --- a/src/components/general/Radio/Radio.scss +++ b/src/components/general/Radio/Radio.scss @@ -90,7 +90,7 @@ } &:checked { - background-color: #3396ff; + background-color: var(--accent-color-1); } &:checked::before { diff --git a/src/components/layout/Sidebar/Sidebar.scss b/src/components/layout/Sidebar/Sidebar.scss index 8dcd4abc..23b08fcd 100644 --- a/src/components/layout/Sidebar/Sidebar.scss +++ b/src/components/layout/Sidebar/Sidebar.scss @@ -66,7 +66,7 @@ content: ''; height: 3em; width: 0.25em; - background: hsla(211, 100%, 60%, 1); + background: var(--accent-color-1); } &:active { @@ -116,7 +116,7 @@ content: ''; height: 3em; width: 0.25em; - background: hsla(211, 100%, 60%, 0.5); + background: var(--accent-color-3); } } } diff --git a/src/components/notifications/AppExplorer/AppExplorer.scss b/src/components/notifications/AppExplorer/AppExplorer.scss index 2cca2eaa..2962397d 100644 --- a/src/components/notifications/AppExplorer/AppExplorer.scss +++ b/src/components/notifications/AppExplorer/AppExplorer.scss @@ -8,8 +8,8 @@ backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; - will-change: opacity; + position: relative; @media only screen and (max-width: 1300px) { margin-right: 0%; diff --git a/src/components/notifications/AppNotifications/AppNotifications.scss b/src/components/notifications/AppNotifications/AppNotifications.scss index 8e42dd12..a593707b 100644 --- a/src/components/notifications/AppNotifications/AppNotifications.scss +++ b/src/components/notifications/AppNotifications/AppNotifications.scss @@ -119,7 +119,7 @@ text-decoration: none; &--blue { - background: var(--accent-color-2); + background: var(--accent-color-3); } &:hover { @@ -248,7 +248,7 @@ -webkit-line-clamp: unset; } &__show_button { - color: #3396ff; + color: var(--accent-color-1); background: none; border: none; diff --git a/src/components/notifications/AppSelector/AppSelector.scss b/src/components/notifications/AppSelector/AppSelector.scss index c4a39945..a31b4c20 100644 --- a/src/components/notifications/AppSelector/AppSelector.scss +++ b/src/components/notifications/AppSelector/AppSelector.scss @@ -90,7 +90,7 @@ transform: translateY(-50%); position: absolute; border-radius: 50%; - background-color: #3396ff; + background-color: var(--accent-color-1); } &__target-title { @@ -176,7 +176,11 @@ &:not(.NavLink-active):hover { @media (hover: hover) { - background-color: var(--accent-color-2); + background-color: var(--accent-color-3); + + .AppSelector__link-apps__external-link-icon { + opacity: 1; + } } } } @@ -248,7 +252,11 @@ &:not(.NavLink-active):hover { @media (hover: hover) { - background-color: var(--accent-color-2); + background-color: var(--accent-color-3); + + .AppSelector__link-apps__external-link-icon { + opacity: 1; + } } } } @@ -279,6 +287,16 @@ &-apps { width: 1.5rem; height: 1.5rem; + + &__external-link-icon { + position: absolute; + right: 1rem; + top: 50%; + transform: translateY(-50%); + width: 0.75rem; + color: var(--accent-color-2); + opacity: 0; + } } &__logo { diff --git a/src/components/notifications/AppSelector/index.tsx b/src/components/notifications/AppSelector/index.tsx index 9de03e0d..855e0b42 100644 --- a/src/components/notifications/AppSelector/index.tsx +++ b/src/components/notifications/AppSelector/index.tsx @@ -9,6 +9,8 @@ import { from } from 'rxjs' import AllAppsIcon from '@/assets/AllApps.svg' import SearchIcon from '@/assets/Search.svg' +import SubmitAppIcon from '@/assets/SubmitApp.svg' +import ExternalLinkIcon from '@/components/general/Icon/ExternalLinkIcon' import Input from '@/components/general/Input' import Label from '@/components/general/Label' import NavLink from '@/components/general/NavLink' @@ -118,10 +120,30 @@ const AppSelector: React.FC = () => { alt="Discover apps logo" loading="lazy" /> + Discover apps + +
+
+ Submit app logo + Submit app + +
+
+
diff --git a/src/components/settings/SettingsSelector/SettingsSelector.scss b/src/components/settings/SettingsSelector/SettingsSelector.scss index 6ad56bfc..62c26cae 100644 --- a/src/components/settings/SettingsSelector/SettingsSelector.scss +++ b/src/components/settings/SettingsSelector/SettingsSelector.scss @@ -116,7 +116,7 @@ &:not(.NavLink-active):hover { @media (hover: hover) { - background: var(--accent-color-2); + background: var(--accent-color-3); } @media only screen and (max-width: 700px) { diff --git a/src/components/settings/SettingsThemeButton/SettingsThemeButton.scss b/src/components/settings/SettingsThemeButton/SettingsThemeButton.scss index d9974138..07fffcbb 100644 --- a/src/components/settings/SettingsThemeButton/SettingsThemeButton.scss +++ b/src/components/settings/SettingsThemeButton/SettingsThemeButton.scss @@ -5,14 +5,13 @@ .SettingsThemeInput:checked + .SettingsThemeButton { background: rgba(51, 150, 255, 0.1); - outline: 2px solid #3396ff; - box-shadow: 0px 0px 0px 4px rgba(51, 150, 255, 0.2); + outline: 2px solid var(--accent-color-1); .SettingsThemeButton__icon { background-color: rgba(51, 150, 255, 0.1); svg { path { - stroke: #3396ff; + stroke: var(--accent-color-1); } } } diff --git a/src/pages/Login/SignatureModal/SignatureLoadingVisual.scss b/src/pages/Login/SignatureModal/SignatureLoadingVisual.scss index 787d5dcc..4105d70b 100644 --- a/src/pages/Login/SignatureModal/SignatureLoadingVisual.scss +++ b/src/pages/Login/SignatureModal/SignatureLoadingVisual.scss @@ -35,7 +35,7 @@ width: 100%; height: 100%; border-radius: 24px; - background: var(--accent-color-2); + background: var(--accent-color-3); display: flex; flex-direction: row; align-items: center; diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts index 944ba638..6f0cc42f 100644 --- a/src/utils/hooks.ts +++ b/src/utils/hooks.ts @@ -70,7 +70,8 @@ export const useColorModeValue = (mode: SettingsContextSimpleState['mode']) => { border1: 'hsla(0, 0%, 0%, 0.5)', border2: 'hsla(0, 0%, 100%, 0.1)', accent1: 'hsla(211, 90%, 50%, 1)', - accent2: 'hsla(211, 90%, 50%, 0.08)', + accent2: 'hsla(211, 90%, 50%, 0.3)', + accent3: 'hsla(211, 90%, 50%, 0.08)', error1: 'hsla(5, 85%, 60%, 1)', icon1: 'hsla(180, 6%, 80%, 1)', qr1: '#e4e7e7', @@ -100,8 +101,9 @@ export const useColorModeValue = (mode: SettingsContextSimpleState['mode']) => { fg5: 'hsla(0, 0%, 100%, 1)', border1: 'hsla(0, 0%, 0%, 0.5)', border2: 'hsla(0, 0%, 0%, 0.1)', - accent1: 'hsla(211, 100%, 60%, 1)', - accent2: 'hsla(211, 100%, 60%, 0.08)', + accent1: 'hsla(178, 90%, 32%, 1)', + accent2: 'hsla(178, 90%, 32%, 0.3)', + accent3: 'hsla(178, 90%, 32%, 0.08)', error1: '#ED4747', icon1: 'hsla(180, 4%, 16%, 1)', qr1: '#141414', @@ -135,6 +137,7 @@ export const useColorModeValue = (mode: SettingsContextSimpleState['mode']) => { '--border-color-2': colors[specifiedMode].border2, '--accent-color-1': colors[specifiedMode].accent1, '--accent-color-2': colors[specifiedMode].accent2, + '--accent-color-3': colors[specifiedMode].accent3, '--error-color-1': colors[specifiedMode].error1, '--icon-color-1': colors[specifiedMode].icon1, '--qr-color-1': colors[specifiedMode].qr1,