feat: layout icon hover style

Author: unimu-cic

src/components/ContentWrap.jsx

@@ -1103,11 +1103,11 @@ export default class ContentWrap extends Component {
             </div>
             {window.zenumlDesktop ? null : (
               <div className="shrink-0 relative z-10 bg-gray-200 py-2 px-6 flex justify-between">
-                <div className="flex gap-4 items-center">
+                <div className="flex gap-4 items-center text-black-100">
                   <button
                     onClick={() => this.props.layoutBtnClickHandler(1)}
                     id="layoutBtn1"
-                    className="w-7 h-7 hover:bg-gray-300 flex items-center justify-center rounded-lg duration-200"
+                    className="w-7 h-7 hover:text-gray-800 flex items-center justify-center rounded-lg duration-200"
                     aria-label="Switch to layout with preview on right"
                   >
                     <svg className="w-5 h-5">
@@ -1117,7 +1117,7 @@ export default class ContentWrap extends Component {
                   <button
                     onClick={() => this.props.layoutBtnClickHandler(2)}
                     id="layoutBtn2"
-                    className="w-7 h-7 hover:bg-gray-300 flex items-center justify-center rounded-lg duration-200"
+                    className="w-7 h-7 hover:text-gray-800 flex items-center justify-center rounded-lg duration-200"
                     aria-label="Switch to layout with preview on bottom"
                   >
                     <svg className="w-5 h-5">
@@ -1127,7 +1127,7 @@ export default class ContentWrap extends Component {
                   <button
                     onClick={() => this.props.layoutBtnClickHandler(3)}
                     id="layoutBtn3"
-                    className="w-7 h-7 hover:bg-gray-300 flex items-center justify-center rounded-lg duration-200"
+                    className="w-7 h-7 hover:text-gray-800 flex items-center justify-center rounded-lg duration-200"
                     aria-label="Switch to layout with preview on left"
                   >
                     <svg className="w-5 h-5">

src/components/Icons.jsx

@@ -254,14 +254,14 @@ export function Icons() {
         </symbol>
         <symbol id="icon-layout-1" viewBox="0 0 20 18">
           <path
-            fill="#7C7C7C"
+            fill="currentColor"
             d="M16 0.25H4C1.582 0.25 0.25 1.582 0.25 4V14C0.25 16.418 1.582 17.75 4 17.75H16C18.418 17.75 19.75 16.418 19.75 14V4C19.75 1.582 18.418 0.25 16 0.25ZM4 1.75H12.25V8.25H1.75V4C1.75 2.423 2.423 1.75 4 1.75ZM1.75 14V9.75H12.25V16.25H4C2.423 16.25 1.75 15.577 1.75 14ZM18.25 14C18.25 15.577 17.577 16.25 16 16.25H13.75V1.75H16C17.577 1.75 18.25 2.423 18.25 4V14Z"
           />
         </symbol>
         <symbol id="icon-layout-2" viewBox="0 0 20 18">
           <path
             d="M16 0.25H4C1.582 0.25 0.25 1.582 0.25 4V14C0.25 16.418 1.582 17.75 4 17.75H16C18.418 17.75 19.75 16.418 19.75 14V4C19.75 1.582 18.418 0.25 16 0.25ZM18.25 4V10.25H10.75V1.75H16C17.577 1.75 18.25 2.423 18.25 4ZM4 1.75H9.25V10.25H1.75V4C1.75 2.423 2.423 1.75 4 1.75ZM16 16.25H4C2.423 16.25 1.75 15.577 1.75 14V11.75H18.25V14C18.25 15.577 17.577 16.25 16 16.25Z"
-            fill="#7C7C7C"
+            fill="currentColor"
           />
         </symbol>
         <symbol id="icon-layout-3" viewBox="0 0 20 18">
@@ -274,7 +274,7 @@ export function Icons() {
           >
             <path
               d="M16 0.25H4C1.582 0.25 0.25 1.582 0.25 4V14C0.25 16.418 1.582 17.75 4 17.75H16C18.418 17.75 19.75 16.418 19.75 14V4C19.75 1.582 18.418 0.25 16 0.25ZM18.25 4V8.25H7.75V1.75H16C17.577 1.75 18.25 2.423 18.25 4ZM1.75 14V4C1.75 2.423 2.423 1.75 4 1.75H6.25V16.25H4C2.423 16.25 1.75 15.577 1.75 14ZM16 16.25H7.75V9.75H18.25V14C18.25 15.577 17.577 16.25 16 16.25Z"
-              fill="#7C7C7C"
+              fill="currentColor"
             />
           </svg>
         </symbol>

tailwind.config.js

@@ -26,6 +26,7 @@ module.exports = {
           500: '#A5A5A5',
           600: '#5A5A5A',
           700: '#454856',
+					800: '#344054'
         },
         primary: {
           100: '#E2E5E9',
@@ -36,6 +37,7 @@ module.exports = {
           400: '#98a2b3',
         },
         black: {
+					100: '#7C7C7C',
           400: '#2c2d31',
           500: '#202020',
           600: '#3e3e42',