theme

packages/web/src/widgets/InlineButton.js

@@ -1,36 +1,38 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
+import useTheme from '../theme/useTheme';
 
 const ButtonDiv = styled.div`
-  //box-shadow: 3px 4px 0px 0px #899599;
-  background: linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
-  background-color: #ededed;
-  //border-radius: 15px;
-  border: 1px solid #bbb;
+  background: linear-gradient(
+    to bottom,
+    ${(props) => props.theme.inlinebtn_background} 5%,
+    ${(props) => props.theme.inlinebtn_background3} 100%
+  );
+  background-color: ${(props) => props.theme.inlinebtn_background};
+  border: 1px solid ${(props) => props.theme.inlinebtn_background3};
   display: inline-block;
   cursor: pointer;
-  // color: #3a8a9e;
-  // color: gray;
-  // font-family: Arial;
   vertical-align: middle;
-  color: black;
+  color: ${(props) => props.theme.inlinebtn_font1};;
   font-size: 12px;
   padding: 3px;
   margin: 0;
-  // padding: 7px 25px;
   text-decoration: none;
-  // text-shadow: 0px 1px 0px #e1e2ed;
   &:hover {
-    border: 1px solid #777;
+    border: 1px solid ${(props) => props.theme.inlinebtn_font2};
   }
   &:active:hover {
-    background: linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
-    background-color: #bab1ba;
+    background: linear-gradient(
+      to bottom,
+      ${(props) => props.theme.inlinebtn_background3} 5%,
+      ${(props) => props.theme.inlinebtn_background} 100%
+    );
+    background-color: ${(props) => props.theme.inlinebtn_background3};
   }
   display: flex;
 
-  ${props =>
+  ${(props) =>
     props.square &&
     `
       width: 18px;
@@ -43,25 +45,6 @@ const InnerDiv = styled.div`
   text-align: center;
 `;
 
-// ${props =>
-//     !props.disabled &&
-//     `
-//   &:hover {
-//     background-color: #286090;
-//   }
-
-//   &:active:hover {
-//     background-color: #204d74;
-//   }
-//   `}
-
-//   ${props =>
-//     props.disabled &&
-//     `
-//     background-color: #ccc;
-//     color: gray;
-//   `}
-
 export default function InlineButton({
   children,
   onClick = undefined,
@@ -69,6 +52,7 @@ export default function InlineButton({
   disabled = undefined,
   square = false,
 }) {
+  const theme = useTheme();
   return (
     <ButtonDiv
       className="buttonLike"
@@ -78,6 +62,7 @@ export default function InlineButton({
       }}
       disabled={disabled}
       square={square}
+      theme={theme}
     >
       <InnerDiv>{children}</InnerDiv>
     </ButtonDiv>