make everything left aligned, refactor cover for homepage featured images

Author: summer-cook

src/compounds/Item/Item.jsx

@@ -34,7 +34,7 @@ const Item = ({ buttonLink, buttonProps, href, fromItemGroup, isLoading, item, o
         <div className='row g-0 h-100'>
           <div className='col-3'>
             <Image
-              className={orientation === 'horizontal' ? 'img-fluid h-100 rounded-start cover-horizontal' : 'card-img-top'}
+              className={`cover ${orientation === 'horizontal' ? 'img-fluid h-100 rounded-start' : 'card-img-top'}`}
               src={src}
               alt={alt}
             />
@@ -55,7 +55,7 @@ const Item = ({ buttonLink, buttonProps, href, fromItemGroup, isLoading, item, o
       ) : (
         <>
           <Image
-            className={orientation === 'horizontal' ? 'img-fluid h-100 rounded-start cover' : 'card-img-top'}
+            className={`cover ${orientation === 'horizontal' ? 'img-fluid h-100 rounded-start' : 'card-img-top'}`}
             src={src}
             alt={alt}
           />

src/compounds/Item/item.scss

@@ -2,12 +2,12 @@
   white-space: nowrap;
 }
 
-.cover-horizontal {
+.cover {
   object-fit: cover;
   height: 200px;
   width: 100%;
 }
 
 .link-hover:hover {
   opacity: .8;
-}
+}

src/compounds/ItemPage/ItemPage.jsx

@@ -3,21 +3,22 @@ import PropTypes from 'prop-types'
 import { Button, Row, Col } from 'react-bootstrap'
 import Image from '../../components/Image/Image'
 import Title from '../../components/Title/Title'
+import TextBox from '../../components/TextBox/TextBox'
 
 const ItemPage = ({ title, titleStyle, description, descriptionStyle, img }) => {
   // sets a default width while still allowing width to be overridden
   img = { width: 400, ...img }
 
   return (
     <main className='container py-5'>
-      <Title title={title} style={titleStyle} addClass='text-center text-md-start'/>
+      <Title title={title} style={titleStyle}/>
       <Row className='mt-3'>
-        <Col xs={12} md={6} className='text-center text-md-start d-flex flex-column'>
-          {description}
+        <Col xs={12} md={6} className='d-flex flex-column'>
+          <TextBox text={description} style={descriptionStyle} size='medium' />
           {/* TODO(summer-cook): Update this button's href so it is pointing at the item's form instead of blank request form */}
-          <Button href='/requests/new' className='mt-4 align-self-center align-self-md-start'>Initiate Request</Button>
+          <Button href='/requests/new' className='align-self-start mt-4'>Initiate Request</Button>
         </Col>
-        <Col xs={12} md={6} className='mt-4 mt-md-0 me-md-auto d-flex justify-content-center justify-content-md-end'>
+        <Col xs={12} md={6} className='mt-4 mt-md-0 me-md-auto d-flex justify-content-start justify-content-md-end'>
           <Image {...img} />
         </Col>
       </Row>