UBER-989

packages/presentation/src/components/SpacesMultiPopup.svelte

@@ -106,17 +106,17 @@
           }}
         >
           <div class="check pointer-events-none">
-            <CheckBox checked={isSelected(space)} accented />
+            <CheckBox checked={isSelected(space)} kind={'accented'} />
           </div>
           <SpaceInfo size={'medium'} value={space} {iconWithEmoji} {defaultIcon} />
           {#if allowDeselect && space._id === selected}
             <div class="check pointer-events-none">
               {#if titleDeselect}
                 <div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
-                  <CheckBox checked circle accented />
+                  <CheckBox checked circle kind={'accented'} />
                 </div>
               {:else}
-                <CheckBox checked circle accented />
+                <CheckBox checked circle kind={'accented'} />
               {/if}
             </div>
           {/if}

packages/ui/src/components/CheckBox.svelte

@@ -19,7 +19,7 @@
   export let symbol: 'check' | 'minus' = 'check'
   export let size: 'small' | 'medium' | 'large' = 'small'
   export let circle: boolean = false
-  export let accented: boolean = false
+  export let kind: 'default' | 'accented' | 'positive' = 'default'
   export let readonly = false
 
   const dispatch = createEventDispatcher()
@@ -35,14 +35,34 @@
   }
 </script>
 
-<label class="checkbox {size}" class:circle class:accented class:readonly class:checked>
+<label
+  class="checkbox {size}"
+  class:circle
+  class:accented={kind === 'accented'}
+  class:positive={kind === 'positive'}
+  class:readonly
+  class:checked
+>
   <input class="chBox" disabled={readonly} type="checkbox" bind:checked on:change={handleValueChanged} />
   <svg class="checkSVG" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     {#if checked}
       {#if symbol === 'minus'}
-        <rect class="check" class:accented x="4" y="7.4" width="8" height="1.2" />
+        <rect
+          class="check"
+          class:accented={kind === 'accented'}
+          class:positive={kind === 'positive'}
+          x="4"
+          y="7.4"
+          width="8"
+          height="1.2"
+        />
       {:else}
-        <polygon class="check" class:accented points="7.3,11.5 4,8.3 5,7.4 7.3,9.7 11.8,5.1 12.7,6.1 " />
+        <polygon
+          class="check"
+          class:accented={kind === 'accented'}
+          class:positive={kind === 'positive'}
+          points="7.3,11.5 4,8.3 5,7.4 7.3,9.7 11.8,5.1 12.7,6.1 "
+        />
       {/if}
     {/if}
   </svg>
@@ -82,6 +102,10 @@
       background-color: var(--accented-button-default);
       border-color: transparent;
     }
+    &.positive.checked {
+      background-color: var(--positive-button-default);
+      border-color: transparent;
+    }
     &.readonly.checked {
       background-color: var(--theme-checkbox-disabled);
     }
@@ -103,6 +127,9 @@
           &.accented {
             fill: var(--accented-button-color);
           }
+          &.positive {
+            fill: var(--accented-button-color);
+          }
         }
       }
       &:not(:disabled) + .checkSVG {

packages/ui/src/components/DropdownRecordPopup.svelte

@@ -70,7 +70,7 @@
           >
             <div class="flex-grow caption-color lines-limit-2"><Label label={item[1]} /></div>
             {#if item[0] === selected}
-              <div class="check"><CheckBox checked accented /></div>
+              <div class="check"><CheckBox checked kind={'accented'} /></div>
             {/if}
           </button>
         </svelte:fragment>

plugins/calendar-resources/src/components/EventElement.svelte

@@ -98,13 +98,6 @@
     border-left: 0.25rem solid #2b5190;
     border-radius: 0.25rem;
     cursor: pointer;
-
-    &:not(.oneRow, .empty) {
-      padding: 0.25rem 0.5rem 0.25rem 1rem;
-    }
-    &.oneRow:not(.empty) {
-      justify-content: center;
-      padding: 0 0.25rem 0 1rem;
-    }
+    padding: 0.25rem 0.5rem 0.25rem 1rem;
   }
 </style>

plugins/calendar-resources/src/components/EventTimeExtraButton.svelte

@@ -46,7 +46,7 @@
   </div>
 {:else}
   <div class="flex-row-center gap-1-5 mt-1">
-    <CheckBox bind:checked={allDay} accented on:value={() => dispatch('allday')} />
+    <CheckBox bind:checked={allDay} kind={'accented'} on:value={() => dispatch('allday')} />
     <Button
       label={calendar.string.AllDay}
       kind={'ghost'}

plugins/calendar-resources/src/utils.ts

@@ -53,6 +53,8 @@ export function isVisible (value: Event, calendars: IdMap<Calendar>): boolean {
   if (value.createdBy === me) return true
   if (value.visibility === 'freeBusy') {
     return false
+  } else if (value.visibility === 'public') {
+    return true
   }
   const space = calendars.get(value.space)
   if (space == null) {

plugins/gmail-resources/src/components/Message.svelte

@@ -69,7 +69,7 @@
     {/if}
   </div>
   {#if selectable}
-    <div class="ml-4"><CheckBox circle accented bind:checked={selected} /></div>
+    <div class="ml-4"><CheckBox circle kind={'accented'} bind:checked={selected} /></div>
   {/if}
 </div>
 

plugins/tags-resources/src/components/TagsCategoryPopup.svelte

@@ -147,7 +147,7 @@
                 }}
               >
                 <div class="check pointer-events-none">
-                  <CheckBox checked={isSelected(element, selected)} accented />
+                  <CheckBox checked={isSelected(element, selected)} kind={'accented'} />
                 </div>
                 <div class="tag" style="background-color: {color.background};" />
                 <span style:color={color.title}>

plugins/telegram-resources/src/components/Message.svelte

@@ -43,7 +43,7 @@
     }}
   >
     <div class="check-box">
-      {#if selectable}<CheckBox circle accented bind:checked={selected} />{/if}
+      {#if selectable}<CheckBox circle kind={'accented'} bind:checked={selected} />{/if}
     </div>
     <div class="message-container" class:out={!message.incoming}>
       <div class="message" class:outcoming={!message.incoming} class:selected>

plugins/tracker-resources/src/components/FilterMenuSection.svelte

@@ -89,7 +89,7 @@
           <div class="buttonContent">
             {#if i !== 0 || (i === 0 && !onBack)}
               <div class="flex check pointer-events-none">
-                <CheckBox checked={selectedElementsMap[i]} accented />
+                <CheckBox checked={selectedElementsMap[i]} kind={'accented'} />
               </div>
             {/if}
             {#if action.icon}

plugins/view-resources/src/components/BooleanEditorPopup.svelte

@@ -29,15 +29,15 @@
     <BooleanPresenter value={true} />
     {#if value === true}
       <div class="check">
-        <CheckBox checked={value === true} accented />
+        <CheckBox checked={value === true} kind={'accented'} />
       </div>
     {/if}
   </div>
   <div class="menu-item" on:click={() => dispatch('close', 2)}>
     <BooleanPresenter value={false} />
     {#if value === false}
       <div class="check">
-        <CheckBox checked={value === false} accented />
+        <CheckBox checked={value === false} kind={'accented'} />
       </div>
     {/if}
   </div>
@@ -46,7 +46,7 @@
       <BooleanPresenter value={undefined} />
       {#if value === undefined}
         <div class="check">
-          <CheckBox checked={value === undefined} accented />
+          <CheckBox checked={value === undefined} kind={'accented'} />
         </div>
       {/if}
     </div>