add realm select border animation

BibliothecaDAO · Dec 12, 2024 · f0a0e2a · f0a0e2a
1 parent ddd42a2
commit f0a0e2a
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 6 deletions.
diff --git a/landing/src/components/modules/bridge-in.tsx b/landing/src/components/modules/bridge-in.tsx
@@ -182,10 +182,10 @@ export const BridgeIn = () => {
             <div>{displayAddress(address || "")}</div>
           </div>
           <div>
-            <div className="text-xs uppercase mb-1">To Realm</div>
+            <div className="text-xs text-slate-500 uppercase mb-1">To Realm</div>
 
             <Select onValueChange={(value) => setRealmEntityId(Number(value))}>
-              <SelectTrigger className="w-full border-gold/15">
+              <SelectTrigger className="w-full bg-dark-brown [background:linear-gradient(45deg,#1a1311,#1a1311)_padding-box,conic-gradient(from_var(--border-angle),#8b7355_80%,_#c6a366_86%,_#e5c088_90%,_#c6a366_94%,_#8b7355)_border-box] border border-transparent animate-border">
                 <SelectValue placeholder="Select Realm To Transfer" />
               </SelectTrigger>
               <SelectContent>

diff --git a/landing/src/components/modules/bridge-out-step-1.tsx b/landing/src/components/modules/bridge-out-step-1.tsx
@@ -161,7 +161,7 @@ export const BridgeOutStep1 = () => {
           <div className="flex flex-col min-w-40">
             <div className="text-xs uppercase mb-1 ">From Realm</div>
             <Select onValueChange={(value) => setRealmEntityId(value)}>
-              <SelectTrigger className="w-full border-gold/15">
+              <SelectTrigger className="w-full bg-dark-brown [background:linear-gradient(45deg,#1a1311,#1a1311)_padding-box,conic-gradient(from_var(--border-angle),#8b7355_80%,_#c6a366_86%,_#e5c088_90%,_#c6a366_94%,_#8b7355)_border-box] border border-transparent animate-border">
                 <SelectValue placeholder="Select Settled Realm" />
               </SelectTrigger>
               <SelectContent>

diff --git a/landing/src/dojo/setup.ts b/landing/src/dojo/setup.ts
@@ -62,7 +62,6 @@ export async function setup({ ...config }: DojoConfig) {
     "FragmentMineDiscovered",
   ]) as any;
   const clauses: Clause[] = [
-
     {
       Keys: {
         keys: [undefined],
@@ -86,15 +85,20 @@ export async function setup({ ...config }: DojoConfig) {
     },
   ];
   // fetch all existing entities from torii with optional component filtering
- await getSyncEntities(network.toriiClient, filteredComponents,     { Composite: { operator: "Or", clauses } } , [], 10_000);
+  await getSyncEntities(
+    network.toriiClient,
+    filteredComponents,
+    { Composite: { operator: "Or", clauses } },
+    [],
+    10_000,
+  );
 
   const sync = await syncEntities(network.toriiClient, filteredComponents, [], false);
 
   configManager.setDojo(components);
 
   const eventSync = getSyncEvents(network.toriiClient, filteredEvents, undefined, [], 20_000, false, false);
 
-
   return {
     network,
     components,

diff --git a/landing/src/index.css b/landing/src/index.css
@@ -107,3 +107,9 @@
   /* border: 2px solid var(--gray-gold, #776756); */
   @apply bg-gold;
 }
+
+@property --border-angle {
+  inherits: false;
+  initial-value: 0deg;
+  syntax: '<angle>';
+}
diff --git a/landing/tailwind.config.js b/landing/tailwind.config.js
@@ -76,6 +76,14 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      animation: {
+        border: "border 4s linear infinite",
+      },
+      keyframes: {
+        border: {
+          to: { "--border-angle": "360deg" },
+        },
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",