[web] Improve Section component CSS

agama-project · Nov 25, 2022 · d9f74a1 · d9f74a1
1 parent a910d8a
commit d9f74a1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 19 deletions.
diff --git a/web/src/components/core/Section.jsx b/web/src/components/core/Section.jsx
@@ -108,28 +108,28 @@ export default function Section({
     if (typeof onActionClick !== 'function') return null;
 
     const Action = () => (
-      <Button variant="plain" className="section-action" isInline onClick={onActionClick}>
+      <Button variant="plain" className="d-installer-section-action" isInline onClick={onActionClick}>
         <ActionIcon />
       </Button>
     );
 
     if (!actionTooltip) return <Action />;
 
     return (
-      <Tooltip content={actionTooltip} position="right">
+      <Tooltip content={actionTooltip} position="right" entryDelay={200} exitDelay={200}>
         <Action />
       </Tooltip>
     );
   };
 
   const titleClassNames = classNames(
-    "section-title",
-    usingSeparator && "with-gradient-separator"
+    "d-installer-section-title",
+    usingSeparator && "using-separator"
   );
 
   return (
-    <Split hasGutter {...otherProps}>
-      <SplitItem className="section-icon">
+    <Split className="d-installer-section" hasGutter {...otherProps}>
+      <SplitItem className="d-installer-section-icon">
         <Icon size="32" />
       </SplitItem>
       <SplitItem isFilled>

diff --git a/web/src/components/core/section.scss b/web/src/components/core/section.scss
@@ -1,20 +1,31 @@
+@use "@assets/fonts.scss";
 @use "eos-ds/dist/scss/eos-base/variables/branding.scss";
 
-.section-icon {
-  min-width: 32px;
-}
+.d-installer-section {
+  .d-installer-section-icon {
+    min-width: 32px;
+  }
+
+  .d-installer-section-title.using-separator {
+    border-bottom: 1px solid #efefef;
+    border-image: linear-gradient(45deg, branding.$eos-bc-gray-50, transparent) 1;
+  }
+
+  .d-installer-section-action {
+    padding-inline: calc(fonts.$size-base / 2);
+    transition: all 0.2s ease-in-out;
 
-.section-action {
-  padding-inline: 5px;
-  svg {
-    fill: branding.$eos-bc-green-500;
-    :hover {
-      fill: branding.$eos-bc-pine-500;
+    svg {
+      fill: branding.$eos-bc-green-500;
+    }
+
+    &:hover {
+      transform: scale(1.4) rotate(90deg);
+
+      svg {
+        fill: branding.$eos-bc-pine-500;
+      }
     }
   }
-}
 
-.with-gradient-separator {
-  border-bottom: 1px solid #efefef;
-  border-image: linear-gradient(45deg, #efefef 20%, transparent) 1;
 }