Task 544 upgrade design system (#753)

frontend/webapp/components/overview/destination/manage.destination/form.danger.zone.tsx

@@ -56,7 +56,7 @@ export default function FormDangerZone({
           <br />
           <ConnectionsIcons icon={data?.image_url} imageStyle={IMAGE_STYLE} />
           <br />
-          <KeyvalText color={theme.text.primary} size={20} weight={600}>
+          <KeyvalText size={20} weight={600}>
             {`${OVERVIEW.DELETE} ${data?.name}`}
           </KeyvalText>
         </KeyvalModal>

frontend/webapp/components/overview/sources/delete.source/delete.source.tsx

@@ -58,7 +58,7 @@ export function DeleteSource({
           <br />
           <ConnectionsIcons icon={image_url} imageStyle={IMAGE_STYLE} />
           <br />
-          <KeyvalText color={theme.text.primary} size={20} weight={600}>
+          <KeyvalText size={20} weight={600}>
             {`${OVERVIEW.DELETE} ${name}`}
           </KeyvalText>
         </KeyvalModal>

frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.styled.tsx

@@ -13,14 +13,10 @@ export const ConnectionMonitorsWrapper = styled.div`
 `;
 
 export const FieldWrapper = styled.div`
-  margin-top: 32px;
+  margin-top: 22px;
   width: 348px;
 `;
 
-export const DynamicFieldsWrapper = styled.div`
-  margin-top: 32px;
-`;
-
 export const CreateDestinationButtonWrapper = styled.div`
   margin-top: 48px;
   height: 36px;

frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx

@@ -8,7 +8,6 @@ import {
 import {
   CheckboxWrapper,
   ConnectionMonitorsWrapper,
-  DynamicFieldsWrapper,
   FieldWrapper,
   CreateDestinationButtonWrapper,
 } from './create.connection.form.styled';
@@ -165,15 +164,12 @@ export function CreateConnectionForm({
       )}
       <FieldWrapper>
         <KeyvalInput
-          style={{ height: 36 }}
           label={SETUP.DESTINATION_NAME}
           value={destinationName}
           onChange={setDestinationName}
         />
       </FieldWrapper>
-      <DynamicFieldsWrapper>
-        {renderFields(fields, dynamicFields, handleDynamicFieldChange)}
-      </DynamicFieldsWrapper>
+      {renderFields(fields, dynamicFields, handleDynamicFieldChange)}
       <CreateDestinationButtonWrapper>
         <KeyvalButton disabled={isCreateButtonDisabled} onClick={onCreateClick}>
           <KeyvalText color={theme.colors.dark_blue} size={14} weight={600}>

frontend/webapp/components/setup/connection/create.connection.form/dynamic.fields.tsx

@@ -17,7 +17,6 @@ export function renderFields(
         return (
           <FieldWrapper key={name}>
             <KeyvalInput
-              style={{ height: 36 }}
               label={display_name}
               value={dynamicFields[name]}
               onChange={(value) => onChange(name, value)}

frontend/webapp/design.system/index.tsx

@@ -1,25 +1,24 @@
-export { KeyvalRadioButton } from "./radio/radio";
-export { KeyvalButton } from "./button/button";
-export { FloatBoxComponent as FloatBox } from "./float.box/float.box";
-export { KeyvalText } from "./text/text";
-export { KeyvalCard } from "./card/card";
-export { KeyvalTag } from "./tag/tag";
-export { KeyvalTap } from "./tap/tap";
-export { KeyvalDropDown } from "./drop.down/drop.down";
-export { KeyvalSearchInput } from "./search.input/search.input";
-export { KeyvalLottie } from "./lottie/lottie";
-export { KeyvalSwitch } from "./switch/switch";
-export { KeyvalCheckbox } from "./checkbox/checkbox";
-export { KeyvalSelectedCounter } from "./selected.counter/selected.counter";
-export { KeyvalLink } from "./link/link";
-export { KeyvalTooltip } from "./tooltip/tooltip";
-export { KeyvalImage } from "./image/image";
-export { KeyvalInput } from "./input/input";
-export { KeyvalActionInput } from "./input/action.input";
-export { KeyvalVideo } from "./video/video";
-export { KeyvalLoader } from "./loader/loader";
-export { KeyvalNotification } from "./notification/notification";
-export { KeyvalDataFlow } from "./data.flow";
-export { DangerZoneArea as DangerZone } from "./danger.zone/danger.zone";
-export { KeyvalModal } from "./modal/modal";
-export { KeyvalSteps as Steps } from "./steps/steps";
+export { KeyvalRadioButton } from './radio/radio';
+export { KeyvalButton } from './button/button';
+export { FloatBoxComponent as FloatBox } from './float.box/float.box';
+export { KeyvalText } from './text/text';
+export { KeyvalCard } from './card/card';
+export { KeyvalTag } from './tag/tag';
+export { KeyvalTap } from './tap/tap';
+export { KeyvalDropDown } from './drop.down/drop.down';
+export { KeyvalSearchInput } from './search.input/search.input';
+export { KeyvalSwitch } from './switch/switch';
+export { KeyvalCheckbox } from './checkbox/checkbox';
+export { KeyvalSelectedCounter } from './selected.counter/selected.counter';
+export { KeyvalLink } from './link/link';
+export { KeyvalTooltip } from './tooltip/tooltip';
+export { KeyvalImage } from './image/image';
+export { KeyvalInput } from './input/input';
+export { KeyvalActionInput } from './input/action.input';
+export { KeyvalVideo } from './video/video';
+export { KeyvalLoader } from './loader/loader';
+export { KeyvalNotification } from './notification/notification';
+export { KeyvalDataFlow } from './data.flow';
+export { DangerZoneArea as DangerZone } from './danger.zone/danger.zone';
+export { KeyvalModal } from './modal/modal';
+export { KeyvalSteps as Steps } from './steps/steps';

frontend/webapp/package.json

@@ -10,7 +10,7 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@keyval-dev/design-system": "1.0.5",
+    "@keyval-dev/design-system": "1.2.9",
     "@next/font": "^13.4.7",
     "@svgr/webpack": "^6.2.1",
     "@types/node": "20.3.3",
@@ -20,12 +20,11 @@
     "axios": "^1.4.0",
     "eslint": "8.42.0",
     "eslint-config-next": "13.4.5",
-    "next": "latest",
+    "next": "13.5.4",
     "postcss": "^8.4.26",
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-lottie": "^1.2.3",
     "react-query": "^3.39.3",
     "styled-components": "^6.0.2",
     "swr": "^2.1.5",