footer looking better

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts

@@ -28,19 +28,16 @@ export const MenuButton = style({
   marginBottom: vars.spacing.medium,
 });
 
-
 globalStyle(`${MenuButton}> h4`, {
   color: "#e7ba71",
 });
 
-
 export const ModifierListStyle = style({
   // marginBottom: vars.spacing.small,
   paddingLeft: 0,
   listStyleType: "none",
   display: "flex",
   flexWrap: "wrap",
-
 });
 
 globalStyle(`${ModifierListStyle} li`, {

ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css

@@ -1,12 +0,0 @@
-.footer-display {
-  color: #ffffff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-#coffeeButton {
-  height: 23px;
-  transform: translateY(25%);
-}

ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts

@@ -0,0 +1,61 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+// @ts-ignore
+import { vars } from "../../../styles/theme/index.css.ts";
+
+
+export const FooterDisplayMain = style({
+  color: vars.colors.text.normal,
+  fontSize: vars.fonts.sizes.Caption,
+
+  display: "inline-block",
+  // marginTop: vars.spacing.medium,
+  // marginBottom: vars.spacing.medium,
+  // TODO move this to the theme
+  padding: vars.spacing.small,
+  boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
+});
+
+export const CoffeeButton = style({
+  height: "23px",
+  transform: "translateY(25%)",
+});
+
+globalStyle(`${FooterDisplayMain} a`, {
+  color: vars.colors.link,
+  textDecoration: "none",
+});
+
+globalStyle(`${FooterDisplayMain} a:hover`, {
+  textDecoration: "underline",
+});
+
+globalStyle(`${FooterDisplayMain} a:visited`, {
+  color: vars.colors.link,
+});
+
+globalStyle(`${FooterDisplayMain} a:active`, {
+  color: vars.colors.link,
+});
+
+globalStyle(`${FooterDisplayMain} a:focus`, {
+  color: vars.colors.link,
+});
+
+globalStyle(`${FooterDisplayMain} p`, {
+  margin: vars.spacing.min,
+});
+
+
+// .footer-display {
+//   color: #ffffff;
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   justify-content: center;
+// }
+
+// #coffeeButton {
+//   height: 23px;
+//   transform: translateY(25%);
+// }

ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx

@@ -1,12 +1,16 @@
 import React from "react";
 
-import "./footerDisplay.css";
+import {
+  FooterDisplayMain,
+  CoffeeButton
+} from // @ts-ignore
+  "./footerDisplay.css.ts";
 
 import { API_URL } from "../../../api";
 
 export default function FooterDisplay() {
   return (
-    <div id="footer" className="panel-box">
+    <div className={FooterDisplayMain}>
       <p>
         If you found this project useful and want to help keep it alive, please{" "}
         <a
@@ -14,7 +18,7 @@ export default function FooterDisplay() {
           target="_blank"
           rel="noreferrer"
         >
-          <img src={`${API_URL}/kofi.png`} id="coffeeButton" />
+          <img src={`${API_URL}/kofi.png`} className={CoffeeButton} />
         </a>{" "}
         to help cover the cost of development and maintenance! Thank you for
         your support!

ui/frontend/build_src/src/styles/theme/index.css.ts

@@ -54,6 +54,8 @@ const colors = createThemeContract({
 
 const app = createGlobalTheme(":root", {
   spacing: {
+    none: "0",
+    min: '2px',
     small: "5px",
     medium: "10px",
     large: "25px",