icons styles (#1282)

client/src/ui/containers/BottomMiddleContainer.tsx

@@ -1,5 +1,5 @@
 const BottomMiddleContainer = ({ children }: { children: React.ReactNode }) => {
-  return <div className="absolute w-screen bottom-3 flex pointer-events-none">{children}</div>;
+  return <div className="absolute w-screen bottom-1 flex pointer-events-none">{children}</div>;
 };
 
 export default BottomMiddleContainer;

client/src/ui/elements/Button.tsx

@@ -17,7 +17,7 @@ const STYLES = {
   baseStyle:
     "inline-flex whitespace-nowrap cursor-pointer white transition-all duration-300 items-center justify-center p-2 text-xs font-medium text-gold uppercase rounded",
   primary:
-    "px-6 py-2 bg-crimson from-yellow-600 to-yellow-700  font-semibold text-lg uppercase tracking-wider  shadow-md hover:from-yellow-700 hover:to-yellow-800 focus:outline-none outline-gradient  outline-gold hover:bg-gold hover:text-brown clip-angled-sm border-gradient border-y hover:border-crimson ",
+    "px-6 py-2 bg-crimson from-yellow-600 to-yellow-700  font-semibold text-lg uppercase tracking-wider  shadow-md hover:from-yellow-700 hover:to-yellow-800 focus:outline-none outline-gradient  outline-gold hover:bg-gold hover:text-brown border-gradient border-y hover:border-crimson ",
   default: "bg-black !text-gold px-6 py-2 ",
   enabledStyle: "bg-black/10 hover:bg-black/30 focus:outline-none",
   disabledStyle: "bg-gray-300 cursor-not-allowed !border-gray-gold !text-gray-gold",

client/src/ui/elements/CircleButton.tsx

@@ -68,7 +68,7 @@ const CircleButton = ({
           }
         }}
         className={clsx(
-          "flex transition-all duration-150  cursor-pointer items-center justify-center shadow-black/50 fill-current text-gold hover:border-gold rounded shadow-2xl group clip-angled-sm bg-hex-bg hover:bg-gold",
+          "flex transition-all duration-150  cursor-pointer items-center justify-center shadow-black/50 fill-current text-gold hover:border-gold rounded shadow-2xl group rounded bg-hex-bg hover:bg-gold",
           active ? "bg-gold" : "bg-black/70",
           className,
           sizes[size],

client/src/ui/elements/ResourceIcon.tsx

@@ -66,6 +66,9 @@ const Components: { [key: string]: Resource } = Object.freeze({
   Crossbowman: { component: <img src={`/images/icons/251.png`} />, name: "Crossbowman" },
   Paladin: { component: <img src={`/images/icons/252.png`} />, name: "Paladin" },
   AncientFragment: { component: <img src={`/images/resources/29.png`} />, name: "Ancient Fragment" },
+  House: { component: <img src={`/images/buildings/thumb/house.png`} />, name: "House" },
+  Silo: { component: <img src={`/images/buildings/thumb/silo.png`} />, name: "Silo" },
+  Timeglass: { component: <img src={`/images/buildings/thumb/timeglass.png`} />, name: "Timeglass" },
 });
 
 const STYLES = {

client/src/ui/elements/Select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-auto w-full items-center justify-between  border-input  px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none  disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 clip-angled-sm hover:bg-white/20",
+      "flex h-auto w-full items-center justify-between  border-input  px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none  disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 rounded hover:bg-white/20",
       className,
     )}
     {...props}
@@ -104,7 +104,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full  select-none items-center rounded-sm py-1.5 pl-2 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gold/20 clip-angled-sm cursor-pointer",
+      "relative flex w-full  select-none items-center rounded-sm py-1.5 pl-2 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gold/20  cursor-pointer",
       className,
     )}
     {...props}

client/src/ui/modules/navigation/LeftNavigationModule.tsx

