From e81068f5286e28eb289fa2fb2bc4625ac847fa6b Mon Sep 17 00:00:00 2001
From: caranicas <kendrick.caranicas@gmail.com>
Date: Mon, 19 Sep 2022 13:32:20 -0400
Subject: [PATCH] footer looking better

---
 .../imageModifiers/imageModifiers.css.ts      |  3 -
 .../organisms/footerDisplay/footerDisplay.css | 12 ----
 .../footerDisplay/footerDisplay.css.ts        | 61 +++++++++++++++++++
 .../organisms/footerDisplay/index.tsx         | 10 ++-
 .../build_src/src/styles/theme/index.css.ts   |  2 +
 5 files changed, 70 insertions(+), 18 deletions(-)
 delete mode 100644 ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css
 create mode 100644 ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts

diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts
index 175f8363..bfced116 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts
+++ b/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`, {
diff --git a/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css b/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css
deleted file mode 100644
index 40cac806..00000000
--- a/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css
+++ /dev/null
@@ -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%);
-}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts
new file mode 100644
index 00000000..118299dc
--- /dev/null
+++ b/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%);
+// }
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
index 85572593..e3547ccf 100644
--- a/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
+++ b/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!
diff --git a/ui/frontend/build_src/src/styles/theme/index.css.ts b/ui/frontend/build_src/src/styles/theme/index.css.ts
index 14bd9d1c..ce0a3daf 100644
--- a/ui/frontend/build_src/src/styles/theme/index.css.ts
+++ b/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",