fix(card): reset only recent element styles

docs: update icons styles

lib/components/displays/icons.tsx

@@ -8,6 +8,9 @@ const Icons: React.FC = () => {
   const icons = Object.entries(Icon).filter(
     ([name]) => !query || name.toLowerCase().includes(query.toLowerCase())
   )
+  const clickHandler = (name: string) => {
+    console.log(name)
+  }
 
   return (
     <>
@@ -16,11 +19,9 @@ const Icons: React.FC = () => {
         <Input width="100%" icon={<Icon.Search />} placeholder="Search" {...bindings} />
         <div className="icons-grid">
           {icons.map(([name, Component]) => (
-            <div className="icon-item" key={name}>
+            <div className="icon-item" key={name} onClick={() => clickHandler(name)}>
               <Component />
-              <Text type="secondary" small>
-                {name}
-              </Text>
+              <Text type="secondary" small>{name}</Text>
             </div>
           ))}
         </div>
@@ -40,6 +41,7 @@ const Icons: React.FC = () => {
           display: flex;
           flex-wrap: wrap;
           margin-top: 8pt;
+          justify-content: space-around;
         }
 
         .icon-item {
@@ -48,13 +50,32 @@ const Icons: React.FC = () => {
           align-items: center;
           justify-content: space-evenly;
           flex-grow: 0;
-          flex-basis: 25%;
+          flex-basis: 125px;
           min-width: 0px;
-          height: 100px;
+          height: 95px;
+          margin: 12px 5px;
+          border-radius: ${theme.layout.radius};
+          box-sizing: border-box;
+          cursor: pointer;
+          user-select: none;
+          transition: all 150ms ease-in-out;
         }
+        
+        .icon-item > :global(small) {
+          display: inline-block;
+          width: 90%;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        .icon-item:hover {
+          box-shadow: ${theme.expressiveness.shadowMedium};
+        }
+        
         @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
           .icon-item {
-            flex-basis: 33%;
+            flex-basis: 30%;
           }
         }
       `}</style>