Moved refresh, logout, and support button to footer. Animated coffee button

Author: dragoni7

src/app/routes/Dashboard.tsx

@@ -430,8 +430,7 @@ export const Dashboard: React.FC = () => {
             selectedCharacter={characters[selectedCharacterIndex]!}
             onCharacterClick={handleCharacterClick}
           />
-          <RefreshCharacters />
-          <LogoutButton />
+
           <Grid
             container
             sx={{

src/components/CoffeeButton.tsx

@@ -0,0 +1,32 @@
+import { Box, IconButton, Tooltip } from '@mui/material';
+import { LocalCafe } from '@mui/icons-material';
+import { useSpring, animated } from '@react-spring/web';
+
+export default function CoffeeButton() {
+  const props = useSpring({
+    loop: false,
+    to: [{ rotateZ: 10 }, { rotateZ: -10 }, { rotateZ: 10 }, { rotateZ: -10 }, { rotateZ: 0 }],
+    from: { rotateZ: 0 },
+    config: { tension: 600, friction: 5, duration: 200 },
+  });
+
+  return (
+    <animated.div style={{ ...props, display: 'inline-block' }}>
+      <Box>
+        <Tooltip title="Buy us a Coffee">
+          <IconButton
+            href="https://buymeacoffee.com/d2loadouts"
+            target="_blank"
+            rel="noopener noreferrer"
+            sx={{
+              borderRadius: 4,
+              mixBlendMode: 'difference',
+            }}
+          >
+            <LocalCafe />
+          </IconButton>
+        </Tooltip>
+      </Box>
+    </animated.div>
+  );
+}

src/components/Footer.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
+import LogoutButton from '@/features/auth/components/LogoutButton';
+import RefreshCharacters from './RefreshCharacters';
+import CoffeeButton from './CoffeeButton';
 
 interface FooterProps {
   emblemUrl: string;
@@ -13,7 +16,7 @@ const Footer: React.FC<FooterProps> = ({ emblemUrl }) => {
         bottom: 0,
         left: 0,
         right: 0,
-        height: '40px',
+        height: '5.4%',
         backgroundImage: `url(${emblemUrl})`,
         backgroundSize: 'cover',
         backgroundPosition: 'center',
@@ -36,16 +39,32 @@ const Footer: React.FC<FooterProps> = ({ emblemUrl }) => {
     >
       <Typography
         variant="caption"
+        textAlign="center"
         sx={{
           color: 'white',
           textAlign: 'center',
           position: 'relative',
           zIndex: 1,
+          width: '100%',
         }}
       >
         Built by Dragoni and Rorschach. Destiny 2 and its assets are the property of Bungie. Used
-        under Bungie's Fan-Created Media and Art guidelines.
+        under Bungie's Fan-Created Media and Art guidelines. Consider supporting us!
       </Typography>
+
+      <Stack
+        direction="row"
+        alignItems="flex-end"
+        justifyContent="center"
+        spacing={2}
+        sx={{ position: 'absolute', right: 0, zIndex: 1001, width: '20%' }}
+      >
+        <Box style={{ width: '50%' }}>
+          <CoffeeButton />
+        </Box>
+        <RefreshCharacters />
+        <LogoutButton />
+      </Stack>
     </Box>
   );
 };

src/components/HeaderComponent.tsx

@@ -12,6 +12,10 @@ import {
   HeaderStyledLink,
   Header,
 } from '../styled';
+import LogoutButton from '@/features/auth/components/LogoutButton';
+import RefreshCharacters from './RefreshCharacters';
+import { Tooltip } from '@mui/material';
+import CoffeeButton from './CoffeeButton';
 
 interface HeaderComponentProps {
   emblemUrl: string;
@@ -54,22 +58,6 @@ const HeaderComponent: React.FC<HeaderComponentProps> = ({
           ))}
         </HeaderButtonContainer>
       </HeaderBottomContainer>
-      <HeaderLinksContainer>
-        <HeaderStyledLink
-          href="https://buymeacoffee.com/d2loadouts"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Coffee
-        </HeaderStyledLink>
-        <HeaderStyledLink
-          href="https://patreon.com/d2loadouts"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Patreon
-        </HeaderStyledLink>
-      </HeaderLinksContainer>
     </Header>
   );
 };

src/components/RefreshCharacters.tsx

@@ -17,10 +17,6 @@ export default function RefreshCharacters() {
   return (
     <Box
       sx={{
-        position: 'absolute',
-        top: '1%',
-        right: '3%',
-        zIndex: 9999,
         mixBlendMode: 'difference',
       }}
     >
@@ -32,9 +28,10 @@ export default function RefreshCharacters() {
             onClick={onRefreshClick}
             sx={{
               borderRadius: 4,
+              mixBlendMode: 'difference',
             }}
           >
-            <Refresh color="inherit" fontSize="large" />
+            <Refresh color="inherit" />
           </IconButton>
         </Tooltip>
       )}

src/features/auth/components/LogoutButton.tsx

@@ -13,10 +13,6 @@ export default function LogoutButton() {
   return (
     <Box
       sx={{
-        position: 'absolute',
-        top: '1%',
-        right: '0',
-        zIndex: 9999,
         mixBlendMode: 'difference',
       }}
     >
@@ -25,9 +21,10 @@ export default function LogoutButton() {
           onClick={onLogoutClick}
           sx={{
             borderRadius: 4,
+            mixBlendMode: 'difference',
           }}
         >
-          <Logout color="inherit" fontSize="large" />
+          <Logout color="inherit" />
         </IconButton>
       </Tooltip>
     </Box>

src/styled/index.ts

@@ -83,17 +83,18 @@ export const HeaderCharacterText = styled('div')<{ isSelected: boolean }>(({ isS
 export const HeaderLinksContainer = styled('div')({
   position: 'absolute',
   right: '20px',
-  bottom: '-2px',
+  top: '6%',
   display: 'flex',
-  gap: '20px',
+  gap: '12px',
   alignItems: 'flex-end',
 });
 
 export const HeaderStyledLink = styled('a')({
   ...sharedTextStyles,
-  color: 'rgba(255, 255, 255, 0.6)',
+  color: 'rgba(255, 255, 255, 0.9)',
   textDecoration: 'none',
   opacity: 0.6,
+  mixBlendMode: 'difference',
   '&:hover': {
     ...sharedTextStyles['&:hover'],
     color: 'white',

vite.config.ts

@@ -1,21 +1,28 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import fs from "fs";
+import { defineConfig } from 'vite';
+import * as path from 'path';
+import react from '@vitejs/plugin-react';
+import fs from 'fs';
 
 export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
-  if (command === "serve") {
+  if (command === 'serve') {
     return {
       plugins: [react()],
       server: {
         https: {
-          key: fs.readFileSync("./certs/localhost.key"),
-          cert: fs.readFileSync("./certs/localhost.crt"),
+          key: fs.readFileSync('./certs/localhost.key'),
+          cert: fs.readFileSync('./certs/localhost.crt'),
         },
       },
+      resolve: {
+        alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+      },
     };
   } else {
     return {
       plugins: [react()],
+      resolve: {
+        alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+      },
     };
   }
 });