chore: continue with staking ui

src/components/form_input/index.module.scss

@@ -1,11 +1,13 @@
 @import "src/styles/sass.scss";
 
+$box-shadow: 4px 8px 24px 0 rgba(116, 81, 255, 0.28);
+
 .input {
   background-color: $color-white;
   border: 2px solid;
   border-color: #fff;
   border-radius: 8px;
-  box-shadow: 4px 8px 24px 0 rgba(116, 81, 255, 0.28);
+  box-shadow: $box-shadow;
   display: block;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@@ -25,4 +27,34 @@
   &::placeholder {
     color: $color-grey-2;
   }
+
+  &.withText {
+    box-shadow: none;
+    margin: 0;
+    padding-right: 32px;
+    width: 100%;
+
+    &:focus {
+      border-color: none;
+    }
+  }
+}
+
+.wrapper {
+  background-color: $color-white;
+  box-shadow: $box-shadow;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+
+  input {
+    flex: 1;
+  }
+}
+
+.rightText {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 0 16px;
 }

src/components/form_input/index.tsx

@@ -1,9 +1,30 @@
 import * as styles from "./index.module.scss";
 
-type Props = React.InputHTMLAttributes<HTMLInputElement>;
+type Props = React.InputHTMLAttributes<HTMLInputElement> & {
+  classNameWrapper?: string;
+  rightText?: string;
+};
 
-const FormInput = ({ className, ...props }: Props) => (
-  <input {...props} className={[styles.input, className].join(" ")} />
-);
+const FormInput = ({ className, rightText, ...props }: Props) => {
+  const input = (
+    <input
+      {...props}
+      className={[
+        styles.input,
+        rightText ? styles.withText : "",
+        className,
+      ].join(" ")}
+    />
+  );
+
+  if (!rightText) return input;
+
+  return (
+    <span className={styles.wrapper}>
+      {input}
+      {!!rightText && <span className={styles.rightText}>{rightText}</span>}
+    </span>
+  );
+};
 
 export default FormInput;

src/components/highlight-button/index.module.scss

@@ -32,4 +32,19 @@
   @include up-laptop {
     height: 45px;
   }
+
+  &.big {
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 0.005em;
+    line-height: 19px;
+    min-height: 48px;
+  }
+
+  &.pinkShadow {
+    &,
+    &:hover {
+      box-shadow: 4px 8px 24px 0 #fd247240;
+    }
+  }
 }

src/components/highlight-button/index.tsx

@@ -1,9 +1,20 @@
 import * as styles from "./index.module.scss";
 
-type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  pinkShadow?: boolean;
+  size?: "big" | "normal";
+};
 
-const HighlightButton = ({ className, ...props }: Props) => (
-  <button {...props} className={[styles.button, className || ""].join(" ")} />
+const HighlightButton = ({ className, pinkShadow, size, ...props }: Props) => (
+  <button
+    {...props}
+    className={[
+      styles.button,
+      size === "big" ? styles.big : "",
+      pinkShadow ? styles.pinkShadow : "",
+      className || "",
+    ].join(" ")}
+  />
 );
 
 export default HighlightButton;

src/screens/staking/components/staking_section/label.module.scss

@@ -0,0 +1,10 @@
+.label {
+  color: #25282d;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.002em;
+  line-height: 20px;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+}

src/screens/staking/components/staking_section/label.tsx

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "react";
+
+import * as styles from "./label.module.scss";
+
+type Props = HTMLAttributes<HTMLParagraphElement>;
+
+const Label = ({ className, ...props }: Props) => (
+  <span {...props} className={[styles.label, className || ""].join(" ")} />
+);
+
+export default Label;

src/screens/staking/components/staking_section/modal_base.module.scss

@@ -18,19 +18,32 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  justify-items: center;
-  margin-bottom: 12px;
+  margin-bottom: 32px;
 
   span {
     @include gradient-text($gradient-unnamed-1);
+
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 0.036em;
+    line-height: 24px;
+    text-align: left;
+  }
+
+  svg {
+    height: 15px;
+    transform: translateY(4px);
   }
 
   button {
+    align-items: center;
     background: transparent;
     border: none;
     cursor: pointer;
+    display: flex;
+    justify-content: center;
     outline: none;
-    padding: 2px 20px;
+    padding: 0;
   }
 }
 

