apps/web: remove elements components

define global elements css

apps/web/components/Form.jsx

@@ -1,6 +1,5 @@
 import styles from './Form.module.scss';
 import { publicRuntimeConfig } from '@/config/runtime';
-import { Button, Error, Input } from '@/elements';
 import axios from 'axios';
 import { useState } from 'react';
 
@@ -8,7 +7,6 @@ const { APP_BASE_PATH } = publicRuntimeConfig;
 
 export function Form() {
   const [hasError, setHasError] = useState(false);
-  const error = hasError ? <Error>Неверный логин или пароль</Error> : null;
 
   return (
     <form
@@ -34,10 +32,10 @@ export function Form() {
           });
       }}
     >
-      <Input name="login" type="text" placeholder="Логин" required autoComplete="on" />
-      <Input name="password" type="password" placeholder="Пароль" required autoComplete="on" />
-      {error}
-      <Button>Войти</Button>
+      <input name="login" type="text" placeholder="Логин" required autoComplete="on" />
+      <input name="password" type="password" placeholder="Пароль" required autoComplete="on" />
+      {hasError ? <span className="error">Неверный логин или пароль</span> : null}
+      <button type="submit">Войти</button>
     </form>
   );
 }

apps/web/elements/Button.tsx

@@ -1,12 +0,0 @@
-/* eslint-disable react/button-has-type */
-import styles from './Button.module.css';
-
-type ButtonProps = JSX.IntrinsicElements['button'];
-
-export function Button({ children, ...props }: ButtonProps) {
-  return (
-    <button className={styles.btn} {...props}>
-      {children}
-    </button>
-  );
-}

apps/web/elements/Error.jsx

@@ -1,5 +0,0 @@
-import styles from './Error.module.css';
-
-export function Error({ children }) {
-  return <span className={styles.error}>{children}</span>;
-}

apps/web/elements/H.jsx

@@ -1,5 +0,0 @@
-import styles from './H.module.css';
-
-export function H3({ children }) {
-  return <h3 className={styles.h3}>{children}</h3>;
-}

apps/web/elements/Input.tsx

@@ -1,7 +0,0 @@
-import styles from './Input.module.css';
-
-type InputProps = JSX.IntrinsicElements['input'];
-
-export function Input(props: InputProps) {
-  return <input className={styles.input} {...props} />;
-}

apps/web/elements/index.js

@@ -1,5 +1 @@
-export * from './Button';
-export * from './Error';
-export * from './H';
-export * from './Input';
 export * from './Logo';

apps/web/styles/button.css

@@ -1,4 +1,4 @@
-.btn {
+button {
   background-color: var(--color-primary);
   font-family: Montserrat;
   border: 0;

apps/web/styles/globals.css

@@ -1 +1,5 @@
 @import 'node_modules/modern-normalize/modern-normalize.css';
+@import './button.css';
+@import './input.css';
+@import './h.css';
+@import './error.css';

apps/web/styles/h.css

@@ -1,4 +1,4 @@
-.h3 {
+h3 {
   color: var(--color-primary);
   font-family: Montserrat;
   font-weight: 700;

apps/web/styles/input.css

@@ -1,6 +1,6 @@
-.input {
+input {
   font-family: Montserrat;
-  border: 1px solid rgba(0,16,61,.12);
+  border: 1px solid rgba(0, 16, 61, 0.12);
   box-sizing: border-box;
   height: 40px;
   background: #fff;
@@ -10,7 +10,7 @@
   /* font-size: 15px; */
 }
 
-.input::placeholder {
+input::placeholder {
   color: var(--color-primary);
   filter: brightness(0.25);
   opacity: 0.9;