Improved icon sizes in SmartNodeSelector (equinor#426)

rubenthoms · Oct 16, 2023 · d5cb21f · d5cb21f
1 parent 9f94ec6
commit d5cb21f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx b/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
@@ -171,7 +171,7 @@ export class Tag extends React.Component<TagProps> {
                     <button
                         key={"TagPreviousButton_" + index}
                         className={resolveClassNames(
-                            "appearance-none bg-cyan-600 border-0 cursor-pointer inline-block outline-none p-0 m-0 h-1/2 w-4 disabled:opacity-30 disabled:cursor-default",
+                            "appearance-none bg-cyan-600 border-0 cursor-pointer inline-block outline-none p-0 m-0 h-1/2 w-4 disabled:opacity-30 disabled:cursor-default text-xs",
                             { "hover:bg-cyan-500": position !== 0 }
                         )}
                         disabled={position === 0}
@@ -186,12 +186,12 @@ export class Tag extends React.Component<TagProps> {
                             e.stopPropagation();
                         }}
                     >
-                        <ExpandLess fontSize="small" className="text-white" />
+                        <ExpandLess fontSize="inherit" className="text-white" />
                     </button>
                     <button
                         key={"TagNextButton_" + index}
                         className={resolveClassNames(
-                            "appearance-none bg-cyan-600 border-0 cursor-pointer inline-block outline-none p-0 m-0 h-1/2 w-4 disabled:opacity-30 disabled:cursor-default",
+                            "appearance-none bg-cyan-600 border-0 cursor-pointer inline-block outline-none p-0 m-0 h-1/2 w-4 disabled:opacity-30 disabled:cursor-default text-xs",
                             { "hover:bg-cyan-500": position !== subgroups.length - 1 }
                         )}
                         disabled={position === subgroups.length - 1}
@@ -206,7 +206,7 @@ export class Tag extends React.Component<TagProps> {
                             e.stopPropagation();
                         }}
                     >
-                        <ExpandMore fontSize="small" className="text-white" />
+                        <ExpandMore fontSize="inherit" className="text-white" />
                     </button>
                 </div>
             );
@@ -407,11 +407,11 @@ export class Tag extends React.Component<TagProps> {
                     <button
                         type="button"
                         key={"TagRemoveButton_" + index}
-                        className="absolute -right-2 -top-2 bg-cyan-600 border border-white rounded-full cursor-pointer w-4 h-4 p-0 flex items-center justify-center hover:bg-cyan-500 z-8"
+                        className="absolute -right-2 -top-2 bg-cyan-600 border border-white rounded-full cursor-pointer w-4 h-4 p-0 flex items-center justify-center hover:bg-cyan-500 z-8 text-sm"
                         title="Remove"
                         onClick={(e): void => removeTag(e, index)}
                     >
-                        <Close fontSize="small" className="text-white" />
+                        <Close fontSize="inherit" className="text-white" />
                     </button>
                 )}
                 {this.createBrowseButtons(treeNodeSelection, index)}

diff --git a/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx b/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx
@@ -1677,13 +1677,13 @@ export class SmartNodeSelectorComponent extends React.Component<SmartNodeSelecto
                     </ul>
                     <div className="absolute right-2 top-1/2 -mt-3">
                         <button
-                            className="appearance-none bg-cyan-600 rounded-full w-6 h-6 flex items-center justify-center hover:bg-cyan-500 text-white cursor-pointer disabled:hidden"
+                            className="appearance-none bg-cyan-600 rounded-full w-6 h-6 flex items-center justify-center hover:bg-cyan-500 text-white cursor-pointer disabled:hidden text-sm"
                             type="button"
                             title="Clear all"
                             onClick={this.clearAllTags}
                             disabled={this.countTags() <= 1 && this.hasLastEmptyTag()}
                         >
-                            <Close fontSize="small" />
+                            <Close fontSize="inherit" />
                         </button>
                     </div>
                     {showSuggestions && (