Merge pull request #113 from scientist-softserv/styling-for-service-images

Styling for service 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,13 @@
   white-space: nowrap;
 }
 
-.cover-horizontal {
+.cover {
   object-fit: cover;
   height: 200px;
   width: 100%;
 }
 
 .link-hover:hover {
   opacity: .8;
-}
+}
+

src/compounds/ItemPage/ItemPage.jsx

@@ -1,21 +1,27 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Button, Row, Col } from 'react-bootstrap'
 import Image from '../../components/Image/Image'
 import TextBox from '../../components/TextBox/TextBox'
 import Title from '../../components/Title/Title'
-import './item-page.css'
 
 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 item-page'>
-      <Title title={title} style={titleStyle} />
-      <div className='item-page-details'>
-        <TextBox text={description} style={descriptionStyle} size='medium' />
-        <Image {...img} />
-      </div>
+    <main className='container py-5'>
+      <Title title={title} style={titleStyle}/>
+      <Row className='mt-3'>
+        <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='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-start justify-content-md-end'>
+          <Image {...img} />
+        </Col>
+      </Row>
     </main>
   )
 }