create createPool component, add: buttons, input field for numbers, h…

…eader for form #8
chainhackers · Oct 12, 2023 · 8affa24 · 8affa24
1 parent 82c98a5
commit 8affa24
Show file tree

Hide file tree

Showing 25 changed files with 442 additions and 144 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600&family=Roboto&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>

diff --git a/frontend/package.json b/frontend/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@rainbow-me/rainbowkit": "^1.1.1",
     "@vitejs/plugin-react-refresh": "^1.3.6",
+    "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^1.15.4",

diff --git a/frontend/public/assets/img/arrow_back.svg b/frontend/public/assets/img/arrow_back.svg
diff --git a/frontend/src/assets/react.svg → frontend/public/assets/react.svg b/frontend/src/assets/react.svg → frontend/public/assets/react.svg
diff --git a/frontend/src/App.css b/frontend/src/App.css
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,39 +1,19 @@
-import { useState } from 'react';
-import reactLogo from './assets/react.svg';
-import viteLogo from '/vite.svg';
-import './index.scss';
-import './App.css';
 import '@rainbow-me/rainbowkit/styles.css';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import VersionInfo from './components/versionInfo/VersionInfo';
+import CreatePool from './components/createPool/CreatePool';
 
 function App() {
-  const [count, setCount] = useState(0);
   const versionGitTag = import.meta.env.VITE_REACT_APP_GIT_TAG;
   const gitDate = import.meta.env.VITE_REACT_APP_GIT_DATE;
 
   console.log('VITE_REACT_APP_GIT_TAG - ', versionGitTag);
   console.log('VITE_REACT_APP_GIT_DATE - ', gitDate);
 
   return (
-    <div className='app appBox'>
-      <div className='logoBox'>
-        <a href='https://vitejs.dev' target='_blank' rel='noreferrer'>
-          <img src={viteLogo} className='logo' alt='Vite logo' />
-        </a>
-        <a href='https://react.dev' target='_blank' rel='noreferrer'>
-          <img src={reactLogo} className='logo react' alt='React logo' />
-        </a>
-      </div>
-      <h1>New</h1>
-      <div className='card'>
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className='read-the-docs'>Click on the Vite and React logos to learn more</p>
+    <div className='app'>
       <ConnectButton />
+      <CreatePool />
       {versionGitTag && gitDate && <VersionInfo version={versionGitTag} versionDate={gitDate} />}
     </div>
   );

diff --git a/frontend/src/components/UI/buttonPrimary/ButtonPrimary.module.scss b/frontend/src/components/UI/buttonPrimary/ButtonPrimary.module.scss
@@ -0,0 +1,66 @@
+.button {
+  position: relative;
+  min-height: 60px;
+  border: none;
+  border-radius: 8px;
+  padding: 16px 20px;
+  color: var(--dark-on-primary);
+  background-color: var(--accent-color);
+  font-size: 22px;
+  line-height: 1.27;
+  font-weight: 500;
+  width: 100%;
+  cursor: pointer;
+
+  &::after {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    visibility: hidden;
+    display: block;
+    z-index: 2;
+    border-radius: 8px;
+    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, visibility 0.2s ease-in-out;
+  }
+
+  &:hover:not([disabled])::after {
+    opacity: 1;
+    visibility: visible;
+    background-color: rgba(56, 30, 114, 0.08);
+    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, visibility 0.2s ease-in-out;
+  }
+
+  &:active:not([disabled])::after {
+    opacity: 1;
+    visibility: visible;
+    background-color: rgba(56, 30, 114, 0.16);
+    color: rgba(var(--dark-on-primary-rgb), 0.38);
+  }
+
+  &:disabled {
+    cursor: auto;
+    background-color: rgba(230, 224, 233, 0.12);
+  }
+
+  &:active:not([disabled]) &__inner {
+    opacity: 0.38;
+    z-index: 3;
+  }
+
+  &:disabled &__inner {
+    color: var(--neon-silver);
+    opacity: 0.38;
+    z-index: 3;
+  }
+
+  &.styles_inherit {
+    width: inherit;
+    height: inherit;
+    min-height: inherit;
+    border-radius: inherit;
+  }
+}
diff --git a/frontend/src/components/UI/buttonPrimary/ButtonPrimary.tsx b/frontend/src/components/UI/buttonPrimary/ButtonPrimary.tsx
@@ -0,0 +1,24 @@
+import cn from 'classnames';
+import styles from './ButtonPrimary.module.scss';
+import { RefObject } from 'react';
+
+export interface IButtonPrimary extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  btnRef?: RefObject<HTMLButtonElement>;
+  children: React.ReactNode;
+  stylesInherit?: boolean;
+}
+
+export default function ButtonPrimary(props: IButtonPrimary) {
+  const { btnRef, children, stylesInherit = false, ...btnProps } = props;
+
+  return (
+    <button
+      type='button'
+      className={cn(styles.button, stylesInherit && styles.styles_inherit)}
+      ref={btnRef}
+      {...btnProps}
+    >
+      <span className={styles.button__inner}>{children}</span>
+    </button>
+  );
+}
diff --git a/frontend/src/components/UI/buttonSm/ButtonSm.module.scss b/frontend/src/components/UI/buttonSm/ButtonSm.module.scss
@@ -0,0 +1,66 @@
+.button {
+  position: relative;
+  min-height: 36px;
+  border: none;
+  border-radius: 8px;
+  padding: 8px 12px;
+  color: #fff;
+  background-color: #BF0021;
+  font-size: 14px;
+  line-height: 1.428;
+  font-weight: 400;
+  width: auto;
+  cursor: pointer;
+
+  &::after {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    visibility: hidden;
+    display: block;
+    z-index: 2;
+    border-radius: 8px;
+    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, visibility 0.2s ease-in-out;
+  }
+
+  &:hover:not([disabled])::after {
+    opacity: 1;
+    visibility: visible;
+    background-color: rgba(var(--disabled-bg-rgb), 0.08);
+    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, visibility 0.2s ease-in-out;
+  }
+
+  &:active:not([disabled])::after {
+    opacity: 1;
+    visibility: visible;
+    background-color: rgba(var(--disabled-bg-rgb), 0.16);
+  }
+
+  &:active:not([disabled]) &__inner {
+    color: rgba(255, 255, 255, 0.38);
+    opacity: 0.38;
+    z-index: 3;
+  }
+
+  &:disabled {
+    cursor: auto;
+    background-color: rgba(var(--disabled-bg-rgb), 0.12);
+  }
+
+  &:disabled &__inner {
+    color: var(--neon-silver);
+    opacity: 0.38;
+    z-index: 3;
+  }
+
+  &.styles_inherit {
+    width: inherit;
+    height: inherit;
+    min-height: inherit;
+    border-radius: inherit;
+  }
+}
diff --git a/frontend/src/components/UI/buttonSm/ButtonSm.tsx b/frontend/src/components/UI/buttonSm/ButtonSm.tsx
@@ -0,0 +1,19 @@
+import styles from './ButtonSm.module.scss';
+import { RefObject } from 'react';
+
+interface IButtonSm extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  btnRef?: RefObject<HTMLButtonElement>;
+  children: React.ReactNode;
+}
+
+function ButtonSm(props: IButtonSm) {
+  const { btnRef, children, ...btnProps } = props;
+
+  return (
+    <button type='button' className={styles.button} ref={btnRef} {...btnProps}>
+      <span className={styles.button__inner}>{children}</span>
+    </button>
+  );
+}
+
+export default ButtonSm;
diff --git a/frontend/src/components/createPool/CreatePool.module.scss b/frontend/src/components/createPool/CreatePool.module.scss
@@ -0,0 +1,23 @@
+.create_pool {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__box {
+    max-width: 920px;
+    width: 100%;
+    padding: 24px;
+    margin-top: 32px;
+    background-color: #1B1B1F;
+    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+    border-radius: 16px;
+  }
+
+  &__form {
+    margin-top: 32px;
+    gap: 32px 0;
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/frontend/src/components/createPool/CreatePool.tsx b/frontend/src/components/createPool/CreatePool.tsx
@@ -0,0 +1,26 @@
+import styles from './CreatePool.module.scss';
+import ButtonPrimary from '../UI/buttonPrimary/ButtonPrimary';
+import FormHeader from './formHeader/FormHeader';
+import InputField from '../inputField/InputField';
+import FormElTitle from '../formElTitle/FormElTitle';
+
+function CreatePool() {
+  return (
+    <div className={styles.create_pool}>
+      <div className={styles.create_pool__box}>
+        <div className={styles.create_pool__header}>
+          <FormHeader linkText='Your assets' title='Create Pool' />
+        </div>
+        <form className={styles.create_pool__form}>
+          <div className={styles.create_pool__form_el}>
+            <FormElTitle>Operator fee</FormElTitle>
+            <InputField type='number' min={0} max={100} handleInputOnChange={() => {}} />
+          </div>
+          <ButtonPrimary>Preview</ButtonPrimary>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default CreatePool;
diff --git a/frontend/src/components/createPool/formHeader/FormHeader.module.scss b/frontend/src/components/createPool/formHeader/FormHeader.module.scss
@@ -0,0 +1,29 @@
+.form_header {
+  padding-bottom: 32px;
+  border-bottom: 1px solid #A3CDDC;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &__link {
+    color: #43474E;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+    letter-spacing: 0.25px;
+    display: flex;
+    align-items: center;
+
+    &_icon {
+      margin-right: 8px;
+    }
+  }
+
+  &__title {
+    font-size: 28px;
+    line-height: 1.28;
+    font-family: 'Roboto', sans-serif;
+    color: #FFF;
+    font-weight: 400;
+  }
+}