Стилевые доработки кнопок

This commit is contained in:
Никита Потапов 2024-01-06 14:44:55 +04:00
parent 90c378115d
commit a55fd6bc39
9 changed files with 133 additions and 10 deletions

16
data.json Normal file
View File

@ -0,0 +1,16 @@
{
"users": [
{
"id": 1,
"name": "Никита",
"surname": "Потапов",
"birthday": "17.02.2003",
"city": "г. Ульяновск",
"avatarImg": null,
"username": "ns.potapov",
"password": "123456",
"isAdmin": true,
"status": null
}
]
}

26
package-lock.json generated
View File

@ -11,10 +11,11 @@
"bootstrap": "^5.3.2", "bootstrap": "^5.3.2",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-bootstrap": "^2.9.1", "react-bootstrap": "^2.9.2",
"react-bootstrap-icons": "^1.10.3", "react-bootstrap-icons": "^1.10.3",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.19.0" "react-router-dom": "^6.19.0",
"universal-cookie": "^6.1.1"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.15", "@types/react": "^18.2.15",
@ -1109,6 +1110,11 @@
"@types/responselike": "^1.0.0" "@types/responselike": "^1.0.0"
} }
}, },
"node_modules/@types/cookie": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.4.tgz",
"integrity": "sha512-7z/eR6O859gyWIAjuvBWFzNURmf2oPBmJlfVWkwehU5nzIyjwBsTh7WMmEEV4JFnHuQ3ex4oyTvfKzcyJVDBNA=="
},
"node_modules/@types/http-cache-semantics": { "node_modules/@types/http-cache-semantics": {
"version": "4.0.4", "version": "4.0.4",
"resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
@ -2047,7 +2053,6 @@
"version": "0.5.0", "version": "0.5.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
"dev": true,
"engines": { "engines": {
"node": ">= 0.6" "node": ">= 0.6"
} }
@ -6026,9 +6031,9 @@
} }
}, },
"node_modules/react-bootstrap": { "node_modules/react-bootstrap": {
"version": "2.9.1", "version": "2.9.2",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.1.tgz", "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.2.tgz",
"integrity": "sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==", "integrity": "sha512-a36B+EHsAI/aH+ZhXNILBFnqscE3zr10dWmjBmfhIb2QR7KSXJiGzYd6Faf/25G8G7/CP9TCL2B0WhUBOD2UBQ==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.22.5", "@babel/runtime": "^7.22.5",
"@restart/hooks": "^0.4.9", "@restart/hooks": "^0.4.9",
@ -7190,6 +7195,15 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/universal-cookie": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-6.1.1.tgz",
"integrity": "sha512-33S9x3CpdUnnjwTNs2Fgc41WGve2tdLtvaK2kPSbZRc5pGpz2vQFbRWMxlATsxNNe/Cy8SzmnmbuBM85jpZPtA==",
"dependencies": {
"@types/cookie": "^0.5.1",
"cookie": "^0.5.0"
}
},
"node_modules/universalify": { "node_modules/universalify": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",

View File

@ -5,7 +5,8 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"start": "vite", "start": "vite",
"dev": "npm-run-all --parallel start", "fake-server": "json-server -p 8081 -w data.json",
"dev": "npm-run-all --parallel start fake-server",
"serve": "http-server -p 80 ./dist/", "serve": "http-server -p 80 ./dist/",
"build": "vite build", "build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
@ -16,10 +17,11 @@
"bootstrap": "^5.3.2", "bootstrap": "^5.3.2",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-bootstrap": "^2.9.1", "react-bootstrap": "^2.9.2",
"react-bootstrap-icons": "^1.10.3", "react-bootstrap-icons": "^1.10.3",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.19.0" "react-router-dom": "^6.19.0",
"universal-cookie": "^6.1.1"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.15", "@types/react": "^18.2.15",

View File

@ -1,6 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Container, Navbar } from 'react-bootstrap'; import { Container, Navbar } from 'react-bootstrap';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import HeaderUserMenu from '../headerusermenu/headerusermenu.jsx';
import './header.css'; import './header.css';
const Header = ({ routes }) => { const Header = ({ routes }) => {
@ -19,6 +20,7 @@ const Header = ({ routes }) => {
неконтакте неконтакте
</span> </span>
</Navbar.Brand> </Navbar.Brand>
<HeaderUserMenu />
</Container> </Container>
<div className='page-title position-absolute w-100 text-center'> <div className='page-title position-absolute w-100 text-center'>
{currentPage.title} {currentPage.title}

View File

@ -0,0 +1,29 @@
.headerusermenu__dropdown * {
--bs-dropdown-bg: var(--dark-background-color);
z-index: 1000;
}
.headerusermenu__dropdown .dropdown-toggle {
--bs-btn-bg: var(--dark-background-color);
--bs-btn-border-color: var(--dark-background-color);
--bs-btn-hover-border-color: var(--light-background-color);
--bs-btn-hover-bg: var(--dark-background-color);
--bs-btn-active-bg: var(--bs-btn-hover-bg);
--bs-btn-active-border-color: var(--light-background-colorr);
z-index: 1000;
}
.headerusermenu__dropdownitem:hover svg {
fill: black;
}
@media (prefers-color-scheme: dark) {
.headerusermenu__dropdown .dropdown-toggle {
--bs-btn-bg: var(--light-background-color);
--bs-btn-border-color: var(--light-background-color);
--bs-btn-hover-border-color: var(--alternative-font-color);
--bs-btn-hover-bg: var(--light-background-color);
--bs-btn-active-bg: var(--bs-btn-hover-bg);
--bs-btn-active-border-color: var(--alternative-font-color);
}
}

View File

@ -0,0 +1,52 @@
import { Dropdown } from 'react-bootstrap';
import PropTypes from "prop-types";
import React from 'react';
import { Person, Gear, BoxArrowRight } from 'react-bootstrap-icons';
import './headerusermenu.css';
// eslint-disable-next-line react/display-name
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href="#"
ref={ref}
onClick={(e) => {
e.preventDefault();
onClick(e);
}}
className='btn dropdown-toggle d-flex align-items-center'
>
{children}
</a>
));
CustomToggle.propTypes = {
children: PropTypes.node,
onClick: PropTypes.func
};
const HeaderUserMenu = () => {
return (
<Dropdown className='headerusermenu__dropdown'>
<Dropdown.Toggle as={CustomToggle} className='d-flex align-items-center'>
<img src="/src/assets/gachi.jpg" className="user-avatar avatar-small img-fluid rounded-circle" />
<div className="post-author-name px-2 d-none d-md-block">
Никита Потапов
</div>
</Dropdown.Toggle>
<Dropdown.Menu className='dropdown-menu-end'>
<Dropdown.Item href='#' className='headerusermenu__dropdownitem d-flex align-items-center d-sm-none'>
<Person className='me-2' />Моя страница
</Dropdown.Item>
<Dropdown.Item href='#' className='headerusermenu__dropdownitem d-flex align-items-center'>
<Gear className='me-2' />Настройки
</Dropdown.Item>
<Dropdown.Item href='#' className='headerusermenu__dropdownitem d-flex align-items-center'>
<BoxArrowRight className='me-2' />Выход
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
};
export default HeaderUserMenu;

View File

@ -9,4 +9,9 @@
#post-publication-button { #post-publication-button {
--bs-btn-bg: var(--dark-background-color); --bs-btn-bg: var(--dark-background-color);
--bs-btn-border-color: var(--dark-background-color); --bs-btn-border-color: var(--dark-background-color);
--bs-btn-hover-bg: var(--light-background-color);
--bs-btn-hover-color: var(--alternative-font-color);
--bs-btn-hover-border-color: var(--alternative-font-color);
--bs-btn-active-bg: var(--light-background-color);
--bs-btn-active-border-color: var(--alternative-font-color);
} }

View File

@ -0,0 +1,3 @@
.user-profile {
--bs-border-color: var(--alternative-font-color);
}

View File

@ -4,7 +4,7 @@ import { People, Calendar as Calendar, GeoAlt } from 'react-bootstrap-icons';
const UserProfileBlock = () => { const UserProfileBlock = () => {
return ( return (
<> <>
<div className="user-profile p-3 mb-2 mb-sm-4 w-100 d-flex flex-column flex-sm-row border rounded-2 border-dark"> <div className="user-profile p-3 mb-2 mb-sm-4 w-100 d-flex flex-column flex-sm-row border rounded-2">
<div className='d-flex align-items-center justify-content-center me-0 me-sm-3 mb-3 mb-sm-0'> <div className='d-flex align-items-center justify-content-center me-0 me-sm-3 mb-3 mb-sm-0'>
<img src="/src/assets/gachi.jpg" className="user-photo rounded-2 img-fluid" /> <img src="/src/assets/gachi.jpg" className="user-photo rounded-2 img-fluid" />
</div> </div>