首頁 探索 說明
登入
Pocu
/
Hipstagram
關註 3
讚好 0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

favicon + logo added, loginError + Logout components created

pocu46 3 年之前
父節點
09d868d635
當前提交
de238daa05
共有 11 個文件被更改，包括 59 次插入 和 3 次删除
分割檢視 顯示文件統計
  1. 1 1
      hipstagram/public/index.html
  2. 二進制
      hipstagram/public/logo.png
  3. 二進制
      hipstagram/public/logo2.png
  4. 二進制
      hipstagram/public/logoFavicon.png
  5. 14 0
      hipstagram/src/Components/LoginError/LoginError.css
  6. 13 0
      hipstagram/src/Components/LoginError/LoginError.js
  7. 10 0
      hipstagram/src/Components/Logout/Logout.css
  8. 12 0
      hipstagram/src/Components/Logout/Logout.js
  9. 3 0
      hipstagram/src/Content/Login/Login.js
  10. 1 0
      hipstagram/src/Header/header.css
  11. 5 2
      hipstagram/src/Header/header.js

+ 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

二進制
hipstagram/public/logo.png
查看文件


二進制
hipstagram/public/logo2.png
查看文件


二進制
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>
 
     );