fix: use built-in obisidian sizes

jamiebrynes7 · Dec 15, 2024 · 4022170 · 4022170
1 parent 5c733e4
commit 4022170
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 22 deletions.
diff --git a/plugin/src/ui/components/callout/index.tsx b/plugin/src/ui/components/callout/index.tsx
@@ -14,7 +14,7 @@ export const Callout: React.FC<Props> = ({ title, contents, iconId, className })
   return (
     <div className={classNames("todoist-callout", className)}>
       <div className="callout-header">
-        <ObsidianIcon id={iconId} size={24} />
+        <ObsidianIcon id={iconId} size="l" />
         <span>{title}</span>
       </div>
       {contents && (

diff --git a/plugin/src/ui/components/obsidian-icon/index.tsx b/plugin/src/ui/components/obsidian-icon/index.tsx
@@ -6,7 +6,7 @@ import { useRef } from "react";
 import "./styles.scss";
 
 type Props = {
-  size: number;
+  size: "xs" | "s" | "m" | "l" | "xl";
   id: string;
   className?: string;
 };
@@ -18,8 +18,8 @@ export const ObsidianIcon: React.FC<Props> = ({ size, id, className }) => {
       return;
     }
 
-    setIcon(div.current, id, size);
-  }, [id, size]);
+    setIcon(div.current, id);
+  }, [id]);
 
-  return <div className={classNames("obsidian-icon", className)} ref={div} />;
+  return <div className={classNames("obsidian-icon", className)} data-icon-size={size} ref={div} />;
 };
diff --git a/plugin/src/ui/components/obsidian-icon/styles.scss b/plugin/src/ui/components/obsidian-icon/styles.scss
@@ -1,4 +1,13 @@
+$sizes: xs, s, m, l, xl;
+
 .obsidian-icon {
   display: flex;
   align-items: center;
+
+  @each $size in $sizes {
+    &[data-icon-size="#{$size}"] {
+      --icon-size: var(--icon-#{$size});
+      --icon-stroke: var(--icon-#{$size}-stroke-width);
+    }
+  }
 }
diff --git a/plugin/src/ui/components/token-validation-icon/index.tsx b/plugin/src/ui/components/token-validation-icon/index.tsx
@@ -8,10 +8,10 @@ export const TokenValidationIcon: React.FC<{ status: TokenValidation.Result }> =
     case "none":
       return <></>;
     case "in-progress":
-      return <ObsidianIcon id="loader-2" className="token-validation-in-progress" size={16} />;
+      return <ObsidianIcon id="loader-2" className="token-validation-in-progress" size="m" />;
     case "error":
-      return <ObsidianIcon id="x-circle" className="token-validation-error" size={16} />;
+      return <ObsidianIcon id="x-circle" className="token-validation-error" size="m" />;
     case "success":
-      return <ObsidianIcon id="check-circle-2" className="token-validation-success" size={16} />;
+      return <ObsidianIcon id="check-circle-2" className="token-validation-success" size="m" />;
   }
 };
