fix: ui

Portkey-Wallet · Jan 2, 2025 · ec0110a · ec0110a
1 parent dbcd7f9
commit ec0110a
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 8 deletions.
diff --git a/public/fonts/BricolageGrotesque-Bold.ttf b/public/fonts/BricolageGrotesque-Bold.ttf
diff --git a/public/fonts/BricolageGrotesque-Regular.ttf b/public/fonts/BricolageGrotesque-Regular.ttf
diff --git a/public/fonts/SchibstedGrotesk-Italic.ttf b/public/fonts/SchibstedGrotesk-Italic.ttf
diff --git a/public/fonts/SchibstedGrotesk-Regular.ttf b/public/fonts/SchibstedGrotesk-Regular.ttf
diff --git a/public/fonts/SchibstedGrotesk-SemiBold.ttf b/public/fonts/SchibstedGrotesk-SemiBold.ttf
diff --git a/src/app/auth-callback/page.tsx b/src/app/auth-callback/page.tsx
@@ -95,7 +95,7 @@ export default function AuthCallback() {
   }, [getToken]);
   return (
     <div>
-      {error ? (
+      {false ? (
         <div>{error}</div>
       ) : (
         <div>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -93,4 +93,45 @@ body {
 
   --sds-color-border-default-default: #414142;
   --sds-color-border-warning-tertiary: #6C5A0D;
+}
+
+@font-face {
+  font-family: Bricolage Grotesque Bold;
+  src: url('/fonts/BricolageGrotesque-Bold.ttf');
+  font-display: swap;
+}
+@font-face {
+  font-family: Bricolage Grotesque;
+  src: url('/fonts/BricolageGrotesque-Bold.ttf');
+  font-display: swap;
+}
+@font-face {
+  font-family: Bricolage Grotesque Regular;
+  src: url('/fonts/BricolageGrotesque-Regular.ttf');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Schibsted Grotesk;
+  src: url('/fonts/SchibstedGrotesk-Regular.ttf');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Schibsted Grotesk Italic;
+  font-weight: 300;
+  src: url('/fonts/SchibstedGrotesk-Italic.ttf');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Schibsted Grotesk Bold;
+  font-weight: 600;
+  src: url('/fonts/SchibstedGrotesk-SemiBold.ttf');
+  font-display: swap;
+}
+@font-face {
+  font-family: 'password';
+  src: local('Arial');
+  unicode-range: U+25CF;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import Toast from "src/components/Toast";
 import "./globals.css";
 import { Inter } from "next/font/google";
+// import '../assets/index.less';
 
 const inter = Inter({ subsets: ["latin"] });
 

diff --git a/src/components/Loading/index.css b/src/components/Loading/index.css
@@ -1,6 +1,13 @@
 .loading-wrapper {
-  background-color: rgb(00 00 00 / 20%);
+   background: var(--sds-color-background-default-default);
 }
-.dark-theme {
-  color: #fff;
+.loading-text {
+  color: var(--sds-color-text-default-default);
+  text-align: center;
+  /* Body Strong */
+  font-family: 'Schibsted Grotesk';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 140%; /* 22.4px */
 }
diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { OpacityType } from "src/types";
 import { PureLoadingIndicator } from "@portkey/did-ui-react";
 import "./index.css";
@@ -9,13 +9,25 @@ export interface LoadingProps {
   loadingText?: string;
   cancelable?: boolean;
   className?: string;
+  theme?: 'dark' | 'white';
+}
+export declare enum LoadingColor {
+  WHITE = "white",
+  DARK = "dark"
 }
-
 export default function Loading({
   loading,
   loadingText = "Loading...",
   className,
+  theme = 'white'
 }: LoadingProps) {
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      document.documentElement.setAttribute("data-theme", "light");
+    }
+  })
   const style = useMemo(
     () =>
       typeof loading !== "number"
@@ -26,14 +38,23 @@ export default function Loading({
     [loading]
   );
 
+  const loadingTheme = useMemo(
+    () =>
+      theme === "dark"
+        ? 'white'
+        : 'dark',
+    [theme]
+  );
+
   return loading ? (
     <div
       className={
-        "loading-wrapper max-h-screen fixed w-screen h-screen flex justify-center items-center z-999 text-center " +
+        "loading-wrapper max-h-screen fixed w-screen h-screen flex justify-center items-center z-999 text-center flex-col gap-6 " +
         (className || "")
       }
       style={style}>
-      <PureLoadingIndicator width={44} height={44}/>
+      <PureLoadingIndicator width={32} height={32}  color={loadingTheme as LoadingColor || 'dark'} />
+      <div className="loading-text">{loadingText}</div>
     </div>
   ) : null;
 }
diff --git a/src/pages-components/entry/mobile-styles.module.css b/src/pages-components/entry/mobile-styles.module.css
@@ -186,6 +186,7 @@
   border: 1px solid var(--sds-color-border-warning-tertiary);
   border-radius: 16px;
   color: var(--sds-color-text-warning-on-warning-tertiary);
+  background: var(--sds-color-background-warning-tertiary);
 }
 
 .warningTitle {

diff --git a/src/pages-components/entry/pc-styles.module.css b/src/pages-components/entry/pc-styles.module.css
@@ -222,6 +222,7 @@
   border: 1px solid var(--sds-color-border-warning-tertiary);
   border-radius: 16px;
   color: var(--sds-color-text-warning-on-warning-tertiary);
+  background: var(--sds-color-background-warning-tertiary);
 }
 
 .warningTitle {