Merge pull request #2284 from zeitgeistpm/#2198-court-popover-mobile-…

…font-color-fix Fix text colors of mobile popovers on mobile
zeitgeistpm · Feb 19, 2024 · 1661b12 · 1661b12
2 parents 168eb39 + 320918b
commit 1661b12
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 5 deletions.
diff --git a/components/court/JoinCourtAsJurorButton.tsx b/components/court/JoinCourtAsJurorButton.tsx
@@ -114,10 +114,9 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
           <div className="absolute right-0 top-0 translate-x-[50%] translate-y-[-50%] rounded-full bg-orange-500 p-[0.5]">
             <InfoPopover
               overlay={false}
-              className="text-white"
               position="top-end"
               popoverCss="-ml-12"
-              icon={<IoIosInformation />}
+              icon={<IoIosInformation className="text-white" />}
             >
               You are currently delegating to other jurors. If you join the
               court as a juror, your delegations will be removed and delegated

diff --git a/components/court/ManageDelegationButton.tsx b/components/court/ManageDelegationButton.tsx
@@ -29,10 +29,9 @@ const ManageDelegationButton = ({ className }: { className?: string }) => {
           <div className="absolute right-0 top-0 translate-x-[50%] translate-y-[-50%] rounded-full bg-orange-500 p-[0.5]">
             <InfoPopover
               overlay={false}
-              className="text-white"
               position="top-end"
               popoverCss="-ml-12"
-              icon={<IoIosInformation />}
+              icon={<IoIosInformation className="text-white" />}
             >
               You are currently a juror. If you delegate to other jurors your
               stake will be removed from your personal stake and delegated

diff --git a/pages/court/index.tsx b/pages/court/index.tsx
@@ -54,7 +54,7 @@ const CourtPage: NextPage = ({
   return (
     <div className="mt-4 flex flex-col gap-y-4">
       <div className="relative mb-4 basis-7 flex-wrap items-center gap-4 lg:flex">
-        <div className="relative flex-1 overflow-hidden rounded-lg p-6">
+        <div className="relative flex-1 rounded-lg p-6">
           <div className="absolute left-0 top-0 z-10 h-full w-full">
             <Image
               title="Wizard draped in purple robes holding a flaming crypto key."
@@ -65,6 +65,7 @@ const CourtPage: NextPage = ({
               objectFit="cover"
               blurDataURL={bannerPlaiceholder.base64}
               placeholder="blur"
+              className="rounded-lg"
               style={{
                 objectPosition: "20% 30%",
               }}