feat(drawer): act-1517 - updated panel to light theme (#1517)

* feat(drawer): act-1517 - updated panel to light theme * feat(drawer): act-1517 - minor style fix * feat(drawer): act-1517 - added fixes for paddings
MetaMask · Sep 5, 2024 · e3bc04d · e3bc04d
1 parent 7785f60
commit e3bc04d
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 36 deletions.
diff --git a/src/components/ParserOpenRPC/InteractiveBox/styles.module.css b/src/components/ParserOpenRPC/InteractiveBox/styles.module.css
@@ -1,24 +1,43 @@
+:root {
+  --param-item-bg: #292a36;
+  --param-item-color: #fff;
+  --param-item-border-color: rgba(132, 140, 150, 1);
+  --column-item-type-color: rgba(187, 192, 197, 1);
+  --modal-footer-bg: #24272a;
+}
+
+:root[data-theme="light"] {
+  --param-item-bg: #F2F4F6;
+  --param-item-color: #141618;
+  --param-item-border-color: #BBC0C5;
+  --column-item-type-color: #6A737D;
+  --modal-footer-bg: #fff;
+}
+
 .tableHeadingRow {
   display: flex;
-  border-top: 1px solid rgba(132, 140, 150, 1);
+  border-top: 1px solid var(--param-item-border-color);
 }
 .tableHeadingColumn {
   width: 50%;
   padding: 16px;
   line-height: 1.5;
-  background-color: #292a36;
-  color: #ffffff;
+  font-weight: 500;
+  background-color: var(--param-item-bg);
+  color: var(--param-item-color);
 }
 .tableRow {
   display: flex;
-  border-top: 1px solid rgba(132, 140, 150, 1);
-  border-bottom: 1px solid rgba(132, 140, 150, 1);
+  border-top: 1px solid var(--param-item-border-color);
+  border-bottom: 1px solid var(--param-item-border-color);
+  margin-top: -1px;
 }
 .tableColumn {
   width: 50%;
   line-height: 24px;
-  background-color: #292a36;
-  color: #ffffff;
+  background-color: var(--param-item-bg);
+  color: var(--param-item-color);
+  font-weight: 500;
 }
 .tableColumnParam {
   display: flex;
@@ -27,6 +46,7 @@
   padding: 12px 16px 12px 12px;
   border-left: 4px solid transparent;
   line-height: 28px;
+  font-size: 14px;
 }
 .tableColumnParamFocused {
   border-left: 4px solid rgba(16, 152, 252, 1);
@@ -35,7 +55,7 @@
   border-left: 4px solid rgba(224, 100, 112, 1);
 }
 .tableColumn:first-child {
-  border-right: 1px solid rgba(132, 140, 150, 1);
+  border-right: 1px solid var(--param-item-border-color);
 }
 .tableValueRow {
   display: flex;
@@ -57,7 +77,7 @@
   right: 0;
   padding-right: 28px;
   padding-bottom: 2px;
-  color: rgba(187, 192, 197, 1);
+  color: var(--column-item-type-color);
   line-height: 24px;
   font-size: 14px;
 }
@@ -136,7 +156,7 @@
   margin: 0;
   top: 35px;
   overflow: hidden;
-  border: 1px solid rgba(132, 140, 150, 1);
+  border: 1px solid var(--param-item-border-color);
   z-index: 2;
 }
 .dropdownListClosed {
@@ -157,7 +177,7 @@
   cursor: pointer;
 }
 .dropdownItem:not(:last-child) {
-  border-bottom: 1px solid rgba(132, 140, 150, 1);
+  border-bottom: 1px solid var(--param-item-border-color);
 }
 .tableFooterRow {
   position: fixed;
@@ -166,12 +186,8 @@
   padding: 16px;
   width: 100%;
   bottom: 0;
-}
-.tableFooterRowDark {
-  background-color: #24272a;
-}
-.tableFooterRowLight {
-  background-color: #f2f4f6;
+  background-color: var(--modal-footer-bg);
+  border-top: 1px solid var(--param-item-border-color);
 }
 .tableButton {
   display: flex;
@@ -205,7 +221,8 @@
   padding: 12px 72px 12px 16px;
   font-size: 14px;
   line-height: 24px;
-  color: #ffffff;
+  font-weight: 500;
+  color: var(--param-item-color);
   border-radius: 0;
   border: 2px solid transparent;
   text-overflow: ellipsis;
@@ -272,7 +289,7 @@
   padding-right: 28px;
   display: flex;
   align-items: center;
-  color: rgba(187, 192, 197, 1);
+  color: var(--column-item-type-color);
   font-size: 14px;
   cursor: pointer;
 }
