diff --git a/apps/faucet/src/App/App.components.ts b/apps/faucet/src/App/App.components.ts
index 7d3df94ca6..1b5630e8db 100644
--- a/apps/faucet/src/App/App.components.ts
+++ b/apps/faucet/src/App/App.components.ts
@@ -153,6 +153,21 @@ export const ButtonContainer = styled.div`
margin: 13px 0 0 0;
`;
+export const SettingsButtonContainer = styled.div`
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ width: 100%;
+`;
+
+export const SettingsButton = styled.button`
+ & > svg {
+ width: 20px;
+ height: 20px;
+ color: ${(props) => props.theme.colors.primary.main20};
+ }
+`;
+
export const SettingsContainer = styled.div`
flex-direction: column;
justify-content: start;
diff --git a/apps/faucet/src/App/App.tsx b/apps/faucet/src/App/App.tsx
index 0dca1878ce..5314cd8350 100644
--- a/apps/faucet/src/App/App.tsx
+++ b/apps/faucet/src/App/App.tsx
@@ -1,4 +1,5 @@
import React, { createContext, useCallback, useEffect, useState } from "react";
+import { GoGear } from "react-icons/go";
import { ThemeProvider } from "styled-components";
import { ActionButton, Alert, Modal } from "@namada/components";
@@ -13,6 +14,8 @@ import {
FaucetContainer,
GlobalStyles,
InfoContainer,
+ SettingsButton,
+ SettingsButtonContainer,
TopSection,
} from "App/App.components";
import { FaucetForm } from "App/Faucet";
@@ -122,7 +125,6 @@ export const App: React.FC = () => {
);
useEffect(() => {
- console.log("RECEIVED NEW URL, UPDATE API!", url);
// Sync url to localStorage
localStorage.setItem("baseUrl", url);
const api = new API(url);
@@ -207,6 +209,15 @@ export const App: React.FC = () => {
+
+ setIsModalOpen(true)}
+ title="Settings"
+ >
+
+
+
+
diff --git a/apps/faucet/src/App/Common/AppHeader.components.ts b/apps/faucet/src/App/Common/AppHeader.components.ts
index 56c930b77a..a3fae7d74b 100644
--- a/apps/faucet/src/App/Common/AppHeader.components.ts
+++ b/apps/faucet/src/App/Common/AppHeader.components.ts
@@ -1,17 +1,7 @@
import styled from "styled-components";
export const AppHeaderContainer = styled.div`
- width: 100%;
display: flex;
align-items: center;
justify-content: center;
`;
-
-export const SettingsButton = styled.a`
- align-items: center;
- justify-content: center;
- width: 40px;
- height: 40px;
- color: ${(props) => props.theme.colors.primary.main20};
- cursor: pointer;
-`;
diff --git a/apps/faucet/src/App/Common/AppHeader.tsx b/apps/faucet/src/App/Common/AppHeader.tsx
index c205fe46f6..95ec56c21e 100644
--- a/apps/faucet/src/App/Common/AppHeader.tsx
+++ b/apps/faucet/src/App/Common/AppHeader.tsx
@@ -1,19 +1,13 @@
import { Heading } from "@namada/components";
-import { AppContext } from "App/App";
-import React, { useContext } from "react";
-import { GoGear } from "react-icons/go";
-import { AppHeaderContainer, SettingsButton } from "./AppHeader.components";
+import React from "react";
+import { AppHeaderContainer } from "./AppHeader.components";
export const AppHeader: React.FC = () => {
- const { setIsModalOpen } = useContext(AppContext)!;
return (
Namada Faucet
- setIsModalOpen(true)}>
-
-
);
};