creativetimofficial / now-ui-kit-react Goto Github PK

What is your enhancement?

I tried using react-router-hash-link, but the scrolling is not smooth despite following the instructions in their docs. It just changes sections instantly. Do you have any advice on how I can get smooth scrolling to anchor locations with this template?

import { HashLink } from 'react-router-hash-link';

<Button
                className="btn-round"
                color="info"
                size="lg"
                to="#about"
                tag={HashLink}
              >
                <h3 className="m-0">Learn More</h3>
</Button>

<div id="about">Test</div>

node version 12, latest Chrome browser

Version

1.5.1

Reproduction link

https://github.com/creativetimofficial/now-ui-kit-react

Operating System

Windows

Device

Lenovo

Browser & Version

Chrome

Steps to reproduce

1. Clone the now-ui-kit-react repo from github page, or from the https://www.creative-tim.com/product/now-ui-kit-react page.
2. Open a terminal where the project folder is located.
3. run npm install

What is expected?

It should start loading node_modules folder with the expected modules inside.

What is actually happening?

It returns the error below:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.5.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/react-datetime
npm ERR! react-datetime@"3.1.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\X\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\X\AppData\Local\npm-cache_logs\2022-08-04T12_31_35_183Z-debug-0.log

Solution

First, running this command:
=> npm install --legacy-peer-deps
Then, normal npm install
=> npm install

it will give you this response:
added 1810 packages, and audited 1811 packages in 4m
209 packages are looking for funding
run npm fund for details
12 high severity vulnerabilities

=> npm start

Additional comments

When I try to dynamically replace the background image in ProfilePageHeader the image is always blurry, this is also true for images that are already in the public folder.

Here is a snippet of the changes =>

<div className="page-header-image" style={{ backgroundImage: props.data.blog_picture_context }} ref={pageHeader} ></div>

This will simply render a blurry image, please let me know if I need to post more of the code as a point of reference.

Hi,

I am new to Now UI and I am having trouble editing some titles. For example, I would like to change the capitalization of the NavarBrand component I have in my Navegation bar. I have commented the text-transform field in the css but the text is still in upper case, how can I keep the format in which I put the string in the brand component?

Thanks in advance.