feat: modified container properties, modified skeletons

DLC-link · Nov 15, 2023 · efbe039 · efbe039
1 parent a17e0d5
commit efbe039
Show file tree

Hide file tree

Showing 53 changed files with 828 additions and 732 deletions.
diff --git a/public/images/logos/bitcoin-logo.svg b/public/images/logos/bitcoin-logo.svg
diff --git a/src/app/components/dlc-btc-item/components/vault-box-information-stack.tsx b/src/app/components/dlc-btc-item/components/vault-box-information-stack.tsx
diff --git a/src/app/components/dlc-btc-item/vault-box.tsx b/src/app/components/dlc-btc-item/vault-box.tsx
diff --git a/src/app/components/fade-layer/fade-layer.tsx b/src/app/components/fade-layer/fade-layer.tsx
@@ -18,7 +18,8 @@ export function FadeLayer({
     left: 0,
     right: 0,
     height: fadeHeight,
-    backgroundImage: "linear-gradient(to top, background.container.01, transparent)",
+    backgroundImage:
+      "linear-gradient(to top, background.container.01, transparent)",
   };
 
   return (

diff --git a/src/app/components/header/components/tabs.tsx b/src/app/components/header/components/tabs.tsx
@@ -2,28 +2,31 @@ import { HStack } from "@chakra-ui/react";
 import { TabButton } from "@components/tab-button/tab-button";
 
 interface NavigationTabsProps {
-    activeTab: string;
-    handleTabClick: (route: string) => void;
+  activeTab: string;
+  handleTabClick: (route: string) => void;
 }
 
-export function NavigationTabs({ activeTab, handleTabClick }: NavigationTabsProps): React.JSX.Element {
-    return (
-        <HStack spacing={'25px'} marginRight={'150px'}>
-        <TabButton
-          title={'Mint/Unmint dlcBTC'}
-          isActive={activeTab === '/'}
-          handleClick={() => handleTabClick('/')}
-        />
-        <TabButton
-          title={'My Vaults'}
-          isActive={activeTab === '/my-vaults'}
-          handleClick={() => handleTabClick('/my-vaults')}
-        />
-        <TabButton
-          title={'How It Works'}
-          isActive={activeTab === '/how-it-works'}
-          handleClick={() => handleTabClick('/how-it-works')}
-        />
-      </HStack>
-    )
+export function NavigationTabs({
+  activeTab,
+  handleTabClick,
+}: NavigationTabsProps): React.JSX.Element {
+  return (
+    <HStack spacing={"25px"} marginRight={"150px"}>
+      <TabButton
+        title={"Mint/Unmint dlcBTC"}
+        isActive={activeTab === "/"}
+        handleClick={() => handleTabClick("/")}
+      />
+      <TabButton
+        title={"My Vaults"}
+        isActive={activeTab === "/my-vaults"}
+        handleClick={() => handleTabClick("/my-vaults")}
+      />
+      <TabButton
+        title={"How It Works"}
+        isActive={activeTab === "/how-it-works"}
+        handleClick={() => handleTabClick("/how-it-works")}
+      />
+    </HStack>
+  );
 }
diff --git a/src/app/components/header/header.tsx b/src/app/components/header/header.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import React from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 
-import { Account } from '@components/account/account';
-import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
-import { HeaderLayout } from '@components/header/components/header.layout';
+import { Account } from "@components/account/account";
+import { CompanyWebsiteButton } from "@components/company-website-button/company-website-button";
+import { HeaderLayout } from "@components/header/components/header.layout";
 
-import { NavigationTabs } from './components/tabs';
+import { NavigationTabs } from "./components/tabs";
 
 export function Header(): React.JSX.Element {
   const navigate = useNavigate();
@@ -18,7 +18,10 @@ export function Header(): React.JSX.Element {
   return (
     <HeaderLayout>
       <CompanyWebsiteButton />
-      <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
+      <NavigationTabs
+        activeTab={location.pathname}
+        handleTabClick={handleTabClick}
+      />
       <Account />
     </HeaderLayout>
   );

diff --git a/src/app/components/mint-unmint-box/mint-unmint-box.tsx b/src/app/components/mint-unmint-box/mint-unmint-box.tsx
diff --git a/...box/components/mint-unmint-box.layout.tsx → ...-unmint/components/mint-unmint.layout.tsx b/...box/components/mint-unmint-box.layout.tsx → ...-unmint/components/mint-unmint.layout.tsx
@@ -1,9 +1,7 @@
 import { VStack } from "@chakra-ui/react";
 import { HasChildren } from "@models/has-children";
 
-export function MintUnmintBoxLayout({
-  children,
-}: HasChildren): React.JSX.Element {
+export function MintUnmintLayout({ children }: HasChildren): React.JSX.Element {
   return (
     <VStack
       px={"15px"}

diff --git a/...ponents/protocol-summary-stack.layout.tsx → ...ponents/protocol-summary-stack.layout.tsx b/...ponents/protocol-summary-stack.layout.tsx → ...ponents/protocol-summary-stack.layout.tsx
diff --git a/...-summary-stack/protocol-summary-stack.tsx → ...-summary-stack/protocol-summary-stack.tsx b/...-summary-stack/protocol-summary-stack.tsx → ...-summary-stack/protocol-summary-stack.tsx
@@ -1,20 +1,21 @@
 import { Text, VStack } from "@chakra-ui/react";
-import { ProtocolSummaryStackLayout } from "./components/protocol-summary-stack.layout";
 import { ProtocolHistory } from "@components/protocol-history/protocol-history";
 
+import { ProtocolSummaryStackLayout } from "./components/protocol-summary-stack.layout";
+
 export function ProtocolSummaryStack(): React.JSX.Element {
   return (
     <ProtocolSummaryStackLayout>
       <VStack alignItems={"start"} h={"250px"} w={"50%"} spacing={"15px"}>
         <Text alignContent={"start"} color={"white"} fontSize={"lg"}>
           TVL
         </Text>
-        <VStack alignItems={"start"} w={"100%"}>
+        <VStack alignItems={"start"} w={"100%"} spacing={"0px"}>
           <Text
             alignContent={"start"}
             color={"white"}
             fontSize={"3xl"}
-            fontWeight={"extrabold"}
+            fontWeight={"semibold"}
           >
             1,650.36 dlcBTC
           </Text>

diff --git a/...onents/setup-information-stack.layout.tsx → ...onents/setup-information-stack.layout.tsx b/...onents/setup-information-stack.layout.tsx → ...onents/setup-information-stack.layout.tsx
@@ -7,11 +7,10 @@ export function SetupInformationStackLayout({
   return (
     <VStack
       alignContent={"start"}
-      py={"50px"}
+      pt={"50px"}
       h={"auto"}
       w={"100%"}
       spacing={"25px"}
-      borderBottom={"3.5px solid grey"}
     >
       {children}
     </VStack>

diff --git a/...mponents/mint-unmint/components/setup-information-stack/components/wallet-requirement.tsx b/...mponents/mint-unmint/components/setup-information-stack/components/wallet-requirement.tsx
@@ -0,0 +1,29 @@
+import { HStack, Image, Text, VStack } from "@chakra-ui/react";
+
+interface WalletRequirementProps {
+  logo: string;
+  color: string;
+  walletName: string;
+  requirement: string;
+}
+
+export function WalletRequirement({
+  logo,
+  color,
+  walletName,
+  requirement,
+}: WalletRequirementProps): React.JSX.Element {
+  return (
+    <VStack w={"100%"} spacing={"0.5px"}>
+      <HStack alignContent={"start"} w={"100%"}>
+        <Image src={logo} h={"15px"}></Image>
+        <Text color={color} fontWeight={"regular"} textDecoration={"underline"}>
+          {walletName}
+        </Text>
+      </HStack>
+      <Text align={"start"} color={"white"} w={"100%"}>
+        {requirement}
+      </Text>
+    </VStack>
+  );
+}