refactor(accordion): import semantic icon for remix arrows

eea · Mar 14, 2022 · 9aa77d8 · 9aa77d8
1 parent 3c83f20
commit 9aa77d8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/ui/Accordion/Accordion.stories.js b/src/ui/Accordion/Accordion.stories.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion } from 'semantic-ui-react';
+import { Accordion, Icon } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Accordion',
@@ -97,7 +97,7 @@ function AccordionContainer({ ...args }) {
         onClick={toggleOpenAccordion}
       >
         {args.toggle1}
-        <i className="ri-arrow-down-s-line"></i>
+        <Icon className="ri-arrow-down-s-line" />
       </Accordion.Title>
       <Accordion.Content active={activeIndex === 0}>
         {args.content1.length > 0 &&
@@ -110,7 +110,7 @@ function AccordionContainer({ ...args }) {
         onClick={toggleOpenAccordion}
       >
         {args.toggle2}
-        <i className="ri-arrow-down-s-line"></i>
+        <Icon className="ri-arrow-down-s-line" />
       </Accordion.Title>
       <Accordion.Content active={activeIndex === 1}>
         {args.content2.length > 0 &&
@@ -123,7 +123,7 @@ function AccordionContainer({ ...args }) {
         onClick={toggleOpenAccordion}
       >
         {args.toggle3}
-        <i className="ri-arrow-down-s-line"></i>
+        <Icon className="ri-arrow-down-s-line" />
       </Accordion.Title>
       <Accordion.Content active={activeIndex === 2}>
         {args.content3.length > 0 &&

diff --git a/theme/themes/eea/modules/accordion.overrides b/theme/themes/eea/modules/accordion.overrides
@@ -26,15 +26,18 @@
 
     i {
       display: flex;
+      width: @iconWidth;
+      height: @iconHeight;
       align-items: center;
       order: @iconOrder;
+      margin: @iconMargin;
       color: @iconColor;
       font-size: @iconFontSize;
       line-height: @iconFontSize;
 
       &:before {
         content: @iconInactive;
-        font-size: 3rem;
+        font-size: @iconFontSize;
       }
     }
   }

diff --git a/theme/themes/eea/modules/accordion.variables b/theme/themes/eea/modules/accordion.variables
@@ -18,12 +18,12 @@
 @iconColor: @oldSilver;
 @iconColorActive: @white;
 @iconOpacity: 1;
-@iconFontSize: 1.563rem;
+@iconFontSize: 3rem;
 @iconFloat: none;
-@iconWidth: 1.563rem;
-@iconHeight: 1.563rem;
+@iconWidth: auto;
+@iconHeight: 1rem;
 @iconDisplay: inline-block;
-@iconMargin: 0em 0.25rem 0em 0.25rem;
+@iconMargin: 0em;
 @iconPadding: 0em;
 @iconTransition:
   transform @defaultDuration @defaultEasing,