[web] Reduce the default icon size

To make the section icons smaller by default, reducing the left gap generated when using sections without icons.
agama-project · Nov 28, 2023 · 09961b8 · 09961b8
1 parent c62976c
commit 09961b8
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/web/src/assets/styles/utilities.scss b/web/src/assets/styles/utilities.scss
@@ -59,6 +59,11 @@
   height: 24px;
 }
 
+.icon-size-28 {
+  width: 28px;
+  height: 28px;
+}
+
 .icon-size-32 {
   width: 32px;
   height: 32px;

diff --git a/web/src/assets/styles/variables.scss b/web/src/assets/styles/variables.scss
@@ -60,7 +60,7 @@
   --gradient-border-start-color: var(--color-gray);
   --gradient-border-end-color: transparent;
 
-  --icon-size-m: 32px;
+  --icon-size-m: 28px;
 
   --header-block-size: auto;
   --footer-block-size: auto;

diff --git a/web/src/components/core/Page.jsx b/web/src/components/core/Page.jsx
@@ -87,7 +87,7 @@ export default function Page({
   return (
     <>
       { title && <Title>{title}</Title> }
-      { icon && <PageIcon><Icon name={icon} /></PageIcon> }
+      { icon && <PageIcon><Icon name={icon} size="32" /></PageIcon> }
       <MainActions>
         { action ||
           <Button size="lg" variant={actionVariant} onClick={pageAction}>

diff --git a/web/src/components/layout/Icon.jsx b/web/src/components/layout/Icon.jsx
@@ -150,7 +150,7 @@ const icons = {
  * @param {object} [props.otherProps] Other props sent to SVG icon.
  *
  */
-export default function Icon({ name, className = "", size = 32, ...otherProps }) {
+export default function Icon({ name, className = "", size = 28, ...otherProps }) {
   if (!name) {
     console.error(`Icon called without name. '${name}' given instead. Rendering nothing.`);
     return null;