fix(settings): tweak settings modal text alignment COMPASS-6413 (#3946)

* tweak settings modal alignment

* 50%?

* bring back the font weight

* rm comment

Author: lerouxb

packages/compass-settings/src/components/settings/theme.tsx

@@ -29,13 +29,27 @@ const checkboxStyles = css({
   marginBottom: spacing[3],
 });
 
+const radioBoxStyles = css({
+  div: {
+    textAlign: 'left',
+    padding: spacing[3],
+    justifyContent: 'flex-start',
+  },
+});
+
+const themePreviewStyles = css({
+  marginRight: spacing[2],
+  maxWidth: '50%',
+});
+
 function LightThemePreview() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       fill="none"
       viewBox="0 0 171 119"
+      className={themePreviewStyles}
     >
       <rect width="171" height="119" fill="#fff" rx="6" />
       <rect width="42" height="119" fill="#F9FBFA" rx="6" />
@@ -58,6 +72,7 @@ function DarkThemePreview() {
       xmlnsXlink="http://www.w3.org/1999/xlink"
       fill="none"
       viewBox="0 0 171 119"
+      className={themePreviewStyles}
     >
       <rect width="171" height="119" fill="#3D4F58" rx="6" />
       <rect width="42" height="119" fill="#1C2D38" rx="6" />
@@ -120,10 +135,12 @@ export const ThemeSettings: React.FunctionComponent<ThemeSettingsProps> = ({
           id="theme-selector"
           onChange={handleSelectorChange}
           value={themeValue}
+          size="full"
         >
           <RadioBox
             id="theme-selector-light"
             data-testid="theme-selector-light"
+            className={radioBoxStyles}
             value="LIGHT"
             disabled={!!preferenceStates.theme || themeValue === 'OS_THEME'}
           >
@@ -133,6 +150,7 @@ export const ThemeSettings: React.FunctionComponent<ThemeSettingsProps> = ({
           <RadioBox
             id="theme-selector-dark"
             data-testid="theme-selector-dark"
+            className={radioBoxStyles}
             value="DARK"
             disabled={!!preferenceStates.theme || themeValue === 'OS_THEME'}
           >

packages/compass-settings/src/components/sidebar.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  css,
-  cx,
-  spacing,
-  palette,
-  Button,
-} from '@mongodb-js/compass-components';
+import { css, cx, spacing, palette } from '@mongodb-js/compass-components';
 
 const buttonStyles = css({
   borderRadius: spacing[1],
@@ -16,6 +10,7 @@ const buttonStyles = css({
   width: '100%',
   padding: spacing[2],
   textAlign: 'left',
+  fontWeight: 500,
 });
 
 const hoverStyles = css({
@@ -28,8 +23,6 @@ const hoverStyles = css({
 const activeStyles = css({
   backgroundColor: palette.green.light3,
   color: palette.gray.dark3,
-  // The LG component overwrites the color
-  // with the default value when the button loses focus.
   '&:active,&:focus': {
     backgroundColor: palette.green.light3,
     color: palette.gray.dark3,
@@ -54,7 +47,8 @@ const SettingsSideNav: React.FunctionComponent<SidebarProps> = ({
       aria-labelledby="modal-title"
     >
       {items.map((item) => (
-        <Button
+        <button
+          type="button"
           key={item}
           role="tab"
           aria-controls={`${item} Section`}
@@ -68,7 +62,7 @@ const SettingsSideNav: React.FunctionComponent<SidebarProps> = ({
           onClick={() => onSelectItem(item)}
         >
           {item}
-        </Button>
+        </button>
       ))}
     </div>
   );