releasef more round profile forms

Sammers21 · Jul 20, 2023 · 2b684ca · 2b684ca
1 parent 4cb8afc
commit 2b684ca
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 46 deletions.
diff --git a/frontend/src/components/Meta/Grid.jsx b/frontend/src/components/Meta/Grid.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import {DataGrid, gridClasses} from '@mui/x-data-grid';
-import {aroundColor, containerBg} from "../../theme";
+import {aroundColor, borderRadius, containerBg} from "../../theme";
 import {LinearProgress, Select, Tooltip, Typography} from "@mui/material";
 import {getClassNameColor, specNameFromFullSpec} from "../DataTable/useColumns";
 import {styled, alpha} from "@mui/material/styles";
@@ -281,7 +281,7 @@ const Grid = () => {
         marginX={1}
         marginY={1}
         padding={2}
-        borderRadius={3}
+        borderRadius={borderRadius}
         sx={{backgroundColor: alpha(aroundColor, 0.3)}}>
         <Typography variant={'h4'}>Meta</Typography>
         <Typography variant={'body1'}>Specs Popularity and Win rates, last month, last week, last day, any skill level, any role and any bracket</Typography>
@@ -290,7 +290,7 @@ const Grid = () => {
         marginX={1}
         marginY={1}
         padding={2}
-        borderRadius={3}>
+        borderRadius={borderRadius}>
         {filters.map((filter) => {
           return RenderFilter(filter)
         })}
@@ -299,7 +299,7 @@ const Grid = () => {
         marginX={1}
         marginY={1}
         padding={2}
-        borderRadius={3}
+        borderRadius={borderRadius}
         sx={{backgroundColor: alpha(aroundColor, 0.3)}}>
         <StripedDataGrid
           experimentalFeatures={{columnGrouping: true}}

diff --git a/frontend/src/components/Profile/PhotoCard.jsx b/frontend/src/components/Profile/PhotoCard.jsx
@@ -1,4 +1,4 @@
-import {aroundColor, borderColor, winRateGreyColor} from "../../theme";
+import {aroundColor, borderColor, borderRadius, winRateGreyColor} from "../../theme";
 import {alpha, Box, Button, Link, Typography} from "@mui/material";
 import {getClassNameColor, getRealmColor} from "../DataTable/useColumns";
 import LoadingButton from '@mui/lab/LoadingButton';
@@ -26,7 +26,6 @@ const PhotoCard = ({ isMobile, data, update, loading }) => {
       padding : '10px',
     }}
   >
-
     <Typography
       variant="h6"
       component="div"
@@ -65,15 +64,15 @@ const PhotoCard = ({ isMobile, data, update, loading }) => {
   </Box>;
 
   let picture = <Box
-    width={isMobile ? '40%' : 'auto'}
-    height={isMobile ? 'auto' : '100%'}
+    width={isMobile ? '170px' : '200px'}
+    height={'100%'}
     si
     component="img"
     sx={{
       border: 1,
       borderColor: borderColor,
     }}
-    alt="Pic"
+    alt="Profile-pic"
     src={insert}
   />;
 
@@ -87,15 +86,15 @@ const PhotoCard = ({ isMobile, data, update, loading }) => {
   return (<Box
     width={isMobile ? '100%' : 'auto'}
     display="flex"
-    borderRadius={2}
-    margin={isMobile ? 1 : 1}
-    padding={isMobile ? 1 : 1}
+    borderRadius={borderRadius}
+    margin={isMobile ? 0 : 3}
+    padding={isMobile ? 0 : 3}
     flexDirection={isMobile ? 'column' : 'row'}
     sx={{
       backgroundColor: alpha(aroundColor, 0.3),
     }}
   >
-    <Box display={'flex'} flexDirection={'row'} justifyContent={'center'}>
+    <Box display={'flex'} flexDirection={'row'}>
       {picture}
       {charInfoTypog}
     </Box>

diff --git a/frontend/src/components/Profile/PvpBracketBox.jsx b/frontend/src/components/Profile/PvpBracketBox.jsx
@@ -1,5 +1,5 @@
 import {alpha, Box, Divider, Typography} from "@mui/material";
-import {aroundColor, winRateGreyColor} from "../../theme";
+import {aroundColor, borderRadius, winRateGreyColor} from "../../theme";
 
 const PvpBracketBox = ({isMobile, totalInRow, bracket, rating, wins, loses}) => {
   let shortBracketName = bracket;
@@ -49,7 +49,7 @@ const PvpBracketBox = ({isMobile, totalInRow, bracket, rating, wins, loses}) =>
          marginX={1}
          marginY={1}
          padding={1}
-         borderRadius={1}
+         borderRadius={borderRadius}
          sx={{
            backgroundColor: alpha(aroundColor, 0.3),
          }}>

diff --git a/frontend/src/components/Profile/Talents.jsx b/frontend/src/components/Profile/Talents.jsx
@@ -1,31 +1,49 @@
-import {Button, Card, CardActions, CardContent, Typography} from "@mui/material";
+import {alpha, Button, Card, CardActions, CardContent, Typography} from "@mui/material";
 import React from "react";
+import {aroundColor, borderRadius} from "../../theme";
+import Box from "@mui/material/Box";
 
-const Talents = ({data}) => {
+const Talents = ({isMobile, data}) => {
   const openInNewTab = (url) => {
     window.open(url, "_blank", "noreferrer");
   };
-  let talents = <Card sx={{maxWidth: '100%'}}>
-    <CardContent>
-      <Typography gutterBottom variant="h5" component="div">
-        Talents
-      </Typography>
-      <Typography variant="body2" color="text.secondary">
-        {data.talents}
-      </Typography>
-    </CardContent>
-    <CardActions>
-      <Button size="small" onClick={() => {
-        openInNewTab("https://www.wowhead.com/talent-calc/blizzard/" + data.talents)
-      }}>Wowhead</Button>
-      <Button size="small" onClick={() => {
-        navigator.clipboard.writeText(data.talents).then(function () {
-        }, function (err) {
-          console.error('Async: Could not copy text: ', err);
-        });
-      }}>Copy</Button>
-    </CardActions>
-  </Card>;
+  let talents =
+    <Box
+      margin={isMobile ? 0 : 1}
+      padding={isMobile ? 0 : 1}
+      paddingTop={0}
+      paddingBottom={0}
+      marginTop={1}
+      marginBottom={0}
+  sx={{
+    // width:'100
+    }}>
+      <Card
+        sx={{
+          borderRadius: borderRadius,
+          backgroundColor: alpha(aroundColor, 0.3),
+        }}>
+        <CardContent>
+          <Typography gutterBottom variant="h5" component="div">
+            Talents
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {data.talents}
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Button size="small" onClick={() => {
+            openInNewTab("https://www.wowhead.com/talent-calc/blizzard/" + data.talents)
+          }}>Wowhead</Button>
+          <Button size="small" onClick={() => {
+            navigator.clipboard.writeText(data.talents).then(function () {
+            }, function (err) {
+              console.error('Async: Could not copy text: ', err);
+            });
+          }}>Copy</Button>
+        </CardActions>
+      </Card>
+    </Box>;
   return talents;
 }
 export default Talents;
diff --git a/frontend/src/components/Profile/TitlesHistory.jsx b/frontend/src/components/Profile/TitlesHistory.jsx
@@ -1,14 +1,19 @@
 import {alpha, Divider, Typography} from "@mui/material";
 import Box from "@mui/material/Box";
 import * as React from "react";
-import {aroundColor} from "../../theme";
+import {aroundColor, borderRadius} from "../../theme";
 import Paper from '@mui/material/Paper';
 
 const TitlesHistory = ({expansions}) => {
   return (<Box sx={{
     backgroundColor: alpha(aroundColor, 0.3),
+    borderRadius: borderRadius,
     marginTop: '15px', marginBottom: '15px',
-    width: '100%', paddingTop: '15px', paddingBottom: '15px', paddingLeft: '15px', paddingRight: '15px',
+    width: '100%',
+    paddingTop: '15px',
+    paddingBottom: '15px',
+    paddingLeft: '15px',
+    paddingRight: '15px',
   }}>
     <Typography gutterBottom variant="h5" component="div">Titles History</Typography>
     <Divider/>

diff --git a/frontend/src/components/Profile/index.jsx b/frontend/src/components/Profile/index.jsx
@@ -58,7 +58,10 @@ const Profile = () => {
   let arenaAndRbg = ['ARENA_2v2', 'ARENA_3v3', 'BATTLEGROUNDS'].map((bracket) => {
     let found = (data?.brackets ?? []).find((b) => b.bracket_type === bracket)
     return (
-        <PvpBracketBox totalInRow={3} isMobile={isMobile} bracket={bracket} rating={found?.rating ?? 0} wins={found?.won ?? 0}
+        <PvpBracketBox totalInRow={3}
+                       isMobile={isMobile}
+                       bracket={bracket}
+                       rating={found?.rating ?? 0} wins={found?.won ?? 0}
                        loses={found?.lost ?? 0}/>)
   });
   var shuffle
@@ -82,20 +85,40 @@ const Profile = () => {
         backgroundColor: containerBg,
         minHeight: '100vh',
         paddingTop: '105px',
-        paddingLeft: isMobile ? '2%' : '3%',
-        paddingRight: isMobile ? '2%' : '3%',
+        paddingLeft: isMobile ? '0' : '3%',
+        paddingRight: isMobile ? '0' : '3%',
         paddingBottom: '45px',
       }} display={'flex'} flexDirection={'column'}>
       <PhotoCard isMobile={isMobile} data={data} loading={loading} update={() => {
         return loadProfile(true);
       }}/>
-      <Box display={'flex'} flexDirection={'row'} justifyContent={'space-between'}>
+      <Box
+        margin={isMobile ? 0 : 1}
+        padding={isMobile ? 0 : 1}
+        paddingLeft={'10px'}
+        paddingRight={'10px'}
+        paddingTop={1}
+        paddingBottom={0}
+        marginTop={0}
+        marginBottom={0}
+        display={'flex'}
+        flexDirection={'row'}
+        justifyContent={'space-between'}>
         {arenaAndRbg}
       </Box>
-      <Box display={'flex'} flexDirection={'row'} justifyContent={'space-between'}>
+      <Box
+        margin={isMobile ? 0 : 1}
+        padding={isMobile ? 0 : 1}
+        paddingTop={1}
+        paddingBottom={0}
+        marginTop={0}
+        marginBottom={0}
+        display={'flex'}
+        flexDirection={'row'}
+        justifyContent={'space-between'}>
         {shuffle}
       </Box>
-      <Talents data={data}></Talents>
+      <Talents isMobile={isMobile} data={data}></Talents>
       <TitlesHistory expansions={titlesHistory}></TitlesHistory>
     </Box>
     <Footer/>

diff --git a/frontend/src/theme.js b/frontend/src/theme.js
@@ -4,6 +4,7 @@ export const headerButtonColor = 'rgb(96 165 250)';
 export const containerBg = '#030303e6';
 export const borderColor = '#2f384de6';
 export const aroundColor = 'rgb(47,56,77)';
+export const borderRadius = 4
 
 export const winRateGreyColor = 'rgb(75, 85, 99)'