Plugin details style fixes

.changeset/good-plums-push.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Plugin details view now displays channel list with proper padding and text with proper size.

src/components/ControlledSwitch.tsx

@@ -1,17 +1,8 @@
 // @ts-strict-ignore
 import { FormControlLabel, Switch } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
+import { Text } from "@saleor/macaw-ui-next";
 import React from "react";
 
-const useStyles = makeStyles(
-  () => ({
-    labelText: {
-      fontSize: 14,
-    },
-  }),
-  { name: "ControlledSwitch" },
-);
-
 interface ControlledSwitchProps {
   className?: string;
   checked: boolean;
@@ -26,7 +17,6 @@ interface ControlledSwitchProps {
 export const ControlledSwitch: React.FC<ControlledSwitchProps> = props => {
   const { checked, disabled, onChange, label, name, secondLabel, uncheckedLabel, className } =
     props;
-  const classes = useStyles(props);
 
   return (
     <FormControlLabel
@@ -47,7 +37,7 @@ export const ControlledSwitch: React.FC<ControlledSwitchProps> = props => {
               uncheckedLabel
             )
           ) : typeof label === "string" ? (
-            <span className={classes.labelText}>{label}</span>
+            <Text>{label}</Text>
           ) : (
             label
           )}

src/components/NotFoundPage/NotFoundPage.tsx

@@ -71,10 +71,16 @@ const NotFoundPage: React.FC<NotFoundPageProps> = props => {
             <Text className={classes.header} size={6} fontWeight="bold" lineHeight={3}>
               <FormattedMessage id="yH56V+" defaultMessage="Ooops!..." />
             </Text>
-            <Text className={classes.header} size={4} fontWeight="bold" lineHeight={2}>
+            <Text
+              className={classes.header}
+              size={4}
+              fontWeight="bold"
+              lineHeight={2}
+              display="block"
+            >
               <FormattedMessage id="bj6pTd" defaultMessage="Something's missing" />
             </Text>
-            <Text>
+            <Text display="block">
               <FormattedMessage id="nRiOg+" defaultMessage="Sorry, the page was not found" />
             </Text>
           </div>

src/plugins/components/PluginDetailsChannelsCard/PluginDetailsChannelsCardContent.tsx

@@ -51,7 +51,9 @@ const PluginDetailsChannelsCardContent: React.FC<PluginDetailsChannelsCardProps>
   if (isPluginGlobal(plugin.globalConfiguration)) {
     return (
       <DashboardCard.Content>
-        <FormattedMessage {...messages.noChannelsSubtitle} />
+        <Text>
+          <FormattedMessage {...messages.noChannelsSubtitle} />
+        </Text>
       </DashboardCard.Content>
     );
   }
@@ -70,7 +72,7 @@ const PluginDetailsChannelsCardContent: React.FC<PluginDetailsChannelsCardProps>
             onClick={() => setSelectedChannelId(channel.id)}
           >
             {isChannelSelected(channel.id) && <div className={classes.itemActiveIndicator}></div>}
-            <DashboardCard.Content>
+            <DashboardCard.Content padding={4}>
               <Text>{channel.name}</Text>
             </DashboardCard.Content>
           </div>

src/plugins/components/PluginInfo/PluginInfo.tsx

@@ -43,7 +43,7 @@ const PluginInfo: React.FC<PluginInfoProps> = ({ data, description, errors, name
               description: "plugin name",
             })}
           </Text>
-          <Text display="block" fontWeight="bold" fontSize={4}>
+          <Text display="block" fontWeight="bold">
             {name}
           </Text>
         </Box>
@@ -52,14 +52,12 @@ const PluginInfo: React.FC<PluginInfoProps> = ({ data, description, errors, name
             <Text fontSize={3} color="default2">
               <FormattedMessage {...commonMessages.description} />
             </Text>
-            <Text display="block" fontSize={4}>
-              {description}
-            </Text>
+            <Text display="block">{description}</Text>
           </Box>
         )}
         <FormSpacer />
         <Hr />
-        <Text display="block" paddingTop={4}>
+        <Text lineHeight={2} fontSize={3} color="default2" display="block" paddingTop={4}>
           {intl.formatMessage({
             id: "bL/Wrc",
             defaultMessage: "Status",
@@ -68,10 +66,14 @@ const PluginInfo: React.FC<PluginInfoProps> = ({ data, description, errors, name
         </Text>
         <ControlledCheckbox
           name={"active" as keyof PluginDetailsPageFormData}
-          label={intl.formatMessage({
-            id: "FA+MRz",
-            defaultMessage: "Set plugin as active",
-          })}
+          label={
+            <Text>
+              {intl.formatMessage({
+                id: "FA+MRz",
+                defaultMessage: "Set plugin as active",
+              })}
+            </Text>
+          }
           checked={data.active}
           onChange={onChange}
         />

src/plugins/components/PluginSettings/PluginSettings.tsx

@@ -11,7 +11,6 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { PluginDetailsPageFormData } from "../PluginsDetailsPage";
-import { useStyles } from "./styles";
 
 interface PluginSettingsProps {
   data: PluginDetailsPageFormData;
@@ -28,7 +27,6 @@ const PluginSettings: React.FC<PluginSettingsProps> = ({
   onChange,
   fields,
 }) => {
-  const classes = useStyles({});
   const intl = useIntl();
 
   return (
@@ -47,7 +45,13 @@ const PluginSettings: React.FC<PluginSettingsProps> = ({
           const fieldData = fields.find(configField => configField.name === field.name);
 
           return (
-            <div className={classes.item} key={field.name}>
+            <Box
+              key={field.name}
+              display="flex"
+              flexDirection="row"
+              alignItems="center"
+              marginBottom={2}
+            >
               {fieldData.type === ConfigurationTypeFieldEnum.BOOLEAN ? (
                 <>
                   <ControlledSwitch
@@ -93,7 +97,7 @@ const PluginSettings: React.FC<PluginSettingsProps> = ({
                   onChange={onChange}
                 />
               )}
-            </div>
+            </Box>
           );
         })}
       </DashboardCard.Content>

src/plugins/components/PluginSettings/styles.ts

@@ -8,13 +8,6 @@ export const useStyles = makeStyles(
     button: {
       marginRight: theme.spacing(),
     },
-    item: {
-      "&:not(:last-child)": {
-        marginBottom: theme.spacing(3),
-      },
-      alignItems: "center",
-      display: "flex",
-    },
     itemLabel: {
       fontWeight: 500,
     },