Global cleanup & refacto

Jean-Tinland · Dec 28, 2023 · ed5704e · ed5704e
1 parent 2bee417
commit ed5704e
Show file tree

Hide file tree

Showing 30 changed files with 220 additions and 186 deletions.
diff --git a/index.jsx b/index.jsx
@@ -72,8 +72,8 @@ Utils.injectStyles("simple-bar-index-styles", [
   settings.customStyles.styles,
 ]);
 
-const render = ({ output, error }) => {
-  const baseClasses = Utils.classnames("simple-bar", {
+function render({ output, error }) {
+  const baseClasses = Utils.classNames("simple-bar", {
     "simple-bar--floating": settings.global.floatingBar,
     "simple-bar--no-bar-background": settings.global.noBarBg,
     "simple-bar--no-color-in-data": settings.global.noColorInData,
@@ -103,7 +103,7 @@ const render = ({ output, error }) => {
 
   const SIPDisabled = SIP !== "System Integrity Protection status: enabled.";
 
-  const classes = Utils.classnames(baseClasses, {
+  const classes = Utils.classNames(baseClasses, {
     "simple-bar--no-shadow": shadow !== "on",
   });
 
@@ -149,6 +149,6 @@ const render = ({ output, error }) => {
       </div>
     </SimpleBarContextProvider>
   );
-};
+}
 
 export { command, refreshFrequency, render };
diff --git a/lib/components/data/battery.jsx b/lib/components/data/battery.jsx
@@ -13,7 +13,7 @@ const { React } = Uebersicht;
 
 const DEFAULT_REFRESH_FREQUENCY = 10000;
 
-export const Widget = () => {
+export const Widget = React.memo(() => {
   const { displayIndex, settings } = useSimpleBarContext();
   const { widgets, batteryWidgetOptions } = settings;
   const { batteryWidget } = widgets;
@@ -75,7 +75,7 @@ export const Widget = () => {
   const { system, percentage, charging, caffeinate, lowPowerMode } = state;
   const isLowBattery = !charging && percentage < 20;
 
-  const classes = Utils.classnames("battery", {
+  const classes = Utils.classNames("battery", {
     "battery--low": isLowBattery,
     "battery--low-power-mode": lowPowerMode,
     "battery--caffeinate": caffeinate.length,
@@ -116,9 +116,9 @@ export const Widget = () => {
       {percentage}%
     </DataWidget.Widget>
   );
-};
+});
 
-// Widget.displayName = "Battery";
+Widget.displayName = "Battery";
 
 function getTransform(value) {
   let transform = `0.${value}`;

diff --git a/lib/components/data/crypto.jsx b/lib/components/data/crypto.jsx
@@ -84,7 +84,7 @@ export const Widget = React.memo(() => {
   if (loading) return <DataWidgetLoader.Widget className="crypto" />;
   if (!state) return null;
 
-  const classes = Utils.classnames("crypto");
+  const classes = Utils.classNames("crypto");
 
   return enumeratedIdentifiers.map((id, i) => (
     <DataWidget.Widget

diff --git a/lib/components/data/data-widget-loader.jsx b/lib/components/data/data-widget-loader.jsx
@@ -7,7 +7,7 @@ const { React } = Uebersicht;
 
 export const Widget = React.memo(
   ({ width = 14, height = 14, className, style }) => {
-    const classes = Utils.classnames("data-widget-loader data-widget", {
+    const classes = Utils.classNames("data-widget-loader data-widget", {
       [className]: className,
     });
     return (

diff --git a/lib/components/data/data-widget.jsx b/lib/components/data/data-widget.jsx
@@ -6,7 +6,7 @@ export { dataWidgetStyles as styles } from "../../styles/components/data/data-wi
 
 const { React } = Uebersicht;
 
-export const Widget = ({
+export function Widget({
   Icon,
   classes,
   href,
@@ -17,10 +17,10 @@ export const Widget = ({
   disableSlider,
   showSpecter,
   children,
-}) => {
+}) {
   const ref = React.useRef();
   const Tag = getTag(onClick, href);
-  const dataWidgetClasses = Utils.classnames("data-widget", classes, {
+  const dataWidgetClasses = Utils.classNames("data-widget", classes, {
     "data-widget--clickable": onClick,
   });
 
@@ -58,7 +58,7 @@ export const Widget = ({
       <Inner disableSlider={disableSlider}>{children}</Inner>
     </Tag>
   );
-};
+}
 
 function Inner({ disableSlider, children }) {
   if (disableSlider) return children;

diff --git a/lib/components/data/graph.jsx b/lib/components/data/graph.jsx
@@ -19,7 +19,7 @@ export default function Graph({
     maxValue = Math.max(...allValues);
   }
 
-  const classes = Utils.classnames("graph", className);
+  const classes = Utils.classNames("graph", className);
 
   return (
     <div className={classes}>

diff --git a/lib/components/data/mic.jsx b/lib/components/data/mic.jsx
@@ -79,7 +79,9 @@ export const Widget = React.memo(() => {
 
   const fillerWidth = !volume ? volume : volume / 100 + 0.05;
 
-  const classes = Utils.classnames("mic", { "mic--dragging": dragging });
+  const classes = Utils.classNames("mic", {
+    "mic--dragging": dragging,
+  });
 
   return (
     <DataWidget.Widget classes={classes} disableSlider>

diff --git a/lib/components/data/mpd.jsx b/lib/components/data/mpd.jsx
@@ -86,7 +86,9 @@ export const Widget = React.memo(() => {
     await getMpd();
   };
 
-  const classes = Utils.classnames("mpd", { "mpd--playing": isPlaying });
+  const classes = Utils.classNames("mpd", {
+    "mpd--playing": isPlaying,
+  });
 
   return (
     <DataWidget.Widget

diff --git a/lib/components/data/music.jsx b/lib/components/data/music.jsx
@@ -98,7 +98,9 @@ export const Widget = React.memo(() => {
     getMusic();
   };
 
-  const classes = Utils.classnames("music", { "music--playing": isPlaying });
+  const classes = Utils.classNames("music", {
+    "music--playing": isPlaying,
+  });
 
   return (
     <DataWidget.Widget

diff --git a/lib/components/data/sound.jsx b/lib/components/data/sound.jsx
@@ -89,7 +89,9 @@ export const Widget = React.memo(() => {
 
   const fillerWidth = !volume ? volume : volume / 100 + 0.05;
 
-  const classes = Utils.classnames("sound", { "sound--dragging": dragging });
+  const classes = Utils.classNames("sound", {
+    "sound--dragging": dragging,
+  });
 
   return (
     <DataWidget.Widget classes={classes} disableSlider>

diff --git a/lib/components/data/spotify.jsx b/lib/components/data/spotify.jsx
@@ -98,7 +98,7 @@ export const Widget = React.memo(() => {
     getSpotify();
   };
 
-  const classes = Utils.classnames("spotify", {
+  const classes = Utils.classNames("spotify", {
     "spotify--playing": isPlaying,
   });
 

diff --git a/lib/components/data/stock.jsx b/lib/components/data/stock.jsx
@@ -97,8 +97,6 @@ export const Widget = React.memo(() => {
   if (loading) return <DataWidgetLoader.Widget className="stock" />;
   if (!state || !state.symbolQuotes) return null;
 
-  const classes = Utils.classnames("stock");
-
   return enumeratedSymbols.map((symbolName, i) => {
     const symbolQuote = state.symbolQuotes[i];
     const symbol = symbolQuote.symbol;
@@ -113,7 +111,7 @@ export const Widget = React.memo(() => {
     return (
       <DataWidget.Widget
         key={symbolName}
-        classes={classes}
+        classes="stock"
         ref={ref}
         Icon={stockUp ? Icons.UpArrow : Icons.DownArrow}
         href={`https://finance.yahoo.com/quote/${symbolName}`}

diff --git a/lib/components/data/user-widgets.jsx b/lib/components/data/user-widgets.jsx
@@ -90,20 +90,23 @@ const UserWidget = React.memo(({ index, widget }) => {
     await Uebersicht.run(onClickAction);
     getUserWidget();
   };
+
   const onRightClick = async (e) => {
     Utils.clickEffect(e);
     await Uebersicht.run(onRightClickAction);
     getUserWidget();
   };
+
   const onMiddleClick = async (e) => {
     Utils.clickEffect(e);
     await Uebersicht.run(onMiddleClickAction);
     getUserWidget();
   };
+
   const onClickProps = {
-    onClick: hasOnClickAction && onClick,
-    onRightClick: hasRightClickAction && onRightClick,
-    onMiddleClick: hasMiddleClickAction && onMiddleClick,
+    onClick: hasOnClickAction ? onClick : undefined,
+    onRightClick: hasRightClickAction ? onRightClick : undefined,
+    onMiddleClick: hasMiddleClickAction ? onMiddleClick : undefined,
   };
 
   return (

diff --git a/lib/components/data/viscosity-vpn.jsx b/lib/components/data/viscosity-vpn.jsx
@@ -67,7 +67,7 @@ export const Widget = React.memo(() => {
   const { status } = state;
   const isConnected = status === "Connected";
 
-  const classes = Utils.classnames("viscosity-vpn", {
+  const classes = Utils.classNames("viscosity-vpn", {
     "viscosity-vpn--disconnected": !isConnected,
   });
 

diff --git a/lib/components/data/weather.jsx b/lib/components/data/weather.jsx
@@ -123,7 +123,7 @@ export const Widget = React.memo(() => {
     Utils.notification("Refreshing forecast from wttr.in...");
   };
 
-  const classes = Utils.classnames("weather", {
+  const classes = Utils.classNames("weather", {
     "weather--sunrise": sunrising,
     "weather--sunset": sunsetting,
   });

diff --git a/lib/components/data/wifi.jsx b/lib/components/data/wifi.jsx
@@ -69,7 +69,7 @@ export const Widget = React.memo(() => {
 
   if (hideWifiIfDisabled && !isActive) return null;
 
-  const classes = Utils.classnames("wifi", {
+  const classes = Utils.classNames("wifi", {
     "wifi--hidden-name": !name,
     "wifi--inactive": !isActive,
   });

diff --git a/lib/components/error.jsx b/lib/components/error.jsx
@@ -9,7 +9,7 @@ const message = {
 };
 
 export const Component = ({ type, classes }) => {
-  const errorClasses = Utils.classnames("simple-bar--empty", classes, {
+  const errorClasses = Utils.classNames("simple-bar--empty", classes, {
     "simple-bar--loading": type === "noOutput",
   });
 

diff --git a/lib/components/icons.jsx b/lib/components/icons.jsx
@@ -81,7 +81,7 @@ export const DownArrow = (props) => (
 );
 
 export const Sun = (props) => (
-  <Icon {...props} className={Utils.classnames(props.className, "sun-icon")}>
+  <Icon {...props} className={Utils.classNames(props.className, "sun-icon")}>
     <g>
       <path d="M13.01 1.26c.03-.62-.2-1.06-.8-1.26h-.4c-.5.18-.8.5-.8 1.04v1.93c0 .18.05.35.12.5a.97.97 0 0 0 1.07.5.94.94 0 0 0 .79-.87l.01-.88.01-.96ZM1.27 11c-.63-.03-1.07.2-1.27.8v.4c.17.48.48.8 1.02.8h.29L3 12.99c.2-.01.4-.08.57-.18.36-.21.5-.66.39-1.08a.96.96 0 0 0-.89-.72H1.27ZM4.48 3.27l-.22-.1-.04.06c-.4 0-.75.22-.9.6-.17.38-.13.76.17 1.06.47.49.96.98 1.45 1.45a.98.98 0 0 0 1.09.22 1 1 0 0 0 .32-1.63c-.46-.47-.93-.96-1.43-1.4-.12-.12-.29-.19-.44-.26ZM4.36 20.78c-.53-.02-.85-.2-1.02-.56-.19-.38-.17-.76.1-1.06.52-.54 1.04-1.06 1.6-1.56.36-.36.96-.3 1.32.08.34.35.4.93.05 1.3-.5.54-1.03 1.07-1.57 1.57-.11.09-.24.15-.38.19l-.1.04ZM20.68 3.8c-.18-.38-.49-.55-1.02-.58l-.12.05c-.11.04-.29.11-.39.21-.53.48-1.04 1-1.53 1.52a.97.97 0 0 0 .05 1.34c.36.37.95.42 1.33.06.54-.5 1.05-1.02 1.55-1.55.29-.3.3-.67.13-1.05ZM20.8 19.67c-.03.53-.22.84-.6 1.02v-.01c-.36.17-.73.15-1.03-.12a38.4 38.4 0 0 1-1.57-1.58c-.33-.37-.28-.97.07-1.32.36-.36.95-.4 1.32-.06.54.5 1.06 1.02 1.56 1.56.1.12.17.26.2.4l.05.11ZM13 22.97v-1.93c-.02-.61-.45-1.05-1-1.04-.56.01-.98.44-.99 1.04v1.93c.01.6.43 1.03.98 1.03.57.01.99-.43 1.01-1.03ZM22.98 13H21.05c-.61-.01-1.04-.43-1.04-1 0-.55.43-.97 1.02-.98h1.94c.61 0 1.04.43 1.03 1 0 .56-.42.97-1.02.99Z" />
     </g>
@@ -90,19 +90,19 @@ export const Sun = (props) => (
 );
 
 export const Moon = (props) => (
-  <Icon {...props} className={Utils.classnames(props.className, "moon-icon")}>
+  <Icon {...props} className={Utils.classNames(props.className, "moon-icon")}>
     <path d="M12.081 2.509a1 1 0 0 1-.067 1.085 6 6 0 0 0 8.392 8.392 1 1 0 0 1 1.59.896A10 10 0 1 1 11.118 2.004a1 1 0 0 1 .963.505Zm-2.765 1.93a8 8 0 1 0 10.245 10.245A8 8 0 0 1 9.316 4.439Z" />
   </Icon>
 );
 
 export const Cloud = (props) => (
-  <Icon {...props} className={Utils.classnames(props.className, "cloud-icon")}>
+  <Icon {...props} className={Utils.classNames(props.className, "cloud-icon")}>
     <path d="M17.173 8.725a2.181 2.181 0 0 1-2.112-1.636 6.544 6.544 0 1 0-6.331 8.18h9.817a3.272 3.272 0 1 0 0-6.544h-1.374ZM8.73 17.45a8.725 8.725 0 1 1 8.442-10.906h1.374a5.453 5.453 0 1 1 0 10.906H8.73Z" />
   </Icon>
 );
 
 export const Rain = (props) => (
-  <Icon {...props} className={Utils.classnames(props.className, "rain-icon")}>
+  <Icon {...props} className={Utils.classNames(props.className, "rain-icon")}>
     <path d="M9.40229 0.0820312C9.91599 0.176996 10.4383 0.238172 10.9418 0.372572C13.1474 0.961467 14.8518 2.25747 16.0604 4.21737C16.2118 4.46283 16.3413 4.53013 16.6358 4.4953C18.7154 4.24965 20.4991 4.91318 21.9565 6.42603C23.3028 7.82358 23.8654 9.53022 23.7501 11.4753C23.6065 13.8922 21.8564 16.2545 19.6214 17.0449C19.5919 17.0554 19.5591 17.0565 19.5063 17.0659C19.4987 17.0043 19.4863 16.9511 19.4862 16.898C19.4847 16.2325 19.4796 15.5667 19.4919 14.9014C19.4938 14.8081 19.5614 14.6806 19.6377 14.6289C21.933 13.0737 22.3072 10.0168 20.4482 7.95921C19.1574 6.5305 16.9606 6.19356 15.2668 7.1641C15.1972 7.20401 15.126 7.241 15.0378 7.2889C14.9639 7.05333 14.9067 6.83064 14.8255 6.61737C13.8767 4.12467 12.103 2.63497 9.49462 2.31008C7.37283 2.0458 5.53377 2.76203 4.07599 4.36824C1.90883 6.7561 1.78902 10.2714 3.76606 12.8247C3.95269 13.0655 4.17716 13.276 4.37509 13.5084C4.43439 13.578 4.49933 13.6738 4.50027 13.7585C4.5094 14.5569 4.50554 15.3557 4.50422 16.1545C4.50422 16.1849 4.49236 16.2153 4.47015 16.3217C4.0038 15.9646 3.54187 15.6644 3.1414 15.2955C0.991751 13.3151 0.0218683 10.8394 0.274574 7.9049C0.593915 4.19676 3.35627 1.07422 6.96747 0.284102C7.3653 0.197043 7.77142 0.148478 8.17377 0.0820312H9.40229Z" />
     <g>
       <path d="M10.9289 18.5402C10.929 17.1176 10.9241 15.6949 10.9309 14.2723C10.9345 13.5176 11.5348 13.0124 12.2313 13.1592C12.6461 13.2467 12.9787 13.5967 13.0456 14.0237C13.0636 14.1381 13.0732 14.2552 13.0733 14.3711C13.0748 17.1663 13.0751 19.9617 13.0738 22.757C13.0736 23.3641 12.8188 23.7747 12.3503 23.9382C11.6461 24.1837 10.9426 23.6682 10.9317 22.8829C10.9203 22.0594 10.9289 21.2357 10.9288 20.412C10.9287 19.7882 10.9288 19.1641 10.9289 18.5402Z" />
@@ -113,7 +113,7 @@ export const Rain = (props) => (
 );
 
 export const Snow = (props) => (
-  <Icon {...props} className={Utils.classnames(props.className, "snow-icon")}>
+  <Icon {...props} className={Utils.classNames(props.className, "snow-icon")}>
     <path d="M9.15317 1.01074C9.69604 1.10392 10.2482 1.15907 10.7799 1.29658C13.0159 1.87474 14.7392 3.18194 15.9577 5.16651C16.111 5.4162 16.251 5.46373 16.5266 5.42881C18.3198 5.20265 19.9297 5.68999 21.3102 6.85714C22.9519 8.24491 23.732 10.0534 23.646 12.226C23.5457 14.7636 21.8578 17.0988 19.5145 17.9749C19.4855 17.9857 19.4542 17.9904 19.4013 18.0037C19.3939 17.9343 19.3823 17.8751 19.3822 17.816C19.3809 17.1573 19.3846 16.4985 19.3787 15.8398C19.3774 15.7034 19.4186 15.6247 19.5338 15.5456C20.9551 14.5697 21.6462 13.2041 21.4857 11.4695C21.3341 9.82853 20.4756 8.62815 19.0004 7.93752C17.7032 7.33027 16.4063 7.41357 15.1486 8.10222C15.0855 8.13677 15.0238 8.17404 14.961 8.20952C14.9542 8.21328 14.9455 8.21357 14.9223 8.21912C14.8753 8.0579 14.8357 7.89281 14.7797 7.73375C13.88 5.17837 12.1253 3.62411 9.47279 3.25827C6.03382 2.78411 2.87392 5.20679 2.34996 8.68622C2.01707 10.8971 2.66554 12.8135 4.23448 14.3937C4.35156 14.5116 4.40709 14.6226 4.40521 14.7927C4.39637 15.5888 4.40126 16.3851 4.40126 17.2468C4.07166 17.0175 3.76653 16.8305 3.48879 16.6082C1.54488 15.0516 0.4198 13.0303 0.166906 10.5192C0.160506 10.4558 0.138012 10.3942 0.123047 10.3318V9.11173C0.169635 8.79973 0.212553 8.48698 0.26347 8.17573C0.810953 4.83399 3.45378 1.99069 6.70629 1.25855C7.19571 1.14834 7.69688 1.09197 8.19251 1.01074H9.15317Z" />
     <g>
       <path d="M6.55082 15.1352C6.55571 14.5367 7.03882 14.0541 7.62461 14.0626C8.21501 14.0713 8.68202 14.5576 8.67694 15.158C8.67185 15.7538 8.18592 16.2394 7.60202 16.2324C7.01557 16.2253 6.54593 15.7351 6.55082 15.1352Z" />
@@ -127,7 +127,7 @@ export const Snow = (props) => (
 );
 
 export const Fog = (props) => (
-  <Icon {...props} className={Utils.classnames(props.className, "fog-icon")}>
+  <Icon {...props} className={Utils.classNames(props.className, "fog-icon")}>
     <g>
       <path d="M3.38086 9.44531C3.46961 9.4487 3.55837 9.4552 3.64721 9.4552C10.0824 9.45567 16.5178 9.45661 22.953 9.45087C23.1516 9.45077 23.2511 9.50075 23.2876 9.70489C23.3266 9.92183 23.3938 10.1335 23.4569 10.3793C23.3474 10.3842 23.2626 10.3915 23.1778 10.3915C16.6946 10.392 10.2114 10.3921 3.72815 10.3912C3.44429 10.3912 3.43818 10.448 3.41804 10.1057C3.41493 10.0521 3.39375 9.99976 3.38086 9.94677V9.44531V9.44531Z" />
       <path d="M23.5298 11.7442C23.4997 11.9058 23.4695 12.0676 23.4356 12.2488H23.2136C16.8542 12.2488 10.4948 12.2482 4.13554 12.2526C3.97469 12.2527 3.88538 12.2184 3.84255 12.0503C3.78288 11.8161 3.70015 11.5879 3.62109 11.3375C3.69902 11.3316 3.75672 11.3237 3.81451 11.3237C10.352 11.3232 16.8895 11.3232 23.4271 11.3234C23.4613 11.3234 23.4956 11.3254 23.5298 11.3265V11.7442V11.7442Z" />
@@ -143,7 +143,7 @@ export const Fog = (props) => (
 );
 
 export const Storm = (props) => (
-  <Icon {...props} className={Utils.classnames(props.className, "storm-icon")}>
+  <Icon {...props} className={Utils.classNames(props.className, "storm-icon")}>
     <path d="M9.21762 0.711914C9.76049 0.805091 10.3127 0.860338 10.8443 0.997749C13.0804 1.57591 14.8038 2.88311 16.0221 4.86768C16.1755 5.11737 16.3155 5.1649 16.5911 5.13008C18.3843 4.90382 19.9942 5.39116 21.3747 6.55831C23.0164 7.94608 23.7964 9.75455 23.7104 11.9272C23.6102 14.4649 21.9223 16.8001 19.5789 17.6761C19.5499 17.687 19.5186 17.6916 19.4657 17.7049C19.4585 17.6355 19.4468 17.5763 19.4466 17.5172C19.4454 16.8585 19.4491 16.1996 19.4431 15.5411C19.4418 15.4045 19.483 15.3258 19.5982 15.2468C21.0196 14.2709 21.7106 12.9052 21.55 11.1706C21.3985 9.5297 20.5401 8.32942 19.065 7.63869C17.7676 7.03144 16.4708 7.11483 15.2131 7.8034C15.1499 7.83803 15.0882 7.87521 15.0254 7.91069C15.0187 7.91446 15.01 7.91474 14.9867 7.92029C14.9398 7.75907 14.9002 7.59399 14.8442 7.43493C13.9445 4.87954 12.1898 3.32528 9.53724 2.95954C6.09828 2.48528 2.93837 4.90796 2.41442 8.3874C2.08152 10.5983 2.72999 12.5146 4.29894 14.095C4.41602 14.2128 4.47155 14.3238 4.46967 14.4938C4.46082 15.29 4.46571 16.0863 4.46571 16.948C4.13611 16.7187 3.83098 16.5317 3.55324 16.3095C1.60934 14.7528 0.484253 12.7315 0.231359 10.2204C0.224959 10.157 0.202465 10.0954 0.1875 10.033V8.8129C0.234088 8.5009 0.277006 8.18824 0.327924 7.8769C0.875406 4.53516 3.51823 1.69187 6.77075 0.959726C7.26016 0.849514 7.76134 0.793138 8.25696 0.711914H9.21762Z" />
     <g>
       <path d="M5.42578 20.6793L8.80799 17.9439L8.2366 16.6228L7.67199 15.3183H7.67651L7.68253 15.3214L8.23651 13.9587L8.79039 12.5889H6.53364L5.97976 13.9602L5.4382 15.285L5.42917 15.2896L5.43378 15.2999L5.42578 15.3183H5.44197L6.00065 16.623L6.56733 17.9451L6.55708 17.971L5.42578 20.6793Z" />

diff --git a/lib/components/settings/color-picker.jsx b/lib/components/settings/color-picker.jsx
@@ -3,7 +3,7 @@ import * as Settings from "../../settings";
 
 const { React } = Uebersicht;
 
-const ColorPicker = ({ callback, index, selectedColor }) => {
+export default function ColorPicker({ callback, index, selectedColor }) {
   const isSelectedCustom = !Settings.userWidgetColors.includes(selectedColor);
   const [open, setOpen] = React.useState(false);
   const [selected, setSelected] = React.useState(selectedColor);
@@ -81,6 +81,4 @@ const ColorPicker = ({ callback, index, selectedColor }) => {
       )}
     </div>
   );
-};
-
-export default ColorPicker;
+}
diff --git a/lib/components/settings/icon-picker.jsx b/lib/components/settings/icon-picker.jsx
@@ -3,7 +3,7 @@ import * as Icons from "../icons.jsx";
 
 const { React } = Uebersicht;
 
-const IconPicker = ({ callback, index, selectedIcon }) => {
+export default function IconPicker({ callback, index, selectedIcon }) {
   const [open, setOpen] = React.useState(false);
   const [selected, setSelected] = React.useState(selectedIcon);
 
@@ -37,6 +37,4 @@ const IconPicker = ({ callback, index, selectedIcon }) => {
       )}
     </div>
   );
-};
-
-export default IconPicker;
+}
diff --git a/lib/components/settings/settings-component.jsx b/lib/components/settings/settings-component.jsx
@@ -80,7 +80,7 @@ export default function Component({ closeSettings }) {
             const setting = Settings.data[key];
             if (!setting) return null;
             const { label } = setting;
-            const classes = Utils.classnames("settings__tab", {
+            const classes = Utils.classNames("settings__tab", {
               "settings__tab--current": i === currentTab,
             });
             return (
@@ -116,7 +116,7 @@ export default function Component({ closeSettings }) {
                     minHeight,
                   } = subSetting;
                   const defaultValue = newSettings[key][subKey];
-                  const classes = Utils.classnames("settings__item", {
+                  const classes = Utils.classNames("settings__item", {
                     "settings__item--radio": type === "radio",
                     "settings__item--text":
                       type === "text" || type === "number",