fix: quick start styles

tolgee · Dec 12, 2023 · c60139c · c60139c
1 parent 9ad5f79
commit c60139c
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 21 deletions.
diff --git a/webapp/src/colors.tsx b/webapp/src/colors.tsx
@@ -78,12 +78,12 @@ export type Navbar = {
 };
 
 export type QuickStart = {
+  highlight: string;
   circleNormal: string;
   circleSuccess: string;
-  successBackground: string;
   topBorder: string;
   progressBackground: string;
-  highlightColor: string;
+  itemBorder: string;
 };
 
 export const colors = {
@@ -143,11 +143,12 @@ export const colors = {
       linkText: '#009B85',
     },
     quickStart: {
-      successBackground: '#F7F8FB',
+      highlight: '#F7F8FB',
       circleNormal: '#E7EBF5',
       circleSuccess: '#0ea459',
       topBorder: '#e9ecef',
       progressBackground: '#bcbcbc70',
+      itemBorder: '#EDF0F7',
     } as QuickStart,
   },
   dark: {
@@ -222,7 +223,7 @@ export const colors = {
       linkText: '#dddddd',
     },
     quickStart: {
-      successBackground: '#20362b',
+      highlight: '#233043',
       circleNormal: '#2c3c52',
       circleSuccess: '#3bac21',
       topBorder: '#2a384c',

diff --git a/webapp/src/component/layout/QuickStartGuide/BottomLinks.tsx b/webapp/src/component/layout/QuickStartGuide/BottomLinks.tsx
@@ -4,7 +4,7 @@ import { useGlobalActions } from 'tg.globalContext/GlobalContext';
 import { StyledLink } from './StyledComponents';
 
 const StyledContainer = styled(Box)`
-  background: ${({ theme }) => theme.palette.emphasis[50]};
+  background: ${({ theme }) => theme.palette.quickStart.highlight};
   padding: 10px 18px;
 `;
 

diff --git a/webapp/src/component/layout/QuickStartGuide/QuickStartGuide.tsx b/webapp/src/component/layout/QuickStartGuide/QuickStartGuide.tsx
@@ -27,7 +27,7 @@ const StyledContent = styled(Box)`
 
 const StyledHeader = styled(Box)`
   display: flex;
-  background: ${({ theme }) => theme.palette.emphasis[50]};
+  background: ${({ theme }) => theme.palette.quickStart.highlight};
   border-radius: 0px 0px 16px 16px;
   font-size: 23px;
   font-weight: 400;
@@ -44,7 +44,7 @@ const StyledArrow = styled(Box)`
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
-  border-bottom: 10px solid ${({ theme }) => theme.palette.emphasis[50]};
+  border-bottom: 10px solid ${({ theme }) => theme.palette.quickStart.highlight};
   transition: opacity 0.2s ease-in-out;
 `;
 

diff --git a/webapp/src/component/layout/QuickStartGuide/QuickStartStep.tsx b/webapp/src/component/layout/QuickStartGuide/QuickStartStep.tsx
@@ -14,18 +14,17 @@ const StyledContainer = styled(Box)`
   display: flex;
   margin: 0px 8px;
   border-radius: 8px;
-  padding: 8px;
+  padding: 10px 8px;
   border: 1px solid ${({ theme }) => theme.palette.divider1};
   gap: 8px;
   align-items: center;
   &.disabled {
     color: ${({ theme }) => theme.palette.emphasis[500]};
-  }
-  &.active {
-    background: ${({ theme }) => theme.palette.quickStart.successBackground};
+    border: none;
   }
   &.done {
-    background: ${({ theme }) => theme.palette.quickStart.successBackground};
+    background: ${({ theme }) => theme.palette.quickStart.highlight};
+    border: none;
   }
 `;
 
@@ -38,6 +37,7 @@ const StyledIndex = styled(Box)`
   justify-content: center;
   background: ${({ theme }) => theme.palette.quickStart.circleNormal};
   border-radius: 50%;
+  font-size: 14px;
   &.done {
     background: ${({ theme }) => theme.palette.quickStart.circleSuccess};
     color: ${({ theme }) => theme.palette.emphasis[50]};
@@ -53,26 +53,18 @@ type Props = {
 
 export const QuickStartStep = ({ item, index, projectId, done }: Props) => {
   const projectRoute = useRouteMatch(LINKS.PROJECT.template);
-  const actions = item.actions?.({ projectId });
   const { quickStartBegin, setQuickStartOpen } = useGlobalActions();
   const quickStartFloating = useGlobalContext(
     (c) => c.quickStartGuide.floating
   );
-  const links = actions
-    ?.map((i) => i.link)
-    .filter((i) => Boolean(i)) as string[];
 
   const isInProject = !isNaN(Number(projectRoute?.params[PARAMS.PROJECT_ID]));
 
-  const route = useRouteMatch(links);
-  const active = Boolean(route && links?.length);
-
   const disabled = item.needsProject && projectId === undefined;
   return (
     <StyledContainer
       className={clsx({
         disabled,
-        active,
         done,
       })}
       data-cy="quick-start-step"
@@ -81,7 +73,7 @@ export const QuickStartStep = ({ item, index, projectId, done }: Props) => {
       <StyledIndex className={clsx({ done })}>
         {done ? <Check fontSize="small" /> : <span>{index}</span>}
       </StyledIndex>
-      <Box display="grid" gap={0.5}>
+      <Box display="grid">
         <div>{item.name}</div>
         <Box display="flex" gap={2}>
           {item.actions?.({ projectId }).map((action, i) => {

diff --git a/webapp/src/component/layout/QuickStartGuide/StyledComponents.tsx b/webapp/src/component/layout/QuickStartGuide/StyledComponents.tsx
@@ -4,6 +4,7 @@ export const StyledLink = styled(MuiLink)`
   text-transform: uppercase;
   font-size: 14px;
   cursor: pointer;
+  font-weight: 500;
   &.disabled {
     color: ${({ theme }) => theme.palette.emphasis[500]};
     pointer-events: none;