Skip to content

Commit

Permalink
[ES-1665] theme changes. (#493)
Browse files Browse the repository at this point in the history 
Signed-off-by: GurukiranP <[email protected]>
  • Loading branch information
@gk-4VII
gk-4VII authored Dec 20, 2024
1 parent 63dd861 commit a19fb5a
Show file tree
Hide file tree
Showing 6 changed files with 350 additions and 26 deletions.
131 changes: 131 additions & 0 deletions signup-ui/public/images/bottom.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
129 changes: 129 additions & 0 deletions signup-ui/public/images/top.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 62 additions & 14 deletions signup-ui/public/theme/variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,30 @@

--signup-background: #f7f9fd;
--side-section-bg-with: 225px;
--top-left-bg-logo-url: url("/images/top.png");
--top-left-bg-logo-url: url("/images/top.svg");
--top-left-bg-logo-display: block;
--bottom-left-bg-logo-url: url("/images/bg_bottom_left.png");
--bottom-left-bg-logo-url: url("/images/top.svg");
--bottom-left-bg-logo-display: none;
--top-right-bg-logo-url: url("/images/bg_bottom_left.png");
--top-right-bg-logo-url: url("/images/bottom.svg");
--top-right-bg-logo-display: none;
--bottom-right-bg-logo-url: url("/images/bottom.png");
--bottom-right-bg-logo-url: url("/images/bottom.svg");
--bottom-right-bg-logo-display: block;
--top-left-bg-width: 14rem;
--top-left-bg-height: 14rem;
--top-left-bg-position-top: 10px;
--top-left-bg-position-left: 10px;
--bottom-left-bg-width: 14rem;
--bottom-left-bg-height: 14rem;
--bottom-left-bg-position-bottom: 10px;
--bottom-left-bg-position-left: 10px;
--top-right-bg-width: 14rem;
--top-right-bg-height: 14rem;
--top-right-bg-position-top: 10px;
--top-right-bg-position-right: 10px;
--bottom-right-bg-width: 17rem;
--bottom-right-bg-height: 17rem;
--bottom-right-bg-position-bottom: 10px;
--bottom-right-bg-position-right: 10px;

--footer-brand-logo-url: url("/images/footer_logo.png");
--footer-text-color: #898989;
Expand Down Expand Up @@ -176,14 +192,30 @@

--signup-background: #f7f9fd;
--side-section-bg-with: 320px;
--top-left-bg-logo-url: url("/images/top.png");
--top-left-bg-logo-display: none;
--bottom-left-bg-logo-url: url("/images/bg_bottom_left.png");
--top-left-bg-logo-url: url("/images/top.svg");
--top-left-bg-logo-display: block;
--bottom-left-bg-logo-url: url("/images/top.svg");
--bottom-left-bg-logo-display: none;
--top-right-bg-logo-url: url("/images/bg_bottom_left.png");
--top-right-bg-logo-url: url("/images/bottom.svg");
--top-right-bg-logo-display: none;
--bottom-right-bg-logo-url: url("/images/bottom.png");
--bottom-right-bg-logo-display: none;
--bottom-right-bg-logo-url: url("/images/bottom.svg");
--bottom-right-bg-logo-display: block;
--top-left-bg-width: 14rem;
--top-left-bg-height: 14rem;
--top-left-bg-position-top: 10px;
--top-left-bg-position-left: 10px;
--bottom-left-bg-width: 14rem;
--bottom-left-bg-height: 14rem;
--bottom-left-bg-position-bottom: 10px;
--bottom-left-bg-position-left: 10px;
--top-right-bg-width: 14rem;
--top-right-bg-height: 14rem;
--top-right-bg-position-top: 10px;
--top-right-bg-position-right: 10px;
--bottom-right-bg-width: 17rem;
--bottom-right-bg-height: 17rem;
--bottom-right-bg-position-bottom: 10px;
--bottom-right-bg-position-right: 10px;

--footer-brand-logo-url: url("/images/footer_logo.png");
--footer-text-color: #898989;
Expand Down Expand Up @@ -305,14 +337,30 @@

--signup-background: #f7f9fd;
--side-section-bg-with: 225px;
--top-left-bg-logo-url: url("/images/top.png");
--top-left-bg-logo-url: url("/images/top.svg");
--top-left-bg-logo-display: block;
--bottom-left-bg-logo-url: url("/images/bg_bottom_left.png");
--bottom-left-bg-logo-url: url("/images/top.svg");
--bottom-left-bg-logo-display: none;
--top-right-bg-logo-url: url("/images/bg_bottom_left.png");
--top-right-bg-logo-url: url("/images/bottom.svg");
--top-right-bg-logo-display: none;
--bottom-right-bg-logo-url: url("/images/bottom.png");
--bottom-right-bg-logo-url: url("/images/bottom.svg");
--bottom-right-bg-logo-display: block;
--top-left-bg-width: 14rem;
--top-left-bg-height: 14rem;
--top-left-bg-position-top: 10px;
--top-left-bg-position-left: 10px;
--bottom-left-bg-width: 14rem;
--bottom-left-bg-height: 14rem;
--bottom-left-bg-position-bottom: 10px;
--bottom-left-bg-position-left: 10px;
--top-right-bg-width: 14rem;
--top-right-bg-height: 14rem;
--top-right-bg-position-top: 10px;
--top-right-bg-position-right: 10px;
--bottom-right-bg-width: 17rem;
--bottom-right-bg-height: 17rem;
--bottom-right-bg-position-bottom: 10px;
--bottom-right-bg-position-right: 10px;

--footer-brand-logo-url: url("/images/footer_logo.png");
--footer-text-color: #898989;
Expand Down
28 changes: 22 additions & 6 deletions signup-ui/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,22 +44,38 @@ body {

.section-background .top_left_bg_logo {
display: var(--top-left-bg-logo-display);
content: var(--top-left-bg-logo-url);
-webkit-mask-image: var(--top-left-bg-logo-url);
mask-image: var(--top-left-bg-logo-url);
background-color: var(--default);
width: var(--top-left-bg-width);
height: var(--top-left-bg-height);
}

.section-background .top_right_bg_logo {
display: var(--top-right-bg-logo-display);
content: var(--top-right-bg-logo-url);
-webkit-mask-image: var(--top-right-bg-logo-url);
mask-image: var(--top-right-bg-logo-url);
background-color: var(--default);
width: var(--top-right-bg-width);
height: var(--top-right-bg-height);
}

.section-background .bottom_right_bg_logo {
display: var(--bottom-right-bg-logo-display);
content: var(--bottom-right-bg-logo-url);
-webkit-mask-image: var(--bottom-right-bg-logo-url);
mask-image: var(--bottom-right-bg-logo-url);
background-color: var(--default);
width: var(--bottom-right-bg-width);
height: var(--bottom-right-bg-height);
}

.section-background .bottom_left_bg_logo {
display: var(--bottom-left-bg-logo-display);
content: var(--bottom-left-bg-logo-url);
-webkit-mask-image: var(--bottom-left-bg-logo-url);
mask-image: var(--bottom-left-bg-logo-url);
background-color: var(--default);
width: var(--bottom-left-bg-width);
height: var(--bottom-left-bg-height);
}

.verticalStepper {
Expand Down Expand Up @@ -408,8 +424,8 @@ body {
@apply text-center text-2xl font-semibold;
}

input[type='password']::-ms-reveal,
input[type='password']::-ms-clear {
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none;
}

Expand Down
2 changes: 1 addition & 1 deletion signup-ui/src/components/language.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const Language = () => {
<TranslationIcon className="mr-2 h-9 w-9" />
{pathname === EKYC_VERIFICATION && (
<span
className="inline-flex items-center justify-center bg-white text-[14px] outline-none"
className="inline-flex items-center justify-center bg-white outline-none"
aria-label="Customise options"
>
{languages_2Letters[i18n.language as keyof typeof languages_2Letters]}
Expand Down
10 changes: 5 additions & 5 deletions signup-ui/src/components/ui/nav-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,17 @@ const NavBar = () => {
);

const [navbarStyle, setNavbarStyle] = useState(
"sticky top-0 z-40 h-[70px] w-full border-gray-500 bg-white px-2 py-2 sm:px-0 shadow-md"
"sticky top-0 z-40 h-auto w-full border-gray-500 bg-white py-0 sm:px-0 shadow-md"
);

useEffect(() => {
if (errorBannerMessage !== null && errorBannerMessage !== "") {
setNavbarStyle(
"sticky top-0 z-40 h-[70px] w-full border-gray-500 bg-white px-2 py-2 sm:px-0"
"sticky top-0 z-40 h-auto w-full border-gray-500 bg-white py-0 px-0 sm:px-0"
);
} else {
setNavbarStyle(
"sticky top-0 z-40 h-[70px] w-full border-gray-500 bg-white px-2 py-2 sm:px-0 shadow-md"
"sticky top-0 z-40 h-auto w-full border-gray-500 bg-white py-0 sm:px-0 shadow-md"
);
}
}, [errorBannerMessage]);
Expand Down Expand Up @@ -80,14 +80,14 @@ const NavBar = () => {
<div className="row">
<div>
<Offline polling={pollingConfig} onChange={handleOnchangeOffline}>
<div className="top-[70px] left-0 w-full h-[40px] opacity-100 flex justify-center items-center bg-[#FAEFEF]">
<div className="top-[70px] left-0 w-full h-auto py-3 opacity-100 flex justify-center items-center bg-[#FAEFEF] text-center">
<p className="font-inter font-semibold text-[14px] leading-[17px] tracking-[0px] opacity-100 text-[#D52929]">
{t("offline_polling_prompt")}
</p>
</div>
</Offline>
{showBackOnline &&
<div className="top-[70px] left-0 w-full h-[40px] opacity-100 flex justify-center items-center bg-[#EAFAE4]">
<div className="top-[70px] left-0 w-full h-auto py-3 opacity-100 flex justify-center items-center bg-[#EAFAE4] text-center">
<p className="font-inter font-semibold text-[14px] leading-[17px] tracking-[0px] opacity-100 text-[#419533]">
{t("online_polling_prompt")}
</p>
Expand Down

0 comments on commit a19fb5a

Please sign in to comment.