ar(fix) nits.

dreampipcom · Jul 12, 2024 · 9bdff0d · 9bdff0d
1 parent 21d9778
commit 9bdff0d
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 18 deletions.
diff --git a/src/atoms/01_Button/Button.tsx b/src/atoms/01_Button/Button.tsx
@@ -41,6 +41,7 @@ export interface IButton {
   rel?: string;
   icon?: ESystemIcon;
   iconPosition?: EButtonIconPosition;
+  type?: string;
   id?: string;
 }
 
@@ -56,6 +57,7 @@ export const HButton = function ({
   icon,
   iconPosition = EButtonIconPosition.START,
   id = 'atom__button',
+  type,
   onClick = () => {},
 }: IButton) {
   const external = {
@@ -79,13 +81,13 @@ export const HButton = function ({
         class1
 
         text-body-dark
-        dark:text-body-dark
+        dark:text-body-light
 
         bg-primary-light
         hover:bg-primary-contrast
 
-        dark:bg-primary-contrast
-        dark:hover:bg-primary-dark
+        dark:bg-primary-white
+        dark:hover:bg-primary-soft
         
       `]: variant === ButtonVariant.FILLED,
       [`
@@ -217,7 +219,7 @@ export const HButton = function ({
         [EButtonTheme.PASSION_SELECTED]: EIconColor.PASSION_SELECTED,
       },
       [ButtonVariant.FILLED]: {
-        [EButtonTheme.PRIMARY]: EIconColor.WHITE,
+        [EButtonTheme.PRIMARY]: EIconColor.PRIMARY,
         [EButtonTheme.SECONDARY]: EIconColor.WHITE,
         [EButtonTheme.PASSION]: EIconColor.PASSION,
         [EButtonTheme.PASSION_SELECTED]: EIconColor.PASSION_SELECTED,
@@ -236,6 +238,7 @@ export const HButton = function ({
       className={styles}
       variant={variant}
       onClick={onClick}
+      type={type}
     >
       {icon && iconPosition === EButtonIconPosition.START ? (
         <Icon

diff --git a/src/atoms/07_Dropdown/Dropdown.tsx b/src/atoms/07_Dropdown/Dropdown.tsx
@@ -47,6 +47,7 @@ export interface IDropdown {
   icon?: ESystemIcon;
   onSelect?: (e?: string | number) => void;
   variant?: EDropdownVariant;
+  name?: string;
   id?: string;
 }
 
@@ -94,6 +95,7 @@ export const HDropdown = function ({
   icon,
   variant = EDropdownVariant.OUTLINED,
   onSelect = () => {},
+  name = '',
   id = 'atom__dropdown',
 }: IDropdown) {
   const [value, setValue] = useState('');
@@ -214,6 +216,7 @@ export const HDropdown = function ({
         />
         <Select
           id={id}
+          name={name}
           className={selectStyles}
           value={value}
           onChange={(e) => {

diff --git a/src/atoms/09_TextInput/TextInput.tsx b/src/atoms/09_TextInput/TextInput.tsx
@@ -45,6 +45,8 @@ export interface ITextInput extends ITextInputExtraProps {
   onChange?: (e?: any) => void;
   theme?: string;
   variant?: ETextInputVariant;
+  name?: string;
+  type?: string;
   id?: string;
 }
 
@@ -107,6 +109,8 @@ export const HTextInput = function (props: ITextInput) {
     onChange = () => {},
     id = 'atom__textinput',
     theme = 'light',
+    name = '',
+    type = 'text',
     ...extraProps
   } = props;
 
@@ -232,6 +236,8 @@ export const HTextInput = function (props: ITextInput) {
         />
         <OutlinedInput
           id={id}
+          name={name}
+          type={type}
           className={selectStyles}
           value={value}
           startAdornment={placeholder ? StartAdornment : undefined}

diff --git a/src/atoms/12_DateRange/DateRange.tsx b/src/atoms/12_DateRange/DateRange.tsx
@@ -35,6 +35,7 @@ export interface IDateRange {
   theme?: 'light' | 'dark';
   disablePast?: boolean;
   onSelect?: (e?: any) => void;
+  name?: string;
   id?: string;
 }
 
@@ -45,6 +46,7 @@ export const HDateRange = function ({
   disablePast = true,
   label = 'Pick your dates',
   onSelect = () => {},
+  name = '',
   id = 'atom__daterange',
 }: IDateRange) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -207,6 +209,7 @@ export const HDateRange = function ({
                 callbackRef: textRef,
                 onClick: handleOpen,
                 theme,
+                name,
               } as any,
               actionBar: {
                 actions: ['clear', 'today', 'accept'],

diff --git a/src/molecules/00_Card/Card.tsx b/src/molecules/00_Card/Card.tsx
@@ -118,20 +118,22 @@ export const HCard = function ({
             {title}
           </Typography>
           <Typography
+            inherit
             variant={TypographyVariant.SMALL}
-            className="w-full pt-a1 pb-0 text-neutral-light dark:text-neutral-dark col-span-full col-start-0 md:col-span-full md:col-start-0"
+            className="w-full pt-a1 pb-0 text-neutral-light dark:text-body-dark col-span-full col-start-0 md:col-span-full md:col-start-0"
           >
             {where}
           </Typography>
           <Typography
+            inherit
             variant={TypographyVariant.SMALL}
-            className="w-full pt-0 text-neutral-light dark:text-neutral-dark col-span-full col-start-0 md:col-span-full md:col-start-0"
+            className="w-full pt-0 text-neutral-light dark:text-body-dark col-span-full col-start-0 md:col-span-full md:col-start-0"
           >
             {when}
           </Typography>
           <PriceTag
             variant={EPriceTagVariant.NORMAL}
-            className="w-full pt-a2 pb-a0 text-neutral-light dark:text-neutral-dark col-span-4 col-start-0 md:col-span-4 md:col-start-0"
+            className="w-full pt-a2 pb-a0 col-span-4 col-start-0 md:col-span-4 md:col-start-0"
           >
             {price}
           </PriceTag>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -29,9 +29,9 @@ const inc06b = base * 6.5; // 52
 const n100 = '#191919';
 const n200 = '#1b1b1b';
 const n300 = '#aaaaaa';
-const n400 = '#440000';
-const n500 = '#550000';
-const n600 = '#660000';
+const n400 = '#ffffff';
+// const n500 = '#550000';
+// const n600 = '#660000';
 
 const st0 = '#F69240';
 const st1 = '#F8D49A';
@@ -59,9 +59,6 @@ const secondary = dp200;
 const primary = dp800;
 const tertiary = dp800;
 
-const light1 = dp300;
-const light2 = dp200;
-
 const dark1 = n100;
 const dark2 = n200;
 
@@ -71,6 +68,9 @@ const passionSoft = '#880000';
 
 const white = '#ffffff';
 
+const light1 = dp300;
+const light2 = dp200;
+
 export const DreamPipColors = {
   transparent,
   logo: {
@@ -118,17 +118,18 @@ export const DreamPipColors = {
   primary: {
     light: primary,
     contrast: secondary,
-    dark: light1,
+    dark: light2,
     passion,
     passionLight,
     passionSoft,
     soft: bg2,
     green: dp700,
+    white,
   },
   secondary: {
     light: secondary,
     constrast: light1,
-    dark: light1,
+    dark: light2,
     passion,
     passionLight,
     passionSoft,
@@ -147,7 +148,7 @@ export const DreamPipColors = {
     },
   },
   soft: {
-    light: light1,
+    light: white,
     constrast: light2,
     bg: bg2,
     dark: '#C9FFC4',
@@ -167,8 +168,8 @@ export const DreamPipColors = {
     dark: '#353535',
   },
   neutral: {
-    light: n400,
-    dark: n200,
+    light: n200,
+    dark: n400,
   },
 };