Custom JS and CSS (#1950)

* First commit for custom styles and JS

* Adjusted classes

* Added ids and classes for services and bookmarks

* Apply suggestions from code review

* Remove mime dependency

* Update settings.json

* Detect custom css / js changes, no refresh

* Added preload to custom scripts and styles so they can load earlier

* Added data attribute name for bookmarks too

* Update [path].js

* code style, revert some pointer changes

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/components/widgets/widget/container.jsx

@@ -35,9 +35,9 @@ export function getAllClasses(options, additionalClassNames = '') {
 
 export function getInnerBlock(children) {
   // children won't be an array if it's Raw component
-  return Array.isArray(children) && <div className="flex flex-row items-center justify-end">
-    <div className="flex flex-col items-center">{children.find(child => child.type === WidgetIcon)}</div>
-    <div className="flex flex-col ml-3 text-left">
+  return Array.isArray(children) && <div className="flex flex-row items-center justify-end widget-inner">
+    <div className="flex flex-col items-center widget-inner-icon">{children.find(child => child.type === WidgetIcon)}</div>
+    <div className="flex flex-col ml-3 text-left widget-inner-text">
       {children.find(child => child.type === PrimaryText)}
       {children.find(child => child.type === SecondaryText)}
     </div>
@@ -54,7 +54,7 @@ export function getBottomBlock(children) {
 
 export default function Container({ children = [], options, additionalClassNames = '' }) {
   return (
-    <div className={getAllClasses(options, additionalClassNames)}>
+    <div className={getAllClasses(options, `${ additionalClassNames } widget-container`)}>
       {getInnerBlock(children)}
       {getBottomBlock(children)}
     </div>

src/components/widgets/widget/container_button.jsx

@@ -2,7 +2,7 @@ import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
 
 export default function ContainerButton ({ children = [], options, additionalClassNames = '', callback }) {
   return (
-    <button type="button" onClick={callback} className={getAllClasses(options, additionalClassNames)}>
+    <button type="button" onClick={callback} className={`${ getAllClasses(options, additionalClassNames) } information-widget-container-button`}>
       {getInnerBlock(children)}
       {getBottomBlock(children)}
     </button>

src/components/widgets/widget/container_form.jsx

@@ -2,7 +2,7 @@ import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
 
 export default function ContainerForm ({ children = [], options, additionalClassNames = '', callback }) {
   return (
-    <form type="button" onSubmit={callback} className={getAllClasses(options, additionalClassNames)}>
+    <form type="button" onSubmit={callback} className={`${ getAllClasses(options, additionalClassNames) } information-widget-form`}>
       {getInnerBlock(children)}
       {getBottomBlock(children)}
     </form>

src/components/widgets/widget/container_link.jsx

@@ -2,7 +2,7 @@ import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
 
 export default function ContainerLink ({ children = [], options, additionalClassNames = '', target }) {
   return (
-    <a href={options.url} target={target} className={getAllClasses(options, additionalClassNames)}>
+    <a href={options.url} target={target} className={`${ getAllClasses(options, additionalClassNames) } information-widget-link`}>
       {getInnerBlock(children)}
       {getBottomBlock(children)}
     </a>

src/components/widgets/widget/error.jsx

@@ -8,7 +8,7 @@ import WidgetIcon from "./widget_icon";
 export default function Error({ options }) {
   const { t } = useTranslation();
 
-  return <Container options={options}>
+  return <Container options={options} additionalClassNames="information-widget-error">
     <PrimaryText>{t("widget.api_error")}</PrimaryText>
     <WidgetIcon icon={BiError} size="l" />
   </Container>;

src/components/widgets/widget/primary_text.jsx

@@ -1,5 +1,5 @@
 export default function PrimaryText({ children }) {
   return (
-    <span className="text-theme-800 dark:text-theme-200 text-sm">{children}</span>
+    <span className="primary-text text-theme-800 dark:text-theme-200 text-sm">{children}</span>
   );
 }

src/components/widgets/widget/resource.jsx

@@ -1,11 +1,11 @@
 import UsageBar from "../resources/usage-bar";
 
-export default function Resource({ children, icon, value, label, expandedValue = "", expandedLabel = "", percentage, expanded = false }) {
+export default function Resource({ children, icon, value, label, expandedValue = "", expandedLabel = "", percentage, expanded = false, additionalClassNames='' }) {
   const Icon = icon;
 
-  return <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-    <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5"/>
-    <div className="flex flex-col ml-3 text-left min-w-[85px]">
+  return <div className={`flex-none flex flex-row items-center mr-3 py-1.5 information-widget-resource ${ additionalClassNames }`}>
+    <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon"/>
+    <div className={ `flex flex-col ml-3 text-left min-w-[85px] ${ expanded ? ' expanded' : ''}`}>
       <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
         <div className="pl-0.5">{value}</div>
         <div className="pr-1">{label}</div>
@@ -15,7 +15,7 @@ export default function Resource({ children, icon, value, label, expandedValue =
           <div className="pr-1">{expandedLabel}</div>
         </div>
       }
-      { percentage >= 0 && <UsageBar percent={percentage} /> }
+      { percentage >= 0 && <UsageBar percent={percentage} additionalClassNames="resource-usage" /> }
       { children }
     </div>
   </div>;

src/components/widgets/widget/resources.jsx

@@ -1,12 +1,15 @@
+import classNames from "classnames";
+
 import ContainerLink from "./container_link";
 import Resource from "./resource";
 import Raw from "./raw";
 import WidgetLabel from "./widget_label";
 
-export default function Resources({ options, children, target }) {
+export default function Resources({ options, children, target, additionalClassNames }) {
   const widgetParts = [].concat(...children);
+  const addedClassNames = classNames('information-widget-resources', additionalClassNames);
 
-  return <ContainerLink options={options} target={target}>
+  return <ContainerLink options={options} target={target} additionalClassNames={ addedClassNames }>
     <Raw>
       <div className="flex flex-row self-center flex-wrap justify-between">
         { widgetParts.filter(child => child && child.type === Resource) }

src/components/widgets/widget/secondary_text.jsx

@@ -1,5 +1,5 @@
 export default function SecondaryText({ children }) {
   return (
-    <span className="text-theme-800 dark:text-theme-200 text-xs">{children}</span>
+    <span className="secondary-text text-theme-800 dark:text-theme-200 text-xs">{children}</span>
   );
 }

src/components/widgets/widget/widget_icon.jsx

@@ -1,6 +1,6 @@
 export default function WidgetIcon({ icon, size = "s", pulse = false }) {
   const Icon = icon;
-  let additionalClasses = "text-theme-800 dark:text-theme-200 ";
+  let additionalClasses = "information-widget-icon text-theme-800 dark:text-theme-200 ";
 
   switch (size) {
     case "m": additionalClasses += "w-6 h-6 "; break;

src/components/widgets/widget/widget_label.jsx

@@ -1,3 +1,3 @@
 export default function WidgetLabel({ label = "" }) {
-  return <div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>
+  return <div className="information-widget-label pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>
 }