taler-typescript-core

commit 2d1bbd7c7d868a3eff8c77ee6f742f2357da0dcc
parent 89f95eb8a058b7290125f9c3de89572c528237ed
Author: Nullptrderef <nullptrderef@proton.me>
Date:   Tue, 20 Aug 2024 10:56:34 +0200

fix: make the dropdowns not have borders styled by UA

Diffstat:
M
packages/taler-wallet-webextension/src/components/styled/index.tsx
 | 
32
++++++++++++++++++++++++--------

1 file changed, 24 insertions(+), 8 deletions(-)
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -273,8 +273,15 @@ const Tooltip = styled.div<{ content: string }>`
     position: absolute;
     z-index: 1000001;
     padding: 0.5em 0.75em;
-    font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    font:
+      normal normal 11px/1.5 -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Helvetica,
+      Arial,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji";
     -webkit-font-smoothing: subpixel-antialiased;
     color: white;
     text-align: center;
@@ -539,7 +546,7 @@ export const LinkPrimary = styled(Link)`
   color: black;
 `;
 
-export const ButtonPrimary = styled(ButtonVariant) <{ small?: boolean }>`
+export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>`
   font-size: ${({ small }: any) => (small ? "small" : "inherit")};
   background-color: #0042b2;
   border-color: #0042b2;
@@ -690,13 +697,13 @@ export const SmallBoldText = styled.div`
   font-weight: bold;
 `;
 
-export const AgeSign = styled.div<{size:number}>`
+export const AgeSign = styled.div<{ size: number }>`
   display: inline-block;
   border: red solid 1px;
   border-radius: 100%;
-  width: ${({ size }: {size:number}) => (`${size}px`)};
-  height: ${({ size }: {size:number}) => (`${size}px`)};
-  line-height: ${({ size }: {size:number}) => (`${size}px`)};
+  width: ${({ size }: { size: number }) => `${size}px`};
+  height: ${({ size }: { size: number }) => `${size}px`};
+  line-height: ${({ size }: { size: number }) => `${size}px`};
   padding: 3px;
 `;
 
@@ -920,11 +927,18 @@ export const NiceSelect = styled.div`
 
     background-color: white;
 
+    border: 2px solid #0003;
     border-radius: 0.25rem;
     font-size: 1em;
     padding: 8px 32px 8px 8px;
     /* 0.5em 3em 0.5em 1em; */
     cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: #0000000a;
+    }
   }
 
   position: relative;
@@ -1074,7 +1088,9 @@ export const StyledCheckboxLabel = styled.div`
     color: #959495;
   }
   input:focus + div + label {
-    box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;
+    box-shadow:
+      0 0 0 0.05em #fff,
+      0 0 0.15em 0.1em currentColor;
   }
 `;