Added redesign of ExpirySelector and max button

airswap · Sep 25, 2024 · 68384c3 · 68384c3
1 parent 950f8ed
commit 68384c3
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 43 deletions.
diff --git a/src/components/@widgets/MakeWidget/MakeWidget.styles.tsx b/src/components/@widgets/MakeWidget/MakeWidget.styles.tsx
@@ -8,7 +8,6 @@ import ActionButtons from "./subcomponents/ActionButtons/ActionButtons";
 import AddressInput from "./subcomponents/AddressInput/AddressInput";
 import { ExpirySelector } from "./subcomponents/ExpirySelector/ExpirySelector";
 import InfoSection from "./subcomponents/InfoSection/InfoSection";
-import InputSection from "./subcomponents/InputSection/InputSection";
 import OrderTypeSelector from "./subcomponents/OrderTypeSelector/OrderTypeSelector";
 import { RateField } from "./subcomponents/RateField/RateField";
 
@@ -37,15 +36,6 @@ export const StyledOrderTypeSelector = styled(OrderTypeSelector)`
 }
 `;
 
-export const StyledRateField = styled(RateField)`
-  margin-inline: auto;
-  padding-block-start: 0.25rem;
-
-  @media ${breakPoints.phoneOnly} {
-    width: auto;
-  }
-`;
-
 export const OrderTypeSelectorAndExpirySelectorWrapper = styled.div`
   display: flex;
   justify-content: space-between;
@@ -99,3 +89,12 @@ export const TooltipContainer = styled.div`
   flex-direction: column;
   position: relative;
 `;
+
+export const StyledRateField = styled(RateField)`
+  margin-inline: auto;
+  margin-block-start: 1rem;
+
+  @media ${breakPoints.phoneOnly} {
+    width: auto;
+  }
+`;
diff --git a/src/components/@widgets/MakeWidget/MakeWidget.tsx b/src/components/@widgets/MakeWidget/MakeWidget.tsx
@@ -469,19 +469,6 @@ const MakeWidget: FC = () => {
         />
       </OrderTypeSelectorAndExpirySelectorWrapper>
 
-      {makerTokenInfo &&
-        takerTokenInfo &&
-        !hasMissingMakerAmount &&
-        !hasMissingTakerAmount && (
-          <StyledRateField
-            token1={makerTokenInfo.symbol}
-            token2={takerTokenInfo.symbol}
-            rate={new BigNumber(takerAmount).dividedBy(
-              new BigNumber(makerAmount)
-            )}
-          />
-        )}
-
       {orderType === OrderType.private && (
         <TooltipContainer>
           <StyledAddressInput
@@ -524,6 +511,20 @@ const MakeWidget: FC = () => {
         onBackButtonClick={handleBackButtonClick}
         onActionButtonClick={handleActionButtonClick}
       />
+
+      {makerTokenInfo &&
+        takerTokenInfo &&
+        !hasMissingMakerAmount &&
+        !hasMissingTakerAmount && (
+          <StyledRateField
+            token1={makerTokenInfo.symbol}
+            token2={takerTokenInfo.symbol}
+            rate={new BigNumber(takerAmount).dividedBy(
+              new BigNumber(makerAmount)
+            )}
+          />
+        )}
+
       <Overlay
         onClose={() => setShowTokenSelectModal(null)}
         isHidden={!showTokenSelectModal}

diff --git a/src/components/@widgets/MakeWidget/subcomponents/AddressInput/AddressInput.styles.tsx b/src/components/@widgets/MakeWidget/subcomponents/AddressInput/AddressInput.styles.tsx
@@ -27,7 +27,7 @@ export const Input = styled(TextInput)`
     ${({ hasError, theme }) =>
       hasError ? `border-color: ${theme.colors.red}` : ""};
 
-    border-radius: 2px;
+    border-radius: 0.5rem;
     padding-right: 3.5rem;
     padding-left: 1rem;
     height: 100%;

diff --git a/src/components/@widgets/MakeWidget/subcomponents/ExpirySelector/ExpirySelector.styles.tsx b/src/components/@widgets/MakeWidget/subcomponents/ExpirySelector/ExpirySelector.styles.tsx
@@ -48,6 +48,7 @@ export const Input = styled.input`
   all: unset;
 
   ${SelectorStyle};
+  ${InputOrButtonBorderStyleType2};
 
   width: 2.5rem;
   text-align: center;
@@ -60,6 +61,8 @@ export const Input = styled.input`
 `;
 
 export const StyledDropdown = styled(Dropdown)`
+  margin-inline-start: -1px;
+
   ${SelectButtonText} {
     max-width: 7rem;
   }

diff --git a/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.styles.tsx b/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.styles.tsx
@@ -28,7 +28,8 @@ export const Wrapper = styled.div<{ isButton: boolean }>`
   font-family: ${fontWide};
   font-weight: 500;
   text-transform: uppercase;
-  font-size: 0.875rem;
+  font-size: 1rem;
+  opacity: 0.75;
   ${({ isButton, theme }) =>
     isButton
       ? LargePillButtonStyle
@@ -42,7 +43,7 @@ export const Wrapper = styled.div<{ isButton: boolean }>`
 
       ${Rate} {
         font-family: ${fontMono};
-        font-size: 0.875rem;
+        font-size: 1rem;
         font-weight: 500;
       }
     `};

diff --git a/src/components/Dropdown/Dropdown.styles.tsx b/src/components/Dropdown/Dropdown.styles.tsx
@@ -13,7 +13,6 @@ const ButtonStyle = css`
   justify-content: space-between;
   position: relative;
   border: 1px solid ${({ theme }) => theme.colors.borderGrey};
