fix: Fix bug causing style conflicts

blocksecteam · Apr 19, 2024 · 2ef5e74 · 2ef5e74
1 parent 582ab24
commit 2ef5e74
Show file tree

Hide file tree

Showing 58 changed files with 93 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ### v4.8.0
 
+- [fix] Fix bug causing style conflicts
+
+### v4.8.0
+
 - [update] Update the domain for Phalcon Explorer
 - [feat] Added support for zkSync on Blockscout
 - [feat] Adapted to snowscan.xyz as a replacement for the previous snowtrace.io

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "metasuites",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/blocksecteam/metasuites.git"

diff --git a/src/common/components/BscModal/index.module.less b/src/common/components/BscModal/index.module.less
@@ -8,6 +8,7 @@
     padding-left: 20px;
     .justify-between;
     .items-center;
+    .flex;
     .closeIcon {
       padding: 20px;
       cursor: pointer;

diff --git a/src/common/components/Cell/cell.tsx b/src/common/components/Cell/cell.tsx
@@ -38,7 +38,7 @@ const Cell: FC<CellProps> = props => {
       style={style}
       onClick={onClick}
     >
-      <div className="items-center flex1">
+      <div className="items-center flex1 flex">
         {icon && <img className={styles.icon} src={icon} alt="" />}
         <div className={cls(styles.title, 'flex1')}>
           <span style={{ fontSize: desc ? '14px' : '12px' }}>{title}</span>

diff --git a/src/common/components/Cell/index.module.less b/src/common/components/Cell/index.module.less
@@ -20,6 +20,7 @@
   }
   .title {
     .flex-column;
+    .flex;
     span {
       font-size: 14px;
       &:nth-of-type(1) {

diff --git a/src/common/components/ComplianceRadarPlot/index.module.less b/src/common/components/ComplianceRadarPlot/index.module.less
@@ -7,6 +7,7 @@
   border: 2px solid #e6e8eb;
   overflow: hidden;
   .flex-column;
+  .flex;
   .graph {
     width: fit-content;
     height: calc(100% - 30px);

diff --git a/src/common/components/Drawer/index.module.less b/src/common/components/Drawer/index.module.less
@@ -32,6 +32,7 @@
       background-color: #ffffff;
       border-radius: 20px 20px 0 0;
       .flex-column;
+      .flex;
 
       &.show {
         bottom: 0;

diff --git a/src/common/components/DrawerSimulation/index.tsx b/src/common/components/DrawerSimulation/index.tsx
@@ -324,7 +324,7 @@ const DrawerSimulation: FC<Props> = ({
       width={isMobile() ? '100%' : 530}
       closable={false}
       title={
-        <div className="items-center">
+        <div className="items-center flex">
           <IconClose mr={16} onClick={() => setVisible(false)} />
           <span>Simulator</span>
           <Tooltip
@@ -357,7 +357,7 @@ const DrawerSimulation: FC<Props> = ({
       destroyOnClose
       extra={
         <Button
-          className="items-center"
+          className="items-center flex"
           type="primary"
           onClick={() => window.open(PHALCON_EXPLORER_DOMAIN)}
         >
@@ -391,7 +391,7 @@ const DrawerSimulation: FC<Props> = ({
             >
               {SIMULATE_SUPPORT_LIST.map(item => (
                 <Select.Option key={item.chain} value={item.chain}>
-                  <div className="items-center" style={{ fontSize: 12 }}>
+                  <div className="items-center flex" style={{ fontSize: 12 }}>
                     <TokenSymbol logo={item.logo} mr={4} size={14} />
                     {item.name}
                   </div>
@@ -480,7 +480,7 @@ const DrawerSimulation: FC<Props> = ({
                   <Form.Item
                     label={<span className={styles.labelIcon}>Function</span>}
                   >
-                    <div className="justify-between">
+                    <div className="justify-between flex">
                       {renderRadioGroup()}
                       <div>
                         <Form.Item
@@ -558,7 +558,7 @@ const DrawerSimulation: FC<Props> = ({
                               return (
                                 <div
                                   key={index}
-                                  className="justify-between items-center"
+                                  className="justify-between items-center flex"
                                   style={{ marginLeft: 30 }}
                                 >
                                   <span

diff --git a/src/common/components/ModalContractVariableLogs/index.module.less b/src/common/components/ModalContractVariableLogs/index.module.less
@@ -5,6 +5,7 @@
   .title {
     overflow: hidden;
     .items-center;
+    .flex;
     .contract {
       font-weight: normal;
       .text-ellipsis;
@@ -13,8 +14,10 @@
   .container {
     .tablePanel {
       .justify-between;
+      .flex;
       .metadata {
         .items-center;
+        .flex;
         .variableName {
           margin-right: 0.5rem;
         }
@@ -29,6 +32,7 @@
           font-size: 14px;
           border-radius: 12px;
           .items-center;
+          .flex;
         }
       }
       .filter {
@@ -48,6 +52,7 @@
       }
       &.mobile {
         .flex-column;
+        .flex;
         .metadata {
           margin-bottom: 8px;
         }

diff --git a/src/common/components/ModalContractVariableLogs/index.tsx b/src/common/components/ModalContractVariableLogs/index.tsx
@@ -161,7 +161,7 @@ const ModalContractVariableLogs: FC<Props> = ({
       }
       footer={
         list.length > 0 ? (
-          <div className="justify-end items-center">
+          <div className="justify-end items-center flex">
             <Button
               type="primary"
               className="md-btn-primary"

diff --git a/src/common/components/ModalFundFlow/index.module.less b/src/common/components/ModalFundFlow/index.module.less
@@ -28,6 +28,7 @@
       0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 6px 16px -8px rgba(0, 0, 0, 0.08);
     background-color: #ffffff;
     .flex-column;
+    .flex;
 
     .header {
       justify-content: space-between;
@@ -38,10 +39,12 @@
       padding-left: 22px;
       border-bottom: 1px solid #f0f0f0;
       .items-center;
+      .flex;
 
       .basicInfo {
         min-width: 300px;
         .items-center;
+        .flex;
 
         .tokenLogo {
           width: 26px;
@@ -57,6 +60,7 @@
 
       .msButton {
         .items-center;
+        .flex;
 
         gap: 4px;
       }
@@ -74,6 +78,7 @@
         font-size: 14px;
         color: rgba(0, 0, 0, 0.65);
         .items-center;
+        .flex;
 
         label {
           margin: 0 0 0 5px;
@@ -101,6 +106,7 @@
         position: relative;
         margin-right: 10px;
         .items-center;
+        .flex;
 
         &:hover {
           .content {
@@ -169,6 +175,7 @@
         overflow: hidden;
         max-height: 400px;
         .flex-column;
+        .flex;
 
         .input {
           margin: 0 10px;
@@ -202,6 +209,7 @@
           box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.1);
           justify-content: space-between;
           .items-center;
+          .flex;
         }
       }
     }
@@ -255,6 +263,7 @@
         color: #747478;
         line-height: 17px;
         .flex-column;
+        .flex;
 
         align-items: center;
         .flex-center;

diff --git a/src/common/components/ModalFundFlow/index.tsx b/src/common/components/ModalFundFlow/index.tsx
@@ -325,7 +325,7 @@ const ModalFundFlowGraph: FC<Props> = ({
               </div>
               <div
                 id="__metadock-fundflow-options-wrapper__"
-                className="items-center"
+                className="items-center flex"
               >
                 {fundFlow?.nodes && (
                   <Select

diff --git a/src/common/components/ModalProxyLog/columns.tsx b/src/common/components/ModalProxyLog/columns.tsx
@@ -52,7 +52,7 @@ const columns: ColumnsType<ProxyContractLog> = [
   },
   {
     title: (
-      <div className="items-center">
+      <div className="items-center flex">
         <img
           style={{ width: 16, height: 16, marginRight: 4 }}
           src="https://assets.blocksec.com/image/1681815761137-2.png"

diff --git a/src/common/components/ModalProxyLog/index.module.less b/src/common/components/ModalProxyLog/index.module.less
@@ -3,13 +3,15 @@
 .modalProxyLog {
   .title {
     .items-center;
+    .flex;
     .address {
       font-size: 14px;
       color: #6c757d;
       margin-left: 10px;
     }
     &.column {
       .flex-column;
+      .flex;
 
       align-items: flex-start;
     }
@@ -28,6 +30,7 @@
     }
     .cell {
       .items-center;
+      .flex;
       a {
         display: inline-block;
         max-width: 160px;

diff --git a/src/common/components/ModalProxyLog/index.tsx b/src/common/components/ModalProxyLog/index.tsx
@@ -66,7 +66,7 @@ const ModalProxyLog: FC<Props> = ({ visible, onClose, chain, address }) => {
       destroyOnClose
       title={
         <div className={cls(styles.title, { [styles.column]: isMobile() })}>
-          <div className="items-center">
+          <div className="items-center flex">
             <TokenSymbol />
             Proxy Upgrade Log
           </div>

diff --git a/src/common/components/RarityLabel/index.module.less b/src/common/components/RarityLabel/index.module.less
@@ -9,6 +9,7 @@
   border-radius: 8px;
   font-weight: 600;
   .items-center;
+  .flex;
 
   &:hover {
     .symbol {
@@ -28,6 +29,7 @@
     position: relative;
     margin-right: 3px;
     .items-center;
+    .flex;
 
     div {
       opacity: 1;
@@ -56,6 +58,7 @@
   }
   div:first-of-type {
     .justify-center;
+    .flex;
 
     border-bottom: 1px solid #e1e4e8;
     padding: 8px 12px;

diff --git a/src/common/styles/common.less b/src/common/styles/common.less
@@ -10,31 +10,21 @@
 }
 .items-center {
   align-items: center;
-
-  .flex;
 }
 
 .justify-center {
   justify-content: center;
-
-  .flex;
 }
 
 .justify-end {
   justify-content: flex-end;
-
-  .flex;
 }
 
 .justify-between {
-  .flex;
-
   justify-content: space-between;
 }
 
 .flex-column {
-  .flex;
-
   flex-direction: column;
 }
 

diff --git a/src/content/blockscout/components/TransactionExplanation/message.module.less b/src/content/blockscout/components/TransactionExplanation/message.module.less
@@ -106,6 +106,7 @@
 
 .dropdownItem {
   .items-center;
+  .flex;
   .pointer;
   &:not(:first-of-type) {
     margin-top: 10px;

diff --git a/src/content/etherscan/components/AlternativeBlockExplorersBtn/index.module.less b/src/content/etherscan/components/AlternativeBlockExplorersBtn/index.module.less
@@ -2,6 +2,7 @@
 
 .alternativeBlockExplorersBtn {
   .items-center;
+  .flex;
 
   flex-wrap: wrap;
 

diff --git a/src/content/etherscan/components/Button/index.module.less b/src/content/etherscan/components/Button/index.module.less
@@ -15,6 +15,7 @@
   //border-style: solid;
   //border-width: 1px;
   .items-center;
+  .flex;
 
   img {
     width: 16px;

diff --git a/src/content/etherscan/components/ComplianceScoreLabel/index.module.less b/src/content/etherscan/components/ComplianceScoreLabel/index.module.less
@@ -10,6 +10,7 @@
   font-size: 0.72rem;
   border: 1px solid transparent;
   .items-center;
+  .flex;
 
   &.lowRisk {
     color: #00a54c;

diff --git a/src/content/etherscan/components/FortaAlertLabel/index.module.less b/src/content/etherscan/components/FortaAlertLabel/index.module.less
@@ -2,6 +2,7 @@
 
 .tooltipTitle {
   .items-center;
+  .flex;
 
   span {
     white-space: nowrap;

diff --git a/src/content/etherscan/components/FortaAlertTip/index.module.less b/src/content/etherscan/components/FortaAlertTip/index.module.less
@@ -2,6 +2,7 @@
 
 .fortaAlertTip {
   .items-center;
+  .flex;
 
   img:first-of-type {
     width: 8px;

diff --git a/src/content/etherscan/components/FortaAlertWarningSymbol/index.module.less b/src/content/etherscan/components/FortaAlertWarningSymbol/index.module.less
@@ -23,6 +23,7 @@
       padding: 0.5rem;
       color: #fff;
       .items-center;
+      .flex;
       &::after {
         content: '';
         position: absolute;

diff --git a/src/content/etherscan/components/FundFromTag/index.module.less b/src/content/etherscan/components/FundFromTag/index.module.less
@@ -2,13 +2,15 @@
 
 .fundFromTag {
   .items-center;
+  .flex;
 
   .label {
     margin-right: 8px;
   }
 
   .value {
     .items-center;
+    .flex;
     .risky {
       color: #de4337;
     }