dial in toggle and popover

frontend/src/metabase/admin/permissions/components/PermissionsGrid.jsx

@@ -352,7 +352,7 @@ class GroupPermissionCell extends Component {
 const AccessOption = ({ value, option, onChange }) => (
   <div
     className={cx(
-      "flex py2 px2 align-center bg-brand-hover text-white-hover cursor-pointer",
+      "flex py2 pl2 pr3 align-center bg-brand-hover text-white-hover cursor-pointer text-bold",
       {
         "bg-brand text-white": value === option,
       },
@@ -361,9 +361,9 @@ const AccessOption = ({ value, option, onChange }) => (
   >
     <Icon
       name={option.icon}
-      className="mr1"
+      className="mr2"
       style={{ color: option.iconColor }}
-      size={18}
+      size={22}
     />
     {option.title}
   </div>

frontend/src/metabase/admin/permissions/containers/TogglePropagateAction.jsx

@@ -19,11 +19,11 @@ const mapDispatchToProps = {
 const TogglePropagateAction = connect(mapStateToProps, mapDispatchToProps)(
   ({ propagate, setPropagatePermissions }) => (
     <div
-      className="flex align-center bg-medium p1 cursor-pointer"
+      className="flex align-center bg-medium px2 py1 cursor-pointer"
       onClick={() => setPropagatePermissions(!propagate)}
     >
       <Toggle small value={propagate} />
-      <span className="ml1 text-bold text-small">{t`Also change sub-collections`}</span>
+      <span className="ml1 text-small">{t`Also change sub-collections`}</span>
     </div>
   ),
 );

frontend/src/metabase/components/Toggle.css

@@ -35,15 +35,15 @@
 }
 
 :local(.toggle.small) {
-  width: 36px;
-  height: 18px;
+  width: 26px;
+  height: 15px;
 }
 
 :local(.toggle.small):after {
-  width: 14px;
-  height: 14px;
+  width: 11px;
+  height: 11px;
 }
 
 :local(.toggle.small.selected):after {
-  left: 19px;
+  left: 12px;
 }