Polish tutorials UI (#1303)

iotaledger · Nov 5, 2023 · 34193e1 · 34193e1
1 parent f0767cd
commit 34193e1
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 63 deletions.
diff --git a/src/components/TutorialCard/index.tsx b/src/components/TutorialCard/index.tsx
@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { memo, useState } from 'react';
+import React, { memo } from 'react';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import clsx from 'clsx';
 
 import './styles.css';
 import FavoriteIcon from '../svgIcons/FavoriteIcon';
 import { sortBy } from '@site/src/utils/jsUtils';
 import { NormalizedOptions as Tutorial } from '@iota-wiki/plugin-tutorial';
 import { Tag, TagValues, Tags } from '@site/src/utils/tags';
+import Link from '@docusaurus/Link';
 
 const TagComp = React.forwardRef<HTMLLIElement, Tag>((tag, ref) => (
   <li ref={ref} className='tag' title={tag.description}>
@@ -43,24 +43,9 @@ function TutorialCardTag({ tags }: { tags: string[] }) {
 const TutorialCard = memo(({ tutorial }: { tutorial: Tutorial }) => {
   const tutorialSource = tutorial.source && useBaseUrl(tutorial.source);
   const tutorialRoute = tutorial.route && useBaseUrl(tutorial.route);
-  const [hovering, setHovering] = useState(false);
-
-  const handleClick = (event, url) => {
-    event.preventDefault();
-    event.stopPropagation();
-    window.location.href = url;
-  };
-
   return (
-    <li
-      key={tutorial.title}
-      onMouseOver={() => setHovering(true)}
-      onMouseOut={() => setHovering(false)}
-    >
-      <div
-        onClick={(event) => handleClick(event, tutorialRoute)}
-        className='card shadow--md tutorial-card'
-      >
+    <li key={tutorial.title}>
+      <Link to={tutorialRoute} className='card shadow--md tutorial-card'>
         <div className='card__image tutorial-card__image-container'>
           <img
             className='tutorial-card__image'
@@ -71,32 +56,25 @@ const TutorialCard = memo(({ tutorial }: { tutorial: Tutorial }) => {
         </div>
         <div className='card__body'>
           <div className='tutorial-card__header'>
-            <h4
-              className={clsx(
-                'tutorial-card__title',
-                hovering && 'tutorial-card__title--hover',
-              )}
-            >
-              {tutorial.title}
-            </h4>
+            <h4 className='tutorial-card__title'>{tutorial.title}</h4>
             {tutorial.tags.includes('favorite') && (
               <FavoriteIcon svgClass='svg-icon-favorite' size='small' />
             )}
             {tutorial.source && (
-              <div
-                onClick={(event) => handleClick(event, tutorialSource)}
+              <Link
+                to={tutorialSource}
                 className='button button--secondary button--sm tutorial-card__source-button'
               >
                 source
-              </div>
+              </Link>
             )}
           </div>
           <p className='tutorial-card__body'>{tutorial.description}</p>
         </div>
         <ul className='card__footer tutorial-card__footer'>
           <TutorialCardTag tags={tutorial.tags} />
         </ul>
-      </div>
+      </Link>
     </li>
   );
 });

diff --git a/src/components/TutorialCard/styles.css b/src/components/TutorialCard/styles.css
@@ -9,6 +9,7 @@
   height: 100%;
   color: inherit;
   cursor: pointer;
+  border-radius: 10px;
 }
 
 .tutorial-card:hover {
@@ -22,7 +23,6 @@
   justify-content: center;
   overflow: hidden;
   height: 150px;
-  border-bottom: 2px solid var(--ifm-color-emphasis-200);
 }
 
 .tutorial-card__image {
@@ -45,16 +45,6 @@
   vertical-align: center;
 }
 
-.tutorial-card__title {
-  text-decoration: none;
-  background: linear-gradient(
-      var(--ifm-color-primary),
-      var(--ifm-color-primary)
-    )
-    0% 100% / 0% 1px no-repeat;
-  transition: background-size ease-out 200ms;
-}
-
 .tutorial-card__title--hover {
   background-size: 100% 1px;
 }
@@ -71,7 +61,8 @@
 
 .tutorial-card__body {
   font-size: smaller;
-  line-height: 1.66;
+  color: var(--ifm-color-emphasis-700);
+  font-weight: 400;
 }
 
 .tutorial-card__footer {
@@ -82,7 +73,6 @@
 .tag {
   font-size: 0.675rem;
   border: 1px solid var(--ifm-color-secondary-darkest);
-  cursor: default;
   margin-right: 6px;
   margin-bottom: 6px !important;
   border-radius: 12px;

diff --git a/src/components/TutorialFilters/index.tsx b/src/components/TutorialFilters/index.tsx
@@ -214,7 +214,7 @@ function TutorialFilters() {
               <div className='col' key={category}>
                 <h5>{category}</h5>
                 <Select
-                  placeholder={category}
+                  placeholder={null}
                   options={tags}
                   {...selectProps}
                   value={value}
@@ -224,14 +224,11 @@ function TutorialFilters() {
           })}
         </div>
       </Collapsible>
-      <div className='row margin-vert--lg'>
-        <div className='col'>
-          <span>{siteCountPlural(filteredTutorials.length)}</span>
-        </div>
-        <div className='col col--2 tutorial-link'>
-          <span>+</span>
+      <div className='row results-row margin-horiz--none margin-top--sm margin-bottom--lg'>
+        <span>{siteCountPlural(filteredTutorials.length)}</span>
+        <div>
           <a
-            className='tutorial-link__anchor'
+            className='intro__button button button--outline button--primary'
             href='https://github.com/iota-wiki/tutorial-template'
             target='_blank'
             rel='noreferrer'

diff --git a/src/components/TutorialFilters/styles.css b/src/components/TutorialFilters/styles.css
@@ -11,6 +11,7 @@
   display: flex;
   align-items: stretch;
   justify-content: space-between;
+  margin-bottom: 16px;
 }
 
 .tutorial-filters__row {
@@ -53,16 +54,15 @@
 }
 
 .react-select__control {
+  cursor: pointer !important;
   background-color: var(--ifm-color-emphasis-200) !important;
   border: 0 !important;
   margin-bottom: 1rem !important;
-}
-
-.react-select__placeholder {
-  color: var(--ifm-font-color-base) !important;
+  border-radius: 6px !important;
 }
 
 .react-select__indicator {
+  cursor: pointer;
   color: var(--ifm-font-color-base) !important;
 }
 
@@ -75,6 +75,10 @@
   z-index: 9999;
 }
 
+.react-select__option {
+  cursor: pointer !important;
+}
+
 .react-select__option--is-focused {
   background-color: var(--ifm-color-emphasis-300) !important;
 }
@@ -98,3 +102,40 @@
 .Collapsible__contentOuter {
   padding: 2px;
 }
+
+.results-row {
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.Collapsible__contentInner span {
+  display: inline-block;
+  font-family: var(--ifm-heading-font-family);
+  font-size: var(--ifm-h5-font-size);
+  margin-bottom: 4px;
+}
+
+.react-select__multi-value {
+  background-color: var(--ifm-hover-overlay) !important;
+  border-radius: 6px !important;
+  padding: 0.1rem 0.15rem !important;
+}
+
+.react-select__clear-indicator:hover + * + .react-select__dropdown-indicator {
+  color: var(--ifm-font-color-base) !important;
+}
+
+.react-select__dropdown-indicator:hover {
+  color: var(--docsearch-highlight-color) !important;
+  transition: color 0.2s ease-in-out;
+}
+
+.react-select__clear-indicator:hover,
+.react-select__multi-value__remove:hover {
+  color: var(--ifm-color-gray-600) !important;
+  transition: color 0.2s ease-in-out;
+}
+
+.react-select__multi-value__remove:hover {
+  background-color: transparent !important;
+}
diff --git a/src/pages/tutorials/index.tsx b/src/pages/tutorials/index.tsx
@@ -8,7 +8,7 @@ import TutorialCards from '@site/src/components/TutorialCards';
 
 function TutorialHeader() {
   return (
-    <section className='container margin-top--lg margin-bottom--lg text--center'>
+    <section className='container margin-top--lg margin-bottom--sm text--center'>
       <div className='row'>
         <div className='col col--2 col--offset-0'>
           <h1 className='tutorial-header'>Tutorials</h1>

diff --git a/tutorials/docusaurus.config.js b/tutorials/docusaurus.config.js
@@ -37,8 +37,7 @@ module.exports = {
         title: 'Run a Wasp Chain',
         description: 'In this tutorial you will learn how to run a wasp chain.',
         preview: '/IOTA-Smart-Contract-Tutorials-B.jpg',
-        route:
-          '/shimmer/smart-contracts/guide/chains_and_nodes/setting-up-a-chain',
+        route: '/wasp-cli/how-tos/setting-up-a-chain',
         tags: ['text', 'video'],
       },
     ],
@@ -49,8 +48,7 @@ module.exports = {
         description:
           'In this tutorial you will learn how to deploy a wasm smart contract.',
         preview: '/IOTA-Smart-Contract-Tutorials-C.jpg',
-        route:
-          'smart-contracts/guide/chains_and_nodes/setting-up-a-chain#deploying-a-wasm-contract',
+        route: '/wasp-cli/how-tos/setting-up-a-chain#deploying-a-wasm-contract',
         tags: ['text', 'video'],
       },
     ],
@@ -61,7 +59,7 @@ module.exports = {
         description:
           'In this tutorial you will learn how to deploy a solidity smart contract on EVM using remix and metamask.',
         preview: '/IOTA-Smart-Contract-Tutorials-E.jpg',
-        route: '/shimmer/smart-contracts/guide/evm/tooling#remix',
+        route: '/wasp-evm/getting-started/compatible-tools#remix',
         tags: ['text', 'video'],
       },
     ],
@@ -72,7 +70,7 @@ module.exports = {
         description:
           'In this tutorial you will learn how to use schema tool to generate smart contract template code on rust and golang',
         preview: '/IOTA-Smart-Contract-Tutorials-G.png',
-        route: '/shimmer/smart-contracts/guide/wasm_vm/usage',
+        route: '/wasp-wasm/how-tos/schema-tool/usage',
         tags: ['text', 'video'],
       },
     ],