refactor: update UI styling

Author: ElenaBitire

src/ui/button.tsx

@@ -14,8 +14,9 @@ const button = tv({
   variants: {
     variant: {
       default: {
-        container: 'bg-black',
-        label: 'text-white',
+        container: 'bg-black dark:bg-white',
+        label: 'text-white dark:text-black',
+        indicator: 'text-white dark:text-black',
       },
       secondary: {
         container: 'bg-primary-600',
@@ -25,7 +26,7 @@ const button = tv({
       outline: {
         container: 'border border-neutral-400',
         label: 'text-black dark:text-neutral-100',
-        indicator: 'text-black',
+        indicator: 'text-black dark:text-neutral-100',
       },
       destructive: {
         container: 'bg-red-600',
@@ -34,8 +35,8 @@ const button = tv({
       },
       ghost: {
         container: 'bg-transparent',
-        label: 'text-black underline',
-        indicator: 'text-black',
+        label: 'text-black underline dark:text-white',
+        indicator: 'text-black dark:text-white',
       },
       link: {
         container: 'bg-transparent',
@@ -61,9 +62,9 @@ const button = tv({
     },
     disabled: {
       true: {
-        container: 'bg-neutral-300',
-        label: 'text-neutral-600',
-        indicator: 'text-neutral-400',
+        container: 'bg-neutral-300 dark:bg-neutral-300',
+        label: 'text-neutral-600 dark:text-neutral-600',
+        indicator: 'text-neutral-400 dark:text-neutral-400',
       },
     },
     fullWidth: {

src/ui/input.tsx

@@ -19,13 +19,13 @@ const inputTv = tv({
     container: 'mb-2',
     label: 'text-grey-100 dark:text-neutral-100 text-lg mb-1',
     input:
-      'mt-0 border-[0.5px] font-jakarta text-base leading-5 font-[500] px-4 py-3 rounded-xl  bg-neutral-100 border-neutral-300 ',
+      'mt-0 border-[0.5px] font-jakarta text-base leading-5 font-[500] px-4 py-3 rounded-xl  bg-neutral-100 border-neutral-300 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white',
   },
 
   variants: {
     focused: {
       true: {
-        input: 'border-neutral-400',
+        input: 'border-neutral-400 dark:border-neutral-300',
       },
     },
     error: {

src/ui/modal.tsx

@@ -87,7 +87,7 @@ export const Modal = React.forwardRef(
     const renderHandleComponent = React.useCallback(
       () => (
         <>
-          <View className="mb-6 mt-2 h-1 w-12 self-center rounded-lg bg-gray-400 dark:bg-gray-700" />
+          <View className="mb-8 mt-2 h-1 w-12 self-center rounded-lg bg-gray-400 dark:bg-gray-700" />
           <ModalHeader title={title} dismiss={modal.dismiss} />
         </>
       ),
@@ -184,7 +184,7 @@ const CloseButton = ({ close }: { close: () => void }) => {
       accessibilityHint="closes the modal"
     >
       <Svg
-        className="fill-neutral-100 dark:fill-white"
+        className="fill-neutral-300 dark:fill-white"
         width={24}
         height={24}
         fill="none"

src/ui/select.tsx

@@ -27,7 +27,7 @@ const selectTv = tv({
     container: 'mb-4',
     label: 'text-grey-100 dark:text-neutral-100 text-lg mb-1',
     input:
-      'mt-0 flex-row items-center justify-center border-[0.5px] border-grey-50 px-3 py-3  rounded-xl',
+      'mt-0 flex-row items-center justify-center border-[0.5px] border-grey-50 px-3 py-3  rounded-xl dark:bg-neutral-800 dark:border-neutral-500',
     inputValue: 'dark:text-neutral-100',
   },
 
@@ -127,7 +127,7 @@ const Option = React.memo(
         {...props}
       >
         <Text className="flex-1 dark:text-neutral-100 ">{label}</Text>
-        {selected && <Check fill="#000" />}
+        {selected && <Check />}
       </Pressable>
     );
   }
@@ -250,11 +250,17 @@ export function ControlledSelect<T extends FieldValues>(
   );
 }
 
-const Check = ({ fill = '#000', ...props }: SvgProps) => (
-  <Svg width={25} height={24} fill="none" viewBox="0 0 25 24" {...props}>
+const Check = ({ ...props }: SvgProps) => (
+  <Svg
+    width={25}
+    height={24}
+    fill="none"
+    viewBox="0 0 25 24"
+    {...props}
+    className="stroke-black dark:stroke-white"
+  >
     <Path
       d="m20.256 6.75-10.5 10.5L4.506 12"
-      stroke={fill}
       strokeWidth={2.438}
       strokeLinecap="round"
       strokeLinejoin="round"