#410

app/components/login/Login.jsx

@@ -18,6 +18,10 @@ const ShowPassword = styled(Checkbox)`
   right: 0;
   top: 0;
   font-size: ${th('fontSizeBaseSmall')};
+  input {
+    transform: scale(1.1);
+    zoom: 1.1;
+  }
 `
 const PasswordField = styled.div`
   position: relative;

app/components/signup/Signup.jsx

@@ -18,6 +18,10 @@ const ShowPassword = styled(Checkbox)`
   right: 0;
   top: 0;
   font-size: ${th('fontSizeBaseSmall')};
+  input {
+    transform: scale(1.1);
+    zoom: 1.1;
+  }
 `
 const PasswordDetails = styled.div`
   display: flex;

app/epmc-theme/elements/Checkbox.jsx

@@ -13,5 +13,7 @@ export default {
   `,
   Input: css`
     height: calc(${th('gridUnit')} * 3);
+    transform: scale(1.25);
+    zoom: 1.25;
   `,
 }

app/epmc-theme/elements/Steps.jsx

@@ -3,29 +3,31 @@ import { th } from '@pubsweet/ui-toolkit'
 
 export default {
   Step: css`
-    background-color: ${th('colorBorder')};
-    border: 0;
+    height: calc(${th('gridUnit')} * 2);
+    width: calc(${th('gridUnit')} * 2);
+    background-color: ${({ isCurrent, isPast }) =>
+      (isPast && th('colorFurniture')) ||
+      (isCurrent && th('colorTextReverse')) ||
+      th('colorBorder')};
+    border-color: ${({ isCurrent, isPast }) =>
+      isCurrent || isPast ? th('colorFurniture') : th('colorBorder')};
+    border-width: calc(${th('gridUnit')} / 2);
+    box-sizing: border-box;
   `,
   Separator: css`
-    background-color: ${th('colorBorder')};
-    height: 4px;
+    background-color: ${({ isCurrent, isPast }) =>
+      isPast ? th('colorFurniture') : th('colorBorder')};
+    height: calc(${th('gridUnit')} / 2);
     border: 0;
   `,
+  StepTitle: css`
+    font-weight: ${({ isCurrent, isPast }) =>
+      isCurrent || isPast ? '600' : 'normal'};
+  `,
   Bullet: css`
-    background-color: ${th('colorFurniture')};
-    width: calc(${th('gridUnit')} * 2);
-    height: calc(${th('gridUnit')} * 2);
-    border: 0;
-    & + * {
-      font-weight: 600;
-    }
+    display: none;
   `,
   Success: css`
-    color: ${th('colorFurniture')};
-    width: calc(${th('gridUnit')} * 2);
-    height: calc(${th('gridUnit')} * 2);
-    & + * {
-      font-weight: 600;
-    }
+    display: none;
   `,
 }