added styling in markets and my account pages

pablo-gonzalez-akkodis · Jul 3, 2024 · 593287a · 593287a
1 parent 406b027
commit 593287a
Show file tree

Hide file tree

Showing 45 changed files with 115 additions and 120 deletions.
diff --git a/apps/alpha/components/App/AccountData/AccountUpnl.tsx b/apps/alpha/components/App/AccountData/AccountUpnl.tsx
@@ -21,9 +21,9 @@ export default function AccountUpnl({ size }: { size?: string }) {
   const [value, color] = useMemo(() => {
     const upnlBN = toBN(upnl);
     if (upnlBN.isGreaterThan(0))
-      return [`+ $${formatAmount(upnlBN)}`, theme.green1];
+      return [`+ $${formatAmount(upnlBN)}`, theme.peppyGreen];
     else if (upnlBN.isLessThan(0))
-      return [`- $${formatAmount(Math.abs(upnlBN.toNumber()))}`, theme.red1];
+      return [`- $${formatAmount(Math.abs(upnlBN.toNumber()))}`, theme.peppyRed];
     return [`$${formatAmount(upnlBN)}`, undefined];
   }, [upnl, theme]);
 

diff --git a/apps/alpha/components/App/AccountData/MyAccount/AccountBalance.tsx b/apps/alpha/components/App/AccountData/MyAccount/AccountBalance.tsx
@@ -33,7 +33,6 @@ const Container = styled(DefaultContainer)`
 const TopContainer = styled(Column)`
   min-height: 150px;
   padding-bottom: 16px;
-  background-color: ${({ theme }) => theme.bg1};
 `;
 
 const ContentWrapper = styled(Column)`
@@ -61,7 +60,7 @@ export default function AccountBalance() {
 
   return (
     <>
-      <Container>
+      <Container className="boxStyling">
         <TopContainer>
           <DefaultHeader>Balance Overview</DefaultHeader>
           <ContentWrapper>

diff --git a/apps/alpha/components/App/AccountData/MyAccount/AccountOverview/UPNLBar.tsx b/apps/alpha/components/App/AccountData/MyAccount/AccountOverview/UPNLBar.tsx
@@ -28,13 +28,12 @@ import ShimmerAnimation from "components/ShimmerAnimation";
 
 const Wrapper = styled(RowBetween)<{ color?: string }>`
   margin-top: 5px;
-  background: ${({ theme, color }) => color ?? theme.bg0};
 `;
 
 const UPNLText = styled.p`
   font-size: 20px;
   font-weight: 400;
-  color: ${({ theme }) => theme.text4};
+  color: ${({ theme }) => theme.text7};
 `;
 
 export default function UPNLBar() {
@@ -101,7 +100,7 @@ function usePnlValues(currency: Token) {
   else if (pnlBN.isLessThan(0))
     return {
       value: `- ${formatAmount(Math.abs(pnlBN.toNumber()))}`,
-      color: theme.red1,
+      color: theme.peppyRed,
       bgColor: theme.bgLoose,
       isLoading: false,
     };

diff --git a/apps/alpha/components/App/AccountData/MyAccount/AccountOverview/index.tsx b/apps/alpha/components/App/AccountData/MyAccount/AccountOverview/index.tsx
@@ -39,7 +39,7 @@ export default function AccountOverview() {
   const loading = chainId ? accountLoading : true;
 
   return (
-    <Container>
+    <Container className="boxStyling">
       <AccountHealth />
       <Row flexDirection={"column"} gap={"16px"} align={"stretch"}>
         <UPNLBar />

diff --git a/apps/alpha/components/App/AccountData/MyAccount/AccountPositions/AccountTable.tsx b/apps/alpha/components/App/AccountData/MyAccount/AccountPositions/AccountTable.tsx
@@ -185,9 +185,9 @@ function PositionRow({
     <RowWrap>
       <ImageWrapper>
         {positionType === PositionType.LONG ? (
-          <LongArrow width={15} height={12} color={theme.green1} />
+          <LongArrow width={15} height={12} color={theme.peppyGreen} />
         ) : (
-          <ShortArrow width={15} height={12} color={theme.red1} />
+          <ShortArrow width={15} height={12} color={theme.peppyRed} />
         )}
       </ImageWrapper>
       <div>

diff --git a/apps/alpha/components/App/AccountData/MyAccount/AccountPositions/PositionStatus.tsx b/apps/alpha/components/App/AccountData/MyAccount/AccountPositions/PositionStatus.tsx
@@ -21,8 +21,6 @@ const Container = styled.div`
   grid-template-columns: repeat(3, auto) 1fr;
   column-gap: 60px;
   row-gap: 24px;
-
-  background-color: ${({ theme }) => theme.bg1};
   padding: 16px 24px;
   border-radius: 4px;
 
@@ -121,14 +119,14 @@ function PositionStatusBody() {
         <PositionNumber>{longPositionNumber}</PositionNumber>
         <PositionText gap={"4px"}>
           Longs
-          <LongArrow width={12} height={8} color={theme.green1} />
+          <LongArrow width={12} height={8} color={theme.peppyGreen} />
         </PositionText>
       </PositionInfo>
       <PositionInfo>
         <PositionNumber>{shortPositionNumber}</PositionNumber>
         <PositionText gap={"4px"}>
           Shorts
-          <ShortArrow width={12} height={8} color={theme.red1} />
+          <ShortArrow width={12} height={8} color={theme.peppyRed} />
         </PositionText>
       </PositionInfo>
       <PositionTotalValue>

diff --git a/apps/alpha/components/App/AccountData/MyAccount/AccountPositions/PositionsPieChart.tsx b/apps/alpha/components/App/AccountData/MyAccount/AccountPositions/PositionsPieChart.tsx
@@ -123,7 +123,7 @@ export default function PositionsPieChart() {
   const data = marketQuotesInfo.map((quoteInfo) => ({
     name: quoteInfo.marketName,
     color:
-      quoteInfo.positionType === PositionType.LONG ? theme.green1 : theme.red1,
+      quoteInfo.positionType === PositionType.LONG ? theme.peppyGreen : theme.peppyRed,
     value: quoteInfo.value,
   }));
 

diff --git a/apps/alpha/components/App/AccountData/MyAccount/AccountPositions/index.tsx b/apps/alpha/components/App/AccountData/MyAccount/AccountPositions/index.tsx
@@ -81,7 +81,7 @@ export default function AccountPositions() {
   const loading = upnlLoadingStatus === ConnectionStatus.CLOSED;
 
   return (
-    <Container>
+    <Container className="boxStyling">
       <Header>Account Open Positions Overview</Header>
       {quotes.length || loading ? (
         <AccountPositionsBody positions={quotes} />

diff --git a/apps/alpha/components/App/AccountData/MyAccount/BalanceHistory/index.tsx b/apps/alpha/components/App/AccountData/MyAccount/BalanceHistory/index.tsx
@@ -88,7 +88,7 @@ export default function BalanceHistory() {
   }, [balanceHistory, isLoaded]);
 
   return (
-    <Container>
+    <Container className="boxStyling">
       <DefaultHeader>Deposit/Withdraw History</DefaultHeader>
       {isLoaded ? (
         <BalanceHistoryBody />

diff --git a/apps/alpha/components/App/AccountData/MyAccount/WithdrawBar.tsx b/apps/alpha/components/App/AccountData/MyAccount/WithdrawBar.tsx
@@ -19,7 +19,6 @@ const Container = styled(RowBetween)`
   height: 59px;
   border-radius: 4px;
   padding: 0px 12px 0px 16px;
-  background-color: ${({ theme }) => theme.bg1};
 
   & > * {
     &:nth-child(2) {
@@ -60,7 +59,7 @@ export default function Statusbar() {
     chainId
   );
   return (
-    <Container>
+    <Container className="boxStyling">
       <WithdrawAmount>
         <span>Withdraw</span>
         <span>

diff --git a/apps/alpha/components/App/AccountData/MyAccount/styles.tsx b/apps/alpha/components/App/AccountData/MyAccount/styles.tsx
@@ -7,7 +7,6 @@ export const GeneralContainer = styled.div<{ height?: string; width?: string }>`
 `;
 
 export const DefaultContainer = styled(GeneralContainer)`
-  background-color: ${({ theme }) => theme.bg0};
   border-radius: 4px;
 `;
 

diff --git a/apps/alpha/components/App/AccountData/PositionDetails/CanceledQuoteDetails.tsx b/apps/alpha/components/App/AccountData/PositionDetails/CanceledQuoteDetails.tsx
@@ -90,9 +90,9 @@ export default function CanceledQuoteDetails({
               <QuoteData>
                 {positionType}
                 {positionType === PositionType.LONG ? (
-                  <LongArrow width={16} height={12} color={theme.green1} />
+                  <LongArrow width={16} height={12} color={theme.peppyGreen} />
                 ) : (
-                  <ShortArrow width={16} height={12} color={theme.red1} />
+                  <ShortArrow width={16} height={12} color={theme.peppyRed} />
                 )}
               </QuoteData>
             </RowComponent>

diff --git a/...lpha/components/App/AccountData/PositionDetails/ClosedSizeDetails/ClosePendingDetails.tsx b/...lpha/components/App/AccountData/PositionDetails/ClosedSizeDetails/ClosePendingDetails.tsx
@@ -85,12 +85,12 @@ export default function ClosePendingDetails({
       .toFixed(2);
 
     if (valueBN.isGreaterThan(0))
-      return [`+ $${formatAmount(valueBN)}`, valuePercent, theme.green1];
+      return [`+ $${formatAmount(valueBN)}`, valuePercent, theme.peppyGreen];
     else if (valueBN.isLessThan(0))
       return [
         `- $${formatAmount(Math.abs(valueBN.toNumber()))}`,
         valuePercent,
-        theme.red1,
+        theme.peppyRed,
       ];
     return [`$${formatAmount(valueBN)}`, valuePercent, theme.text1];
   }

diff --git a/...lpha/components/App/AccountData/PositionDetails/ClosedSizeDetails/ClosedAmountDetails.tsx b/...lpha/components/App/AccountData/PositionDetails/ClosedSizeDetails/ClosedAmountDetails.tsx
@@ -57,9 +57,9 @@ export default function ClosedAmountDetails({
   const [value, color] = useMemo(() => {
     const pnlBN = toBN(pnl);
     if (pnlBN.isGreaterThan(0))
-      return [`+ $${formatAmount(pnlBN)}`, theme.green1];
+      return [`+ $${formatAmount(pnlBN)}`, theme.peppyGreen];
     else if (pnlBN.isLessThan(0))
-      return [`- $${formatAmount(Math.abs(pnlBN.toNumber()))}`, theme.red1];
+      return [`- $${formatAmount(Math.abs(pnlBN.toNumber()))}`, theme.peppyRed];
     return [`$${formatAmount(pnlBN)}`, theme.text1];
   }, [pnl, theme]);
   const pnlPercent = useMemo(() => {

diff --git a/apps/alpha/components/App/AccountData/PositionDetails/LiquidatedQuoteDetails.tsx b/apps/alpha/components/App/AccountData/PositionDetails/LiquidatedQuoteDetails.tsx
@@ -46,7 +46,7 @@ const LiquidateWrap = styled(DataWrap)`
 `;
 
 const LiquidateLabel = styled(Label)`
-  color: ${({ theme }) => theme.red1};
+  color: ${({ theme }) => theme.peppyRed};
 `;
 
 export default function LiquidatedQuoteDetails({
@@ -98,12 +98,12 @@ export default function LiquidatedQuoteDetails({
       .toFixed(2);
 
     if (valueBN.isGreaterThan(0))
-      return [`+ $${formatAmount(valueBN)}`, valuePercent, theme.green1];
+      return [`+ $${formatAmount(valueBN)}`, valuePercent, theme.peppyGreen];
     else if (valueBN.isLessThan(0))
       return [
         `- $${formatAmount(Math.abs(valueBN.toNumber()))}`,
         valuePercent,
-        theme.red1,
+        theme.peppyRed,
       ];
     return [`$${formatAmount(valueBN)}`, valuePercent, theme.text1];
   }
@@ -134,9 +134,9 @@ export default function LiquidatedQuoteDetails({
               <QuoteData>
                 {positionType}
                 {positionType === PositionType.LONG ? (
-                  <LongArrow width={16} height={12} color={theme.green1} />
+                  <LongArrow width={16} height={12} color={theme.peppyGreen} />
                 ) : (
-                  <ShortArrow width={16} height={12} color={theme.red1} />
+                  <ShortArrow width={16} height={12} color={theme.peppyRed} />
                 )}
               </QuoteData>
             </RowComponent>

diff --git a/apps/alpha/components/App/AccountData/PositionDetails/OpenedQuoteDetails.tsx b/apps/alpha/components/App/AccountData/PositionDetails/OpenedQuoteDetails.tsx
@@ -125,12 +125,12 @@ export default function OpenedQuoteDetails({
       .toFixed(2);
     if (!marketData?.markPrice) return ["-", "-", theme.text0];
     if (valueBN.isGreaterThan(0))
-      return [`+ $${formatAmount(valueBN)}`, valuePercent, theme.green1];
+      return [`+ $${formatAmount(valueBN)}`, valuePercent, theme.peppyGreen];
     else if (valueBN.isLessThan(0))
       return [
         `- $${formatAmount(Math.abs(valueBN.toNumber()))}`,
         valuePercent,
-        theme.red1,
+        theme.peppyRed,
       ];
     return [`$${formatAmount(valueBN)}`, valuePercent, theme.text1];
   }
@@ -162,9 +162,9 @@ export default function OpenedQuoteDetails({
               <QuoteData>
                 {positionType}
                 {positionType === PositionType.LONG ? (
-                  <LongArrow width={16} height={12} color={theme.green1} />
+                  <LongArrow width={16} height={12} color={theme.peppyGreen} />
                 ) : (
-                  <ShortArrow width={16} height={12} color={theme.red1} />
+                  <ShortArrow width={16} height={12} color={theme.peppyRed} />
                 )}
               </QuoteData>
             </RowComponent>
@@ -398,8 +398,8 @@ function FundingRate({
     next_funding_rate_long,
     next_funding_rate_short
   )
-    ? theme.red1
-    : theme.green1;
+    ? theme.peppyRed
+    : theme.peppyGreen;
 
   const paidAmountBN = toBN(paidAmount).div(1e18);
 
@@ -410,10 +410,10 @@ function FundingRate({
         <PositionPnl
           color={
             paidAmountBN.lt(0)
-              ? theme.green1
+              ? theme.peppyGreen
               : paidAmountBN.isEqualTo(0)
               ? theme.text0
-              : theme.red1
+              : theme.peppyRed
           }
         >
           {status === ApiState.LOADING ? (

diff --git a/apps/alpha/components/App/AccountData/PositionDetails/PendingsQuoteDetails.tsx b/apps/alpha/components/App/AccountData/PositionDetails/PendingsQuoteDetails.tsx
@@ -133,9 +133,9 @@ export default function PendingQuoteDetails({
                 {positionType}
 
                 {positionType === PositionType.LONG ? (
-                  <LongArrow width={16} height={12} color={theme.green1} />
+                  <LongArrow width={16} height={12} color={theme.peppyGreen} />
                 ) : (
-                  <ShortArrow width={16} height={12} color={theme.red1} />
+                  <ShortArrow width={16} height={12} color={theme.peppyRed} />
                 )}
               </QuoteData>
             </RowComponent>

diff --git a/apps/alpha/components/App/FavoriteBar/BlinkingPrice.tsx b/apps/alpha/components/App/FavoriteBar/BlinkingPrice.tsx
@@ -30,7 +30,7 @@ export const Price = styled.div<{
     }
   }
 
-  color: ${({ theme, positive }) => (positive ? theme.green1 : theme.red1)};
+  color: ${({ theme, positive }) => (positive ? theme.peppyGreen : theme.peppyRed)};
   animation: ${({ visible }) => (visible ? "blink 0.5s linear 1" : "none")};
 
   ${({ width }) =>

diff --git a/apps/alpha/components/App/FavoriteBar/index.tsx b/apps/alpha/components/App/FavoriteBar/index.tsx
@@ -45,7 +45,7 @@ const StyledNavButton = styled.button<{ direction: "right" | "left" }>`
   width: 48px;
   height: 100%;
   background: ${({ theme }) => css`
-    linear-gradient(90deg, ${theme.bg0} 50%, #ffffff00 100%);
+    linear-gradient(90deg, rgba(76, 70, 110, 0.3) 50%, #ffffff00 100%);
   `};
   transform: ${({ direction }) =>
     direction === "left" ? "rotate(0deg)" : "rotate(180deg)"};
@@ -69,7 +69,7 @@ const Item = styled(RowCenter)`
 
   &:hover {
     cursor: pointer;
-    background: ${({ theme }) => theme.hover};
+    background: rgba(76, 70, 110, 0.3);
   }
 
   ${({ theme }) => theme.mediaWidth.upToMedium`

diff --git a/apps/alpha/components/App/MarketBar/InputField.tsx b/apps/alpha/components/App/MarketBar/InputField.tsx
@@ -5,17 +5,17 @@ import { Search as SearchIcon } from "components/Icons";
 
 const SearchWrapper = styled(RowStart)`
   flex-flow: row nowrap;
-  background: ${({ theme }) => theme.bg2};
   border-radius: 4px;
   padding: 0.2rem 0;
   height: 36px;
+  border: 1px solid ${({ theme }) => theme.text8};
   gap: 5px;
 
   & > * {
     &:first-child {
       width: fit-content;
       padding: 0 0.5rem;
-      border-right: 1px solid ${({ theme }) => theme.border1};
+      border-right: 1px solid ${({ theme }) => theme.bg8};
     }
   }
 `;
@@ -28,15 +28,15 @@ const Input = styled.input<{
   border: none;
   background: transparent;
   font-size: 0.8rem;
-  color: ${({ theme }) => theme.text0};
+  color: ${({ theme }) => theme.text8};
   padding-left: 2px;
 
   &::placeholder {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.text8};
   }
   &:focus,
   &:hover {
-    color: ${({ theme }) => theme.text0};
+    color: ${({ theme }) => theme.text8};
     outline: none;
   }
 

diff --git a/apps/alpha/components/App/MarketBar/MarketFundingRate.tsx b/apps/alpha/components/App/MarketBar/MarketFundingRate.tsx
@@ -121,6 +121,6 @@ function useColor(value: string) {
   const valueBN = toBN(value);
 
   if (valueBN.isEqualTo(0)) return theme.text0;
-  else if (valueBN.isGreaterThan(0)) return theme.green1;
-  else return theme.red1;
+  else if (valueBN.isGreaterThan(0)) return theme.peppyGreen;
+  else return theme.peppyRed;
 }
diff --git a/apps/alpha/components/App/Markets/MarketsTable/Body.tsx b/apps/alpha/components/App/Markets/MarketsTable/Body.tsx
@@ -13,7 +13,6 @@ import { RowBetween } from "components/Row";
 
 const FooterWrapper = styled(RowBetween)`
   height: 56px;
-  background: ${({ theme }) => theme.bg0};
   border-radius: 0 0 4px 4px;
 `;
 

diff --git a/apps/alpha/components/App/Markets/MarketsTable/Header.tsx b/apps/alpha/components/App/Markets/MarketsTable/Header.tsx
@@ -51,8 +51,7 @@ const TableStructure = styled(RowBetween)`
 `;
 
 const HeaderWrap = styled(TableStructure)`
-  color: ${({ theme }) => theme.text4};
-  background-color: ${({ theme }) => theme.bg0};
+  color: ${({ theme }) => theme.text7};
   padding: 24px 24px 15px 12px;
   border-bottom: 1px solid ${({ theme }) => theme.border3};
-Original file line number
+Diff line change
@@ Expand Up @@
     `;
     export const DefaultContainer = styled(GeneralContainer)`
-      background-color: ${({ theme }) => theme.bg0};
       border-radius: 4px;
     `;
@@ Expand Down @@