From 5be21a9d76f6d277f9725445f49333f3e6e534d1 Mon Sep 17 00:00:00 2001
From: keiko233 <i@elaina.moe>
Date: Sun, 11 Feb 2024 23:40:09 +0800
Subject: [PATCH] feat: make profile material you

---
 src/components/profile/profile-box.tsx  |  2 +-
 src/components/profile/profile-item.tsx |  3 +++
 src/pages/profiles.scss                 |  3 +++
 src/pages/profiles.tsx                  | 15 ++++++++++++---
 4 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/profiles.scss

diff --git a/src/components/profile/profile-box.tsx b/src/components/profile/profile-box.tsx
index ad9d79b968..f733ffc31c 100644
--- a/src/components/profile/profile-box.tsx
+++ b/src/components/profile/profile-box.tsx
@@ -36,7 +36,7 @@ export const ProfileBox = styled(Box)(({
     textAlign: "left",
     borderRadius: theme.shape.borderRadius,
     boxShadow: theme.shadows[2],
-    padding: "8px 16px",
+    padding: "10px 14px",
     boxSizing: "border-box",
     backgroundColor,
     color,
diff --git a/src/components/profile/profile-item.tsx b/src/components/profile/profile-item.tsx
index a9302e4e39..dba06a590c 100644
--- a/src/components/profile/profile-item.tsx
+++ b/src/components/profile/profile-item.tsx
@@ -217,6 +217,9 @@ export const ProfileItem = (props: Props) => {
           setAnchorEl(event.currentTarget);
           event.preventDefault();
         }}
+        sx={{
+          borderRadius: 4,
+        }}
       >
         {activating && (
           <Box
diff --git a/src/pages/profiles.scss b/src/pages/profiles.scss
new file mode 100644
index 0000000000..daa9d7a503
--- /dev/null
+++ b/src/pages/profiles.scss
@@ -0,0 +1,3 @@
+:global(section) {
+  overflow-x: hidden;
+}
diff --git a/src/pages/profiles.tsx b/src/pages/profiles.tsx
index 1d7524c43e..b2a2237d19 100644
--- a/src/pages/profiles.tsx
+++ b/src/pages/profiles.tsx
@@ -313,7 +313,10 @@ export default function ProfilePage() {
           sx={{ input: { py: 0.65, px: 1.25 } }}
           placeholder={t("Profile URL")}
           InputProps={{
-            sx: { pr: 1 },
+            sx: {
+              borderRadius: 4,
+              pr: 1,
+            },
             endAdornment: !url ? (
               <IconButton
                 size="small"
@@ -341,6 +344,9 @@ export default function ProfilePage() {
           variant="contained"
           size="small"
           onClick={onImport}
+          sx={{
+            borderRadius: 4,
+          }}
         >
           {t("Import")}
         </LoadingButton>
@@ -348,6 +354,9 @@ export default function ProfilePage() {
           variant="contained"
           size="small"
           onClick={() => viewerRef.current?.create()}
+          sx={{
+            borderRadius: 4,
+          }}
         >
           {t("New")}
         </Button>
@@ -359,14 +368,14 @@ export default function ProfilePage() {
         onDragEnd={onDragEnd}
       >
         <Box sx={{ mb: 4.5 }}>
-          <Grid container spacing={{ xs: 1, lg: 1 }}>
+          <Grid container spacing={{ xs: 3, lg: 3 }}>
             <SortableContext
               items={regularItems.map((x) => {
                 return x.uid;
               })}
             >
               {regularItems.map((item) => (
-                <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
+                <Grid item xs={12} md={6} lg={4} xl={3} key={item.file}>
                   <ProfileItem
                     id={item.uid}
                     selected={profiles.current === item.uid}