Fix spacing and alignment issues in TeamsList component

web-server/pages/integrations.tsx

@@ -1,6 +1,6 @@
 import { Add } from '@mui/icons-material';
 import { Button, Divider } from '@mui/material';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Authenticated } from 'src/components/Authenticated';
 
 import { FlexBox } from '@/components/FlexBox';
@@ -80,13 +80,25 @@ const Content = () => {
     }
   }, [dispatch, isGithubIntegrated, loadedTeams.true, orgId, teamCount]);
 
+  const showDoraCTA = useMemo(
+    () => Boolean(teamCount) && Boolean(hasCodeProviderLinked),
+    [hasCodeProviderLinked, teamCount]
+  );
+
   return (
     <FlexBox col gap2>
-      <FlexBox justifyBetween>
-        <Line white fontSize={'24px'}>
+      <FlexBox justifyBetween height={'52px'} alignCenter>
+        <Line
+          white
+          fontSize={'24px'}
+          sx={{
+            opacity: showDoraCTA || showCreationCTA ? 0.4 : 1,
+            transition: 'all 0.2s ease'
+          }}
+        >
           Integrate your Github to fetch DORA for your team
         </Line>
-        {Boolean(teamCount) && Boolean(hasCodeProviderLinked) && (
+        {showDoraCTA && (
           <Button href={ROUTES.DORA_METRICS.PATH} variant="contained">
             <FlexBox centered fullWidth p={2 / 3}>
               Continue to Dora {'->'}
@@ -104,7 +116,7 @@ const Content = () => {
           <Line fontSize={'24px'} semibold white>
             Create team structure to see DORA
           </Line>
-          <Line fontSize={'16px'} white mt="14px">
+          <Line fontSize={'16px'} mt="9px">
             Just add team's name, add repos and you're good to go.
           </Line>
           <Button

web-server/src/components/TeamsList.tsx

@@ -29,12 +29,8 @@ import { CreateEditTeams } from './Teams/CreateTeams';
 import { Loader } from './Teams/CreateTeams';
 import { Line } from './Text';
 
-type TeamCardProps = {
-  team: Team;
-  onEdit: () => void;
-};
-
 const VISIBLE_REPOS_COUNT = 3;
+const HORIZONTAL_SPACE = 3 / 2;
 
 export const TeamsList = () => {
   const teamsArray = useSelector((state) => state.team.teams);
@@ -73,10 +69,10 @@ export const TeamsList = () => {
       ) : null}
       <FlexBox relative>
         <FlexBox
-          gap={4}
+          gap={HORIZONTAL_SPACE}
           grid
           gridTemplateColumns={'1fr 1fr'}
-          maxWidth={'900px'}
+          width={'900px'}
           relative
           sx={{
             filter: isLoadingTeams ? 'blur(2px)' : 'none',
@@ -115,25 +111,35 @@ const SearchFilter: FC<{
 }> = ({ searchQuery, onChange, handleShowCreateTeam, showCreate }) => {
   return (
     <FlexBox col gap={4}>
-      <FlexBox width={'900px'} gap={4}>
+      <FlexBox width={'900px'} gap={HORIZONTAL_SPACE}>
         <FlexBox flex1>
           <TextField
+            size="small"
             value={searchQuery}
             onChange={(e) => {
               onChange(e.target.value);
             }}
             fullWidth
-            placeholder="Search for teams"
+            InputProps={{
+              sx: {
+                padding: '3px'
+              }
+            }}
+            placeholder="Search"
           />
         </FlexBox>
-        <FlexBox flex1 alignCenter gap={4}>
+        <FlexBox flex1 alignCenter gap={HORIZONTAL_SPACE}>
           <FlexBox flex1>
             <Button
               onClick={handleShowCreateTeam}
-              sx={{ width: '100%' }}
               variant="outlined"
+              color="secondary"
+              sx={{
+                bgcolor: 'transparent',
+                width: '100%'
+              }}
             >
-              <FlexBox centered gap1 fullWidth p={2 / 3}>
+              <FlexBox centered gap1 fullWidth>
                 <Add fontSize="small" /> Add new team
               </FlexBox>
             </Button>
@@ -144,7 +150,7 @@ const SearchFilter: FC<{
               sx={{ width: '100%' }}
               variant="contained"
             >
-              <FlexBox centered fullWidth p={2 / 3}>
+              <FlexBox centered fullWidth>
                 Continue to Dora {'->'}
               </FlexBox>
             </Button>
@@ -161,6 +167,11 @@ const SearchFilter: FC<{
   );
 };
 
+type TeamCardProps = {
+  team: Team;
+  onEdit: () => void;
+};
+
 const TeamCard: React.FC<TeamCardProps> = ({ team, onEdit }) => {
   const { name: teamName, id: teamId } = team;
   const teamReposMap = useSelector((state) => state.team.teamReposMaps);

web-server/src/content/Dashboards/useIntegrationHandlers.tsx

@@ -1,8 +1,8 @@
 import { LoadingButton } from '@mui/lab';
-import { Divider, Link, SxProps, TextField, alpha } from '@mui/material';
+import { Divider, Link, TextField, alpha } from '@mui/material';
 import Image from 'next/image';
 import { useSnackbar } from 'notistack';
-import { FC, useCallback, useEffect, useMemo } from 'react';
+import { FC, useCallback, useMemo } from 'react';
 
 import { FlexBox } from '@/components/FlexBox';
 import { Line } from '@/components/Text';
@@ -132,7 +132,7 @@ const ConfigureGithubModalBody: FC<{
 
   return (
     <FlexBox gap2>
-      <FlexBox gap={2} minWidth={'400px'} maxHeight={'255px'} col>
+      <FlexBox gap={2} minWidth={'400px'} col>
         <FlexBox>Enter you Github token below.</FlexBox>
         <FlexBox fullWidth minHeight={'80px'} col>
           <TextField
@@ -156,15 +156,25 @@ const ConfigureGithubModalBody: FC<{
           <Line error tiny mt={1}>
             {showError.value}
           </Line>
-          <Line tiny mt={1}>
-            <Link
-              href="https://github.com/settings/tokens"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Generate new classic token
-            </Link>
-          </Line>
+          <FlexBox>
+            <Line tiny mt={1} primary sx={{ cursor: 'pointer' }}>
+              <Link
+                href="https://github.com/settings/tokens"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Line
+                  underline
+                  sx={{
+                    textUnderlineOffset: '2px'
+                  }}
+                >
+                  Generate new classic token
+                </Line>
+              </Link>
+              <Line ml={'5px'}>{' ->'}</Line>
+            </Line>
+          </FlexBox>
         </FlexBox>
 
         <FlexBox justifyBetween alignCenter mt={'auto'}>
@@ -200,62 +210,14 @@ const ConfigureGithubModalBody: FC<{
 };
 
 const TokenPermissions = () => {
-  const positionArray = ['0px', '130px', '340px', '740px'];
-  const position = useEasyState(0);
-
-  const changePosition = useCallback(() => {
-    position.set((position.value + 1) % positionArray.length);
-  }, [position, positionArray.length]);
-
-  const expand = useBoolState(false);
   const imageLoaded = useBoolState(false);
 
-  // change position every second
-  useEffect(() => {
-    if (!imageLoaded.value) return;
-    if (expand.value) return depFn(position.set, 0);
-    const interval = setInterval(changePosition, 2000);
-    return () => clearInterval(interval);
-  }, [changePosition, expand.value, imageLoaded.value, position.set]);
-
-  const styles: SxProps[] = useMemo(() => {
-    const baseStyles = {
-      border: `2px solid ${alpha('rgb(256,0,0)', 0.4)}`,
-      transition: 'all 0.8s ease',
-      borderRadius: '12px',
-      opacity: expand.value ? 0 : 1,
-      width: '240px',
-      position: 'absolute',
-      maxWidth: 'calc(100% - 48px)',
-      left: '24px'
-    };
-
-    return [
-      {
-        height: '170px',
-        top: '58px'
-      },
-      {
-        height: '42px',
-        top: '98px'
-      },
-      {
-        height: '120px',
-        top: '38px'
-      },
-      {
-        height: '120px',
-        top: '66px'
-      }
-    ].map((item) => ({ ...item, ...baseStyles }));
-  }, [expand.value]);
-
   const expandedStyles = useMemo(() => {
     const baseStyles = {
       border: `2px solid ${alpha('rgb(256,0,0)', 0.4)}`,
       transition: 'all 0.8s ease',
       borderRadius: '12px',
-      opacity: !expand.value ? 0 : 1,
+      opacity: 1,
       width: '240px',
       position: 'absolute',
       maxWidth: 'calc(100% - 48px)',
@@ -282,17 +244,17 @@ const TokenPermissions = () => {
         top: '806px'
       }
     ].map((item) => ({ ...item, ...baseStyles }));
-  }, [expand.value]);
+  }, []);
 
   return (
     <FlexBox col gap1 maxWidth={'100%'} overflow={'auto'}>
       <div
-        onMouseEnter={!imageLoaded.value ? null : expand.true}
-        onMouseLeave={expand.false}
         style={{
           overflow: 'hidden',
           borderRadius: '12px',
-          height: expand.value ? '1257px' : '240px',
+          height: 'calc(100vh - 300px)',
+          maxHeight: '1257px',
+          overflowY: 'auto',
           transition: 'all 0.8s ease',
           position: 'relative',
           maxWidth: '100%',
@@ -303,7 +265,6 @@ const TokenPermissions = () => {
           onLoadingComplete={imageLoaded.true}
           style={{
             position: 'relative',
-            bottom: expand.value ? 0 : positionArray[position.value],
             transition: 'all 0.8s ease',
             opacity: !imageLoaded.value ? 0 : 1
           }}
@@ -313,8 +274,6 @@ const TokenPermissions = () => {
           alt="PAT_permissions"
         />
 
-        {imageLoaded.value && <FlexBox sx={styles[position.value]} />}
-
         {imageLoaded.value &&
           expandedStyles.map((style, index) => (
             <FlexBox key={index} sx={style} />
@@ -334,7 +293,7 @@ const TokenPermissions = () => {
         )}
       </div>
       <Line tiny secondary sx={{ opacity: imageLoaded.value ? 1 : 0 }}>
-        Hover to expand
+        Scroll to see all required permissions
       </Line>
     </FlexBox>
   );

web-server/src/layouts/ExtendedSidebarLayout/Sidebar/SidebarTopSection/index.tsx

@@ -14,7 +14,7 @@ function SidebarTopSection() {
         position: 'relative'
       }}
     >
-      <Logo height={40} />
+      <Logo mode="long" height={'40px'} />
     </Box>
   );
 }