From a401ff0b462c5a5458f5b77f34040ceb9af7cda3 Mon Sep 17 00:00:00 2001
From: Deepjyoti Barman <deep.barman30@gmail.com>
Date: Thu, 17 Sep 2020 11:12:47 +0530
Subject: [PATCH] Resize the cog icon and change it's look

The cog icon looked too large before and the way it looked wasn't too
good. Updated the icons SVG and changed its size.
---
 css/main.css   | 13 ++++++++-----
 index.html     |  6 ++++--
 scss/main.scss | 13 ++++++++-----
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/css/main.css b/css/main.css
index cd59a45..5d4d7bf 100644
--- a/css/main.css
+++ b/css/main.css
@@ -154,10 +154,13 @@ body {
       cursor: pointer; }
 
 #settings-cog {
-  width: 48px;
-  height: 48px;
+  width: 23px;
+  height: 23px;
   position: absolute;
   bottom: 25px;
-  right: 25px; }
-  #settings-cog .cog:hover {
-    fill: white; }
+  right: 25px;
+  transition: 2s ease-in; }
+  #settings-cog:hover .cog {
+    fill: white;
+    stroke: white;
+    transition: 2s ease-in; }
diff --git a/index.html b/index.html
index 1c7312d..9334809 100644
--- a/index.html
+++ b/index.html
@@ -35,8 +35,10 @@
         </div>
         <div id="other-content">
         </div>
-        <svg viewBox="0 0 24 24" id="settings-cog">
-          <path class="cog" fill="#6F6F6F" ng-attr-d="{{icon.data}}" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
+        <svg id="settings-cog" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" viewBox="0 0 24 24" stroke-width="1.5" stroke="#607D8B" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z"/>
+            <path class="cog" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+            <circle cx="12" cy="12" r="3" />
         </svg>
     </div>
     <!--JSON Editor-->
diff --git a/scss/main.scss b/scss/main.scss
index 0247f1b..96fd6b8 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -254,13 +254,16 @@ body {
 }
 
 #settings-cog {
-    width: 48px;
-    height: 48px;
+    width: 23px;
+    height: 23px;
     position: absolute;
     bottom: 25px;
-    right: 25px; 
-
-    .cog:hover {
+    right: 25px;
+    transition: 2s ease-in;
+    
+    &:hover .cog {
         fill: white;
+        stroke: white;
+        transition: 2s ease-in;
     }
 }
\ No newline at end of file