added styling in modals

pablo-gonzalez-akkodis · Jul 9, 2024 · b0c9841 · b0c9841
1 parent 7d5b116
commit b0c9841
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 40 deletions.
diff --git a/apps/alpha/components/App/AccountData/CreateAccount.tsx b/apps/alpha/components/App/AccountData/CreateAccount.tsx
@@ -70,13 +70,15 @@ const AccountWrapper = styled(Row)`
   padding: 10px 12px;
   font-weight: 500;
   font-size: 12px;
-  background: ${({ theme }) => theme.bg2};
+  border: 1px solid white;
+  border-radius: 10px;
   color: ${({ theme }) => theme.text0};
 `;
 
 const AccountNameWrapper = styled(AccountWrapper)`
-  background: ${({ theme }) => theme.bg2};
   color: ${({ theme }) => theme.text3};
+  border: 1px solid white;
+  border-radius: 10px;
 `;
 
 const Input = styled.input<{ [x: string]: any }>`
@@ -109,15 +111,14 @@ const Close = styled.div`
   cursor: pointer;
   border-radius: 4px;
   margin: 2px 12px 1px 0px;
-  background: ${({ theme }) => theme.bg1};
 `;
 
 const DescriptionText = styled.div`
   font-size: 12px;
   text-align: center;
   margin-top: 16px;
 
-  color: ${({ theme }) => theme.text4};
+  color: ${({ theme }) => theme.text7};
 `;
 
 export default function CreateAccount({ onClose }: { onClose?: () => void }) {
@@ -189,7 +190,7 @@ export default function CreateAccount({ onClose }: { onClose?: () => void }) {
   }
 
   return (
-    <Wrapper modal={onClose ? true : false}>
+    <Wrapper className={onClose && "boxStyling"} modal={onClose ? true : false}>
       <Row>
         <Title>Create Account</Title>
         <RowEnd>

diff --git a/apps/alpha/components/CustomPagination/index.tsx b/apps/alpha/components/CustomPagination/index.tsx
@@ -30,7 +30,6 @@ const Pagination = styled(Row)`
 const RowPerPage = styled(Pagination)`
   width: 200px;
   font-weight: 400;
-  background-color: ${({ theme }) => theme.bg2};
   border-radius: 4px;
   padding: 12px;
   font-size: 12px;
@@ -190,6 +189,7 @@ function PaginationPerPageCard() {
       <RowPerPage
         gap="4px"
         onClick={() => setCardOpen((prevCardOpen) => !prevCardOpen)}
+        className="boxStyling"
       >
         <RowBetween>
           <RowPerPageText>Rows per page</RowPerPageText>

diff --git a/apps/alpha/components/InputLabel/index.tsx b/apps/alpha/components/InputLabel/index.tsx
@@ -79,11 +79,11 @@ const DataWrap = styled(RowEnd)`
   font-weight: 500;
   padding-right: 10px;
   border-radius: 0px;
-  color: ${({ theme }) => theme.text0};
-  background: ${({ theme }) => theme.bg2};
+  color: ${({ theme }) => theme.text8};
+  border: 1px solid white;
   & > * {
     &:first-child {
-      color: ${({ theme }) => theme.text5};
+      color: ${({ theme }) => theme.text8};
     }
   }
 `;

diff --git a/apps/alpha/components/Modal/index.tsx b/apps/alpha/components/Modal/index.tsx
@@ -13,11 +13,9 @@ import { RowBetween } from "components/Row";
 const BaseModal = StyledModal.styled`
   display: flex;
   flex-flow: column nowrap;
-  background: ${({ theme }: { theme: any }) => theme.bg0};
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  border-radius: 4px;
   z-index: ${Z_INDEX.modal};
   overflow: hidden;
 `;
@@ -31,13 +29,13 @@ export const MobileModal = styled(BaseModal)`
 export const Modal = styled(BaseModal)<{
   width?: string;
 }>`
-  background: ${({ theme }) => theme.bg1};
   width: ${({ width }: { width?: string }) => width ?? "404px"};
   ${({ theme }) => theme.mediaWidth.upToMedium`
     max-height: 350px;
     width: 350px;
     overflow: scroll;
   `};
+  border-radius: 10px;
 `;
 
 export const ModalBackground = styled.div`
@@ -57,7 +55,6 @@ const HeaderWrapper = styled(RowBetween)`
   color: ${({ theme }) => theme.text0};
   padding: 12px 12px 0 12px;
   padding-bottom: 0;
