From ef2a54db4b61c47169ae67085a673759f1d7c8d7 Mon Sep 17 00:00:00 2001 From: arthuravianna Date: Mon, 11 Mar 2024 18:30:16 -0300 Subject: [PATCH] feat: page Footer and globals.css cleanup --- frontend/app/components/Footer.tsx | 21 +++ frontend/app/components/svg/DiscordLogo.tsx | 11 ++ frontend/app/globals.css | 163 ++------------------ frontend/app/layout.tsx | 2 + frontend/app/page.tsx | 2 +- 5 files changed, 45 insertions(+), 154 deletions(-) create mode 100644 frontend/app/components/Footer.tsx create mode 100644 frontend/app/components/svg/DiscordLogo.tsx diff --git a/frontend/app/components/Footer.tsx b/frontend/app/components/Footer.tsx new file mode 100644 index 0000000..e9b00f5 --- /dev/null +++ b/frontend/app/components/Footer.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import XIcon from '@mui/icons-material/X'; +import DiscordLogo from './svg/DiscordLogo'; +import Link from 'next/link'; + +function Footer() { + return ( + + ) +} + +export default Footer \ No newline at end of file diff --git a/frontend/app/components/svg/DiscordLogo.tsx b/frontend/app/components/svg/DiscordLogo.tsx new file mode 100644 index 0000000..88edc9d --- /dev/null +++ b/frontend/app/components/svg/DiscordLogo.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +function DiscordLogo() { + return ( + + + + ) +} + +export default DiscordLogo \ No newline at end of file diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 9f90b32..41450cb 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -49,174 +49,27 @@ body { } } -body { - color: rgb(var(--foreground-rgb)); - background-color: rgb(var(--background-start-rgb)); -} - -.hover-2 { - --c: var(--highlight-text-end-hex); /* the color */ - --b: .1em; /* border length*/ - --d: 16px; /* the cube depth */ - - --_s: calc(var(--d) + var(--b)); - background: - conic-gradient(at left var(--d) bottom var(--d), - #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box, - conic-gradient(at left var(--_s) bottom var(--_s), #0000 180deg, var(--c) 0) border-box; - border: solid #0000; - border-width: var(--b) var(--b) var(--_s) var(--_s); - transform: translate(calc(var(--d)/-1),var(--d)); - clip-path: - polygon( - var(--d) 0%, - var(--d) 0%, - 100% 0%, - 100% calc(100% - var(--d)), - 100% calc(100% - var(--d)), - var(--d) calc(100% - var(--d)) - ); - transition: 0.5s; -} - -.hover-2-selected { - background: - conic-gradient(at left var(--d) bottom var(--d), - #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box, - conic-gradient(at left var(--_s) bottom var(--_s), - #0000 90deg, var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b)) border-box; - - transform: translate(0,0); - clip-path: - polygon( - 0% var(--d), - var(--d) 0%, - 100% 0%, - 100% calc(100% - var(--d)), - calc(100% - var(--d)) 100%, - 0% 100% - ); -} - -.hover-2:hover { - background: - conic-gradient(at left var(--d) bottom var(--d), - #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box, - conic-gradient(at left var(--_s) bottom var(--_s), - #0000 90deg, var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b)) border-box; - - transform: translate(0,0); - clip-path: - polygon( - 0% var(--d), - var(--d) 0%, - 100% 0%, - 100% calc(100% - var(--d)), - calc(100% - var(--d)) 100%, - 0% 100% - ); -} - - -.custom-shadow { - /* box-shadow: rgba(139, 92, 246, 0.4) -5px 5px, - rgba(139, 92, 246, 0.3) -10px 10px, - rgba(139, 92, 246, 0.2) -15px 15px, - rgba(139, 92, 246, 0.1) -20px 20px, - rgba(139, 92, 246, 0.05) -25px 25px; */ - box-shadow: var(--highlight-text-end-rgba0) -5px 5px, - var(--highlight-text-end-rgba1) -10px 10px, - var(--highlight-text-end-rgba2) -15px 15px, - var(--highlight-text-end-rgba3) -20px 20px, - var(--highlight-text-end-rgba4) -25px 25px; - margin-bottom: 24px; -} - - - - -/* CSS */ -.button-57 { +html { position: relative; - overflow: hidden; - display: inline-block; - font-size: 12px; - line-height: 12px; - /* padding: 18px 18px 17px; */ - @apply p-5 rounded-md border border-current; - text-decoration: none; - cursor: pointer; - /* background: #fff; */ - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; + min-height: 100%; } -.button-57 span:first-child { - position: relative; - transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1); - z-index: 10; -} - -.button-57 span:last-child { - /* color: white; */ +body { color: rgb(var(--foreground-rgb)); - display: block; - position: absolute; - bottom: 0; - transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1); - z-index: 100; - opacity: 0; - top: 50%; - left: 50%; - transform: translateY(225%) translateX(-50%); - height: 14px; - line-height: 13px; -} - -.button-57:disabled, -.button-57[disabled]{ - opacity: 50%; - cursor: not-allowed; -} - -.button-57:after { - content: ""; - position: absolute; - bottom: -50%; - left: 0; - width: 100%; - height: 100%; - background-color: var(--highlight-text-end-hex); - transform-origin: bottom center; - transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1); - transform: skewY(9.3deg) scaleY(0); - z-index: 50; -} - -.button-57:hover:after { - transform-origin: bottom center; - transform: skewY(9.3deg) scaleY(2); -} - -.button-57:hover span:last-child { - transform: translateX(-50%) translateY(-100%); - opacity: 1; - transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1); + background-color: rgb(var(--background-start-rgb)); } - .rainbow-background { background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%); } @layer utilities { .first-section { - @apply mx-auto pb-12 !pt-[126px] px-8 h-fit flex flex-col items-center; + @apply mx-auto pb-16 !pt-[126px] px-8 flex flex-col items-center; } .second-section { - @apply pb-12 !pt-[64px] h-svh flex flex-col; + @apply pb-16 !pt-[64px] flex flex-col sm:mb-16; } .custom-scrollbar { @@ -305,6 +158,10 @@ body { @apply w-full h-16 bg-[var(--highlight-text-end-hex)] flex absolute top-0 z-10; } + .footer { + @apply w-full h-16 bg-[var(--highlight-text-end-hex)] flex justify-center items-center absolute bottom-0; + } + .link-active { @apply bg-[rgb(var(--background-start-rgb))] text-white; } diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 81cb726..624c865 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -3,6 +3,7 @@ import './globals.css' import Navbar from '@/app/components/Navbar'; import {Web3OnboardProviderClient} from './utils/web3OnboardProvider'; import { fontPressStart2P } from './utils/font'; +import Footer from './components/Footer'; export const metadata: Metadata = { title: 'RiVES', @@ -21,6 +22,7 @@ export default function RootLayout({ {children} + diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 741a283..042826b 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -27,7 +27,7 @@ export default function Home() { - + Start Playing