From 83501d45dfb8fb7da0e37630de9a1c0567d3d7dd Mon Sep 17 00:00:00 2001
From: Bartosz Dokurno <bartusekcraft@gmail.com>
Date: Mon, 15 May 2023 20:55:41 +0200
Subject: [PATCH] Update storybook front page

---
 src/stories/Introduction.stories.mdx | 114 +++------------------------
 1 file changed, 12 insertions(+), 102 deletions(-)

diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.stories.mdx
index 6352054..820f0a7 100644
--- a/src/stories/Introduction.stories.mdx
+++ b/src/stories/Introduction.stories.mdx
@@ -2,110 +2,20 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Welcome/Introduction" />
 
-<style>
-  {`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 900;
-      font-size: 13px;
-      color: #999;
-      letter-spacing: 6px;
-      line-height: 24px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
-    }
-
-    .link-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-      row-gap: 10px;
-    }
-
-    @media (min-width: 620px) {
-      .link-list {
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-
-    @media all and (-ms-high-contrast:none) {
-    .link-list {
-        display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
-      }
-    }
-
-    .link-item {
-      display: block;
-      padding: 20px 30px 20px 15px;
-      border: 1px solid #00000010;
-      border-radius: 5px;
-      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-      color: #333333;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .link-item:hover {
-      border-color: #1EA7FD50;
-      transform: translate3d(0, -3px, 0);
-      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    }
-
-    .link-item:active {
-      border-color: #1EA7FD;
-      transform: translate3d(0, 0, 0);
-    }
-
-    .link-item strong {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 2px;
-    }
-
-    .link-item img {
-      height: 40px;
-      width: 40px;
-      margin-right: 15px;
-      flex: none;
-    }
-
-    .link-item span {
-      font-size: 14px;
-      line-height: 20px;
-    }
+# Welcome to gif-picker-react Storybook
 
-    .tip {
-      display: inline-block;
-      border-radius: 1em;
-      font-size: 11px;
-      line-height: 12px;
-      font-weight: 700;
-      background: #E7FDD8;
-      color: #66BF3C;
-      padding: 4px 12px;
-      margin-right: 10px;
-      vertical-align: top;
-    }
+This is a simple StoryBook project for developing this library.
+If you are seeing this, you have properly installed storybook workshop for this project.
 
-    .tip-wrapper {
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
-    }
+## Tenor token
 
-    .tip-wrapper code {
-      font-size: 12px;
-      display: inline-block;
-    }
-  `}
-</style>
+Tenor token status:
+<code>
+{
+  process.env.STORYBOOK_TENOR_TOKEN ? '✔ You have properly configured your Tenor token' : '❌ You have not configured your tenor token!'
+}
+</code>
 
-# Welcome to gif-picker-react Storybook
+## Future reading
 
-This is a simple storybook project for developing this library. For more information refer to `CONTRIBUTING.MD`
\ No newline at end of file
+See [`CONTRIBUTING.MD`](https://github.com/MrBartusek/gif-picker-react/blob/master/CONTRIBUTING.md)
\ No newline at end of file