From 9abac3bf8f3852e865e374630ea5ab0f218a8e6e Mon Sep 17 00:00:00 2001
From: Erik Escoffier <me@erik.nz>
Date: Wed, 27 Sep 2023 13:38:14 +0200
Subject: [PATCH] Some design polish

---
 .../components/analysis/define/index.tsx      | 27 ++++++++++++-------
 app/scripts/styles/theme.ts                   |  2 ++
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/scripts/components/analysis/define/index.tsx b/app/scripts/components/analysis/define/index.tsx
index 3ec862248..1fd1a8104 100644
--- a/app/scripts/components/analysis/define/index.tsx
+++ b/app/scripts/components/analysis/define/index.tsx
@@ -115,18 +115,19 @@ const UnselectableInfo = styled.div`
 
 const FormCheckableUnselectable = styled(FormCheckableCustom)`
   pointer-events: none;
-  background: #f0f0f5;
+  background: #F0F0F5;
 `;
 
 const DataPointsWarning = styled.div`
   display: flex;
   align-items: center;
-  background: ${themeVal('color.danger-100')};
+  background: #FC3D2119;
   border-radius: 99px;
   font-size: 0.825rem;
   font-weight: bold;
   margin-top: ${variableGlsp(0.5)};
-  paddding: 4px;
+  padding: 2px 0 2px 6px;
+  color: ${themeVal('color.danger')};
 
   & path {
     fill: ${themeVal('color.danger')};
@@ -159,10 +160,8 @@ const FoldWithBullet = styled(Fold)<{ number: string }>`
     // bullet
     &::after {
       position: absolute;
-      top: ${variableGlsp(-0.25)};
-      left: ${variableGlsp(-1)};
-      width: ${variableGlsp(2)};
-      height: ${variableGlsp(2)};
+      width: ${variableGlsp(1.5)};
+      height: ${variableGlsp(1.5)};
       background-color: #1565EF;
       color: ${themeVal('color.surface')};
       border-radius: ${themeVal('shape.ellipsoid')};
@@ -181,8 +180,14 @@ export const FoldWGuideLine = styled(FoldWithBullet)`
   ${media.largeUp`
     padding-bottom: 0;
     > div {
-      border-left : 3px solid ${themeVal('color.base-200a')};
       padding-bottom:  ${variableGlsp(2)};
+      &::before {
+        position: absolute;
+        content: '';
+        height: 100%;
+        left: ${variableGlsp(0.7)};
+        border-left : 3px solid ${themeVal('color.base-200a')};
+      }
     }
   `}
 `;
@@ -206,6 +211,10 @@ const FormGroupStructureCustom = styled(FormGroupStructure)`
   `}
 `;
 
+const ToolbarLabelWithSpace = styled(ToolbarLabel)`
+  margin-right: ${variableGlsp(0.5)};
+`;
+
 const FoldBodyCustom = styled(FoldBody)`
   ${media.largeUp`
     flex-flow: row;
@@ -424,7 +433,7 @@ export default function Analysis() {
               </FormBlock>
             </Form>
             <Toolbar size='small'>
-              <ToolbarLabel>Presets</ToolbarLabel>
+              <ToolbarLabelWithSpace>Presets</ToolbarLabelWithSpace>
               <ButtonGroup variation='base-outline' radius='square'>
                 <Button onClick={(e) => onDatePresetClick(e, 'last10Years')}>
                   Last 10 years
diff --git a/app/scripts/styles/theme.ts b/app/scripts/styles/theme.ts
index f5498e7a4..1bbadb824 100644
--- a/app/scripts/styles/theme.ts
+++ b/app/scripts/styles/theme.ts
@@ -21,6 +21,7 @@ export const VEDA_OVERRIDE_THEME = {
   color: {
     base: '#2c3e50',
     primary: '#2276ac',
+    danger: '#FC3D21',
     infographicA: '#fcab10',
     infographicB: '#f4442e',
     infographicC: '#b62b6e',
@@ -57,6 +58,7 @@ export const VEDA_OVERRIDE_THEME = {
 };
 
 export default function themeOverrides() {
+  console.log(defaultsDeep({}, theme, VEDA_OVERRIDE_THEME))
   if (theme) {
     return createUITheme(defaultsDeep({}, theme, VEDA_OVERRIDE_THEME));
   } else {