React Text Too Big - javascript

I'm following Brad Traversy's Udemy tutorial currently.
I am currently following along on working on this page:
https://github.com/bradtraversy/devconnector_2.0/blob/master/client/src/components/posts/PostItem.js
For some reason, the text for the name and the body on my page "Posts" is showing up way bigger than it should. I compared it to my other page, "Developers", in which I used similar code, and it shows up as normal. I don't understand what I did differently. Below, I have attached my code for both pages, my CSS for the posts, and pictures of each page.
Please let me know if you need more information, or if anything I have typed is unclear.
Thank you so much in advance.
MY-1 CSS
/* Margin */
.m {
margin: 0.5rem;
}
.m-1 {
margin: 1rem;
}
.m-2 {
margin: 2rem;
}
.m-3 {
margin: 3rem;
}
.my {
margin: 0.5rem 0;
}
.my-1 {
margin: 1rem 0;
}
.my-2 {
margin: 2rem 0;
}
.my-3 {
margin: 3rem 0;
}
POSTS PAGE CSS
/* Posts Page */
.post-form .post-form-header {
background: var(--primary-color);
padding: 0.5rem;
}
.post {
display: grid;
grid-template-columns: 1fr 4fr;
grid-gap: 2rem;
align-items: center;
}
.post > div:first-child {
text-align: center;
}
.post img {
width: 100px;
}
.post .comment-count {
background: var(--light-color);
color: var(--primary-color);
padding: 0.1rem 0.2rem;
border-radius: 5px;
font-size: 0.8rem;
}
.post .post-date {
color: #aaa;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
POSTS PAGE CODE
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Moment from 'react-moment';
import { connect } from 'react-redux';
import authReducer from '../../reducers/auth';
const PostItem = ({
auth,
post: { _id, text, name, avatar, user, likes, comments, date },
}) => (
<div className='post bg-white p-1 my-1'>
<div>
<Link to={'/profile/' + user}>
<img className='round-img' src={avatar} alt='' />
</Link>
<a href='profile.html'>
<h4>{name}</h4>
</a>
</div>
<div>
<p className='my-1'>{text}</p>
<p className='post-date'>
Posted on <Moment format='YYYY/MM/DD'>{date}</Moment>
</p>
<button type='button' className='btn btn-light'>
<i className='fas fa-thumbs-up'></i>
<span> {likes.length > 0 && <span>{comments.length}</span>}</span>
</button>
<button type='button' className='btn btn-light'>
<i className='fas fa-thumbs-down'></i>
</button>
<Link to={'/post/' + _id} className='btn btn-primary'>
Discussion{' '}
{comments.length > 0 && (
<span className='comment-count'>{comments.length}</span>
)}
</Link>
{!auth.loading && user === auth.user._id && (
<button type='button' className='btn btn-danger'>
<i className='fas fa-times'></i>
</button>
)}
</div>
</div>
);
PostItem.propTypes = {
post: PropTypes.object.isRequired,
auth: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => ({
auth: state.auth,
});
export default connect(mapStateToProps, {})(PostItem);
DEVELOPERS PAGE CODE
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
const ProfileItem = ({
profile: {
user: { _id, name, avatar },
status,
company,
location,
skills,
},
}) => {
return (
<div className='profile bg-light'>
<img src={avatar} alt='' className='round-img' />
<div>
<h2>{name}</h2>
<p>
{status} {company && <span> at {company}</span>}
</p>
<p className='my-q'>{location && <span>{location}</span>}</p>
<Link to={`/profile/${_id}`} className='btn btn-primary'>
View Profile
</Link>
</div>
<ul>
{skills.slice(0, 4).map((skill, index) => (
<li key={index} className='text-primary'>
<i className='fas fa-check'></i>
{skill}
</li>
))}
</ul>
</div>
);
};
ProfileItem.propTypes = {
profile: PropTypes.object.isRequired,
};
export default ProfileItem;
POSTS PAGE IMAGE
DEVELOPERS PAGE IMAGE
STYLES APPLIED TO BODY

The text size on your 'Posts' page is being defined by the class my-1, here:
<p className='my-1'>{text}</p>
You haven't shared the CSS for that class, whether it's your own defined styling or something imported from a 3rd party, but that's the source of the problem.
You could either remove that class from this <p> element, or use the same my-q class that you've applied on the text in your 'Developers' page.

Related

Display background color based on selection of the menulink

Goal:
When you press one of the menulink, the classname 'active' should be applied next to classname 'default'
If you press another and new menu link, the previous classname 'active' should be removed and the new selected menulink should have 'active' next to classname 'default'.
In other words, one single 'active' only in the code.
Problem:
How do you solve it?
Info:
*Newbie in React JS
*Please take account that you might have many menulink.
Stackblitz:
https://stackblitz.com/edit/react-router-active-inline-style-single-empacx?file=src/App.js
Thank you!
import React from 'react';
import {
BrowserRouter as Router,
Routes,
Route,
NavLink,
} from 'react-router-dom';
import './style.css';
const Users = () => <div>Users</div>;
const Posts = () => <div>Posts</div>;
const App = () => {
return (
<div className="app">
<Router>
<div className="nav">
<div className="default">
<NavLink
to="users"
className={({ isActive }) =>
'' + (isActive ? ' action' : ' inAction')
}
>
Users
</NavLink>
</div>
<br />
<div className="default">
<NavLink
to="posts"
className={({ isActive }) =>
'' + (isActive ? ' action' : ' inAction')
}
>
Posts
</NavLink>
</div>
</div>
<Routes>
<Route path="users" element={<Users />} />
<Route path="posts" element={<Posts />} />
</Routes>
</Router>
</div>
);
};
export default App;
#import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Bree Serif';
}
body {
background: #f0f0f0;
}
a {
text-decoration: none;
}
.app {
background: #fff;
margin: 25px auto;
padding: 25px;
max-width: 800px;
width: 95%;
}
.nav {
margin-bottom: 25px;
}
.nav a {
border-radius: 4px;
padding: 6px 10px;
margin-right: 10px;
}
.nav a.active {
color: #fff;
background: #7600dc;
}
.nav a.inactive {
font-style: italic;
}
.action {
color: #fff;
background: #7600dc;
}
.inAction {
color: #545e6f;
background: #f0f0f0;
}
.active {
background-color: yellow;
}
.default {
padding-top: 10px;
padding-bottom: 10px;
}
Here is my attempt according to Drew Reese solution:
<NavLink
to="users"
className={({ isActive }) =>
'default' + (isActive ? ' active' : '')
}
children={({ isActive }) => {
return (
<div className={'' + (isActive ? ' action' : 'inAction')}>
Users
</div>
);
}}
></NavLink>
And in StackBlitz: https://stackblitz.com/edit/react-router-active-inline-style-single-arulrq?file=src%2FApp.js,src%2Fstyle.css
Some styling may differ...
If you are using NavLink, it has a property activeClassName where you can specify which class should be added when the link is active

Text appearing under NavBar -REACT

I don't know why when i click on the About icon (or other icons in the menu bar), I get the text under my NavBar instead of having it next to it.
The NavBar.jsx component:
import './NavBar.css'
import logo from "../Components/logo";
import { ITEMS } from "../Navigation";
import React from 'react'
export default function NavBar() {
return (
<div className="NavBar">
<img className="logo" />
<span className="textLogo">LOGO</span>
<div className ="NavbarList">
{ITEMS.map((item, i) => {
return (
<li key={i} className="row" id={window.location.pathname === item.href ? "active" : ""}
onClick={() => {window.location.pathname = item.href;}}>
<div id="icon">{item.icon}</div>
<div id="title">{item.title}</div>
</li>
);
})}
</div>
</div>
);
}
My NavBar.css :
.NavBar{
width: 15rem;
height: 100vh;
padding-top: 1rem;
padding-bottom: 1rem;
--tw-bg-opacity: 1;
background-color: rgb(35,37,79);
flex-direction: column;
gap: 1.25rem
}
.NavbarList{
padding-top:20px;
}
...
And here the picture of what i get (there are other icons above About):
(I'm not able to put all the css file, because it says "too many codes")

React color background on event

I use the npm package use-dark-mode as the name implies, it makes it possible to change the theme to light or dark, The problem is that I want to change the background-color of some blocks when changing the theme to dark, and vice versa, return the old color when I switch to light mode, for example, my block background is orange, I switch to dark mode, it turns red and when I switch to light mode, it returns old orange
App.js
import React from 'react';
import './App.css'
import Content from "./components/Content/Content";
import Dark_Mode from "./components/Dark Mode/Dark_Mode";
const App = () => {
return(
<div>
<Dark_Mode />
<Content />
</div>
);
};
export default App;
Content.jsx
import React from 'react';
import './style.css'
const Content = () => {
return (
<>
<div className={"content_container"}>
<h3>Hello from React.JS</h3>
</div>
</>
);
};
export default Content;
Dark_Mode.jsx
import React from 'react';
import useDarkMode from 'use-dark-mode';
const DarkModeToggle = () => {
const darkMode = useDarkMode(false);
return (
<div>
<button type="button" onClick={darkMode.disable}>
☀
</button>
<button type="button" onClick={darkMode.enable}>
☾
</button>
</div>
);
};
export default DarkModeToggle;
style.css
#import '../../App.css';
.content_container {
margin: auto;
width: 500px;
max-width: 100%;
background: orange;
}
.content_container h3 {
text-align: center;
}
App.css
body.light-mode {
background-color: #fff;
color: #333;
transition: background-color 0.3s ease;
}
body.dark-mode {
background-color: #1a1919;
color: #999;
}
:root {
--color-orange: orange;
}
As you can see, I have App.css when the theme changes, it changes the background of the <body>, I still have Content.jsx when switching theme I want to change the background of the block with the className content_container which is connected to style.css, In addition, you may have noticed that I tried to use global styles, but I failed. Finally, I would like to show a screenshot on the site for a clear understanding of everything.
You could give the root element a class on theme change and use css variables in root, but be class specific:
Dark_mode.jsx:
function setTheme(themeName) {
document.documentElement.classList.remove('light-theme', 'dark-theme');
document.documentElement.classList.add(themeName);
}
const DarkModeToggle = () => {
const activateDarkTheme = () => setTheme('dark-theme');
const activateLightTheme = () => setTheme('light-theme');
return (
<div>
<button type="button" onClick={activateDarkTheme}>
☀
</button>
<button type="button" onClick={activateLightTheme}>
☾
</button>
</div>
);
};
Styles:
:root, // this is used for the default theme, will be overwritten by other styles with classes because of specifity
:root.dark-theme {
--color-bg: #000;
}
:root.light-theme {
--color-bg: #fff;
}
I found a more convenient solution! although it is my fault, I was a little inattentive and did not study the documentation of this package that I use in my project, here is a simple solution
Content.jsx
import './Content.css'
import useDarkMode from 'use-dark-mode';
export default function Content () {
const { value } = useDarkMode(false);
return <div>
<div className={value ? 'Dark_Mode' : 'Light_Mode'}>
<h3>Hello from React.JS</h3>
</div>
</div>
}
Content.css
.Dark_Mode {
margin: auto;
max-width: 100%;
width: 400px;
height: 275px;
background-color: orange;
}
.Light_Mode {
margin: auto;
max-width: 100%;
width: 400px;
height: 275px;
background-color: rgb(24, 106, 199);
}

React styled-components not applying styles to custom styled components

I'm using react-styled-components to style some custom components in my React/AntDesign application but the styles are not applied to my application.
When I tried reproducing the component in a clean codesandbox.io project the styles were applied successfully.
While some styled-components in my project do work this doesn't, what could be interfering with styled-components?
Here's the code:
import React from "react";
import "antd/dist/antd.css";
import styled from "styled-components";
import { FaMale, FaFemale, FaChild, FaUserFriends } from "react-icons/fa";
import { MdChildFriendly } from "react-icons/md";
import { Row, Col, Modal, Button } from 'antd';
class App extends React.Component {
state = { visible: false };
showModal = () => {
this.setState({
visible: true,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
ProductBtn = styled.div`
box-shadow: 0 0 15px rgba(0,0,0,0.1);
border: 1px solid #eee;
padding: 16px;
text-align: center;
border-radius: 5px;
cursor: pointer;
background-color: #fff
p {
margin-bottom: 0;
margin-top: 5px;
font-weight: bold;
}
`;
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>New Transaction</Button>
<Modal
title="New transaction"
visible={this.state.visible}
nOk={this.handleCancel}
onCancel={this.handleCancel}
>
<Row gutter={[16, 16]}>
<Col span={8}>
<this.ProductBtn onClick={this.handleProductClicked}>
<FaUserFriends style={{ fontSize: '24px' }} />
<p>Add couple</p>
<small>$70.00</small>
</this.ProductBtn>
</Col>
...
</Row>
</Modal>
</div>
)
}
}
export default App;
This is how it should look and how it looks in CodeSandbox:
This is how it looks in my application, without the widget/button-like styling on the ProductBtn styled component:

Make cards and images the same size - how can I do it with CSS?

I'm using react. Material-ui is for Cards. For Grid I'm using CSS Grid Layout. So far it looks like this:
But my goal is something like this:
And I have 2 problems:
I want to have all these cards the same height (415px). I tried height: 415px on .BeerListingScroll-info-box but it doesn't work.
Images of bottles and kegs are diffrent in size [keg (80px x 160px) vs. bottle (80px x 317px)]. Is there any way to make them more similar in rendered size?
-
Code:
BeerListingScroll
import React, { Component } from 'react';
import ReduxLazyScroll from 'redux-lazy-scroll';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchBeers } from '../../actions/';
import BeersListItem from '../../components/BeersListItem';
import ProgressIndicator from '../../components/ProgressIndicator';
import './style.css';
class BeerListingScroll extends Component {
constructor(props) {
super(props);
this.loadBeers = this.loadBeers.bind(this);
}
loadBeers() {
const { skip, limit } = this.props.beers;
this.props.fetchBeers(skip, limit);
}
render() {
const { beersArray, isFetching, errorMessage, hasMore } = this.props.beers;
return (
<div className="container beers-lazy-scroll">
<ReduxLazyScroll
isFetching={isFetching}
errorMessage={errorMessage}
loadMore={this.loadBeers}
hasMore={hasMore}
>
<div className="BeerListingScroll-wrapper">
{beersArray.map(beer => (
<div key={beer.id} className="BeerListingScroll-info-box">
<BeersListItem beer={beer} />
</div>
))}
</div>
</ReduxLazyScroll>
<div className="row beers-lazy-scroll__messages">
{isFetching && (
<div className="alert alert-info">
<ProgressIndicator />
</div>
)}
{!hasMore &&
!errorMessage && (
<div className="alert alert-success">
All the beers has been loaded successfully.
</div>
)}
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
beers: state.beers,
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ fetchBeers }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(BeerListingScroll);
BeerListingScroll css
.BeerListingScroll-wrapper {
display: grid;
margin: 0;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr) ) ;
background-color: #f7f7f7;
}
.BeerListingScroll-info-box {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
width: 320px;
}
/* This applies from 600px onwards */
#media (min-width: 1820px) {
.BeerListingScroll-wrapper {
margin: 0 400px;
}
}
#media (min-width: 1620px) {
.BeerListingScroll-wrapper {
margin: 0 300px;
}
}
#media (min-width: 1366px) {
.BeerListingScroll-wrapper {
margin: 0 200px;
}
}
BeerListItem is the child of BeerListingScroll
import React from 'react';
import Card, { CardContent } from 'material-ui/Card';
import Typography from 'material-ui/Typography';
function BeerListItem(props) {
return (
<div>
<Card raised>
<CardContent>
<img src={props.beer.image_url} alt="beer" width="30%" />
<Typography variant="headline" component="h2">
{props.beer.name}
</Typography>
<Typography component="p">{props.beer.tagline}</Typography>
</CardContent>
</Card>
</div>
);
}
export default BeerListItem;
Full project on github -> Github
So for image sizes here I got great answer.
And I added:
.BeerListItem-img {
height: auto;
max-height: 250px;
width: auto;
max-width: 250px;
}
And for card size I just added inside BeerListItem class to Card like so (.BeerListItem-main-card):
function BeerListItem(props) {
return (
<div>
<Card raised className="BeerListItem-main-card">
<CardContent>
<img
src={props.beer.image_url}
alt="beer"
className="BeerListItem-img"
/>
<Typography variant="headline" component="h2">
{props.beer.name}
</Typography>
<Typography component="p">{props.beer.tagline}</Typography>
</CardContent>
</Card>
</div>
);
}
And here is corresponding css to that component.
.BeerListItem-main-card {
width: 320px;
height: 415px;
}
.BeerListItem-img {
height: auto;
max-height: 250px;
width: auto;
max-width: 250px;
}
With that two changes, I've managed to achieve my goal.
You should try exploring display:flex;
Here is a link to a fantastic code pen that may help you achieve what you want:
https://codepen.io/enxaneta/full/adLPwv
More specifically here is an example I've created with what you might be trying to achieve.
https://jsfiddle.net/dalecarslaw/sxdr3eep/
Here is the areas of code you should focus on:
display:flex;
align-items:space-between;
justify-content:space-between;
flex-wrap:wrap;

Categories

Resources