-  background-color: ${({ theme }) => theme.bg1};
   margin-bottom: 20px;
   ${({ theme }) => theme.mediaWidth.upToMedium`
     padding: 10px;
@@ -73,7 +70,6 @@ const Close = styled.div`
   cursor: pointer;
   border-radius: 4px;
   margin: 2px 2px 1px 0px;
-  background: ${({ theme }) => theme.bg6};
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     padding: 6px;

diff --git a/apps/alpha/components/ReviewModal/OpenPosition/Modal.tsx b/apps/alpha/components/ReviewModal/OpenPosition/Modal.tsx
@@ -29,6 +29,7 @@ const Wrapper = styled(Column)`
   margin-top: -11px;
   overflow-y: scroll;
   height: auto;
+  border-radius: 10px;
 `;
 
 export default function OpenPositionModal() {
@@ -63,6 +64,7 @@ export default function OpenPositionModal() {
       isOpen={modalOpen}
       onBackgroundClick={toggleModal}
       onEscapeKeydown={toggleModal}
+      className="boxStyling"
     >
       <ModalHeader
         onClose={toggleModal}

diff --git a/packages/core/src/state/hedger/reducer.ts b/packages/core/src/state/hedger/reducer.ts
@@ -75,33 +75,33 @@ export default createReducer(initialState, (builder) =>
       console.error("Unable to fetch getMarketsDepth");
     })
 
-    .addCase(getMarkets.pending, (state) => {
-      state.marketsStatus = ApiState.LOADING;
-    })
-    .addCase(getMarkets.fulfilled, (state, { payload }) => {
-      state.markets = payload.markets;
-      state.errorMessages = payload.errorMessages;
-      state.marketsStatus = ApiState.OK;
-    })
-    .addCase(getMarkets.rejected, (state) => {
-      state.markets = [];
-      state.marketsStatus = ApiState.ERROR;
-      state.errorMessages = {};
-      console.error("Unable to fetch getMarkets", state);
-    })
+    // .addCase(getMarkets.pending, (state) => {
+    //   state.marketsStatus = ApiState.LOADING;
+    // })
+    // .addCase(getMarkets.fulfilled, (state, { payload }) => {
+    //   state.markets = payload.markets;
+    //   state.errorMessages = payload.errorMessages;
+    //   state.marketsStatus = ApiState.OK;
+    // })
+    // .addCase(getMarkets.rejected, (state) => {
+    //   state.markets = [];
+    //   state.marketsStatus = ApiState.ERROR;
+    //   state.errorMessages = {};
+    //   console.error("Unable to fetch getMarkets", state);
+    // })
 
-    .addCase(getOpenInterest.pending, (state) => {
-      state.openInterestStatus = ApiState.LOADING;
-    })
-    .addCase(getOpenInterest.fulfilled, (state, { payload }) => {
-      state.openInterest = payload.openInterest;
-      state.openInterestStatus = ApiState.OK;
-    })
-    .addCase(getOpenInterest.rejected, (state) => {
-      state.openInterestStatus = ApiState.ERROR;
-      state.openInterest = { total: -1, used: -1 };
-      console.error("Unable to fetch openInterest", state);
-    })
+    // .addCase(getOpenInterest.pending, (state) => {
+    //   state.openInterestStatus = ApiState.LOADING;
+    // })
+    // .addCase(getOpenInterest.fulfilled, (state, { payload }) => {
+    //   state.openInterest = payload.openInterest;
+    //   state.openInterestStatus = ApiState.OK;
+    // })
+    // .addCase(getOpenInterest.rejected, (state) => {
+    //   state.openInterestStatus = ApiState.ERROR;
+    //   state.openInterest = { total: -1, used: -1 };
+    //   console.error("Unable to fetch openInterest", state);
+    // })
 
     .addCase(getNotionalCap.pending, (state) => {
       state.marketNotionalCapStatus = ApiState.LOADING;