Browse Source

favicon + logo added, loginError + Logout components created

pocu46 3 years ago
parent
commit
de238daa05

+ 1 - 1
hipstagram/public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+    <link rel="icon" href="logoFavicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

BIN
hipstagram/public/logo.png


BIN
hipstagram/public/logo2.png


BIN
hipstagram/public/logoFavicon.png


+ 14 - 0
hipstagram/src/Components/LoginError/LoginError.css

@@ -0,0 +1,14 @@
+.login-error__wrapper {
+    background: rgb(236, 109, 136);
+    border: 2px solid #990808;
+    border-radius: 5px;
+    padding: 15px 35px;
+    margin: 15px 0;
+    text-align: center;
+    font-size: 21px;
+    color: #000000;
+}
+
+.login-error__wrapper b {
+    color: #a81111;
+}

+ 13 - 0
hipstagram/src/Components/LoginError/LoginError.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './LoginError.css';
+
+const LoginError = () => {
+    return (
+        <div className='login-error__wrapper'>
+            Invalid <br /> 
+            <b>Login</b> or <b>Password</b>
+        </div>
+    )
+}
+
+export default LoginError;

+ 10 - 0
hipstagram/src/Components/Logout/Logout.css

@@ -0,0 +1,10 @@
+.logout-wrapper {
+    background: cadetblue;
+    border: 2px solid #3578e5;
+    border-radius: 5px;
+    padding: 15px 35px;
+    margin: 15px 0;
+    text-align: center;
+    font-size: 26px;
+    color: #000000;
+}

+ 12 - 0
hipstagram/src/Components/Logout/Logout.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Logout.css';
+
+const Logout = () => {
+    return (
+        <div className='logout-wrapper'>
+            Logout
+        </div>
+    )
+}
+
+export default Logout;

+ 3 - 0
hipstagram/src/Content/Login/Login.js

@@ -2,6 +2,7 @@ import React, { useRef, useState } from 'react';
 import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 import { actionLogin } from '../../Actions/action_login';
+import LoginError from '../../Components/LoginError/LoginError';
 import './Login.css';
 
 const Login = ({onLogin=null}) => {          //деструктуризация объекта
@@ -24,6 +25,8 @@ const Login = ({onLogin=null}) => {          //деструктуризация
             <nav>
                 <NavLink to="/registration" >Registration</NavLink>
             </nav>
+
+            <LoginError />
         </div>
     )
 }

+ 1 - 0
hipstagram/src/Header/header.css

@@ -15,6 +15,7 @@
 .header img {
     margin-left: 26px;
     height: 80px;
+    width: 120px;
     border-radius: 5px;
 }
 

+ 5 - 2
hipstagram/src/Header/header.js

@@ -6,9 +6,12 @@ function Header() {
     return(
         <nav>
             <header className='header'>
-                <img src="Bruce_Willis01.jpg" />
+                {/* <img src="Bruce_Willis01.jpg" /> */}
+                <img src="logo.png" />
 
-                <NavLink to="/login">Login</NavLink>
+                <NavLink to="/login">
+                    Login Pocu46 ^
+                </NavLink>
             </header>
         </nav>
     );