Windows darker (#1242)

* increase opacity * modify opacity
BibliothecaDAO · Aug 14, 2024 · cd801d0 · cd801d0
1 parent 7b4381e
commit cd801d0
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 10 deletions.
diff --git a/client/src/ui/components/construction/SelectPreviewBuilding.tsx b/client/src/ui/components/construction/SelectPreviewBuilding.tsx
@@ -329,13 +329,13 @@ const BuildingCard = ({
       )}
     >
       {(!hasFunds || !hasPopulation) && (
-        <div className="absolute w-full h-full bg-black/50 text-white/60 p-4 text-xs  flex justify-center ">
+        <div className="absolute w-full h-full bg-black/75 text-white/60 p-4 text-xs  flex justify-center ">
           <div className="self-center">{`${!hasFunds ? "Insufficient funds. " : ""} ${
             !hasPopulation ? "Insufficient population. " : ""
           }`}</div>
         </div>
       )}
-      <div className="absolute bottom-0 left-0 right-0 font-bold text-xs px-2 py-1 bg-black/50 ">
+      <div className="absolute bottom-0 left-0 right-0 font-bold text-xs px-2 py-1 bg-black/75 ">
         <div className="truncate">{name}</div>
       </div>
       <div className="flex relative flex-col items-start text-xs font-bold p-2">

diff --git a/client/src/ui/components/structures/construction/StructureCard.tsx b/client/src/ui/components/structures/construction/StructureCard.tsx
@@ -41,11 +41,11 @@ export const StructureCard = ({
       )}
     >
       {!canBuild && (
-        <div className="absolute w-full h-full bg-black/50 text-white/60 p-4 text-xs  flex justify-center ">
+        <div className="absolute w-full h-full bg-black/75 text-white/60 p-4 text-xs  flex justify-center ">
           <div className="self-center">insufficient funds</div>
         </div>
       )}
-      <div className="absolute bottom-0 left-0 right-0 font-bold text-xs px-2 py-1 bg-black/50 ">
+      <div className="absolute bottom-0 left-0 right-0 font-bold text-xs px-2 py-1 bg-black/75 ">
         <div className="truncate">{name}</div>
       </div>
       <div className="flex relative flex-col items-start text-xs font-bold p-2">

diff --git a/client/src/ui/containers/BaseContainer.tsx b/client/src/ui/containers/BaseContainer.tsx
@@ -17,7 +17,7 @@ export const BaseContainer = forwardRef<HTMLDivElement, BaseContainerProps>(
       <div
         ref={ref}
         className={clsx(
-          " flex relative flex-col transition-all duration-400 bg-black/50 shadow-2xl border-gradient border rounded-sm bg-hex-bg animatedBackground",
+          " flex relative flex-col transition-all duration-400 bg-black/75 shadow-2xl border-gradient border rounded-sm bg-hex-bg animatedBackground",
           className,
           expanded ? expandedClassName : collapsedClassName,
         )}

diff --git a/client/src/ui/elements/SecondaryPopup.tsx b/client/src/ui/elements/SecondaryPopup.tsx
@@ -177,7 +177,7 @@ SecondaryPopup.Body = ({
         width ? "" : "min-w-[438px]",
         height ? "" : "min-h-[438px]",
         withWrapper ? "p-3" : "",
-        `relative z-10 flex flex-col bg-black/60 border-gradient border rounded-b overflow-auto bg-hex-bg bg-repeat`,
+        `relative z-10 flex flex-col bg-black/75 border-gradient border rounded-b overflow-auto bg-hex-bg bg-repeat`,
       )}
       style={{
         width: width ? width : "",

diff --git a/client/src/ui/elements/Tooltip.tsx b/client/src/ui/elements/Tooltip.tsx
@@ -32,7 +32,7 @@ export const Tooltip = ({ className }: TooltipProps) => {
         <div
           ref={ref}
           className={clsx(
-            "fixed z-[100] inline-flex border-gradient border  text-xxs -translate-x-1/2 px-4 py-1 bg-black/60 flex-col justify-start items-center text-gold leading-loose clip-angled-sm shadow-3xl",
+            "fixed z-[100] inline-flex border-gradient border  text-xxs -translate-x-1/2 px-4 py-1 bg-black/90 flex-col justify-start items-center text-gold leading-loose clip-angled-sm shadow-3xl",
             position == "top" && "-translate-y-[150%]",
             position == "bottom" && "translate-y-full",
             position == "left" && "-translate-x-[110%] -translate-y-1/2",

diff --git a/client/src/ui/modules/LoadingScreen.tsx b/client/src/ui/modules/LoadingScreen.tsx
@@ -33,7 +33,7 @@ export const LoadingScreen = () => {
     <div className="relative h-screen w-screen bg-black">
       <img className="absolute h-screen w-screen object-cover" src="/images/cover.png" alt="" />
       <div
-        className={`absolute top-1/2 left-1/2 -translate-x-1/2 animatedBackground -translate-y-1/2 text-2xl text-center bg-black/60 p-10 border border-gradient bg-hex-bg rounded-sm min-w-96  ${
+        className={`absolute top-1/2 left-1/2 -translate-x-1/2 animatedBackground -translate-y-1/2 text-2xl text-center bg-black/75 p-10 border border-gradient bg-hex-bg rounded-sm min-w-96  ${
           fade ? "fade-in" : "fade-out"
         }`}
       >

diff --git a/client/src/ui/modules/navigation/TopMiddleNavigation.tsx b/client/src/ui/modules/navigation/TopMiddleNavigation.tsx
@@ -117,7 +117,7 @@ export const TopMiddleNavigation = () => {
   }, []);
 
   return (
-    <div className=" bg-black/60 bg-hex-bg rounded-b-2xl border border-gradient pointer-events-auto">
+    <div className=" bg-black/75 bg-hex-bg rounded-b-2xl border border-gradient pointer-events-auto">
       <motion.div className="flex flex-wrap " variants={slideDown} initial="hidden" animate="visible">
         <div className="self-center px-3 flex space-x-2 ">
           <TickProgress />

diff --git a/client/src/ui/modules/onboarding/Steps.tsx b/client/src/ui/modules/onboarding/Steps.tsx
@@ -32,7 +32,7 @@ const StepContainer = ({ children }: { children: React.ReactNode }) => {
       exit={{ opacity: 0 }}
       transition={{ type: "ease-in-out", stiffness: 3, duration: 0.2 }}
     >
-      <div className="self-center bg-black/50 rounded-lg border p-8 text-gold min-w-[800px] max-w-[800px] b overflow-hidden relative z-50 shadow-2xl border-white/40 border-gradient animatedBackground bg-hex-bg ">
+      <div className="self-center bg-black/75 rounded-lg border p-8 text-gold min-w-[800px] max-w-[800px] b overflow-hidden relative z-50 shadow-2xl border-white/40 border-gradient animatedBackground bg-hex-bg ">
         {children}
       </div>
     </motion.div>