Merge pull request #111 from Portkey-Wallet/feature/theme

Feature/theme

src/app/globals.css

@@ -43,6 +43,10 @@ body {
   background-color: #fff;
 }
 
+.bg-black {
+  background-color: #151318;
+}
+
 /* The purpose of using multiple class names is to increase style weight */
 .common-prompt-modal.portkey-ant-modal-wrap.portkey-ui-wrapper {
   .portkey-ant-modal-body {

src/components/Loading/index.css

@@ -1,3 +1,6 @@
 .loading-wrapper {
   background-color: rgb(00 00 00 / 20%);
 }
+.dark-theme {
+  color: #fff;
+}

src/components/Loading/index.tsx

@@ -1,8 +1,8 @@
 "use client"
 import { useMemo } from "react";
 import { OpacityType } from "src/types";
-import "./index.css";
 import { PureLoadingIndicator } from "@portkey/did-ui-react";
+import "./index.css";
 
 export interface LoadingProps {
   loading?: boolean | OpacityType;

src/pages-components/telegram-auth/index.css

@@ -4,3 +4,14 @@
   justify-content: center;
   height: 100vh;
 }
+.telegram-wrapper.dark-theme {
+  background-color: #151318;
+}
+.dark-theme #login-btn {
+  cursor: pointer;
+  width: 320px;
+  height: 48px;
+  border-radius: 24px;
+  border: 1px solid #5A5A5A;
+  background-color: #151318;
+}

src/pages-components/telegram-auth/index.tsx

@@ -7,6 +7,7 @@ import {
 } from "src/constants";
 import { SearchParams } from "src/types";
 import { stringify } from "query-string";
+import clsx from "clsx";
 import "./index.css";
 
 enum TGStauts {
@@ -32,6 +33,7 @@ export default function TelegramAuth({
   useEffect(() => {
     changeLoading.current = onLoadingChange;
   });
+  const {theme = 'light'} = searchParams;
 
   const serviceURL = useMemo(() => {
     const { network, serviceURI } = searchParams;
@@ -116,7 +118,7 @@ export default function TelegramAuth({
   }, [getTelegramAuth]);
 
   return (
-    <div className="telegram-wrapper">
+    <div className={clsx("telegram-wrapper", theme === 'dark' && 'dark-theme')}>
       <link
         rel="stylesheet"
         href="https://telegram.org/css/widget-frame.css?66"