diff --git a/plugin/src/ui/createTaskModal/DueDateSelector.tsx b/plugin/src/ui/createTaskModal/DueDateSelector.tsx
@@ -101,7 +101,7 @@ export const DueDateSelector: React.FC<Props> = ({ selected, setSelected }) => {
   return (
     <DialogTrigger>
       <Button className="due-date-selector" aria-label={i18n.buttonLabel}>
-        <ObsidianIcon size={16} id="calendar" />
+        <ObsidianIcon size="s" id="calendar" />
         {label}
       </Button>
       <Popover maxHeight={600}>
@@ -145,7 +145,7 @@ export const DueDateSelector: React.FC<Props> = ({ selected, setSelected }) => {
               <DialogTrigger>
                 <div className="time-picker-container">
                   <Button className="time-picker-button">
-                    <ObsidianIcon size={10} id="clock" />
+                    <ObsidianIcon size="xs" id="clock" />
                     Time
                   </Button>
                 </div>
@@ -213,7 +213,7 @@ const DateSuggestion: React.FC<DateSuggestionProps> = ({ id, icon, label, target
     <MenuItem id={id} aria-label={label}>
       <div className="date-suggestion-elem">
         <div className="date-suggestion-label">
-          <ObsidianIcon id={icon} size={12} />
+          <ObsidianIcon id={icon} size="s" />
           {label}
         </div>
         <div className="date-suggestion-day">{dayOfWeek}</div>

diff --git a/plugin/src/ui/createTaskModal/LabelSelector.tsx b/plugin/src/ui/createTaskModal/LabelSelector.tsx
@@ -35,7 +35,7 @@ export const LabelSelector: React.FC<Props> = ({ selected, setSelected }) => {
   return (
     <DialogTrigger>
       <Button className="label-selector" aria-label={i18n.buttonLabel}>
-        <ObsidianIcon size={16} id="tag" />
+        <ObsidianIcon size="m" id="tag" />
         {i18n.buttonText(selected.length)}
       </Button>
       <Popover>
@@ -70,7 +70,7 @@ const LabelItem: React.FC<LabelItemProps> = ({ label, isSelected }) => {
       textValue={label.name}
     >
       {label.name}
-      {isSelected && <ObsidianIcon size={10} id="check" />}
+      {isSelected && <ObsidianIcon size="xs" id="check" />}
     </ListBoxItem>
   );
 };
diff --git a/plugin/src/ui/createTaskModal/PrioritySelector.tsx b/plugin/src/ui/createTaskModal/PrioritySelector.tsx
@@ -31,7 +31,7 @@ export const PrioritySelector: React.FC<Props> = ({ selected, setSelected }) =>
   return (
     <MenuTrigger>
       <Button className="priority-selector" aria-label={i18n.buttonLabel}>
-        <ObsidianIcon size={16} id="flag" />
+        <ObsidianIcon size="m" id="flag" />
         {label}
       </Button>
       <Popover>

diff --git a/plugin/src/ui/createTaskModal/ProjectSelector.tsx b/plugin/src/ui/createTaskModal/ProjectSelector.tsx
@@ -65,7 +65,7 @@ export const ProjectSelector: React.FC<Props> = ({ selected, setSelected }) => {
     <DialogTrigger>
       <Button className="project-selector" aria-label={i18n.buttonLabel}>
         <ButtonLabel {...selected} />
-        <ObsidianIcon size={12} id="chevron-down" />
+        <ObsidianIcon size="s" id="chevron-down" />
       </Button>
       <Popover>
         <Dialog className="task-option-dialog task-project-menu" aria-label={i18n.selectorLabel}>
@@ -216,7 +216,7 @@ const ItemKey = {
 const SectionLabel: React.FC<{ section: Section }> = ({ section }) => {
   return (
     <>
-      <ObsidianIcon size={12} id="gallery-vertical" />
+      <ObsidianIcon size="s" id="gallery-vertical" />
       <div>{section.name}</div>
     </>
   );
@@ -227,7 +227,7 @@ const ProjectLabel: React.FC<{ project: Project }> = ({ project }) => {
 
   return (
     <>
-      <ObsidianIcon size={12} id={projectIcon} />
+      <ObsidianIcon size="s" id={projectIcon} />
       <div>{project.name}</div>
     </>
   );

diff --git a/plugin/src/ui/query/QueryHeader.tsx b/plugin/src/ui/query/QueryHeader.tsx
@@ -74,7 +74,7 @@ const HeaderButton: React.FC<ButtonProps> = ({ iconId, action, className }) => {
 
   return (
     <Button className={classNames("todoist-query-control-button", className)} onPress={handler}>
-      <ObsidianIcon id={iconId} size={14} />
+      <ObsidianIcon id={iconId} size="s" />
     </Button>
   );
 };
diff --git a/plugin/src/ui/query/styles.scss b/plugin/src/ui/query/styles.scss
@@ -135,7 +135,6 @@
       justify-content: space-between;
       font-size: var(--font-smaller);
       margin-top: 0.25em;
-      --icon-size: 14px;
       color: var(--text-muted);
 
       & > div {

diff --git a/plugin/src/ui/query/task/TaskMetadata.tsx b/plugin/src/ui/query/task/TaskMetadata.tsx
@@ -111,7 +111,7 @@ const getMetadataElems = (
     .flatMap((meta) => {
       return meta.content(task).map((content) => {
         const icon = meta.icon.shouldRender(settings) ? (
-          <ObsidianIcon id={meta.icon.id} size={16} />
+          <ObsidianIcon id={meta.icon.id} size="s" />
         ) : undefined;
 
         const children = [icon, <span key="content">{content.content}</span>];

diff --git a/plugin/src/ui/settings/SettingItem.tsx b/plugin/src/ui/settings/SettingItem.tsx
@@ -40,7 +40,7 @@ const DeprecationNotice: React.FC<DeprecationNoticeProps> = ({ message }) => {
   const prefix = t().settings.deprecation.warningMessage;
   return (
     <div className="setting-item-deprecation-notice">
-      <ObsidianIcon size={24} id="lucide-alert-triangle" />
+      <ObsidianIcon size="l" id="lucide-alert-triangle" />
       <div className="setting-item-deprecation-notice-message">
         {prefix} {message}
       </div>
@@ -58,7 +58,7 @@ type ButtonProps = {
 const ButtonControl: React.FC<ButtonProps> = ({ label, icon, onClick, disabled }) => {
   return (
     <button className="mod-cta" onClick={onClick} type="button" disabled={disabled}>
-      {icon !== undefined && <ObsidianIcon size={24} id={icon} className="setting-button-icon" />}
+      {icon !== undefined && <ObsidianIcon size="l" id={icon} className="setting-button-icon" />}
       {label}
     </button>
   );