-  border-inline-start: unset;
   width: 100%;
   height: var(--dropdown-button-height);
   padding: 0 0.75rem;
@@ -165,7 +164,7 @@ export const NativeSelect = styled.select`
 export const Wrapper = styled.div`
   position: relative;
 
-  --dropdown-button-height: 3.75rem;
+  --dropdown-button-height: 3rem;
   --dropdown-options-wrapper-padding: 0.5rem;
 
   ${NativeSelectWrapper} {

diff --git a/src/components/SettingsPopover/SettingsPopover.styles.tsx b/src/components/SettingsPopover/SettingsPopover.styles.tsx
@@ -64,6 +64,11 @@ export const ThemeButton = styled.button<ButtonStyleProps>`
       : props.theme.colors.darkSubText};
   background-color: ${(props) =>
     props.$isActive ? props.theme.colors.borderGrey : "transparent"};
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 `;
 
 type LocaleContainerType = {

diff --git a/src/components/SettingsPopover/SettingsPopover.tsx b/src/components/SettingsPopover/SettingsPopover.tsx
@@ -79,6 +79,7 @@ const SettingsPopover = ({
             {t("common.system")}
           </ThemeButton>
           <ThemeButton
+            disabled
             $isActive={selectedTheme === "light"}
             onClick={() => handleThemeButtonClick("light")}
           >

diff --git a/src/components/TokenSelect/TokenSelect.styles.tsx b/src/components/TokenSelect/TokenSelect.styles.tsx
@@ -90,20 +90,22 @@ export const MaxButtonStyle = css`
   position: relative;
   bottom: 1px;
   align-self: center;
-  border-radius: 0.125rem;
-  font-family: Verdana, sans-serif;
-  font-weight: 600;
+  border-radius: 0.25rem;
+  font-family: ${fontWide};
+  font-weight: 500;
   font-size: 0.75rem;
   line-height: 1;
-  background-color: ${(props) => props.theme.colors.lightGrey};
-  color: ${(props) => props.theme.colors.black};
-  opacity: 0.6;
+  padding: 0.25rem 0.5rem;
+  background-color: ${(props) => props.theme.colors.darkBlue};
+  color: ${(props) => props.theme.colors.lightGrey};
+  opacity: 1;
 
   ${BorderlessButtonStyle}
 
   &:hover,
   &:focus {
-    background-color: ${(props) => props.theme.colors.white};
+    background-color: ${(props) => props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.white};
     opacity: 1;
   }
 `;
@@ -112,10 +114,7 @@ export const MaxButton = styled.button`
   ${MaxButtonStyle};
 
   width: ${() => (isActiveLanguageLogographic() ? "1.75rem" : "auto")};
-  padding: 0.125rem;
-  text-transform: uppercase;
-  letter-spacing: ${() => (isActiveLanguageLogographic() ? 0 : "0.0625rem")};
-  font-size: ${() => (isActiveLanguageLogographic() ? "0.75rem" : "0.5rem")};
+  font-size: ${() => (isActiveLanguageLogographic() ? "0.75rem" : "0.6875rem")};
 `;
 
 export const InfoLabel = styled.div`

diff --git a/src/hooks/useSystemTheme.ts b/src/hooks/useSystemTheme.ts
@@ -19,7 +19,9 @@ const useSystemTheme = () => {
     };
   }, []);
 
-  return systemTheme;
+  // TOOD: Enable when light mode is ready
+  return "dark" as ThemeType;
+  // return systemTheme;
 };
 
 export default useSystemTheme;
diff --git a/src/style/sizes.ts b/src/style/sizes.ts
@@ -4,6 +4,6 @@ export const sizes = {
   toolbarMaxHeight: "44rem",
   tradeContainerPadding: "3.75rem",
   tradeContainerMobilePadding: "2rem",
-  widgetSize: "34rem",
+  widgetSize: "37.5rem",
   widgetMobileSize: "24rem",
 };
diff --git a/src/styled-components/Select/Select.tsx b/src/styled-components/Select/Select.tsx
@@ -16,7 +16,7 @@ export const SelectElementStyle = css`
 
 export const SelectWrapper = styled.div`
   display: flex;
-  height: 3.75rem;
+  height: 3rem;
   width: fit-content;
   color: ${({ theme }) =>
     theme.name === "dark" ? theme.colors.white : theme.colors.primary};
@@ -31,7 +31,7 @@ export const SelectLabel = styled.div`
   border-top-left-radius: 0.75rem;
   border-bottom-left-radius: 0.75rem;
   border-inline-end: unset;
-  padding-inline: 1.25rem 0.25rem;
+  padding-inline: 0.5rem;
   color: ${({ theme }) => theme.colors.lightGrey};
   background: ${({ theme }) => theme.colors.darkGrey};