Minor changes to the check field

alineacms · Nov 2, 2023 · 97635ff · 97635ff
1 parent 8c24335
commit 97635ff
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/input/check/CheckField.browser.tsx b/src/input/check/CheckField.browser.tsx
@@ -26,12 +26,16 @@ function CheckInput({state, field}: CheckInputProps) {
   return (
     <InputLabel
       asLabel
-      label={label}
       {...options}
+      label={options.label ? label : undefined}
       focused={focus}
       icon={IcRoundTextFields}
     >
-      <HStack gap={8} style={{position: 'relative', display: 'inline-flex'}}>
+      <HStack
+        center
+        gap={10}
+        style={{position: 'relative', display: 'inline-flex'}}
+      >
         <input
           className={styles.root.input()}
           type="checkbox"
@@ -51,7 +55,10 @@ function CheckInput({state, field}: CheckInputProps) {
             />
           )}
         </span>
-        <TextLabel label={label} className={styles.root.label()} />
+        <TextLabel
+          label={options.label ?? label}
+          className={styles.root.label()}
+        />
       </HStack>
     </InputLabel>
   )

diff --git a/src/input/check/CheckField.tsx b/src/input/check/CheckField.tsx
@@ -22,10 +22,7 @@ export interface CheckOptions extends FieldOptions {
 export class CheckField extends Field.Scalar<boolean, CheckOptions> {}
 
 /** Create a text field configuration */
-export function check(
-  label: Label,
-  options: CheckOptions = {label}
-): CheckField {
+export function check(label: Label, options: CheckOptions = {}): CheckField {
   return new CheckField({
     hint: Hint.Boolean(),
     label,

diff --git a/src/input/check/CheckInput.module.scss b/src/input/check/CheckInput.module.scss
@@ -1,6 +1,6 @@
 .root {
   &-input {
-    accent-color: var(--alinea-accent);
+    accent-color: var(--alinea-button-background);
     position: absolute;
     width: 0;
     height: 0;
@@ -10,10 +10,10 @@
   &-checkmark {
     cursor: pointer;
     position: relative;
-    width: 24px;
-    height: 24px;
+    width: 16px;
+    height: 16px;
     flex: 0 0 auto;
-    color: var(--alinea-accent);
+    color: var(--alinea-button-background);
     background: var(--alinea-fields);
     box-shadow: var(--alinea-fields-shadow);
     border-radius: 4px;