@@ -288,7 +305,7 @@
   display: flex;
   align-items: center;
   padding: 12px;
-  border-bottom: 1px solid rgba(132, 140, 150, 1);
+  border-bottom: 1px solid var(--param-item-border-color);
 }
 .addItemBtn {
   display: flex;

diff --git a/src/components/ParserOpenRPC/ModalDrawer/index.tsx b/src/components/ParserOpenRPC/ModalDrawer/index.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
 import clsx from "clsx";
-import { useColorMode } from "@docusaurus/theme-common";
 import styles from "./styles.module.css";
 
 interface ModalDrawerProps {
@@ -22,7 +21,6 @@ export const ModalDrawer = ({
 }: ModalDrawerProps) => {
   const [showModal, setShowModal] = useState(isOpen);
   const contentRef = useRef(null);
-  const { colorMode } = useColorMode();
 
   useEffect(() => {
     setShowModal(isOpen);
@@ -42,10 +40,7 @@ export const ModalDrawer = ({
       )}
     >
       <div
-        className={clsx(
-          styles.modalHeader,
-          colorMode === "light" && styles.modalHeaderLight
-        )}
+        className={styles.modalHeader}
       >
         <div className={styles.modalHeaderLabels}>
           <span className={styles.modalTitle}>{title}</span>

diff --git a/src/components/ParserOpenRPC/ModalDrawer/styles.module.css b/src/components/ParserOpenRPC/ModalDrawer/styles.module.css
@@ -1,19 +1,31 @@
+:root {
+  --param-item-bg: #292a36;
+  --modal-header-bg: #24272a;
+}
+
+:root[data-theme="light"] {
+  --param-item-bg: #F2F4F6;
+  --modal-header-bg: #fff;
+}
+
 .modalContainer {
   border: 1px solid #848c96;
   border-radius: 8px 8px 0 0;
-  position: absolute;
+  position: fixed;
   z-index: 10;
   top: 100%;
-  left: 15px;
-  right: 15px;
+  left: 300px;
+  max-width: 972px;
+  width: 100%;
   min-height: 512px;
+  margin-left: calc(((100% - 300px) - 1440px) / 2);
   opacity: 0;
   transform: translate(0, 100%);
   transition-property: "transform", "opacity";
   transition-duration: 0.4s;
   transition-timing-function: ease;
   overflow: hidden;
-  background-color: #292a36;
+  background-color: var(--param-item-bg);
 }
 
 .modalContainerOpen {
@@ -27,11 +39,7 @@
   align-items: center;
   justify-content: space-between;
   min-height: 56px;
-  background-color: #24272a;
-}
-
-.modalHeaderLight {
-  background-color: #f2f4f6 !important;
+  background-color: var(--modal-header-bg);
 }
 
 .modalTitle {
@@ -96,10 +104,19 @@
   overflow-y: hidden;
 }
 
+@media (width <= 1760px) {
+  .modalContainer {
+    max-width: 792px;
+    margin-left: 0;
+    left: calc(50% - 396px);
+  }
+}
+
 @media (width <= 1200px) {
   .modalContainer {
-    position: fixed;
     left: 0;
     right: 0;
+    max-width: 100%;
+    margin-left: 0;
   }
 }
diff --git a/src/components/ParserOpenRPC/global.module.css b/src/components/ParserOpenRPC/global.module.css
@@ -128,3 +128,12 @@
     padding: 0;
   }
 }
+
+@media (width <= 996px) {
+  .colLeft {
+    padding-top: 60px;
+  }
+  .colRight {
+    padding-top: 30px;
+  }
+}