Replace styles/styles with Box stylings

Signed-off-by: Erik Engervall <erik.engervall@gmail.com>

plugins/git-release-manager/src/GitReleaseManager.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import { useAsync } from 'react-use';
 import { Alert } from '@material-ui/lab';
 import { useApi, ContentHeader } from '@backstage/core';
+import { Box } from '@material-ui/core';
 
 import {
   ComponentConfig,
@@ -34,7 +35,6 @@ import { ProjectContext, Project } from './contexts/ProjectContext';
 import { RepoDetailsForm } from './features/RepoDetailsForm/RepoDetailsForm';
 import { useQueryHandler } from './hooks/useQueryHandler';
 import { UserContext } from './contexts/UserContext';
-import { useStyles } from './styles/styles';
 
 interface GitReleaseManagerProps {
   project?: Omit<Project, 'isProvidedViaProps'>;
@@ -49,7 +49,6 @@ interface GitReleaseManagerProps {
 
 export function GitReleaseManager(props: GitReleaseManagerProps) {
   const pluginApiClient = useApi(gitReleaseManagerApiRef);
-  const classes = useStyles();
 
   const { getParsedQuery } = useQueryHandler();
   const { parsedQuery } = getParsedQuery();
@@ -89,7 +88,7 @@ export function GitReleaseManager(props: GitReleaseManagerProps) {
   return (
     <ProjectContext.Provider value={{ project }}>
       <UserContext.Provider value={{ user }}>
-        <div className={classes.root}>
+        <Box maxWidth={999}>
           <ContentHeader title="Git Release Manager" />
 
           <InfoCardPlus>
@@ -97,7 +96,7 @@ export function GitReleaseManager(props: GitReleaseManagerProps) {
           </InfoCardPlus>
 
           {isProjectValid(project) && <Features features={props.features} />}
-        </div>
+        </Box>
       </UserContext.Provider>
     </ProjectContext.Provider>
   );

plugins/git-release-manager/src/components/NoLatestRelease.test.tsx

@@ -26,28 +26,32 @@ describe('NoLatestRelease', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="MuiPaper-root MuiAlert-root MuiAlert-standardWarning makeStyles-paragraph-2 MuiPaper-elevation0"
-          data-testid="grm--no-latest-release"
-          role="alert"
+          class="MuiBox-root MuiBox-root-1"
         >
           <div
-            class="MuiAlert-icon"
+            class="MuiPaper-root MuiAlert-root MuiAlert-standardWarning MuiPaper-elevation0"
+            data-testid="grm--no-latest-release"
+            role="alert"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
-              focusable="false"
-              viewBox="0 0 24 24"
+            <div
+              class="MuiAlert-icon"
             >
-              <path
-                d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
-              />
-            </svg>
-          </div>
-          <div
-            class="MuiAlert-message"
-          >
-            Unable to find any Release
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+                />
+              </svg>
+            </div>
+            <div
+              class="MuiAlert-message"
+            >
+              Unable to find any Release
+            </div>
           </div>
         </div>
       </div>

plugins/git-release-manager/src/components/NoLatestRelease.tsx

@@ -16,20 +16,19 @@
 
 import React from 'react';
 import { Alert } from '@material-ui/lab';
+import { Box } from '@material-ui/core';
 
-import { useStyles } from '../styles/styles';
 import { TEST_IDS } from '../test-helpers/test-ids';
 
 export const NoLatestRelease = () => {
-  const classes = useStyles();
-
   return (
-    <Alert
-      data-testid={TEST_IDS.components.noLatestRelease}
-      className={classes.paragraph}
-      severity="warning"
-    >
-      Unable to find any Release
-    </Alert>
+    <Box marginBottom={2}>
+      <Alert
+        data-testid={TEST_IDS.components.noLatestRelease}
+        severity="warning"
+      >
+        Unable to find any Release
+      </Alert>
+    </Box>
   );
 };

plugins/git-release-manager/src/features/CreateReleaseCandidate/CreateReleaseCandidate.tsx

@@ -17,6 +17,7 @@
 import React, { useState, useEffect } from 'react';
 import { Alert, AlertTitle } from '@material-ui/lab';
 import {
+  Box,
   Button,
   FormControl,
   InputLabel,
@@ -39,7 +40,6 @@ import { SEMVER_PARTS } from '../../constants/constants';
 import { TEST_IDS } from '../../test-helpers/test-ids';
 import { useCreateReleaseCandidate } from './hooks/useCreateReleaseCandidate';
 import { useProjectContext } from '../../contexts/ProjectContext';
-import { useStyles } from '../../styles/styles';
 
 interface CreateReleaseCandidateProps {
   defaultBranch: GetRepositoryResult['defaultBranch'];
@@ -49,12 +49,11 @@ interface CreateReleaseCandidateProps {
 }
 
 const InfoCardPlusWrapper = ({ children }: { children: React.ReactNode }) => {
-  const classes = useStyles();
   return (
     <InfoCardPlus>
-      <Typography variant="h4" className={classes.paragraph}>
-        Create Release Candidate
-      </Typography>
+      <Box marginBottom={2}>
+        <Typography variant="h4">Create Release Candidate</Typography>
+      </Box>
       {children}
     </InfoCardPlus>
   );
@@ -67,7 +66,6 @@ export const CreateReleaseCandidate = ({
   successCb,
 }: CreateReleaseCandidateProps) => {
   const { project } = useProjectContext();
-  const classes = useStyles();
 
   const [semverBumpLevel, setSemverBumpLevel] = useState<'major' | 'minor'>(
     SEMVER_PARTS.minor,
@@ -129,10 +127,7 @@ export const CreateReleaseCandidate = ({
       {project.versioningStrategy === 'semver' &&
         latestRelease &&
         !conflictingPreRelease && (
-          <div
-            className={classes.paragraph}
-            data-testid={TEST_IDS.createRc.semverSelect}
-          >
+          <Box marginBottom={2} data-testid={TEST_IDS.createRc.semverSelect}>
             <FormControl style={{ margin: 5, minWidth: 250 }}>
               <InputLabel>Select bump severity</InputLabel>
 
@@ -150,26 +145,30 @@ export const CreateReleaseCandidate = ({
                 </MenuItem>
               </Select>
             </FormControl>
-          </div>
+          </Box>
         )}
 
       {conflictingPreRelease || tagAlreadyExists ? (
         <>
           {conflictingPreRelease && (
-            <Alert className={classes.paragraph} severity="warning">
-              The most recent release is already a Release Candidate
-            </Alert>
+            <Box marginBottom={2}>
+              <Alert severity="warning">
+                The most recent release is already a Release Candidate
+              </Alert>
+            </Box>
           )}
 
           {tagAlreadyExists && (
-            <Alert className={classes.paragraph} severity="warning">
-              There's already a tag named{' '}
-              <strong>{releaseCandidateGitInfo.rcReleaseTag}</strong>
-            </Alert>
+            <Box marginBottom={2}>
+              <Alert severity="warning">
+                There's already a tag named{' '}
+                <strong>{releaseCandidateGitInfo.rcReleaseTag}</strong>
+              </Alert>
+            </Box>
           )}
         </>
       ) : (
-        <div className={classes.paragraph}>
+        <Box marginBottom={2}>
           <Typography>
             <Differ
               icon="branch"
@@ -185,7 +184,7 @@ export const CreateReleaseCandidate = ({
               next={releaseCandidateGitInfo.rcReleaseTag}
             />
           </Typography>
-        </div>
+        </Box>
       )}
 
       <Button

plugins/git-release-manager/src/features/Features.test.tsx

@@ -54,7 +54,7 @@ describe('Features', () => {
 
     expect(getByTestId(TEST_IDS.info.info)).toMatchInlineSnapshot(`
       <div
-        class="MuiBox-root MuiBox-root-4"
+        class="MuiBox-root MuiBox-root-2"
         data-testid="grm--info"
       >
         <h6

plugins/git-release-manager/src/features/Info/Info.tsx

@@ -27,7 +27,6 @@ import { InfoCardPlus } from '../../components/InfoCardPlus';
 import { Stats } from '../Stats/Stats';
 import { TEST_IDS } from '../../test-helpers/test-ids';
 import { useProjectContext } from '../../contexts/ProjectContext';
-import { useStyles } from '../../styles/styles';
 import flowImage from './flow.png';
 
 interface InfoCardProps {
@@ -42,7 +41,6 @@ export const Info = ({
   statsEnabled,
 }: InfoCardProps) => {
   const { project } = useProjectContext();
-  const classes = useStyles();
   const [showStats, setShowStats] = useState(false);
 
   return (
@@ -75,15 +73,17 @@ export const Info = ({
       <Box marginBottom={1}>
         <Typography variant="h6">Flow</Typography>
 
-        <Typography className={classes.paragraph}>
-          Git Release Manager is built with a specific flow in mind. For
-          example, it assumes your project is configured to react to tags
-          prefixed with <b>rc</b> or <b>version</b>.
-        </Typography>
+        <Box marginBottom={2}>
+          <Typography>
+            Git Release Manager is built with a specific flow in mind. For
+            example, it assumes your project is configured to react to tags
+            prefixed with <b>rc</b> or <b>version</b>.
+          </Typography>
+        </Box>
 
-        <Typography className={classes.paragraph}>
-          Here's an overview of the flow:
-        </Typography>
+        <Box marginBottom={2}>
+          <Typography>Here's an overview of the flow:</Typography>
+        </Box>
 
         <img alt="flow" src={flowImage} style={{ width: '100%' }} />
       </Box>

plugins/git-release-manager/src/features/Patch/Patch.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Typography } from '@material-ui/core';
+import { Typography, Box } from '@material-ui/core';
 import { Alert, AlertTitle } from '@material-ui/lab';
 
 import {
@@ -28,7 +28,6 @@ import { InfoCardPlus } from '../../components/InfoCardPlus';
 import { NoLatestRelease } from '../../components/NoLatestRelease';
 import { PatchBody } from './PatchBody';
 import { useProjectContext } from '../../contexts/ProjectContext';
-import { useStyles } from '../../styles/styles';
 
 interface PatchProps {
   latestRelease: GetLatestReleaseResult;
@@ -41,13 +40,13 @@ export const Patch = ({
   releaseBranch,
   successCb,
 }: PatchProps) => {
-  const classes = useStyles();
-
   return (
     <InfoCardPlus>
-      <Typography variant="h4" className={classes.paragraph}>
-        Patch Release {latestRelease?.prerelease ? 'Candidate' : 'Version'}
-      </Typography>
+      <Box marginBottom={2}>
+        <Typography variant="h4">
+          Patch Release {latestRelease?.prerelease ? 'Candidate' : 'Version'}
+        </Typography>
+      </Box>
 
       <BodyWrapper
         latestRelease={latestRelease}

plugins/git-release-manager/src/features/Patch/PatchBody.tsx

@@ -18,6 +18,7 @@ import React, { useState } from 'react';
 import { useAsync } from 'react-use';
 import { Alert, AlertTitle } from '@material-ui/lab';
 import {
+  Box,
   Button,
   Checkbox,
   IconButton,
@@ -50,7 +51,6 @@ import { SemverTagParts } from '../../helpers/tagParts/getSemverTagParts';
 import { TEST_IDS } from '../../test-helpers/test-ids';
 import { usePatch } from './hooks/usePatch';
 import { useProjectContext } from '../../contexts/ProjectContext';
-import { useStyles } from '../../styles/styles';
 
 interface PatchBodyProps {
   bumpedTag: string;
@@ -88,8 +88,8 @@ export const PatchBody = ({
     ]);
 
     return {
-      recentCommitsOnReleaseBranch,
       recentCommitsOnDefaultBranch,
+      recentCommitsOnReleaseBranch,
     };
   });
 
@@ -100,6 +100,7 @@ export const PatchBody = ({
     tagParts,
     successCb,
   });
+
   if (responseSteps.length > 0) {
     return (
       <ResponseStepDialog
@@ -123,26 +124,28 @@ export const PatchBody = ({
   }
 
   function Description() {
-    const classes = useStyles();
-
     return (
       <>
         {!latestRelease.prerelease && (
-          <Alert
-            data-testid={TEST_IDS.patch.notPrerelease}
-            className={classes.paragraph}
-            severity="info"
-          >
-            <AlertTitle>
-              The current Git release is a <b>Release Version</b>
-            </AlertTitle>
-            It's still possible to patch it, but be extra mindful of changes
-          </Alert>
+          <Box marginBottom={2}>
+            <Alert data-testid={TEST_IDS.patch.notPrerelease} severity="info">
+              <AlertTitle>
+                The current Git release is a <b>Release Version</b>
+              </AlertTitle>
+              It's still possible to patch it, but be extra mindful of changes
+            </Alert>
+          </Box>
         )}
 
-        <Typography className={classes.paragraph}>
-          <Differ icon="tag" current={latestRelease.tagName} next={bumpedTag} />
-        </Typography>
+        <Box marginBottom={2}>
+          <Typography>
+            <Differ
+              icon="tag"
+              current={latestRelease.tagName}
+              next={bumpedTag}
+            />
+          </Typography>
+        </Box>
       </>
     );
   }
@@ -274,8 +277,12 @@ export const PatchBody = ({
     );
   }
 
-  function CTA() {
-    return (
+  return (
+    <Box data-testid={TEST_IDS.patch.body}>
+      <Description />
+
+      <CommitList />
+
       <Button
         disabled={checkedCommitIndex === -1 || progress > 0}
         variant="contained"
@@ -296,16 +303,6 @@ export const PatchBody = ({
       >
         Patch Release Candidate
       </Button>
-    );
-  }
-
-  return (
-    <div data-testid={TEST_IDS.patch.body}>
-      <Description />
-
-      <CommitList />
-
-      <CTA />
-    </div>
+    </Box>
   );
 };

plugins/git-release-manager/src/features/PromoteRc/PromoteRc.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Alert, AlertTitle } from '@material-ui/lab';
-import { Typography } from '@material-ui/core';
+import { Box, Typography } from '@material-ui/core';
 
 import { ComponentConfigPromoteRc } from '../../types/types';
 import { GetLatestReleaseResult } from '../../api/GitReleaseApiClient';
@@ -24,7 +24,6 @@ import { InfoCardPlus } from '../../components/InfoCardPlus';
 import { NoLatestRelease } from '../../components/NoLatestRelease';
 import { PromoteRcBody } from './PromoteRcBody';
 import { TEST_IDS } from '../../test-helpers/test-ids';
-import { useStyles } from '../../styles/styles';
 
 interface PromoteRcProps {
   latestRelease: GetLatestReleaseResult;
@@ -32,8 +31,6 @@ interface PromoteRcProps {
 }
 
 export const PromoteRc = ({ latestRelease, successCb }: PromoteRcProps) => {
-  const classes = useStyles();
-
   function Body() {
     if (latestRelease === null) {
       return <NoLatestRelease />;
@@ -41,14 +38,17 @@ export const PromoteRc = ({ latestRelease, successCb }: PromoteRcProps) => {
 
     if (!latestRelease.prerelease) {
       return (
-        <Alert
-          data-testid={TEST_IDS.promoteRc.notRcWarning}
-          className={classes.paragraph}
-          severity="warning"
-        >
-          <AlertTitle>Latest Git release is not a Release Candidate</AlertTitle>
-          One can only promote Release Candidates to Release Versions
-        </Alert>
+        <Box marginBottom={2}>
+          <Alert
+            data-testid={TEST_IDS.promoteRc.notRcWarning}
+            severity="warning"
+          >
+            <AlertTitle>
+              Latest Git release is not a Release Candidate
+            </AlertTitle>
+            One can only promote Release Candidates to Release Versions
+          </Alert>
+        </Box>
       );
     }
 
@@ -57,9 +57,9 @@ export const PromoteRc = ({ latestRelease, successCb }: PromoteRcProps) => {
 
   return (
     <InfoCardPlus>
-      <Typography variant="h4" className={classes.paragraph}>
-        Promote Release Candidate
-      </Typography>
+      <Box marginBottom={2}>
+        <Typography variant="h4">Promote Release Candidate</Typography>
+      </Box>
 
       <Body />
     </InfoCardPlus>

plugins/git-release-manager/src/features/PromoteRc/PromoteRcBody.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Button, Typography } from '@material-ui/core';
+import { Button, Typography, Box } from '@material-ui/core';
 
 import { ComponentConfigPromoteRc } from '../../types/types';
 import { Differ } from '../../components/Differ';
@@ -23,7 +23,6 @@ import { GetLatestReleaseResult } from '../../api/GitReleaseApiClient';
 import { ResponseStepDialog } from '../../components/ResponseStepDialog/ResponseStepDialog';
 import { TEST_IDS } from '../../test-helpers/test-ids';
 import { usePromoteRc } from './hooks/usePromoteRc';
-import { useStyles } from '../../styles/styles';
 
 interface PromoteRcBodyProps {
   rcRelease: NonNullable<GetLatestReleaseResult>;
@@ -31,7 +30,6 @@ interface PromoteRcBodyProps {
 }
 
 export const PromoteRcBody = ({ rcRelease, successCb }: PromoteRcBodyProps) => {
-  const classes = useStyles();
   const releaseVersion = rcRelease.tagName.replace('rc-', 'version-');
 
   const { progress, responseSteps, run, runInvoked } = usePromoteRc({
@@ -52,13 +50,21 @@ export const PromoteRcBody = ({ rcRelease, successCb }: PromoteRcBodyProps) => {
 
   return (
     <>
-      <Typography className={classes.paragraph}>
-        Promotes the current Release Candidate to a <b>Release Version</b>.
-      </Typography>
+      <Box marginBottom={2}>
+        <Typography>
+          Promotes the current Release Candidate to a <b>Release Version</b>.
+        </Typography>
+      </Box>
 
-      <Typography className={classes.paragraph}>
-        <Differ icon="tag" current={rcRelease.tagName} next={releaseVersion} />
-      </Typography>
+      <Box marginBottom={2}>
+        <Typography>
+          <Differ
+            icon="tag"
+            current={rcRelease.tagName}
+            next={releaseVersion}
+          />
+        </Typography>
+      </Box>
 
       <Button
         data-testid={TEST_IDS.promoteRc.cta}

plugins/git-release-manager/src/styles/styles.ts

@@ -1,26 +0,0 @@
-/*
- * Copyright 2021 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { makeStyles, Theme } from '@material-ui/core';
-
-export const useStyles = makeStyles((_theme: Theme) => ({
-  root: {
-    maxWidth: '999px',
-  },
-  paragraph: {
-    marginBottom: '1em',
-  },
-}));