Minor changes

Author: SundeepChand

src/assets/scss/components/index.scss

@@ -21,4 +21,4 @@
 @import 'footer';
 @import 'alerts';
 @import 'search';
-@import 'productCard.scss';
+@import 'productSelect.scss';

src/assets/scss/components/productCard.scss renamed to src/assets/scss/components/productSelect.scss

@@ -29,17 +29,8 @@
     }
   }
 
-  .product-title {
-    padding-left: 10px;
-    width: 160px;
-
-    h2 {
-      margin: 0;
-    }
-  }
-
   .product-logo {
-    width: 90px;
+    width: 230px;
 
     img {
       width: 90px;

src/components/ProductSelect.jsx

@@ -6,10 +6,7 @@ const ProductSkeleton = () => {
     <div className='flex flex-row flex-center product-card'>
       <div className='flex flex-center'>
         <div className='product-logo'>
-          <Skeleton height={62} />
-        </div>
-        <div className='product-title'>
-          <Skeleton count={2} height={30} />
+          <Skeleton height={56} />
         </div>
       </div>
       <div className='circle-container'>
@@ -34,11 +31,8 @@ const ProductCard = ({ product, selected, setProduct }) => {
       }}
     >
       <div className='flex flex-center'>
-        <div className='flex flex-align-center product-logo'>
-          <img src={product.logo.url} alt={`${product.Name} logo`} />
-        </div>
-        <div className='product-title'>
-          <h2>{product.Name}</h2>
+        <div className='flex flex-center product-logo'>
+          <img src={product.logo?.url} alt={`${product.Name} logo`} />
         </div>
       </div>
       <div className='circle-container'>