input-output-hk · szymonmaslowski · Jan 16, 2025 · Jan 14, 2025 · Jan 15, 2025 · Jan 15, 2025
@@ -67,7 +67,7 @@ $main-gap: 49px;
     'nav side-panel'
     'nav main';
   margin-right: size_unit(4);
-  grid-template-columns: $navigation-col-width-collapsed 1fr;
+  grid-template-columns: $navigation-col-width-collapsed minmax(0, 1fr);
   grid-template-rows: $row-height 1fr;
   height: 100%;
 
@@ -78,7 +78,7 @@ $main-gap: 49px;
   }
 
   @media (min-width: $breakpoint-xsmall) {
-    grid-template-columns: $navigation-col-width 1fr;
+    grid-template-columns: $navigation-col-width minmax(0, 1fr);
     margin: 0 size_unit(4) 0 size_unit(5);
   }
 

@@ -1,15 +1,12 @@
 import { Layout, SectionLayout } from '@views/browser/components';
 import SimpleView from './SimpleView';
-import DappLayout from '../layout/dapp';
 import React from 'react';
 
 export const DAppExplorer: React.FC = () => (
   <>
     <Layout noAside>
       <SectionLayout>
-        <DappLayout>
-          <SimpleView />
-        </DappLayout>
+        <SimpleView />
       </SectionLayout>
     </Layout>
     <div id={'dAppStore'} />

@@ -18,9 +18,9 @@ export const AboutDapp: React.FC = () => {
         <Text.Body.Normal>{data?.longDescription}</Text.Body.Normal>
       </Box>
       {data?.screenshots && (
-        <Box mb="$24">
+        <Box mb="$16">
           <Box mb="$24">
-            <Text.SubHeading weight="$bold">{t('dappdiscovery.side_panel.gallery')}</Text.SubHeading>
+            <Text.Body.Large weight="$bold">{t('dappdiscovery.side_panel.gallery')}</Text.Body.Large>
           </Box>
           <IogSlider
             data={data.screenshots}

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IIcon } from '../../../../components/Icon/types';
+import { Flex } from '@input-output-hk/lace-ui-toolkit';
 
 interface ContactItemType {
   itemIcon: React.ReactElement<IIcon>;
@@ -12,11 +13,13 @@ export const ContactItem: React.FC<ContactItemType> = ({ itemIcon, itemTitle, it
     <span className="iog-contact-item-icon" data-testid="contact-icon">
       {itemIcon}
     </span>
-    <span className="iog-contact-item-title" data-testid="contact-name">
-      {itemTitle}
-    </span>
-    <span className="iog-contact-item-data" data-testid="contact-data">
-      {itemData}
-    </span>
+    <Flex flexDirection="column">
+      <span className="iog-contact-item-title" data-testid="contact-name">
+        {itemTitle}
+      </span>
+      <span className="iog-contact-item-data" data-testid="contact-data">
+        {itemData}
+      </span>
+    </Flex>
   </div>
 );
@@ -1,17 +1,15 @@
 @import '../../../styles/colors.scss';
 
 .iog-contact-item {
-  display: grid;
-  grid-template-columns: 24px auto;
-  grid-template-areas:
-      'icon title'
-      '. data';
-    column-gap: 12px;
-    font-size: 16px;
-    align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  font-size: 16px;
+  gap: 12px;
 
   .iog-contact-item-icon {
-    grid-area: icon;
+    width: 24px;
+    height: 24px;
+    margin-top: 4px;
 
     svg {
       width: 100%;
@@ -22,12 +20,10 @@
 
   .iog-contact-item-title {
     font-weight: bold;
-    grid-area: title;
     color: var(--text-color-primary) !important;
   }
 
   .iog-contact-item-data {
-    grid-area: data;
-    color: var(--light-mode-dark-grey, var(--dark-mode-light-grey))
+    color: var(--light-mode-dark-grey, var(--dark-mode-light-grey));
   }
 }
@@ -64,14 +64,18 @@ const ProjectDetail: React.FC = () => {
                 fit="contain"
                 src={data?.image?.src || ''}
                 alt={data?.image?.alt || 'Image'}
-                width={80}
-                height={80}
+                width={50}
+                height={50}
                 data-testid="dapp-info-modal-icon"
               />
             )}
-            <Flex flexDirection="column" gap="$8">
-              <Text.SubHeading data-testid="dapp-info-modal-title">{data?.title}</Text.SubHeading>
-              <Text.Body.Large>{data?.category}</Text.Body.Large>
+            <Flex flexDirection="column" gap="$4">
+              <Text.Body.Normal data-testid="dapp-info-modal-title" weight="$bold">
+                {data?.title}
+              </Text.Body.Normal>
+              <Text.Body.Small color="secondary" weight="$semibold">
+                {data?.category}
+              </Text.Body.Small>
             </Flex>
           </div>
         </Flex>

@@ -28,6 +28,7 @@
   .ant-tabs-tab {
     font-size: toRem(16);
     line-height: toRem(24);
+    font-weight: 400;
 
     .ant-tabs-tab-btn {
       color: var(--light-mode-mid-grey, var(--dark-mode-light-grey)) !important;

@@ -1,5 +1,5 @@
 export interface ISimpleViewContent {
   selectedCategory: string;
-  search: string;
+  search?: string;
   dappsSearchCacheTTLInMs?: number;
 }
@@ -43,5 +43,5 @@ export const mapCategory = (category: string): React.ReactNode => {
     }
   })();
 
-  return <Icon component={icon} />;
+  return icon && <Icon component={icon} />;
 };
@@ -35,7 +35,7 @@ const SimpleViewFilters: React.FC<ISimpleViewFilters> = ({ onChangeCategory }) =
   }, [active, onChangeCategory]);
 
   const handleChangeCategory = (category: string) => {
-    setActive(category.toLowerCase());
+    setActive(category);
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const swiper = document.querySelector<Element & { swiper: any }>('.iog-classic-view-filters-slider')?.swiper;
@@ -77,6 +77,7 @@ const SimpleViewFilters: React.FC<ISimpleViewFilters> = ({ onChangeCategory }) =
           edgeSwipeThreshold={20}
           slidesPerGroup={3}
           speed={650}
+          mousewheel
           navigation={{
             prevEl: '.swiper-filters-prev',
             nextEl: '.swiper-filters-next'
@@ -85,10 +86,10 @@ const SimpleViewFilters: React.FC<ISimpleViewFilters> = ({ onChangeCategory }) =
             key: `${label}`,
             className: classNames({
               'iog-tag': true,
-              'iog-tag--active': value.toLocaleLowerCase() === active
+              'iog-tag--active': value.toLocaleLowerCase() === active.toLowerCase()
             }),
             onClick: () => handleSetActive(value),
-            children: <CategoryChip active={value.toLocaleLowerCase() === active} label={label} />
+            children: <CategoryChip active={value.toLocaleLowerCase() === active.toLowerCase()} label={label} />
           })}
           data-testid="grid-category-slider"
         >

@@ -1,37 +1,24 @@
 import * as React from 'react';
-import { SearchBox } from '@input-output-hk/lace-ui-toolkit';
 
 import SimpleViewContent from './SimpleViewContent';
 import SimpleViewFilters from './SimpleViewFilters';
 
-import styles from './index.styles.module.scss';
 import { DappListTitle } from '../../../ui/components/list/DappListTitle.component';
+import { withDrawer } from '../ProjectDetail/with-drawer';
 
 const { useState } = React;
 const dappsCategoryToTitle = (category: string) => (category === 'all' ? 'All DApps' : category);
 
 const SimpleView: React.FC = () => {
   const [selectedCategory, setCategory] = useState<string>('all');
-  const [searchValue, setSearchValue] = useState('');
 
   return (
     <>
-      <div className={styles.header}>
-        <DappListTitle title={dappsCategoryToTitle(selectedCategory)} />
-        <div className={styles.searchInput}>
-          <SearchBox
-            placeholder={'Search'}
-            value={searchValue}
-            onChange={setSearchValue}
-            onClear={() => setSearchValue('')}
-            data-testid="dapp-explorer-search-input"
-          />
-        </div>
-      </div>
+      <DappListTitle title={dappsCategoryToTitle(selectedCategory)} />
       <SimpleViewFilters onChangeCategory={setCategory} />
-      <SimpleViewContent selectedCategory={selectedCategory} search={searchValue} />
+      <SimpleViewContent selectedCategory={selectedCategory} />
     </>
   );
 };
 
-export default SimpleView;
+export default withDrawer(SimpleView);
@@ -2,7 +2,7 @@ import React, { Children, cloneElement, isValidElement, useRef, useState } from
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { v4 as uuidv4 } from 'uuid';
 import classNames from 'classnames';
-import SwiperCore, { Navigation, Virtual, Lazy, Swiper as SwiperType } from 'swiper';
+import SwiperCore, { Navigation, Virtual, Lazy, Swiper as SwiperType, Mousewheel } from 'swiper';
 import { ExtractObjectFromData, ISlider } from './types';
 import { EIconsName } from '../Icon';
 import { IogButtonIcon } from '../Button';
@@ -13,7 +13,7 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import './styles.scss';
 
-SwiperCore.use([Navigation, Virtual, Lazy]);
+SwiperCore.use([Navigation, Virtual, Lazy, Mousewheel]);
 
 const formatClassName = (className: string) => (className ? className.replace('.', '') : '');
 
@@ -24,7 +24,6 @@ const DEFAULT_PROPS = {
 
 const BUTTON_CLASS = 'iog-swiper-button-nav';
 
-// eslint-disable-next-line prettier/prettier
 const IogSlider = ({
   id,
   data,
@@ -39,6 +38,7 @@ const IogSlider = ({
   buttonStandard = false,
   showSliderNavigation = true,
   fallback,
+  mousewheel,
   ...props
 }: // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ISlider<any>): React.ReactElement => {
@@ -110,6 +110,7 @@ ISlider<any>): React.ReactElement => {
         slidesPerView={slidesPerView || DEFAULT_PROPS.SLIDES_PER_VIEW}
         onSwiper={(swiper) => (swiperRef.current = swiper)}
         onSlideChange={handleSlideChange}
+        mousewheel={mousewheel}
         {...props}
       >
         {data?.map(

@@ -67,9 +67,17 @@
    border: none;
 
   svg {
+    height: 16px;
+    width: 16px;
     stroke: var(--light-mode-dark-grey, var(--dark-mode-light-grey));
   }
 
+  &:not(:disabled):hover {
+    svg {
+      stroke: var(--text-color-primary) !important;
+    }
+  }
+
   &:disabled {
     opacity: 0.24;
   }
-Original file line number
+Diff line change
@@ Expand Up @@
         }
       })();
-      return <Icon component={icon} />;
+      return icon && <Icon component={icon} />;
     };