css changes

msrjr91 · Mar 24, 2023 · 362ae14 · 362ae14
1 parent 693cc4d
commit 362ae14
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/client/src/pages/Home.js b/client/src/pages/Home.js
@@ -1,8 +1,6 @@
 import React, { useState, useContext } from 'react'
 import { DataContext } from '../DataContext'
-import React from 'react'
 // import { DataProvider} from '../DataProvider'
-import { useState, useContext } from 'react'
 import tracks from '../assets/songs'
 
 export default function Home(props) {
@@ -80,12 +78,13 @@ export default function Home(props) {
                   <div className='track-artist'>
                     <div className='track-img-ctn'>
                       <img src={posterAvatar(post)} className='track-poster-img'/>
+                      <h3 className='p-artist'> {posterName(post)} </h3>
+                    </div>
+                    <div className='track-content'>
+                      <p> {post['content']} </p>
+                      <audio controls src={song(post)} className='music-player'/>
                     </div>
-                    <h3 className='p-artist'> {posterName(post)} </h3>
                   </div>
-                  <div className='track-content'>
-                    <audio controls src={song(post)}/>
-                    <p> {post['content']} </p>
                     <form className='comment-form'>
                       <input 
                         name='content'
@@ -96,7 +95,6 @@ export default function Home(props) {
                         required/>
                       <button type='submit' disabled={!formValues.content}> Comment </button>
                     </form>
-                  </div>
                 </div>
               )
             })

diff --git a/client/src/styles/App.css b/client/src/styles/App.css
@@ -131,14 +131,19 @@
   padding: 20px;
 }
 
+.track-artist {
+  display: grid;
+  grid-template-columns: 2fr 4fr;
+}
+
 .track-img-ctn {
   padding-right: 30px;
+  margin-right: -20px;
 }
 
-.track-artist {
-  display: flex;
-  justify-content: start;
-  margin-left: 50px;
+.music-player {
+  margin-top: 20px;
+  width: 250px;
 }
 
 .track h3 {
@@ -153,10 +158,18 @@
   box-shadow:0 0 .5em rgb(249, 247, 244);
 }
 
+.track p {
+  color: black;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  margin: 0%;
+  margin-top: -20px;
+}
+
 .track-content {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
+  align-items: center;
 }
 
 .comments-ctn {