Frontend revamp addaccount

frontends/web/src/routes/account/add/components/coin-dropdown.module.css → frontends/web/src/components/dropdown/coin-dropdown.module.css

@@ -1,3 +1,7 @@
+.container {
+    text-align: left;
+}
+
 .valueContainer {
     align-items: center;
     display: flex;
@@ -10,4 +14,9 @@
 
 .coinName {
     margin-left: 6px;
+}
+
+.container :global(.react-select__control) {
+    padding-bottom: 0;
+    padding-top: 0;
 }

frontends/web/src/routes/account/add/components/coin-dropdown.tsx → frontends/web/src/components/dropdown/coin-dropdown.tsx

@@ -45,6 +45,7 @@ export const CoinDropDown = ({
       isSearchable={false}
       placeholder={t('buy.info.selectPlaceholder')}
       classNamePrefix="react-select"
+      className={styles.container}
       value={options.find(option => option.value === value) || []}
       renderOptions={o => <Option props={o} />}
       onChange={(selected) => {

frontends/web/src/routes/account/add/components/steps.module.css → frontends/web/src/components/steps/steps.module.css

@@ -43,7 +43,7 @@
 
 .dot::before {
     background: var(--color-primary);
-    border: 4px solid var(--background-secondary);
+    border: 4px solid var(--background);
     border-radius: 50%;
     content: "";
     display: inline-block;
@@ -60,7 +60,7 @@
 }
 
 .dot::after {
-    border-top: 5px solid var(--background-secondary);
+    border-top: 5px solid var(--background);
     content: "";
     position: absolute;
     top: 6px;

frontends/web/src/routes/account/add/components/steps.tsx → frontends/web/src/components/steps/steps.tsx

@@ -7,13 +7,19 @@ import style from './steps.module.css';
 type TStepsProps = {
   current: number;
   children: ReactNode;
+  hidden?: boolean;
 };
 
 export const Steps = ({
   current,
-  children
+  children,
+  hidden,
 }: TStepsProps) => {
-  let childrens = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];
+  const childrens = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];
+  if (hidden) {
+    return null;
+  }
+
   return (
     <div className={style.steps}>
       { childrens

frontends/web/src/routes/account/add/add-account.module.css

@@ -0,0 +1,39 @@
+.manageContainer {
+    display: flex;
+    flex-basis: 100%;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+.title {
+    color: var(--color-default);
+    font-size: var(--size-large) !important;
+    font-weight: 400;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-default);
+    justify-content: space-between;
+    min-height: 90px;
+}
+
+.accountNameInput {
+    margin-bottom: 0;
+}
+
+.successMessage {
+    color: var(--color-secondary);
+}
+
+.successMessage strong {
+    color: var(--color-default);
+}
+
+@media screen and (max-width: 640px) {
+    .button {
+        margin-left: var(--space-quarter);
+    }
+}