Refactor: refactor TemplateList import and styled-components #84

AgainIoT · Oct 9, 2023 · 057d165 · 057d165
1 parent a4fa07c
commit 057d165
Showing 1 changed file with 14 additions and 14 deletions.
diff --git a/src/components/common/template/TemplateList.js b/src/components/common/template/TemplateList.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
-import axios from "axios";
-import { PropTypes } from "prop-types";
+import { useRecoilState, useRecoilValue } from "recoil";
 import { styled, alpha } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import InputBase from "@mui/material/InputBase";
@@ -11,15 +10,16 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
+import { fontSize } from "@mui/system";
 import { FixedSizeList } from "react-window";
-import { useRecoilState, useRecoilValue } from "recoil";
-import TemplateTitle from "./TemplateTitle";
+import axios from "axios";
+import { PropTypes } from "prop-types";
 import {
   templateContent,
   templatePreviewState,
   templateSelectState,
 } from "../../../recoil/templateState";
-import { fontSize } from "@mui/system";
+import TemplateTitle from "./TemplateTitle";
 
 // props -> type(pr, readme, contributing)
 export function TemplateList(props) {
@@ -145,36 +145,36 @@ export function TemplateList(props) {
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
+  width: "100%",
+  marginLeft: 0,
   borderRadius: theme.shape.borderRadius,
   backgroundColor: alpha(theme.palette.common.white, 0.15),
   "&:hover": {
     backgroundColor: alpha(theme.palette.common.white, 0.25),
   },
-  marginLeft: 0,
-  width: "100%",
   [theme.breakpoints.up("sm")]: {
     marginLeft: theme.spacing(1),
     width: "auto",
   },
 }));
 
 const SearchIconWrapper = styled("div")(({ theme }) => ({
-  padding: theme.spacing(0, 2),
-  height: "100%",
-  position: "absolute",
-  pointerEvents: "none",
   display: "flex",
+  position: "absolute",
+  height: "100%",
+  padding: theme.spacing(0, 2),
   alignItems: "center",
   justifyContent: "center",
+  pointerEvents: "none",
 }));
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
   color: "inherit",
   "& .MuiInputBase-input": {
+    width: "100%",
     padding: theme.spacing(1, 1, 1, 0),
     paddingLeft: `calc(1em + ${theme.spacing(4)})`,
     transition: theme.transitions.create("width"),
-    width: "100%",
     [theme.breakpoints.up("sm")]: {
       width: "12ch",
       "&:focus": {
@@ -185,9 +185,9 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 }));
 
 const Item = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(1),
   backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
   ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: "center",
   color: theme.palette.text.secondary,
+  textAlign: "center",
 }));