fix: Style on checkbox and text (#24)

pancakeswap · Oct 26, 2020 · 27bf6cf · 27bf6cf
1 parent dbc4da2
commit 27bf6cf
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx
@@ -29,13 +29,14 @@ const Checkbox = styled.input.attrs({ type: "checkbox" })`
     transform: rotate(-50deg);
     transition: border-color 0.2s ease-in-out;
   }
-  &:focus {
-    outline: none;
-  }
   &:disabled {
     cursor: default;
     opacity: 0.6;
   }
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.secondary};
+  }
   &:checked {
     background-color: ${({ theme }) => theme.colors.success};
     &:after {

diff --git a/src/components/Heading/index.tsx b/src/components/Heading/index.tsx
@@ -19,6 +19,7 @@ const style = {
 
 const Heading = styled(Text).attrs({ bold: true })<Props>`
   ${({ size }) => style[size || sizes.MD]}
+  line-height: 1.1;
 `;
 
 Heading.defaultProps = {

diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
@@ -22,7 +22,7 @@ const Text = styled.div<Props>`
   color: ${getColor};
   font-size: ${getFontSize};
   font-weight: ${({ bold }) => (bold ? 600 : 400)};
-  line-height: 1.4;
+  line-height: 1.5;
 `;
 
 export default Text;