fix(frontend/settings): match reset button style

Uses theme variable colors for styling. Fixes #432
shabados · May 8, 2020 · d630575 · d630575
1 parent 615405b
commit d630575
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/app/frontend/src/Settings/DynamicOptions.css b/app/frontend/src/Settings/DynamicOptions.css
@@ -0,0 +1,9 @@
+.reset-to-defaults-button{
+    color: var(--settings-text-color) !important;
+    background-color: var(--settings-setting-off-color) !important;
+}
+
+.reset-to-defaults-button:hover {
+    color: var(--settings-background-color) !important;
+    background-color: var(--settings-setting-on-color) !important;
+}
diff --git a/app/frontend/src/Settings/DynamicOptions.js b/app/frontend/src/Settings/DynamicOptions.js
@@ -10,6 +10,8 @@ import { SettingsContext } from '../lib/contexts'
 
 import SettingComponentFactory from './SettingComponents'
 
+import './DynamicOptions.css'
+
 export const slotSizes = {
   icon: { xs: 2, sm: 1 },
   name: { xs: 5, sm: 5, md: 4, lg: 4 },
@@ -48,7 +50,7 @@ OptionSlot.propTypes = { children: node.isRequired }
 export const ResetButton = ( { group, disabled } ) => (
   <OptionGrid container align="center">
     <Grid item {...slotSizes.single}>
-      <Button disabled={disabled} variant="contained" onClick={() => controller.resetSettingGroup( group )}>Reset to defaults</Button>
+      <Button className="reset-to-defaults-button" disabled={disabled} variant="contained" onClick={() => controller.resetSettingGroup( group )}>Reset to defaults</Button>
     </Grid>
   </OptionGrid>
 )