lint cleanup

HumanSignal · Jan 10, 2025 · b51c97e · b51c97e
1 parent f42669b
commit b51c97e
Show file tree

Hide file tree

Showing 18 changed files with 45 additions and 33 deletions.
diff --git a/web/apps/labelstudio/src/components/Button/Button.scss b/web/apps/labelstudio/src/components/Button/Button.scss
@@ -24,7 +24,6 @@
   outline: none;
   display: inline-flex;
   text-align: center;
-  transition: all 100ms ease;
   position: relative;
   box-sizing: border-box;
   box-shadow: var(--button-shadow);
@@ -53,6 +52,7 @@
     --button-color: var(--color-neutral-content);
     --button-background-color: var(--color-neutral-surface-hover);
     --button-border-color: var(--color-neutral-border-bold);
+
     background-color: var(--button-background-color);
     border-color: var(--button-border-color);
   }
@@ -170,6 +170,7 @@
 
     &_danger {
       --button-color: var(--color-negative-content);
+
       border-color: var(--color-negative-border);
 
       &:hover:not(:disabled, &_waiting) {
@@ -187,13 +188,13 @@
       &:hover:not(:disabled, .button-ls_waiting) {
         --button-color: var(--color-negative-surface-content);
 
-        border-color: var(--color-negative-border-bold);
         background: var(--color-negative-surface-hover);
         border-color: var(--color-negative-border-bold);
       }
 
       &:active {
         --button-background--color: var(--color-negative-surface-active);
+
         border-color: var(--color-negative-border-bold);
       }
     }

diff --git a/web/apps/labelstudio/src/components/Form/Elements/Counter/Counter.scss b/web/apps/labelstudio/src/components/Form/Elements/Counter/Counter.scss
@@ -6,6 +6,7 @@
   border-radius: 8px;
   background: var(--color-neutral-surface);
   box-sizing: border-box;
+
   // box-shadow: 0 0 0 1px rgba(var(--color-neutral-shadow-raw) / 16%) inset;
   border: 1px solid var(--color-neutral-border);
   transition: all 150ms ease;
@@ -33,11 +34,10 @@
     align-items: center;
     justify-content: center;
     transition: all 150ms ease;
-    box-shadow: 0px 4px 8px rgba(var(--color-neutral-shadow-raw) / 16%), 0px 1px 2px rgba(var(--color-neutral-shadow-raw) / 30%);
+    box-shadow: 0 4px 8px rgba(var(--color-neutral-shadow-raw) / 16%), 0 1px 2px rgba(var(--color-neutral-shadow-raw) / 30%);
 
     &_disabled {
       box-shadow: none;
-      background: none;
       pointer-events: none;
       color: var(--color-neutral-content-subtlest);
       background: var(--color-neutral-surface);
@@ -47,7 +47,7 @@
     &:hover {
       background: var(--color-neutral-surface-hover);
       color: var(--color-primary-content);
-      box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(38, 38, 38, 0.30);
+      box-shadow: 0 6px 12px 0 rgb(0 0 0 / 15%), 0 2px 4px 0 rgb(38 38 38 / 30%);
       box-shadow: 0 6px 12px rgba(var(--color-neutral-shadow-raw) / 16%), 0 2px 4px rgba(var(--color-neutral-shadow-raw) / 30%);
 
     }

diff --git a/web/apps/labelstudio/src/components/Form/Elements/Select/Select.jsx b/web/apps/labelstudio/src/components/Form/Elements/Select/Select.jsx
@@ -46,7 +46,7 @@ const Select = ({ label, className, options, validate, required, skip, labelProp
     >
       {(ref) => {
         return (
-          <div className={`${classList} ${props.disabled ? 'disabled' : ''}`}>
+          <div className={`${classList} ${props.disabled ? "disabled" : ""}`}>
             <select
               {...props}
               value={value}

diff --git a/web/apps/labelstudio/src/components/Modal/Modal.scss b/web/apps/labelstudio/src/components/Modal/Modal.scss
@@ -35,7 +35,7 @@
     flex-direction: column;
     background-color: var(--color-neutral-background);
     border-radius: 0.5rem;
-    box-shadow: 0 10px 30px rgb(18 17 13 / 30%), inset 0px 1px rgb(255 255 255 / 10%), inset 0px -2px rgba(var(--color-neutral-shadow-raw) / 24%);
+    box-shadow: 0 10px 30px rgb(18 17 13 / 30%), inset 0 1px rgb(255 255 255 / 10%), inset 0 -2px rgba(var(--color-neutral-shadow-raw) / 24%);
     overflow: auto;
   }
 

diff --git a/web/apps/labelstudio/src/pages/CreateProject/Config/Config.jsx b/web/apps/labelstudio/src/pages/CreateProject/Config/Config.jsx
@@ -204,7 +204,8 @@ const ConfigureSettings = ({ template }) => {
         return (
           <li key={key}>
             <label>
-              {options.title} <input className="lsf-input-ls" type="text" onInput={onChange} value={value} size={size} />
+              {options.title}{" "}
+              <input className="lsf-input-ls" type="text" onInput={onChange} value={value} size={size} />
             </label>
           </li>
         );
@@ -291,7 +292,15 @@ const ConfigureColumn = ({ template, obj, columns }) => {
         {!columns?.length && <option value={value}>{"<imported file>"}</option>}
         <option value="-">{"<set manually>"}</option>
       </select>
-      {isManual && <input className="lsf-input-ls" value={newValue} onChange={handleChange} onBlur={handleBlur} onKeyDown={handleKeyDown} />}
+      {isManual && (
+        <input
+          className="lsf-input-ls"
+          value={newValue}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+        />
+      )}
     </p>
   );
 };
@@ -468,7 +477,7 @@ const Configurator = ({
       <div className={configClass.elem("container")}>
         <h1>Labeling Interface{hasChanges ? " *" : ""}</h1>
         <header>
-          <Button look="secondary" size="compact" style={{ width: 160 }}  data-leave={true} onClick={onBrowse}>
+          <Button look="secondary" size="compact" style={{ width: 160 }} data-leave={true} onClick={onBrowse}>
             Browse Templates
           </Button>
           <ToggleItems items={{ code: "Code", visual: "Visual" }} active={configure} onSelect={onSelect} />

diff --git a/web/apps/labelstudio/src/pages/Projects/Projects.scss b/web/apps/labelstudio/src/pages/Projects/Projects.scss
@@ -224,6 +224,7 @@
   &_colored {
     --color-project-header-content: var(--color-sand-000);
     --color-project-header-icon: var(--color-neutral-icon);
+
     background-color: var(--background-color);
     border-color: var(--border-color);
 
@@ -239,6 +240,7 @@
 
     & .project-card__detail {
       color: var(--content-color);
+
       &-item {
         --icon-color: var(--icon-color);
       }

diff --git a/web/apps/labelstudio/src/pages/Projects/ProjectsList.jsx b/web/apps/labelstudio/src/pages/Projects/ProjectsList.jsx
@@ -54,7 +54,10 @@ const ProjectCard = ({ project }) => {
   }, [project]);
 
   const projectColors = useMemo(() => {
-    const textColor = color && chr(color).luminance() > 0.3 ? 'var(--color-neutral-inverted-content)' : 'var(--color-neutral-inverted-content)'; // Determine text color based on luminance
+    const textColor =
+      color && chr(color).luminance() > 0.3
+        ? "var(--color-neutral-inverted-content)"
+        : "var(--color-neutral-inverted-content)"; // Determine text color based on luminance
     return color
       ? {
           "--header-color": color,

diff --git a/web/libs/datamanager/src/components/Common/Button/Button.scss b/web/libs/datamanager/src/components/Common/Button/Button.scss
@@ -11,7 +11,6 @@
   border-radius: 5px;
   text-align: center;
   text-decoration: none;
-  transition: all 100ms ease;
   justify-content: center;
   color: var(--button-color);
   font-weight: 500;
@@ -157,7 +156,6 @@
       --button-color: var(--white);
 
       background-color: var(--grape_500);
-      box-shadow: none;
       border: 0;
       box-shadow: inset 0 -1px 0 var(--black_10);
 

diff --git a/web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.scss b/web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.scss
@@ -31,7 +31,6 @@
     font-size: var(--font-size);
     border-radius: calc(var(--radius) - var(--padding));
     height: calc(var(--height) - calc(var(--padding) * 2) - 2px);
-    cursor: pointer;
     color: var(--color-neutral-content-subtler);
     transition: all 100ms ease-out;
     cursor: pointer;

diff --git a/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.scss b/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.scss
@@ -5,7 +5,6 @@
   border-width: 1px 1px 0;
   border-style: solid;
   background-color: var(--color-neutral-surface);
-  border-color: transparent;
   margin-top: 2px;
   align-items: center;
   gap: 8px;
@@ -199,7 +198,6 @@
     margin: 8px;
     align-items: center;
     white-space: nowrap;
-    gap: 2px;
     cursor: pointer;
     font-size: 14px;
     font-weight: 400;

diff --git a/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.tsx b/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.tsx
@@ -7,7 +7,6 @@ import {
   IconDuplicate,
   IconEllipsis,
   IconTrashRect,
-  IconTrashAlt,
   LsCommentResolved,
   LsCommentUnresolved,
   LsSparks,

diff --git a/web/libs/editor/src/components/App/App.scss b/web/libs/editor/src/components/App/App.scss
@@ -5,8 +5,8 @@
   --sticky-items-offset: 48px;
   --topbar-height: 48px;
   --bottombar-height: 0;
-  color: var(--color-neutral-content-subtler);
 
+  color: var(--color-neutral-content-subtler);
   width: 100%;
   height: 100%;
   min-width: 320px;

diff --git a/web/libs/editor/src/components/Toolbar/Tool.scss b/web/libs/editor/src/components/Toolbar/Tool.scss
@@ -43,7 +43,6 @@
   }
 
   &:not(&_active):hover {
-
     & .tool__icon {
       opacity: 1;
       box-shadow: inset 0 0 2px var(--color-primary-border-subtle);
@@ -61,7 +60,6 @@
   }
 
   &_active {
-
     & .tool__icon {
       opacity: 1;
       box-shadow: 0 0 0 var(--color-primary-border-subtle);

diff --git a/web/libs/editor/src/lib/AudioUltra/Visual/Visualizer.ts b/web/libs/editor/src/lib/AudioUltra/Visual/Visualizer.ts
@@ -113,8 +113,8 @@ export class Visualizer extends Events<VisualizerEvents> {
       {
         ...options.playhead,
         x: 0,
-        color: isDarkMode ? rgba("#fff"): rgba("#000"),
-        fillColor: isDarkMode ? rgba("#fff"): rgba("#BAE7FF"),
+        color: isDarkMode ? rgba("#fff") : rgba("#000"),
+        fillColor: isDarkMode ? rgba("#fff") : rgba("#BAE7FF"),
         width: options.cursorWidth ?? 2,
       },
       this,

diff --git a/web/libs/editor/src/tags/control/Taxonomy/Taxonomy.scss b/web/libs/editor/src/tags/control/Taxonomy/Taxonomy.scss
@@ -44,6 +44,7 @@ body :global(.lsf-taxonomy-search-input) {
   border-color: var(--color-neutral-border);
   color: var(--color-neutral-content);
 }
+
 body :global(.ant-select-tree) {
   color: var(--color-neutral-content);
 }

diff --git a/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.module.scss b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.module.scss
@@ -1,8 +1,6 @@
 .themeToggle {
   display: flex;
   justify-content: center;
-  align-self: stretch;
-  transition: outline 0.1s ease;
   overflow: hidden;
   height: 32px;
   align-self: center;
@@ -32,12 +30,10 @@
 
   &__icon {
     display: flex;
-    height: 100%;
     align-items: center;
-    position: relative;
     width: 36px;
     height: 28px;
-    margin-right: 0px;
+    margin-right: 0;
     position: relative;
     align-self: center;
   }

diff --git a/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx
@@ -8,7 +8,11 @@ const THEME_OPTIONS = ["Auto", "Light", "Dark"];
 const PREFERRED_COLOR_SCHEME_KEY = "preferred-color-scheme";
 export const getCurrentTheme = () => {
   const themeSelection = window.localStorage.getItem(PREFERRED_COLOR_SCHEME_KEY) ?? THEME_OPTIONS[0];
-  return themeSelection === THEME_OPTIONS[0] ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "Dark" : "Light" : themeSelection;
+  return themeSelection === THEME_OPTIONS[0]
+    ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "Dark"
+      : "Light"
+    : themeSelection;
 };
 export const ThemeToggle = () => {
   const presetTheme = window.localStorage.getItem(PREFERRED_COLOR_SCHEME_KEY) ?? THEME_OPTIONS[0];
@@ -34,11 +38,17 @@ export const ThemeToggle = () => {
     setAppliedTheme(nextTheme === "Auto" ? systemMode : nextTheme);
   }, [theme]);
 
-  const themeLabel = useMemo(()=> THEME_OPTIONS.find((option) => option.toLowerCase() === theme.toLowerCase()), [theme]);
+  const themeLabel = useMemo(
+    () => THEME_OPTIONS.find((option) => option.toLowerCase() === theme.toLowerCase()),
+    [theme],
+  );
 
   return (
-    <button 
-      className={clsx(styles.themeToggle, { [styles.dark]: appliedTheme === "Dark", [styles.light]: appliedTheme === "Light" })} 
+    <button
+      className={clsx(styles.themeToggle, {
+        [styles.dark]: appliedTheme === "Dark",
+        [styles.light]: appliedTheme === "Light",
+      })}
       onClick={themeChanged}
     >
       <div className={clsx(styles.themeToggle__icon)}>

diff --git a/web/libs/ui/src/tokens/colors.scss b/web/libs/ui/src/tokens/colors.scss
@@ -485,7 +485,6 @@
   --color-warning-surface-active: var(--color-canteloupe-800); // Active state color for warning surfaces
   --color-warning-surface-icon: var(--color-canteloupe-100); // Icon color on warning surfaces
   --color-warning-surface-hover: var(--color-canteloupe-500); // Hover color for warning surfaces
-
   --color-accent-blueberry-bold-raw: var(--color-blueberry-600-raw);
   --color-accent-blueberry-dark-raw: var(--color-blueberry-900-raw);
   --color-accent-blueberry-subtle-raw: var(--color-blueberry-100-raw);
@@ -692,7 +691,6 @@
     --color-warning-surface-active: var(--color-canteloupe-700);
     --color-warning-surface-icon: var(--color-canteloupe-100);
     --color-warning-surface-hover: var(--color-canteloupe-500);
-
     --color-accent-blueberry-bold-raw: var(--color-blueberry-500-raw);
     --color-accent-blueberry-dark-raw: var(--color-blueberry-300-raw);
     --color-accent-blueberry-subtle-raw: var(--color-blueberry-900-raw);