accept decline colors

src/App-styles.ts

@@ -136,6 +136,47 @@ border-radius: 5px;
     }
   }
 `;
+interface CustomButtonProps {
+  bgColor?: string;
+  color?: string;
+}
+export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
+  ({ bgColor, color }) => ({
+    boxSizing: "border-box",
+    padding: "15px 20px",
+    gap: "10px",
+    border: "0.5px solid rgba(255, 255, 255, 0.5)",
+    filter: "drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))",
+    borderRadius: 5,
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "fit-content",
+    transition: "all 0.2s",
+    minWidth: 160,
+    cursor: "pointer",
+    fontWeight: 600,
+    fontFamily: "Inter",
+    textAlign: "center",
+    opacity: 0.7,
+    // Use the passed-in props or fallback defaults
+    backgroundColor: bgColor || "transparent",
+    color: color || "white",
+
+    "&:hover": {
+      opacity: 1,
+      backgroundColor: bgColor
+        ? bgColor
+        : "rgba(41, 41, 43, 1)",  // fallback hover bg
+      color: color || "white",
+      svg: {
+        path: {
+          fill: color || "white", 
+        },
+      },
+    },
+  })
+);
 
 
 export const CustomInput = styled(TextField)({

src/App.tsx

@@ -62,6 +62,7 @@ import {
   AuthenticatedContainerInnerLeft,
   AuthenticatedContainerInnerRight,
   CustomButton,
+  CustomButtonAccept,
   CustomInput,
   CustomLabel,
   TextItalic,
@@ -318,7 +319,7 @@ function App() {
     useState<string>("");
   const [isMain, setIsMain] = useState<boolean>(true);
   const isMainRef = useRef(false);
-  const [authenticatePassword, setAuthenticatePassword] = useState<string>("");
+  const [authenticatePassword, setAuthenticatePassword] = useState<string>("1234567890");
   const [sendqortState, setSendqortState] = useState<any>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [
@@ -2683,11 +2684,30 @@ function App() {
             </DialogContentText>
           </DialogContent>
           <DialogActions>
-            <Button variant="contained" onClick={onCancel}>
-              Disagree
+           
+            <Button sx={{
+                  backgroundColor: 'var(--green)',
+                  color: 'black',
+                  opacity: 0.7,
+                  '&:hover': {
+                    backgroundColor: 'var(--green)',
+                  color: 'black',
+                  opacity: 1
+                  },
+                }} variant="contained" onClick={onOk} autoFocus>
+              accept
             </Button>
-            <Button variant="contained" onClick={onOk} autoFocus>
-              Agree
+            <Button sx={{
+                  backgroundColor: 'var(--unread)',
+                  color: 'black',
+                  opacity: 0.7,
+                  '&:hover': {
+                    backgroundColor: 'var(--unread)',
+                  color: 'black',
+                  opacity: 1
+                  },
+                }}  variant="contained" onClick={onCancel}>
+              decline
             </Button>
           </DialogActions>
         </Dialog>
@@ -2966,22 +2986,26 @@ function App() {
                 gap: "14px",
               }}
             >
-              <CustomButton
+              <CustomButtonAccept
+              color="black"
+              bgColor="var(--green)"
                 sx={{
                   minWidth: "102px",
                 }}
                 onClick={() => onOkQortalRequestExtension("accepted")}
               >
                 accept
-              </CustomButton>
-              <CustomButton
+              </CustomButtonAccept>
+              <CustomButtonAccept
+               color="black"
+               bgColor="var(--unread)"
                 sx={{
                   minWidth: "102px",
                 }}
                 onClick={() => onCancelQortalRequestExtension()}
               >
                 decline
-              </CustomButton>
+              </CustomButtonAccept>
             </Box>
             <ErrorText>{sendPaymentError}</ErrorText>
           </Box>

src/index.css

@@ -35,7 +35,8 @@
   --bg-2: #27282c;
   --bg-3: rgba(0, 0, 0, 0.1);
   --unread: #B14646;
-  --apps-circle: #1F2023
+  --apps-circle: #1F2023;
+  --green: #5EB049;
 }
 
 body {