src/screens/staking/components/staking_section/modal_base.tsx

@@ -2,6 +2,8 @@
 import { Modal } from "@mui/material";
 import type { ReactNode } from "react";
 
+import IconClose from "@src/components/icons/icon_cross_grey.svg";
+
 import * as styles from "./modal_base.module.scss";
 
 type Props = {
@@ -33,7 +35,9 @@ const ModalBase = ({ children, onClose, open, title }: Props) => {
       <div className={styles.wrapper}>
         <h2 className={styles.title}>
           {title && <span>{title}</span>}
-          <button onClick={onClose}>X</button>
+          <button onClick={onClose}>
+            <IconClose />
+          </button>
         </h2>
         {children}
       </div>

src/screens/staking/components/staking_section/networks_select.module.scss

@@ -5,9 +5,10 @@
   box-shadow:
     0 14px 64px -4px #0226e11f,
     0 8px 22px -6px #0226e11f;
-  margin: 8px;
+  height: 80px;
+  margin: 0;
   overflow: hidden;
-  width: 300px;
+  width: 100%;
 }
 
 .logo {
@@ -24,3 +25,23 @@
   gap: 20px;
   justify-content: flex-start;
 }
+
+.select {
+  height: 100%;
+  width: 100%;
+
+  :global(.MuiOutlinedInput-notchedOutline) {
+    background-color: transparent !important;
+    border: none;
+    outline-color: transparent !important;
+
+    &:hover {
+      background-color: transparent !important;
+      border: none !important;
+      border-color: transparent !important;
+      border-right-style: none !important;
+      box-shadow: none !important;
+      outline: none !important;
+    }
+  }
+}

src/screens/staking/components/staking_section/networks_select.tsx

@@ -1,5 +1,3 @@
-import { OutlinedInput } from "@mui/material";
-import FormControl from "@mui/material/FormControl";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 
@@ -11,6 +9,8 @@ import * as styles from "./networks_select.module.scss";
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 8;
 
+const IconComponent = () => null;
+
 const MenuProps = {
   PaperProps: {
     style: {
@@ -20,25 +20,24 @@ const MenuProps = {
   },
 };
 
+// @TODO: Get this from context (so testnets are filtered out)
 const networks = Object.values(ChainId).sort();
 
 type NetworkItemProps = {
   value: ChainId;
 };
 
 const NetworkItem = ({ value }: NetworkItemProps) => {
-  const imgSrc = (() => {
-    const networkName = chainIdToNetworkKey[value];
-
-    if (!networkName) return "";
+  const networkName = chainIdToNetworkKey[value];
+  const networkInfo = networkName ? getNetworkInfo(networkName) : "";
 
-    return getNetworkInfo(networkName).image;
-  })();
+  const imgSrc = networkInfo ? networkInfo.image : "";
+  const name = networkInfo ? networkInfo.name : "";
 
   return (
     <div className={styles.row}>
       {!!imgSrc && <img alt="" className={styles.logo} src={imgSrc} />}
-      <div>{value}</div>
+      <div>{name}</div>
     </div>
   );
 };
@@ -54,10 +53,11 @@ const NetworksSelect = ({ setValue, value }: Props) => {
   };
 
   return (
-    <FormControl className={styles.control}>
+    <div className={styles.control}>
       <Select
+        IconComponent={IconComponent}
         MenuProps={MenuProps}
-        input={<OutlinedInput />}
+        className={styles.select}
         onChange={handleChange}
         value={value as string}
       >
@@ -67,7 +67,7 @@ const NetworksSelect = ({ setValue, value }: Props) => {
           </MenuItem>
         ))}
       </Select>
-    </FormControl>
+    </div>
   );
 };
 

src/screens/staking/components/staking_section/staking_modal.module.scss

@@ -1,11 +1,40 @@
-.button {
+@import "src/styles/sass.scss";
+
+.wrapper {
+  display: flex;
   flex: 1;
-  padding: 12px;
+  flex-direction: column;
+  gap: 24px;
+
+  @include up-laptop {
+    min-width: 500px;
+  }
 }
 
-.wrapper {
+.row {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  gap: 12px;
+  justify-content: space-between;
+}
+
+.apy {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+}
+
+.group {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: 12px;
 }
+
+.input {
+  margin: 0;
+  width: 100%;
+}