fix(Theme): select styling (#2606)

Fixes rendering of select in theme builder
digdir · Oct 11, 2024 · b1fe777 · b1fe777
1 parent 181ea10
commit b1fe777
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/apps/theme/components/ColorPicker/ColorPicker.tsx b/apps/theme/components/ColorPicker/ColorPicker.tsx
@@ -109,10 +109,7 @@ export const ColorPicker = ({
  className={cl(classes.container, 'ds-focus')}
  onClick={() => handleClick()}
  >
- <div
- style={{ backgroundColor: color }}
- className={classes.color}
- ></div>
+ <div style={{ backgroundColor: color }} className={classes.color} />
  <div className={classes.input}>{color}</div>
  </button>
  </div>

diff --git a/apps/theme/components/ThemeToolbar/ThemeToolbar.module.css b/apps/theme/components/ThemeToolbar/ThemeToolbar.module.css
@@ -14,3 +14,9 @@
 .contrastSelect {
  width: 150px;
 }
+
+.select {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ds-spacing-2);
+}
diff --git a/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx
@@ -106,7 +106,7 @@ export const ThemeToolbar = ({
  }}
  />
 
- <div className={classes.dropdown}>
+ <div className={classes.select}>
  <Label htmlFor='select-contrast'>Kontrastnivå</Label>
  <Select
  id='select-contrast'
@@ -121,12 +121,11 @@ export const ThemeToolbar = ({
  <Select.Option value='aaa'>AAA (WIP)</Select.Option>
  </Select>
  </div>
- <div className={classes.borderRadii}>
+ <div className={classes.select}>
  <Label htmlFor='select-border-radius'>Border radius</Label>
  <Select
  id='select-border-radius'
  size='md'
- className={classes.borderRadiiSelect}
  value={borderRadius}
  onChange={(e) => onBorderRadiusChanged(e.target.value)}
  style={{