change(copyright): implementation to add classes on content sections

- also remove inverted segment when we use the theming colors

src/ui/Copyright/Copyright.jsx

@@ -27,7 +27,15 @@ function Copyright({ children, ...rest }) {
   );
 }
 
-Copyright.Icon = ({ children, ...rest }) => <span {...rest}>{children}</span>;
+Copyright.Icon = ({ children, ...rest }) => (
+  <span {...rest} className={'icon-wrapper'}>
+    {children}
+  </span>
+);
 
-Copyright.Text = ({ children, ...rest }) => <span {...rest}>{children}</span>;
+Copyright.Text = ({ children, ...rest }) => (
+  <span {...rest} className={'content'}>
+    {children}
+  </span>
+);
 export default Copyright;

src/ui/Copyright/Copyright.stories.jsx

@@ -32,7 +32,7 @@ export default {
 
 export const Default = (args) => (
   <Container>
-    <Segment inverted>
+    <Segment className={args.colorVariant === 'default' ? 'inverted' : ''}>
       <Copyright
         copyrightPosition={args.copyrightPosition}
         colorVariant={args.colorVariant}

theme/themes/eea/extras/copyright.less

@@ -1,34 +1,28 @@
-@type: 'extra';
-@element: 'copyright';
-
-@import (multiple) '../../theme.config';
-
-/*-------------------
-      Copyright
---------------------*/
-
-.eea.copyright {
-    width: @copyrightWidth;
-
-    .wrapper {
-        display: flex;
-        color: @copyrightContentColor;
-    }
-}
-
-.eea.copyright.left .wrapper {
-    justify-content: flex-start;
-}
-
-.eea.copyright.right .wrapper {
-    justify-content: flex-end;
-}
-
-.eea.copyright .wrapper span {
-    font-size: @copyrightContentFontSize;
-    padding-right: @copyrightContentPaddingRight;
-}
-
-.eea.copyright .wrapper i.icon {
-    margin: 0; // override default
-}
+@type: 'extra';
+@element: 'copyright';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      Copyright
+--------------------*/
+
+.eea.copyright {
+    width: @copyrightWidth;
+
+    .wrapper {
+        display: flex;
+        color: @copyrightContentColor;
+        font-size: @copyrightContentFontSize;
+        gap: @copyrightContentPaddingRight;
+    }
+    &.left .wrapper {
+      justify-content: flex-start;
+    }
+  &.right .wrapper {
+    justify-content: flex-end;
+  }
+  .icon {
+    margin: 0; // override default
+  }
+}