fix: touch up styles

anoma · Aug 30, 2024 · 8b60d80 · 8b60d80
1 parent ed8cd13
commit 8b60d80
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 19 deletions.
diff --git 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
@@ -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 = () => {
         <BackgroundImage imageUrl={dotsBackground} />
         <AppContainer>
           <ContentContainer>
+            <SettingsButtonContainer>
+              <SettingsButton
+                onClick={() => setIsModalOpen(true)}
+                title="Settings"
+              >
+                <GoGear />
+              </SettingsButton>
+            </SettingsButtonContainer>
+
             <TopSection>
               <AppHeader />
             </TopSection>

diff --git 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
@@ -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 (
     <AppHeaderContainer>
       <Heading className="uppercase text-black text-4xl" level="h1">
         Namada Faucet
       </Heading>
-      <SettingsButton onClick={() => setIsModalOpen(true)}>
-        <GoGear />
-      </SettingsButton>
     </AppHeaderContainer>
   );
 };