From 0c1cd60365d15458f6c18ad36548f2ff34cd380a Mon Sep 17 00:00:00 2001
From: chinmaym07 <b418020@iiit-bh.ac.in>
Date: Sun, 20 Feb 2022 03:54:57 +0530
Subject: [PATCH 01/33] Fixed: #46: Added Border & Reduced the space between
 down arrow icon & option text

Signed-off-by: chinmaym07 <b418020@iiit-bh.ac.in>
---
 src/assets/scss/components/select.scss           | 7 ++++---
 src/assets/scss/variables/components/select.scss | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/assets/scss/components/select.scss b/src/assets/scss/components/select.scss
index 17f8bca8..71722902 100644
--- a/src/assets/scss/components/select.scss
+++ b/src/assets/scss/components/select.scss
@@ -22,10 +22,11 @@ select {
   background: $eos-select-bg-active;
   background-color: transparent;
   background-size: $eos-select-bg-size;
-  border: 0;
-  border-radius: 0;
+  border: 1px solid $eos-form-element-color;
+  border-radius: 8px;
   color: $eos-select-txt-color;
   cursor: pointer;
+  font-family: $font-family;
   font-size: $eos-select-font;
   font-weight: 300;
   padding: $eos-select-padding;
@@ -37,7 +38,7 @@ select {
   }
 
   &:focus {
-    border-color: $eos-form-element-color;
+    border-color: $secondary;
     outline: 0;
   }
 
diff --git a/src/assets/scss/variables/components/select.scss b/src/assets/scss/variables/components/select.scss
index 9a39bd85..2cea782c 100644
--- a/src/assets/scss/variables/components/select.scss
+++ b/src/assets/scss/variables/components/select.scss
@@ -1,4 +1,4 @@
-$eos-select-padding: $xs + 1 $s $s $l;
+$eos-select-padding: $xs + 2 $s $s $l - $xs;
 $eos-select-bg-active: $white url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNy40MSA3Ljg0TDEyIDEyLjQybDQuNTktNC41OEwxOCA5LjI1bC02IDYtNi02eiIvPjwvc3ZnPg==') no-repeat left center;
 $eos-select-bg-size: 18px;
 $eos-select-border-radius: 2px;

From bfe003aea8607d76f01622cef568d5f9c3c2371b Mon Sep 17 00:00:00 2001
From: chinmaym07 <b418020@iiit-bh.ac.in>
Date: Tue, 22 Feb 2022 19:28:18 +0530
Subject: [PATCH 02/33] Updated the border-color

Signed-off-by: chinmaym07 <b418020@iiit-bh.ac.in>
---
 src/assets/scss/components/select.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/assets/scss/components/select.scss b/src/assets/scss/components/select.scss
index 71722902..262c7074 100644
--- a/src/assets/scss/components/select.scss
+++ b/src/assets/scss/components/select.scss
@@ -22,14 +22,15 @@ select {
   background: $eos-select-bg-active;
   background-color: transparent;
   background-size: $eos-select-bg-size;
-  border: 1px solid $eos-form-element-color;
-  border-radius: 8px;
+  border: 1px solid $secondary;
+  border-radius: 10px;
   color: $eos-select-txt-color;
   cursor: pointer;
   font-family: $font-family;
   font-size: $eos-select-font;
   font-weight: 300;
   padding: $eos-select-padding;
+  text-shadow: 0.8px 0px $secondary;
   width: 100%;
 
   option {

From 001e5f44499ef8a7d85a8c4731d2a66b49d563b3 Mon Sep 17 00:00:00 2001
From: chinmaym07 <b418020@iiit-bh.ac.in>
Date: Wed, 23 Feb 2022 02:06:23 +0530
Subject: [PATCH 03/33] Updated the text to be a little lower & text similar to
 button text

Signed-off-by: chinmaym07 <b418020@iiit-bh.ac.in>
---
 src/assets/scss/components/select.scss           | 4 ++--
 src/assets/scss/variables/components/select.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/assets/scss/components/select.scss b/src/assets/scss/components/select.scss
index 262c7074..57b78110 100644
--- a/src/assets/scss/components/select.scss
+++ b/src/assets/scss/components/select.scss
@@ -28,9 +28,9 @@ select {
   cursor: pointer;
   font-family: $font-family;
   font-size: $eos-select-font;
-  font-weight: 300;
+  font-weight: 700;
   padding: $eos-select-padding;
-  text-shadow: 0.8px 0px $secondary;
+  text-transform: capitalize;
   width: 100%;
 
   option {
diff --git a/src/assets/scss/variables/components/select.scss b/src/assets/scss/variables/components/select.scss
index 2cea782c..8fb9f7c4 100644
--- a/src/assets/scss/variables/components/select.scss
+++ b/src/assets/scss/variables/components/select.scss
@@ -1,4 +1,4 @@
-$eos-select-padding: $xs + 2 $s $s $l - $xs;
+$eos-select-padding: $s - 1 $s $s $l - $xs;
 $eos-select-bg-active: $white url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNy40MSA3Ljg0TDEyIDEyLjQybDQuNTktNC41OEwxOCA5LjI1bC02IDYtNi02eiIvPjwvc3ZnPg==') no-repeat left center;
 $eos-select-bg-size: 18px;
 $eos-select-border-radius: 2px;

From cd923cfa3b10e84af5252c98983b275cf8b919ea Mon Sep 17 00:00:00 2001
From: Atharva Shirdhankar <72031540+StarTrooper08@users.noreply.github.com>
Date: Sat, 5 Mar 2022 13:55:19 +0530
Subject: [PATCH 04/33] added bug issue template

Issue template (GitHub issue form)
---
 .github/ISSUE_TEMPLATE/bug.yml | 54 ++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/bug.yml

diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
new file mode 100644
index 00000000..502210e4
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug.yml
@@ -0,0 +1,54 @@
+name: 🐞 Bug
+description: File a bug/issue
+title: "[BUG] <title>"
+labels: [Bug, Needs Triage]
+body:
+- type: checkboxes
+  attributes:
+    label: Is there an existing issue for this?
+    description: Please search to see if an issue already exists for the bug you encountered.
+    options:
+    - label: I have searched the existing issues
+      required: true
+- type: textarea
+  attributes:
+    label: Current Behavior
+    description: A concise description of what you're experiencing.
+  validations:
+    required: false
+- type: textarea
+  attributes:
+    label: Expected Behavior
+    description: A concise description of what you expected to happen.
+  validations:
+    required: false
+- type: textarea
+  attributes:
+    label: Steps To Reproduce
+    description: Steps to reproduce the behavior.
+    placeholder: |
+      1. In this environment...
+      2. With this config...
+      3. Run '...'
+      4. See error...
+  validations:
+    required: false
+- type: textarea
+  attributes:
+    label: Anything else?
+    description: |
+      Links? References? Anything that will give us more context about the issue you are encountering!
+      
+      Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+  validations:
+    required: false
+- type: dropdown
+  id: browsers
+  attributes:
+    label: What browsers are you seeing the problem on?
+    multiple: true
+    options:
+      - Firefox
+      - Chrome
+      - Safari
+      - Microsoft Edge

From fc6749c33ded4df1711633f3a8ad741618c7b984 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Sat, 5 Mar 2022 19:04:55 +0530
Subject: [PATCH 05/33] fix links in the Footer

---
 src/utils/Links.store.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/Links.store.js b/src/utils/Links.store.js
index a853c8dc..4f590469 100644
--- a/src/utils/Links.store.js
+++ b/src/utils/Links.store.js
@@ -20,7 +20,7 @@ export default [
       },
       {
         name: 'Repository',
-        href: 'https://gitlab.com/SUSE-UIUX/eos-icons',
+        href: 'https://github.com/EOS-uiux-Solutions/eos-icons-landing',
         category: 'External link',
         action: 'Link to Gitlab repo',
         label: 'Footer',
@@ -28,7 +28,7 @@ export default [
       },
       {
         name: 'Report an issue',
-        href: 'https://gitlab.com/SUSE-UIUX/eos-icons/issues',
+        href: 'https://github.com/EOS-uiux-Solutions/eos-icons-landing/issues',
         category: 'External link',
         action: 'Link to Gitlab issues',
         label: 'Footer',

From 9131956f95f14ac0ff641ff27023582b887eead0 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Sun, 6 Mar 2022 12:35:42 +0530
Subject: [PATCH 06/33] changed action to Github

---
 src/utils/Links.store.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/Links.store.js b/src/utils/Links.store.js
index 4f590469..b0f63cf2 100644
--- a/src/utils/Links.store.js
+++ b/src/utils/Links.store.js
@@ -22,7 +22,7 @@ export default [
         name: 'Repository',
         href: 'https://github.com/EOS-uiux-Solutions/eos-icons-landing',
         category: 'External link',
-        action: 'Link to Gitlab repo',
+        action: 'Link to Github repo',
         label: 'Footer',
         target: '_blank'
       },
@@ -30,7 +30,7 @@ export default [
         name: 'Report an issue',
         href: 'https://github.com/EOS-uiux-Solutions/eos-icons-landing/issues',
         category: 'External link',
-        action: 'Link to Gitlab issues',
+        action: 'Link to Github issues',
         label: 'Footer',
         target: '_blank'
       }

From 60551b3d4cb280b0651b465108eae8b8b1741cc5 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Mon, 7 Mar 2022 11:45:06 +0530
Subject: [PATCH 07/33] Fixed broken gitlab links in Docs and About Us Pages

---
 src/pages/AboutPage.jsx | 2 +-
 src/pages/Docs.js       | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/AboutPage.jsx b/src/pages/AboutPage.jsx
index 44162f0b..d832f240 100644
--- a/src/pages/AboutPage.jsx
+++ b/src/pages/AboutPage.jsx
@@ -49,7 +49,7 @@ const data = [
     title: 'Open Source',
     description:
       'Commercial, non-commercial, use them as you please. EOS icons comes with an MIT license, has an open source community, and welcomes your collaboration too.',
-    linkTo: 'https://gitlab.com/SUSE-UIUX/eos-icons/',
+    linkTo: 'https://github.com/EOS-uiux-Solutions/eos-icons-landing',
     linkTitle: 'View the git repository ',
     image: require('../assets/images/pages/open-source.png'),
     reverse: false
diff --git a/src/pages/Docs.js b/src/pages/Docs.js
index b3c6030b..e6cc0bf9 100644
--- a/src/pages/Docs.js
+++ b/src/pages/Docs.js
@@ -294,19 +294,19 @@ const Docs = () => {
                 </code>
               </pre>
               <p>
-                EOS icons is open source. Go to our Gitlab repository to find
+                EOS icons is open source. Go to our Github repository to find
                 out more :
                 <a
-                  href='https://gitlab.com/SUSE-UIUX/eos-icons'
+                  href='https://github.com/EOS-uiux-Solutions/eos-icons-landing'
                   data-event-category='External link'
-                  data-event-action='Link to Gitlab repository'
+                  data-event-action='Link to Github repository'
                   data-event-label='Docs page'
                   target='_blank'
                   rel='noopener noreferrer'
                   className='line-edit'
                 >
                   {' '}
-                  https://gitlab.com/SUSE-UIUX/eos-icons
+                  https://github.com/EOS-uiux-Solutions/eos-icons-landing
                 </a>
               </p>
             </div>

From 5e6b92bafd3fe90faa97d096b0524057021132b8 Mon Sep 17 00:00:00 2001
From: Chitransh Anand <43493203+rheo-chiti@users.noreply.github.com>
Date: Mon, 7 Mar 2022 17:05:15 +0530
Subject: [PATCH 08/33] Revert "Fixed broken gitlab links in Docs and About Us
 Pages"

---
 src/pages/AboutPage.jsx | 2 +-
 src/pages/Docs.js       | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/AboutPage.jsx b/src/pages/AboutPage.jsx
index d832f240..44162f0b 100644
--- a/src/pages/AboutPage.jsx
+++ b/src/pages/AboutPage.jsx
@@ -49,7 +49,7 @@ const data = [
     title: 'Open Source',
     description:
       'Commercial, non-commercial, use them as you please. EOS icons comes with an MIT license, has an open source community, and welcomes your collaboration too.',
-    linkTo: 'https://github.com/EOS-uiux-Solutions/eos-icons-landing',
+    linkTo: 'https://gitlab.com/SUSE-UIUX/eos-icons/',
     linkTitle: 'View the git repository ',
     image: require('../assets/images/pages/open-source.png'),
     reverse: false
diff --git a/src/pages/Docs.js b/src/pages/Docs.js
index e6cc0bf9..b3c6030b 100644
--- a/src/pages/Docs.js
+++ b/src/pages/Docs.js
@@ -294,19 +294,19 @@ const Docs = () => {
                 </code>
               </pre>
               <p>
-                EOS icons is open source. Go to our Github repository to find
+                EOS icons is open source. Go to our Gitlab repository to find
                 out more :
                 <a
-                  href='https://github.com/EOS-uiux-Solutions/eos-icons-landing'
+                  href='https://gitlab.com/SUSE-UIUX/eos-icons'
                   data-event-category='External link'
-                  data-event-action='Link to Github repository'
+                  data-event-action='Link to Gitlab repository'
                   data-event-label='Docs page'
                   target='_blank'
                   rel='noopener noreferrer'
                   className='line-edit'
                 >
                   {' '}
-                  https://github.com/EOS-uiux-Solutions/eos-icons-landing
+                  https://gitlab.com/SUSE-UIUX/eos-icons
                 </a>
               </p>
             </div>

From c3691bddde183c405d6e6d10f56c9245cfc2aaea Mon Sep 17 00:00:00 2001
From: AnshumanDhiman <67755381+AnshumanDhiman@users.noreply.github.com>
Date: Wed, 9 Mar 2022 22:07:41 +0530
Subject: [PATCH 09/33] added responsiveness to the table in the vue section

---
 src/pages/Docs.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Docs.js b/src/pages/Docs.js
index b3c6030b..ebcf5fb2 100644
--- a/src/pages/Docs.js
+++ b/src/pages/Docs.js
@@ -828,7 +828,7 @@ export default {
 </script>`}</code>
               </pre>
               <h2>Props</h2>
-              <div>
+              <div className='resp-link-edit'>
                 <table className='table'>
                   <thead>
                     <tr>

From 65cc3b216faa45c679648fb1c1cd54911a3c00fb Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Wed, 9 Mar 2022 23:41:37 +0530
Subject: [PATCH 10/33] fixed last active icon slected on switching select
 multiple icons

---
 src/modules/IconsSet.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index f0d73a0f..e8f64f59 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -251,7 +251,11 @@ const IconsSet = (props) => {
 
   /* Toggle customizable functionality */
   const toggleCustomize = (callback) => {
+    setShowPanel(false)
+    setSearchValue('')
+    setIconSelected('')
     setSelectMultiple(!selectMultiple)
+    window.history.replaceState('', 'EOS Icons', `${window.location.pathname}`)
     props.action()
     return callback
   }

From a67093f07ed2ba566c2f58d4726e6d44ef570a88 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Fri, 11 Mar 2022 21:59:02 +0530
Subject: [PATCH 11/33] fix unusual behaviour on deselecting an icon

---
 src/modules/IconsSet.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index e8f64f59..9654db0d 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -239,6 +239,7 @@ const IconsSet = (props) => {
   const selectIcon = (icon, callback) => {
     setShowPanel(icon !== iconSelected)
     setIconSelected(icon === iconSelected ? '' : icon)
+    setSearchValue(icon.name === searchValue ? '' : icon.name)
     if (selectMultiple) {
       window.history.replaceState(
         '',

From 9c3149a6f4f132d57fd7c63d53e6848b83552b53 Mon Sep 17 00:00:00 2001
From: akanksha <akanksha.t05@gmail.com>
Date: Fri, 11 Mar 2022 22:07:22 +0530
Subject: [PATCH 12/33] added label tag

---
 src/assets/scss/pages/home.scss | 6 ++++++
 src/modules/IconsSet.js         | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/src/assets/scss/pages/home.scss b/src/assets/scss/pages/home.scss
index 1f700ad5..0129a0a3 100644
--- a/src/assets/scss/pages/home.scss
+++ b/src/assets/scss/pages/home.scss
@@ -11,7 +11,13 @@
   padding: 0;
 }
 
+.search-input-label {
+  font-weight: bold;
+  margin-right: 10px;
+}
+
 .icons-control {
+  align-items: center;
   display: flex;
 
   &-search {
diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index e8f64f59..16128311 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -345,6 +345,9 @@ const IconsSet = (props) => {
     <>
       <PageHeader showHeaderIcon={true}>
         <div className='icons-control'>
+          <label htmlFor='search-input-id' className='search-input-label'>
+            Search:
+          </label>
           <div className='icons-control-search'>
             <i
               className={`eos-icons ${
@@ -360,6 +363,7 @@ const IconsSet = (props) => {
               {searchValue === '' ? 'search' : 'close'}
             </i>
             <input
+              id='search-input-id'
               value={searchValue}
               ref={searchRef}
               className='search-input'

From 1a7350cd23a3fde9e0a8a3b8201a0dc5b85d2961 Mon Sep 17 00:00:00 2001
From: akanksha <akanksha.t05@gmail.com>
Date: Sat, 12 Mar 2022 03:22:58 +0530
Subject: [PATCH 13/33] modified label and input

---
 src/assets/scss/pages/home.scss | 11 +++++++++--
 src/modules/IconsSet.js         |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/assets/scss/pages/home.scss b/src/assets/scss/pages/home.scss
index 0129a0a3..075ce107 100644
--- a/src/assets/scss/pages/home.scss
+++ b/src/assets/scss/pages/home.scss
@@ -12,8 +12,15 @@
 }
 
 .search-input-label {
-  font-weight: bold;
-  margin-right: 10px;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
 .icons-control {
diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index 16128311..627d74fc 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -365,6 +365,7 @@ const IconsSet = (props) => {
             <input
               id='search-input-id'
               value={searchValue}
+              placeholder='Search'
               ref={searchRef}
               className='search-input'
               type='text'

From 3a3dfe041ae84220e149fbec96e6fd7a14681ed4 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Sat, 12 Mar 2022 07:24:36 +0530
Subject: [PATCH 14/33] added function to change search value

---
 src/modules/IconsSet.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index 9654db0d..cf06b1ca 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -239,7 +239,9 @@ const IconsSet = (props) => {
   const selectIcon = (icon, callback) => {
     setShowPanel(icon !== iconSelected)
     setIconSelected(icon === iconSelected ? '' : icon)
-    setSearchValue(icon.name === searchValue ? '' : icon.name)
+    setSearchValue((searchValue) =>
+      icon.name === searchValue ? '' : icon.name
+    )
     if (selectMultiple) {
       window.history.replaceState(
         '',

From 665e2af8cbb2c7e71b4d6e28daa09d43082bb6d7 Mon Sep 17 00:00:00 2001
From: akanksha <akanksha.t05@gmail.com>
Date: Sun, 13 Mar 2022 01:23:32 +0530
Subject: [PATCH 15/33] modified CookiesBanner

---
 src/components/CookiesBanner.js | 12 +++++++-----
 src/utils/EosIcons.store.js     |  1 -
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/CookiesBanner.js b/src/components/CookiesBanner.js
index c980c7fa..2b31d063 100644
--- a/src/components/CookiesBanner.js
+++ b/src/components/CookiesBanner.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import AppContext from '../utils/AppContext'
-
+import { Link } from '@reach/router'
 import Button from '../components/Button'
 import Cookies from 'js-cookie'
 
@@ -32,16 +32,18 @@ const CookiesBanner = () => {
                 EOS Icons uses cookies to help us learn more about how we can
                 improve our product.
                 <br />
-                <a href='/cookies-policy'>Learn more about our cookie policy</a>
+                <Link to='/cookies-policy'>
+                  Learn more about our cookie policy
+                </Link>
               </p>
             </div>
             <div className='cookies-alert-buttons'>
-              <a
+              <Link
                 className='btn btn-default btn-inverted'
-                href='/cookies-policy'
+                to='/cookies-policy'
               >
                 Edit preferences
-              </a>
+              </Link>
               <Button
                 onClick={() =>
                   cookiesHandler(dispatch({ type: 'TOGGLE_CUSTOMIZE_COOKIES' }))
diff --git a/src/utils/EosIcons.store.js b/src/utils/EosIcons.store.js
index 8fce1d68..68e7e4f9 100644
--- a/src/utils/EosIcons.store.js
+++ b/src/utils/EosIcons.store.js
@@ -85,7 +85,6 @@ export const eosIconsState = {
       Cookies.set('cookies-preference', 'true')
     }
     this.cookiesToggle = !this.cookiesToggle
-    return window.location.reload()
   },
   selectAllIcons(search) {
     multipleIcons.splice(0, multipleIcons.length)

From 65b31998d38e81433cdfc69f91708f60b2bd6f58 Mon Sep 17 00:00:00 2001
From: akanksha <akanksha.t05@gmail.com>
Date: Sun, 13 Mar 2022 17:23:30 +0530
Subject: [PATCH 16/33] renamed hooks file

---
 src/hooks/{useWidow.jsx => useWindow.jsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/hooks/{useWidow.jsx => useWindow.jsx} (100%)

diff --git a/src/hooks/useWidow.jsx b/src/hooks/useWindow.jsx
similarity index 100%
rename from src/hooks/useWidow.jsx
rename to src/hooks/useWindow.jsx

From cb871332d2bc814790acad6e4944898237ff15bc Mon Sep 17 00:00:00 2001
From: akanksha <akanksha.t05@gmail.com>
Date: Sun, 13 Mar 2022 17:25:40 +0530
Subject: [PATCH 17/33] fixed typos in files

---
 src/components/PageHeader.js | 2 +-
 src/components/Tabs.js       | 2 +-
 src/modules/IconsSet.js      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PageHeader.js b/src/components/PageHeader.js
index 015e4db8..92bf49ab 100644
--- a/src/components/PageHeader.js
+++ b/src/components/PageHeader.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import useWindow from '../hooks/useWidow'
+import useWindow from '../hooks/useWindow'
 
 /* Create a config object with the classes neded as the size and theme */
 const config = {
diff --git a/src/components/Tabs.js b/src/components/Tabs.js
index 9b0b535a..f0dcfc7f 100644
--- a/src/components/Tabs.js
+++ b/src/components/Tabs.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react'
-import useWindow from '../hooks/useWidow'
+import useWindow from '../hooks/useWindow'
 import Toggle from './Toggle'
 import AppContext from '../utils/AppContext'
 import IconVersionToggle from '../components/IconVersionToggle'
diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index e8f64f59..a50857e7 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -9,7 +9,7 @@ import HowTo from '../components/HowToPanel'
 import { eosIconsState } from '../utils/EosIcons.store'
 import PageHeader from '../components/PageHeader'
 import { CategorySelector } from '../components/CategorySelector'
-import { useWindowsSize } from '../hooks/useWidow'
+import { useWindowsSize } from '../hooks/useWindow'
 
 const IconsSet = (props) => {
   const [iconSelected, setIconSelected] = useState('')

From 533bd0cff7b6de889daa45b55d277c102f58b40d Mon Sep 17 00:00:00 2001
From: shagunchandra <shagun.me19@nsut.ac.in>
Date: Sun, 13 Mar 2022 23:08:11 +0530
Subject: [PATCH 18/33] fixed the blue line thickness

---
 src/assets/scss/components/navigation.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/scss/components/navigation.scss b/src/assets/scss/components/navigation.scss
index 11d24d0a..eb98ec50 100644
--- a/src/assets/scss/components/navigation.scss
+++ b/src/assets/scss/components/navigation.scss
@@ -52,7 +52,7 @@ header {
 
       &::after {
         background-color: $primary;
-        bottom: -22px;
+        bottom: -19px;
         content: '';
         height: 5px;
         left: 0;

From 3f7fa57ba5ac50eadef3cb2d194419736da385bc Mon Sep 17 00:00:00 2001
From: Sarthak kundra <52133994+sarthakkundra@users.noreply.github.com>
Date: Mon, 14 Mar 2022 09:25:15 +0530
Subject: [PATCH 19/33] added feature request template (#88)

* added feture request template
---
 .github/ISSUE_TEMPLATE/feature_request.yml | 25 ++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/feature_request.yml

diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 00000000..8f644d9d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,25 @@
+name: Feature Request
+description: Suggest an idea for this project
+title: "Feature Request: "
+labels: [enhancement]
+
+body:
+  - type: markdown
+    attributes:
+      value: Thank you for taking the time to file a Feature Request report.
+  - type: textarea
+    attributes:
+      label: Is your feature request related to a problem? Please describe.
+      description: 'A clear and concise description of what the problem is. Ex. I am always frustrated when [...]'
+  - type: textarea
+    attributes:
+      label: Describe the solution you'd like.
+      description: 'A clear and concise description of what you want to happen.'
+  - type: textarea
+    attributes:
+      label: Describe alternatives you've considered
+      description: 'A clear and concise description of any alternative solutions or features you have considered.'
+  - type: textarea
+    attributes:
+      label: Additional context.
+      description: 'Add any other context or screenshots about the feature request here.'
\ No newline at end of file

From 58bd330bffb2da10c6e4ceaa4b385738f707a6b6 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Mon, 14 Mar 2022 22:59:10 +0530
Subject: [PATCH 20/33] fix click outside behaviour when color picker is open

---
 src/components/IconEditor.js | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/IconEditor.js b/src/components/IconEditor.js
index 9c273c73..8a86b4ea 100644
--- a/src/components/IconEditor.js
+++ b/src/components/IconEditor.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react'
+import React, { useState, useEffect, useContext, useRef } from 'react'
 import { SketchPicker } from 'react-color'
 import Button from './Button'
 import axios from 'axios'
@@ -24,6 +24,21 @@ const IconEditor = (props) => {
   const [svgError, setSvgError] = useState(true)
   const { state } = useContext(AppContext)
 
+  const iconEditorRef = useRef()
+  useEffect(() => {
+    const clickOutsideEventHandler = (event) => {
+      if (!iconEditorRef.current.contains(event.target)) {
+        show()
+      }
+    }
+
+    document.addEventListener('click', clickOutsideEventHandler)
+
+    return () => {
+      document.removeEventListener('click', clickOutsideEventHandler)
+    }
+  }, [show])
+
   const exportSizes = [
     '18',
     '24',
@@ -174,7 +189,7 @@ const IconEditor = (props) => {
 
   return isActive ? (
     <div className='icon-editor'>
-      <div className='icon-editor-card'>
+      <div className='icon-editor-card' ref={iconEditorRef}>
         <div className='close' onClick={show} />
         <h2>Customize Icon</h2>
         <div className='flex flex-row icon-editor-content'>

From 5ee545f8e59fd0f38d8eb4302648b637fa201fe4 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Mon, 14 Mar 2022 23:31:51 +0530
Subject: [PATCH 21/33] smoothen current color picker cursor by makint it
 continuous

---
 src/components/IconEditor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/IconEditor.js b/src/components/IconEditor.js
index 9c273c73..90b9c857 100644
--- a/src/components/IconEditor.js
+++ b/src/components/IconEditor.js
@@ -184,7 +184,7 @@ const IconEditor = (props) => {
               className='color-picker'
               color={color}
               disableAlpha={true}
-              onChangeComplete={changeColor}
+              onChange={changeColor}
             />
             <br />
             {!svgError && (

From 891f79273773a065d789b1652bd7f3812e85a996 Mon Sep 17 00:00:00 2001
From: akanksha <akanksha.t05@gmail.com>
Date: Tue, 15 Mar 2022 22:16:52 +0530
Subject: [PATCH 22/33] fixed footer typo

---
 src/utils/Links.store.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/Links.store.js b/src/utils/Links.store.js
index b0f63cf2..4e83ebbd 100644
--- a/src/utils/Links.store.js
+++ b/src/utils/Links.store.js
@@ -56,10 +56,10 @@ export default [
         target: '_blank'
       },
       {
-        name: 'How to colaborate',
+        name: 'How to collaborate',
         href: 'https://brand.eosdesignsystem.com/ContributingGuide',
         category: 'External link',
-        action: 'Link to how to colaborate',
+        action: 'Link to how to collaborate',
         label: 'Footer',
         target: '_blank'
       }

From 7b4ca93431d6400789a80a6d5bde905e64c6e4f7 Mon Sep 17 00:00:00 2001
From: AnshumanDhiman <67755381+AnshumanDhiman@users.noreply.github.com>
Date: Tue, 15 Mar 2022 22:41:17 +0530
Subject: [PATCH 23/33] Added Alert for when no font is selected

---
 src/components/CustomizeIconsPanel.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/CustomizeIconsPanel.js b/src/components/CustomizeIconsPanel.js
index 7d530d5b..203b0723 100644
--- a/src/components/CustomizeIconsPanel.js
+++ b/src/components/CustomizeIconsPanel.js
@@ -56,6 +56,8 @@ const CustomizeIconsPanel = (props) => {
         }`,
         payload: value.multipleIcons
       }).then(setServerResponse)
+    } else {
+      window.alert('Please select atleast one icon')
     }
   }
 

From 5faafe1e39c928744649618c71177f0f4fbc9cb5 Mon Sep 17 00:00:00 2001
From: AnshumanDhiman <67755381+AnshumanDhiman@users.noreply.github.com>
Date: Tue, 15 Mar 2022 23:11:51 +0530
Subject: [PATCH 24/33] Fixed spacing issues in Outlined and Filled icons

---
 src/assets/scss/components/icon-list.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/assets/scss/components/icon-list.scss b/src/assets/scss/components/icon-list.scss
index fea4b47a..c14e699d 100644
--- a/src/assets/scss/components/icon-list.scss
+++ b/src/assets/scss/components/icon-list.scss
@@ -41,6 +41,16 @@
       text-align: center;
       width: 32px;
     }
+
+    .eos-icons-outlined,
+    img {
+      border: 2px solid $white;
+      height: 32px;
+      margin: 10px;
+      padding: 10px;
+      text-align: center;
+      width: 32px;
+    }
   }
 }
 

From c147ca37b04b8ac390a9645be5ebf71133f6a6ea Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Wed, 16 Mar 2022 07:50:24 +0530
Subject: [PATCH 25/33] moving useClickOutside logic to a seperate hook

---
 src/components/IconEditor.js | 15 ++-------------
 src/hooks/useClickOutside.js | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 13 deletions(-)
 create mode 100644 src/hooks/useClickOutside.js

diff --git a/src/components/IconEditor.js b/src/components/IconEditor.js
index 8a86b4ea..0a84ab8f 100644
--- a/src/components/IconEditor.js
+++ b/src/components/IconEditor.js
@@ -7,6 +7,7 @@ import AppContext from '../utils/AppContext'
 /* https://www.npmjs.com/package/react-svg the package to work with SVG's */
 import { ReactSVG } from 'react-svg'
 import { ICON_PICKER_API_URL } from '../config.json'
+import useClickOutside from '../hooks/useClickOutside'
 
 const IconEditor = (props) => {
   const apiBaseUrl = ICON_PICKER_API_URL
@@ -25,19 +26,7 @@ const IconEditor = (props) => {
   const { state } = useContext(AppContext)
 
   const iconEditorRef = useRef()
-  useEffect(() => {
-    const clickOutsideEventHandler = (event) => {
-      if (!iconEditorRef.current.contains(event.target)) {
-        show()
-      }
-    }
-
-    document.addEventListener('click', clickOutsideEventHandler)
-
-    return () => {
-      document.removeEventListener('click', clickOutsideEventHandler)
-    }
-  }, [show])
+  useClickOutside(iconEditorRef, () => show())
 
   const exportSizes = [
     '18',
diff --git a/src/hooks/useClickOutside.js b/src/hooks/useClickOutside.js
new file mode 100644
index 00000000..4f862609
--- /dev/null
+++ b/src/hooks/useClickOutside.js
@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+
+const useClickOutside = (ref, callback) => {
+  const handleClick = (e) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback()
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick)
+
+    return () => {
+      document.removeEventListener('click', handleClick)
+    }
+  })
+}
+
+export default useClickOutside

From 215f4a99a50f3f596e3c6276f52e7897ee216c5a Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Wed, 16 Mar 2022 21:01:39 +0530
Subject: [PATCH 26/33] fixed file upload format in Upload JSON button

---
 src/components/CustomizeIconsPanel.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/CustomizeIconsPanel.js b/src/components/CustomizeIconsPanel.js
index 203b0723..6b465170 100644
--- a/src/components/CustomizeIconsPanel.js
+++ b/src/components/CustomizeIconsPanel.js
@@ -92,6 +92,7 @@ const CustomizeIconsPanel = (props) => {
             <input
               type='file'
               id='upload-file'
+              accept='application/JSON'
               hidden
               name='file'
               onChange={(event) => search(event.target.files[0], dispatch)}

From 38ceeb15e9c95105476ea0d5df0f26a97f747f50 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <55888723+ayushsatyam146@users.noreply.github.com>
Date: Wed, 16 Mar 2022 23:24:11 +0530
Subject: [PATCH 27/33] fixing re-render of useEffect hook

---
 src/hooks/useClickOutside.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useClickOutside.js b/src/hooks/useClickOutside.js
index 4f862609..eabd0ef9 100644
--- a/src/hooks/useClickOutside.js
+++ b/src/hooks/useClickOutside.js
@@ -13,7 +13,7 @@ const useClickOutside = (ref, callback) => {
     return () => {
       document.removeEventListener('click', handleClick)
     }
-  })
+  }, [])
 }
 
 export default useClickOutside

From 605ea92b6ba47d203da033add11cd85118a69c01 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Fri, 18 Mar 2022 14:24:11 +0530
Subject: [PATCH 28/33] fixing build fail caused by useClickOutside

---
 src/hooks/useClickOutside.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/hooks/useClickOutside.js b/src/hooks/useClickOutside.js
index eabd0ef9..da4ac2e1 100644
--- a/src/hooks/useClickOutside.js
+++ b/src/hooks/useClickOutside.js
@@ -1,11 +1,14 @@
-import { useEffect } from 'react'
+import { useEffect, useCallback } from 'react'
 
 const useClickOutside = (ref, callback) => {
-  const handleClick = (e) => {
-    if (ref.current && !ref.current.contains(e.target)) {
-      callback()
-    }
-  }
+  const handleClick = useCallback(
+    (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback()
+      }
+    },
+    [callback, ref]
+  )
 
   useEffect(() => {
     document.addEventListener('click', handleClick)
@@ -13,7 +16,7 @@ const useClickOutside = (ref, callback) => {
     return () => {
       document.removeEventListener('click', handleClick)
     }
-  }, [])
+  }, [handleClick])
 }
 
 export default useClickOutside

From 9abdc1e864d0a5f867b2f2fb1a1053873bffb518 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Sat, 19 Mar 2022 22:15:41 +0530
Subject: [PATCH 29/33] Open icon editor panel on double clicking an icon

---
 src/components/IconDisplay.js | 11 +++++--
 src/modules/IconsSet.js       | 56 +++++++++++++++++++++++++++--------
 2 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/src/components/IconDisplay.js b/src/components/IconDisplay.js
index e668d5a4..8715740c 100644
--- a/src/components/IconDisplay.js
+++ b/src/components/IconDisplay.js
@@ -1,7 +1,8 @@
 import React from 'react'
 
 const Icon = (props) => {
-  const { name, size, action, active, iconsTheme } = props
+  const { name, size, onClickAction, onDoubleClickAction, active, iconsTheme } =
+    props
   /* Possible icon sizes */
   const sizes = {
     18: 'eos-18',
@@ -19,7 +20,13 @@ const Icon = (props) => {
   }
 
   return (
-    <div className={iconClass()} onClick={action}>
+    <div
+      className={iconClass()}
+      onClick={(event) => {
+        if (event.detail === 1) onClickAction()
+        if (event.detail === 2) onDoubleClickAction()
+      }}
+    >
       <i
         className={`eos-icons${iconsTheme === 'outlined' ? '-outlined' : ' '} ${
           sizes[size]
diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index feecc73e..ae012d09 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -10,6 +10,7 @@ import { eosIconsState } from '../utils/EosIcons.store'
 import PageHeader from '../components/PageHeader'
 import { CategorySelector } from '../components/CategorySelector'
 import { useWindowsSize } from '../hooks/useWindow'
+import IconEditor from '../components/IconEditor'
 
 const IconsSet = (props) => {
   const [iconSelected, setIconSelected] = useState('')
@@ -29,6 +30,11 @@ const IconsSet = (props) => {
   const [selectMultiple, setSelectMultiple] = useState(true)
   const [emptySearchResult, setEmptySearchResult] = useState(false)
   const [suggestedString, setSuggestedString] = useState('')
+  const [iconEditor, setIconEditor] = useState(false)
+
+  const iconEditorToggle = () => {
+    setIconEditor(!iconEditor)
+  }
 
   const activeIconRef = useRef(null)
   useEffect(() => {
@@ -500,7 +506,7 @@ const IconsSet = (props) => {
                             key={icon.name}
                             name={icon.name}
                             iconsTheme={state.iconsTheme}
-                            action={() =>
+                            onClickAction={() =>
                               selectIcon(
                                 icon,
                                 dispatch({
@@ -511,6 +517,7 @@ const IconsSet = (props) => {
                                 })
                               )
                             }
+                            onDoubleClickAction={() => iconEditorToggle()}
                           />
                         </div>
                       ) : (
@@ -520,7 +527,7 @@ const IconsSet = (props) => {
                           key={icon.name}
                           name={icon.name}
                           iconsTheme={state.iconsTheme}
-                          action={() =>
+                          onClickAction={() =>
                             selectIcon(
                               icon,
                               dispatch({
@@ -531,6 +538,7 @@ const IconsSet = (props) => {
                               })
                             )
                           }
+                          onDoubleClickAction={() => iconEditorToggle()}
                         />
                       )
                     )}
@@ -566,17 +574,20 @@ const IconsSet = (props) => {
                     icon === iconSelected?.name ? 'active' : ''
                   }`}
                   key={index}
-                  onClick={() => {
-                    setIconSelected({ name: icon })
-                    setShowPanel(true)
-                    setSearchValue(icon)
-                    if (selectMultiple) {
-                      window.history.replaceState(
-                        '',
-                        'EOS Icons',
-                        `${window.location.pathname}?iconName=${icon}&type=animated`
-                      )
+                  onClick={(event) => {
+                    if (event.detail === 1) {
+                      setIconSelected({ name: icon })
+                      setShowPanel(true)
+                      setSearchValue(icon)
+                      if (selectMultiple) {
+                        window.history.replaceState(
+                          '',
+                          'EOS Icons',
+                          `${window.location.pathname}?iconName=${icon}&type=animated`
+                        )
+                      }
                     }
+                    if (event.detail === 2) iconEditorToggle()
                   }}
                 >
                   <img
@@ -589,6 +600,27 @@ const IconsSet = (props) => {
             </div>
           </div>
         </Tabs>
+        {iconEditor ? (
+          tab === 'Static Icons' ? (
+            <IconEditor
+              isActive={iconEditor}
+              show={iconEditorToggle}
+              iconNames={[iconSelected?.name]}
+              iconType={'static'}
+              theme={state.iconsTheme}
+            />
+          ) : (
+            <IconEditor
+              isActive={iconEditor}
+              show={iconEditorToggle}
+              iconNames={[iconSelected?.name]}
+              iconType={'animated'}
+              theme={state.iconsTheme}
+            />
+          )
+        ) : (
+          ''
+        )}
       </div>
     </>
   )

From 6712c198b6b644ec699c58460c0859e45ce011cd Mon Sep 17 00:00:00 2001
From: Atharva Shirdhankar <72031540+StarTrooper08@users.noreply.github.com>
Date: Mon, 21 Mar 2022 02:27:43 +0530
Subject: [PATCH 30/33] Navbar elements alignment

aligned the navbar elements
---
 src/assets/scss/base/spacing.scss | 4 ++++
 src/components/Navigation.js      | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/assets/scss/base/spacing.scss b/src/assets/scss/base/spacing.scss
index 109db10a..29959976 100644
--- a/src/assets/scss/base/spacing.scss
+++ b/src/assets/scss/base/spacing.scss
@@ -6,6 +6,10 @@
   padding-top: $xxl;
 }
 
+.padding-bottom-s {
+  padding-bottom: $s;
+}
+
 .float-right {
   cursor: pointer;
   float: right;
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 70a73965..4dfbcc7a 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -22,7 +22,7 @@ const Navigation = () => {
             <img className='logo' src={eosIcon} alt='eos-icons logo' />
           </div>
         </Link>
-        <nav className='padding-top-xs'>
+        <nav className='padding-bottom-s'>
           <NavLink to='/'>
             <i className='eos-icons'>miscellaneous</i>
             Icons

From 5f82cc8b0092424d9c4522a3d8cfb61e438f6fdb Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Mon, 21 Mar 2022 18:56:32 +0530
Subject: [PATCH 31/33] wrap animated icons in IconDisplay component

---
 src/components/IconDisplay.js |  9 +++++++--
 src/modules/IconsSet.js       | 20 ++++++++------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/IconDisplay.js b/src/components/IconDisplay.js
index e668d5a4..336f4a88 100644
--- a/src/components/IconDisplay.js
+++ b/src/components/IconDisplay.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const Icon = (props) => {
-  const { name, size, action, active, iconsTheme } = props
+  const { name, size, action, type, active, iconsTheme } = props
   /* Possible icon sizes */
   const sizes = {
     18: 'eos-18',
@@ -18,7 +18,7 @@ const Icon = (props) => {
     return finalClass
   }
 
-  return (
+  return type === 'static' ? (
     <div className={iconClass()} onClick={action}>
       <i
         className={`eos-icons${iconsTheme === 'outlined' ? '-outlined' : ' '} ${
@@ -29,6 +29,11 @@ const Icon = (props) => {
       </i>
       {name}
     </div>
+  ) : (
+    <div className={iconClass()} onClick={action}>
+      <img src={require(`eos-icons/animated-svg/${name}.svg`)} alt={name} />
+      {name}
+    </div>
   )
 }
 
diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index feecc73e..bea3c8e5 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -500,6 +500,7 @@ const IconsSet = (props) => {
                             key={icon.name}
                             name={icon.name}
                             iconsTheme={state.iconsTheme}
+                            type={'static'}
                             action={() =>
                               selectIcon(
                                 icon,
@@ -520,6 +521,7 @@ const IconsSet = (props) => {
                           key={icon.name}
                           name={icon.name}
                           iconsTheme={state.iconsTheme}
+                          type={'static'}
                           action={() =>
                             selectIcon(
                               icon,
@@ -561,12 +563,12 @@ const IconsSet = (props) => {
             )}
             <div className='icons-list'>
               {state.animatedIcons.map((icon, index) => (
-                <div
-                  className={`icon-container ${
-                    icon === iconSelected?.name ? 'active' : ''
-                  }`}
+                <Icon
                   key={index}
-                  onClick={() => {
+                  name={icon}
+                  type={'animated'}
+                  active={icon === iconSelected?.name}
+                  action={() => {
                     setIconSelected({ name: icon })
                     setShowPanel(true)
                     setSearchValue(icon)
@@ -578,13 +580,7 @@ const IconsSet = (props) => {
                       )
                     }
                   }}
-                >
-                  <img
-                    src={require(`eos-icons/animated-svg/${icon}.svg`)}
-                    alt={icon}
-                  />
-                  {icon}
-                </div>
+                />
               ))}
             </div>
           </div>

From 95bacd5b4ef8c3e5cc87090285041eb9035414a5 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Wed, 23 Mar 2022 11:02:34 +0530
Subject: [PATCH 32/33] resolving merge conflicts and moving animated icons
 code in a seperate function

---
 src/components/IconDisplay.js | 24 +++++++++++++++---
 src/modules/IconsSet.js       | 48 +++++++++++++++++------------------
 2 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/components/IconDisplay.js b/src/components/IconDisplay.js
index 8715740c..b9308f59 100644
--- a/src/components/IconDisplay.js
+++ b/src/components/IconDisplay.js
@@ -1,8 +1,15 @@
 import React from 'react'
 
 const Icon = (props) => {
-  const { name, size, onClickAction, onDoubleClickAction, active, iconsTheme } =
-    props
+  const {
+    name,
+    size,
+    onClickAction,
+    onDoubleClickAction,
+    type,
+    active,
+    iconsTheme
+  } = props
   /* Possible icon sizes */
   const sizes = {
     18: 'eos-18',
@@ -19,7 +26,7 @@ const Icon = (props) => {
     return finalClass
   }
 
-  return (
+  return type === 'static' ? (
     <div
       className={iconClass()}
       onClick={(event) => {
@@ -36,6 +43,17 @@ const Icon = (props) => {
       </i>
       {name}
     </div>
+  ) : (
+    <div
+      className={iconClass()}
+      onClick={(event) => {
+        if (event.detail === 1) onClickAction()
+        if (event.detail === 2) onDoubleClickAction()
+      }}
+    >
+      <img src={require(`eos-icons/animated-svg/${name}.svg`)} alt={name} />
+      {name}
+    </div>
   )
 }
 
diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index ae012d09..1d72e4b0 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -258,6 +258,19 @@ const IconsSet = (props) => {
     return callback
   }
 
+  const selectAnimatedIcon = (icon) => {
+    setIconSelected({ name: icon })
+    setShowPanel(true)
+    setSearchValue(icon)
+    if (selectMultiple) {
+      window.history.replaceState(
+        '',
+        'EOS Icons',
+        `${window.location.pathname}?iconName=${icon}&type=animated`
+      )
+    }
+  }
+
   /* Toggle customizable functionality */
   const toggleCustomize = (callback) => {
     setShowPanel(false)
@@ -506,6 +519,7 @@ const IconsSet = (props) => {
                             key={icon.name}
                             name={icon.name}
                             iconsTheme={state.iconsTheme}
+                            type={'static'}
                             onClickAction={() =>
                               selectIcon(
                                 icon,
@@ -527,6 +541,7 @@ const IconsSet = (props) => {
                           key={icon.name}
                           name={icon.name}
                           iconsTheme={state.iconsTheme}
+                          type={'static'}
                           onClickAction={() =>
                             selectIcon(
                               icon,
@@ -569,33 +584,16 @@ const IconsSet = (props) => {
             )}
             <div className='icons-list'>
               {state.animatedIcons.map((icon, index) => (
-                <div
-                  className={`icon-container ${
-                    icon === iconSelected?.name ? 'active' : ''
-                  }`}
+                <Icon
                   key={index}
-                  onClick={(event) => {
-                    if (event.detail === 1) {
-                      setIconSelected({ name: icon })
-                      setShowPanel(true)
-                      setSearchValue(icon)
-                      if (selectMultiple) {
-                        window.history.replaceState(
-                          '',
-                          'EOS Icons',
-                          `${window.location.pathname}?iconName=${icon}&type=animated`
-                        )
-                      }
-                    }
-                    if (event.detail === 2) iconEditorToggle()
+                  name={icon}
+                  type={'animated'}
+                  active={icon === iconSelected?.name}
+                  onClickAction={() => {
+                    selectAnimatedIcon(icon)
                   }}
-                >
-                  <img
-                    src={require(`eos-icons/animated-svg/${icon}.svg`)}
-                    alt={icon}
-                  />
-                  {icon}
-                </div>
+                  onDoubleClickAction={() => iconEditorToggle()}
+                />
               ))}
             </div>
           </div>

From 01a117b21f6a80484ccab628c857ad8cde4666f6 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Wed, 23 Mar 2022 13:53:58 +0530
Subject: [PATCH 33/33] fix behaviour of unselecting an animated icon

---
 src/modules/IconsSet.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index 1d72e4b0..5c0b1f13 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -259,9 +259,9 @@ const IconsSet = (props) => {
   }
 
   const selectAnimatedIcon = (icon) => {
-    setIconSelected({ name: icon })
-    setShowPanel(true)
-    setSearchValue(icon)
+    setIconSelected({ name: icon } === iconSelected ? '' : { name: icon })
+    setShowPanel({ name: icon } !== iconSelected)
+    setSearchValue(icon === searchValue ? '' : icon)
     if (selectMultiple) {
       window.history.replaceState(
         '',