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)}> - - ); };