fixed CF Icon

Author: malgamves

admin/src/components/AITextIcon/index.js

@@ -5,8 +5,28 @@
  */
 
 import React from 'react';
-import Puzzle from '@strapi/icons/Puzzle';
+import styled from 'styled-components';
+import { Icon } from '@strapi/design-system/Icon';
+import { Flex } from '@strapi/design-system/Flex';
+import Pencil from '@strapi/icons/Pencil';
 
-const PluginIcon = () => <Puzzle />;
 
-export default PluginIcon;
+const IconBox = styled(Flex)`
+  /* Hard code color values */
+  /* to stay consistent between themes */
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+
+const PluginIcon = () => {
+    return (
+        <IconBox justifyContent="center" alignItems="center" width={7} height={6} hasRadius aria-hidden>
+            <Icon as={Pencil} />
+        </IconBox>
+    );
+};
+
+export default PluginIcon;

admin/src/components/PluginIcon/index.js

@@ -1,41 +1,14 @@
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
-import Initializer from './components/Initializer';
 import PluginIcon from './components/PluginIcon';
-import AITextIcon from './components/PluginIcon';
 
 
 const name = pluginPkg.strapi.name;
 
 export default { 
   register(app) {
-    // app.addMenuLink({
-    //   to: `/plugins/${pluginId}`,
-    //   icon: PluginIcon,
-    //   intlLabel: {
-    //     id: `${pluginId}.plugin.name`,
-    //     defaultMessage: name,
-    //   },
-    //   Component: async () => {
-    //     const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
-
-    //     return component;
-    //   },
-    //   permissions: [
-    //     // Uncomment to set the permissions of the plugin here
-    //     // {
-    //     //   action: '', // the action name should be plugin::plugin-name.actionType
-    //     //   subject: null,
-    //     // },
-    //   ],
-    // });
-    // app.registerPlugin({
-    //   id: pluginId,
-    //   initializer: Initializer,
-    //   isReady: false,
-    //   name,
-    // });
+    
     app.customFields.register({
       name: "text-ai",
       pluginId: "ai-text-generation", // the custom field is created by a color-picker plugin
@@ -61,15 +34,10 @@ export default {
           {
             sectionTitle: { // Add a "Format" settings section
               id: 'ai-text-generation.text-ai.api.details',
-              defaultMessage: 'API Details',
+              defaultMessage: 'Text Details',
             },
             items: [ // Add settings items to the section
               {
-                /*
-                  Add a "Color format" dropdown
-                  to choose between 2 different format options
-                  for the color value: hexadecimal or RGBA
-                */
                 intlLabel: {
                   id: 'ai-text-generation.text-ai.key',
                   defaultMessage: 'Key',