feat: overlay

Signed-off-by: Pablo Maldonado <pablomaldonadoturci@gmail.com>
md0x · Jun 12, 2023 · 818b87d · 818b87d
1 parent e1365da
commit 818b87d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/web/components/Header.tsx b/web/components/Header.tsx
@@ -37,7 +37,7 @@ const Header = () => {
 
             <div className="header-content">
                 <Link href="/">
-                    <Image src="/android-chrome-512x512.png" alt="Logo" width={150} height={150} />
+                    <Image src="/android-chrome-512x512.png" alt="Logo" width={125} height={125} />
                 </Link>
                 <Link
                     href="https://github.com/md0x/defikicks"
@@ -121,7 +121,7 @@ const Header = () => {
             <style jsx>{`
                 .logo-container {
                     position: relative;
-                    width: 200px;
+                    width: 150px;
                     height: 50px;
                 }
                 .navigation-bar {
@@ -134,6 +134,7 @@ const Header = () => {
                 }
 
                 .header-content {
+                    margin-top: 2em;
                     flex-direction: column;
                     display: flex;
                     align-items: center;

diff --git a/web/components/Layout.tsx b/web/components/Layout.tsx
@@ -29,7 +29,7 @@ export default function Layout({ children }) {
                     display: flex;
                     flex-direction: column;
                     margin-bottom: 2em;
-                    height: 55vh; // Set this to the desired fixed height
+                    height: 52vh; // Set this to the desired fixed height
                     overflow: hidden; // Ensures that the card itself does not become scrollable
                 }
 

diff --git a/web/pages/index.tsx b/web/pages/index.tsx
@@ -9,6 +9,7 @@ import { MoreVert } from "@web3uikit/icons"
 import React, { useState } from "react"
 import useTVLData from "../hooks/useTVLData"
 import { Chart } from "../components/Chart"
+
 // import styled from "styled-components"
 // import { styled } from "@web3uikit/styles"
 // import backgroundImage from "../assets/large.jpg"
@@ -110,6 +111,14 @@ function Home() {
                 </div>
                 <div className="chart-container">
                     <Chart />
+                    <div className="overlay-image">
+                        <Image
+                            src="/android-chrome-512x512.png"
+                            alt="Superposed Image"
+                            width={100}
+                            height={100}
+                        />
+                    </div>
                 </div>
             </div>
 
@@ -153,6 +162,7 @@ function Home() {
                 .chart-container {
                     flex: 1; // Grow to occupy remaining space
                     height: 100%;
+                    position: relative; /* New style */
                     overflow-y: auto; // Enable scrolling if content overflows
                 }
 
@@ -179,6 +189,13 @@ function Home() {
                 .selected {
                     background-color: rgba(255, 255, 255, 0.1);
                 }
+                .overlay-image {
+                    position: absolute;
+                    top: 40%; // Adjust as necessary
+                    left: 46%; // Adjust as necessary
+                    filter: grayscale(100%) opacity(30%);
+                    position: absolute;
+                }
             `}</style>
         </>
     )