fun with buttons

cmss13-devs · May 7, 2024 · db53d59 · db53d59
1 parent ead994a
commit db53d59
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 105 deletions.
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
-import "./App.css";
 import { LookupMenu } from "./components/userLookup";
 import { IpLookup } from "./components/ipLookup";
 import { GlobalContext, User } from "./types/global";
@@ -63,7 +62,7 @@ export default function App(): React.ReactElement {
 
             <div
               onClick={() => setStickyMenu(true)}
-              className={"border border-white p-3 cursor-pointer grow"}
+              className={"border border-white p-3 cursor-pointer grow clicky"}
             >
               Sticky Menu
             </div>
@@ -107,7 +106,7 @@ const LookupOption = (props: LookupProps) => {
   return (
     <>
       <div
-        className="border border-white p-3 cursor-pointer grow"
+        className="border border-white p-3 cursor-pointer grow clicky"
         onClick={() => {
           setSelected(true);
           clearTimeout(timer);

diff --git a/src/components/dialog.tsx b/src/components/dialog.tsx
@@ -21,7 +21,7 @@ export const Dialog: React.FC<DialogPropsType> = (props: DialogPropsType) => {
       <dialog
         {...rest}
         open={open}
-        className={`w-full md:w-11/12 py-10 border border-themed foreground z-20 px-10 max-h-full overflow-auto md:max-h-none md:overflow-visible ${
+        className={`w-full md:w-11/12 py-10 border border-themed foreground z-20 px-10 max-h-full overflow-visible ${
           className ?? ""
         } md:min-w-[600px]`}
         style={{

diff --git a/src/components/link.tsx b/src/components/link.tsx
@@ -10,7 +10,9 @@ export const Link: React.FC<LinkType> = (props: LinkType) => {
 
   return (
     <div
-      className={`cursor-pointer text-blue-600 inline hover:underline ${className}`}
+      className={`cursor-pointer text-blue-600 inline hover:underline ${
+        className ?? ""
+      }`}
       {...rest}
     >
       {children}

diff --git a/src/components/stickybanMatch.tsx b/src/components/stickybanMatch.tsx
@@ -1,14 +1,8 @@
-import React, {
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Stickyban } from "../types/stickyban";
 import { Link } from "./link";
 import { Dialog } from "./dialog";
 import { StickybanModal } from "./stickybanModal";
-import { offset, useFloating } from "@floating-ui/react";
 import { GlobalContext } from "../types/global";
 import { callApi } from "../helpers/api";
 
@@ -52,17 +46,7 @@ export const StickybanMatch: React.FC<StickybanMatch> = (
                 {getText()} has active stickybans.
               </Link>
             </div>
-            {ckey && (
-              <Tooltip
-                tooltip={
-                  "This will whitelist the user against all matching stickybans."
-                }
-              >
-                <div className="border border-white p-1">
-                  <Whitelist ckey={ckey} />
-                </div>
-              </Tooltip>
-            )}
+            {ckey && <Whitelist ckey={ckey} />}
           </div>
         </div>
       </div>
@@ -75,10 +59,6 @@ export const StickybanMatch: React.FC<StickybanMatch> = (
   );
 };
 
-interface TooltipProps extends PropsWithChildren {
-  tooltip: string;
-}
-
 const Whitelist = (props: { ckey: string }) => {
   const [open, setOpen] = useState(false);
 
@@ -105,7 +85,12 @@ const Whitelist = (props: { ckey: string }) => {
 
   return (
     <>
-      <Link onClick={() => setOpen(true)}>Whitelist?</Link>
+      <Link
+        onClick={() => setOpen(true)}
+        className="p-2 border border-white border-dashed"
+      >
+        Whitelist?
+      </Link>
       {open && (
         <Dialog open={open} toggle={() => setOpen(false)}>
           <div className="flex flex-col">
@@ -125,36 +110,6 @@ const Whitelist = (props: { ckey: string }) => {
   );
 };
 
-const Tooltip = (props: TooltipProps) => {
-  const [hovered, setHovered] = useState(false);
-
-  const { refs, floatingStyles } = useFloating({
-    placement: "top",
-    middleware: [offset(5)],
-  });
-
-  return (
-    <>
-      {hovered && (
-        <div
-          ref={refs.setFloating}
-          style={floatingStyles}
-          className="foreground border-white border"
-        >
-          {props.tooltip}
-        </div>
-      )}
-      <div
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-        ref={refs.setReference}
-      >
-        {props.children}
-      </div>
-    </>
-  );
-};
-
 type StickybanMatch = {
   ip?: string;
   ckey?: string;

diff --git a/src/index.css b/src/index.css
@@ -91,3 +91,15 @@ input {
   background-color: #3B3B3B;
   color: #fff;
 }
+
+.clicky {
+  box-shadow: 6px 6px #377E7F;
+}
+
+.clicky:hover {
+  box-shadow: unset;
+  position:relative;
+  right: -6px;
+  bottom: -6px;
+}
+