@@ -196,7 +196,7 @@ export const LeftNavigationModule = () => {
     <>
       <div
         className={`max-h-full transition-all duration-200 space-x-1 gap-1 flex z-0 w-[600px] text-gold left-10 self-center pointer-events-none ${
-          isOffscreen(view) ? "-translate-x-[86%]" : ""
+          isOffscreen(view) ? "-translate-x-[88%]" : ""
         }`}
         onPointerEnter={() => {
           debouncedSetIsOffscreen.cancel();

client/src/ui/modules/navigation/RightNavigationModule.tsx

@@ -123,8 +123,8 @@ export const RightNavigationModule = () => {
   return (
     <>
       <div
-        className={`max-h-full transition-all z-0 duration-200 space-x-1 flex z-0 w-[400px] right-4 self-center pointer-events-none ${
-          isOffscreen(view) ? "translate-x-[79%]" : ""
+        className={`max-h-full transition-all z-0 duration-200 space-x-1 flex w-[400px] right-4 self-center pointer-events-none ${
+          isOffscreen(view) ? "translate-x-[83%]" : ""
         }`}
       >
         <motion.div

client/src/ui/modules/navigation/TopMiddleNavigation.tsx

@@ -26,6 +26,7 @@ import { useComponentValue } from "@dojoengine/react";
 import clsx from "clsx";
 import { motion } from "framer-motion";
 import { ViewOnMapIcon } from "@/ui/components/military/ArmyManagementCard";
+import { ResourceIcon } from "@/ui/elements/ResourceIcon";
 
 const slideDown = {
   hidden: { y: "-100%" },
@@ -110,27 +111,73 @@ export const TopMiddleNavigation = () => {
   }, []);
 
   return (
-    <div className=" bg-black/75 bg-hex-bg rounded-b-2xl border border-gradient pointer-events-auto">
+    <div className="pointer-events-auto mt-1 ">
       <motion.div className="flex flex-wrap " variants={slideDown} initial="hidden" animate="visible">
-        <div className="self-center px-3 flex space-x-2 ">
-          <TickProgress />
+        <div className=" bg-black/75 rounded-l-xl my-1 border-white/5 border flex gap-1">
+          {storehouses && (
+            <div
+              onMouseEnter={() => {
+                setTooltip({
+                  position: "bottom",
+                  content: (
+                    <div className="whitespace-nowrap pointer-events-none text-sm capitalize">
+                      <span>This is the max per resource you can store</span>
+
+                      <br />
+                      <span>Build Storehouses to increase this.</span>
+                    </div>
+                  ),
+                });
+              }}
+              onMouseLeave={() => setTooltip(null)}
+              className="px-3 flex gap-2 self-center text-xs"
+            >
+              <ResourceIcon withTooltip={false} resource="Silo" size="sm" />
+              <div className="self-center">{storehouses.toLocaleString()}</div>
+            </div>
+          )}
+          {population && (
+            <div
+              onMouseEnter={() => {
+                setTooltip({
+                  position: "bottom",
+                  content: (
+                    <span className="whitespace-nowrap pointer-events-none text-sm capitalize">
+                      <span>
+                        {population.population} population / {population.capacity + BASE_POPULATION_CAPACITY} capacity
+                      </span>
+                      <br />
+                      <span>Build Workers huts to expand population</span>
+                    </span>
+                  ),
+                });
+              }}
+              onMouseLeave={() => setTooltip(null)}
+              className=" px-3 flex gap-2 self-center"
+            >
+              <ResourceIcon withTooltip={false} resource="House" size="sm" />
+              <div className="self-center">
+                {population.population} / {population.capacity + BASE_POPULATION_CAPACITY}
+              </div>
+            </div>
+          )}
         </div>
 
-        <div className="flex min-w-96 gap-1  clip-angled   py-2 px-4 text-gold bg-map   justify-center border-gold/50 text-center ">
+        <div className="flex min-w-72 gap-1 text-gold bg-map   justify-center border text-center rounded bg-black/90 border-gold/10">
           <div className="self-center flex justify-between w-full">
             <Select
               value={realmEntityId.toString()}
               onValueChange={(a: string) => {
                 !isHexView ? goToMapView(ID(a)) : goToHexView(ID(a));
               }}
             >
-              <SelectTrigger className="">
+              <SelectTrigger>
                 <SelectValue placeholder="Select Realm" />
               </SelectTrigger>
-              <SelectContent className="bg-black ">
+              <SelectContent className="bg-black/90">
                 {structures.map((structure, index) => (
                   <SelectItem
-                    className="flex justify-between text-sm"
+                    className="flex justify-between"
                     key={index}
                     value={structure.entity_id?.toString() || ""}
                   >
@@ -142,16 +189,14 @@ export const TopMiddleNavigation = () => {
                 ))}
               </SelectContent>
             </Select>
-            {location === "/map" && (
-              <ViewOnMapIcon
-                className="my-auto m-4 w-7 fill-gold hover:fill-gold/50 hover:scale-125 hover:animate-pulse hover:grow duration-300 transition-all"
-                position={{ x: hexPosition.col, y: hexPosition.row }}
-              />
-            )}
           </div>
+        </div>
+        <div className=" bg-black/75 rounded-r-xl my-1 border border-gold/5 flex gap-1 justify-between p-1">
+          <TickProgress />
           <Button
-            variant="primary"
-            className={clsx({
+            variant="outline"
+            size="xs"
+            className={clsx("self-center", {
               "animate-pulse":
                 (selectedQuest?.id === QuestId.Travel || selectedQuest?.id === QuestId.Hyperstructure) &&
                 selectedQuest.status !== QuestStatus.Completed &&
@@ -165,58 +210,16 @@ export const TopMiddleNavigation = () => {
               }
             }}
           >
-            {location === "/map" ? "Hex" : "World"}
+            {location === "/map" ? "Realm" : "World"}
           </Button>
+          {location === "/map" && (
+            <ViewOnMapIcon
+              className="my-auto w-7 fill-gold hover:fill-gold/50 hover:animate-pulse duration-300 transition-all"
+              position={{ x: hexPosition.col, y: hexPosition.row }}
+            />
+          )}
         </div>
       </motion.div>
-
-      <div className="flex justify-between w-full  text-gold p-1 text-xs">
-        {population && (
-          <div
-            onMouseEnter={() => {
-              setTooltip({
-                position: "bottom",
-                content: (
-                  <span className="whitespace-nowrap pointer-events-none text-sm capitalize">
-                    <span>
-                      {population.population} population / {population.capacity + BASE_POPULATION_CAPACITY} capacity
-                    </span>
-                    <br />
-                    <span>Build Workers huts to expand population</span>
-                  </span>
-                ),
-              });
-            }}
-            onMouseLeave={() => setTooltip(null)}
-            className=" px-3 flex gap-2"
-          >
-            <div className="uppercase font-bold">population</div>
-            {population.population} / {population.capacity + BASE_POPULATION_CAPACITY}
-          </div>
-        )}
-        {storehouses && (
-          <div
-            onMouseEnter={() => {
-              setTooltip({
-                position: "bottom",
-                content: (
-                  <div className="whitespace-nowrap pointer-events-none text-sm capitalize">
-                    <span>This is the max per resource you can store</span>
-
-                    <br />
-                    <span>Build Storehouses to increase this.</span>
-                  </div>
-                ),
-              });
-            }}
-            onMouseLeave={() => setTooltip(null)}
-            className="px-3 flex gap-2"
-          >
-            <div className="uppercase font-bold">Store</div>
-            {storehouses.toLocaleString()}
-          </div>
-        )}
-      </div>
     </div>
   );
 };
@@ -245,8 +248,9 @@ const TickProgress = () => {
         });
       }}
       onMouseLeave={() => setTooltip(null)}
-      className="self-center text-center  px-4 py-1 bg-gold text-brown border-gradient  clip-angled"
+      className="self-center text-center px-1 py-1 flex gap-1"
     >
+      <ResourceIcon withTooltip={false} resource="Timeglass" size="sm" />
       {progress.toFixed()}%
     </div>
   );

client/tailwind.config.js

@@ -235,10 +235,10 @@ export default {
           clipPath:
             "polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px)",
         },
-        ".clip-angled-sm": {
-          clipPath:
-            "polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px)",
-        },
+        // ".clip-angled-sm": {
+        //   clipPath:
+        //     "polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px)",
+        // },
         ".outline-gradient": {
           outline: "2px solid transparent",
           outlineOffset: "2px",

contracts/manifests/dev/deployment/manifest.json

@@ -1231,7 +1231,7 @@
     ],
     "address": "0x5889930b9e39f7138c9a16b4a68725066a53970d03dfda280a9e479e3d8c2ac",
     "transaction_hash": "0x6e2a9171abf51df314cd089ba4a6c4d16178d58f92106ddb3d0e28e1a51822",
-    "block_number": 85,
+    "block_number": 54,
     "seed": "eternum",
     "metadata": {
       "profile_name": "dev",

contracts/manifests/dev/deployment/manifest.toml

@@ -5,7 +5,7 @@ original_class_hash = "0x76ced5a15cb43c7be7176cff4779cd57c56638a46ddf2c9da709d22
 abi = "manifests/dev/deployment/abis/dojo-world.json"
 address = "0x5889930b9e39f7138c9a16b4a68725066a53970d03dfda280a9e479e3d8c2ac"
 transaction_hash = "0x6e2a9171abf51df314cd089ba4a6c4d16178d58f92106ddb3d0e28e1a51822"
-block_number = 85
+block_number = 54
 seed = "eternum"
 manifest_name = "dojo-world"